feat: Page transitions

package.json

@@ -16,7 +16,8 @@
         "@tauri-apps/api": "2.0.0-beta.5",
         "@tauri-apps/plugin-shell": "2.0.0-beta.2",
         "@untitled-theme/icons-solid": "^0.6.0",
-        "solid-js": "^1.7.8"
+        "solid-js": "^1.7.8",
+        "solid-transition-group": "^0.2.3"
     },
     "devDependencies": {
         "@solid/eslint-config-base": "^0.6.0",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ dependencies:
   solid-js:
     specifier: ^1.7.8
     version: 1.8.15
+  solid-transition-group:
+    specifier: ^0.2.3
+    version: 0.2.3(solid-js@1.8.15)
 
 devDependencies:
   '@solid/eslint-config-base':
@@ -747,6 +750,31 @@ packages:
     dev: true
     optional: true
 
+  /@solid-primitives/refs@1.0.8(solid-js@1.8.15):
+    resolution: {integrity: sha512-+jIsWG8/nYvhaCoG2Vg6CJOLgTmPKFbaCrNQKWfChalgUf9WrVxWw0CdJb3yX15n5lUcQ0jBo6qYtuVVmBLpBw==}
+    peerDependencies:
+      solid-js: ^1.6.12
+    dependencies:
+      '@solid-primitives/utils': 6.2.3(solid-js@1.8.15)
+      solid-js: 1.8.15
+    dev: false
+
+  /@solid-primitives/transition-group@1.0.5(solid-js@1.8.15):
+    resolution: {integrity: sha512-G3FuqvL13kQ55WzWPX2ewiXdZ/1iboiX53195sq7bbkDbXqP6TYKiadwEdsaDogW5rPnPYAym3+xnsNplQJRKQ==}
+    peerDependencies:
+      solid-js: ^1.6.12
+    dependencies:
+      solid-js: 1.8.15
+    dev: false
+
+  /@solid-primitives/utils@6.2.3(solid-js@1.8.15):
+    resolution: {integrity: sha512-CqAwKb2T5Vi72+rhebSsqNZ9o67buYRdEJrIFzRXz3U59QqezuuxPsyzTSVCacwS5Pf109VRsgCJQoxKRoECZQ==}
+    peerDependencies:
+      solid-js: ^1.6.12
+    dependencies:
+      solid-js: 1.8.15
+    dev: false
+
   /@solid/eslint-config-base@0.6.0(@typescript-eslint/eslint-plugin@7.2.0)(@typescript-eslint/parser@7.2.0)(eslint-config-airbnb-base@15.0.0)(eslint-config-prettier@9.1.0)(eslint-plugin-import@2.29.1)(eslint-plugin-jest@27.9.0)(eslint-plugin-prettier@5.1.3)(eslint@8.57.0):
     resolution: {integrity: sha512-9bRRTP7tlJI5wjeFFxiT79RRnJ1ploXfHmzzvHK4uk1c0+dkW+gUA1OC9TYtsLQhRDcpzoLUW1gXPgRBHl7WpQ==}
     peerDependencies:
@@ -3241,6 +3269,17 @@ packages:
       solid-js: 1.8.15
     dev: true
 
+  /solid-transition-group@0.2.3(solid-js@1.8.15):
+    resolution: {integrity: sha512-iB72c9N5Kz9ykRqIXl0lQohOau4t0dhel9kjwFvx81UZJbVwaChMuBuyhiZmK24b8aKEK0w3uFM96ZxzcyZGdg==}
+    engines: {node: '>=18.0.0', pnpm: '>=8.6.0'}
+    peerDependencies:
+      solid-js: ^1.6.12
+    dependencies:
+      '@solid-primitives/refs': 1.0.8(solid-js@1.8.15)
+      '@solid-primitives/transition-group': 1.0.5(solid-js@1.8.15)
+      solid-js: 1.8.15
+    dev: false
+
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}

src/globals.css

@@ -2,15 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
-body { 
-    @apply text-gray-400 text-md;
+body {
+    @apply font-sans text-fg-primary text-md;
 }
 
 /* start lynith's native experience */
-* { user-select: none; }
-*:hover { cursor: default; }
+* { user-select: none; cursor: default !important; }
+*:hover { cursor: default !important; }
 /* end lynith's native experience */
 
 h1 { @apply text-2xl font-bold; }
-h2 { @apply text-xxl font-bold; }
-h3 { @apply text-xl font-bold; }
+h2 { @apply text-xxl font-semibold; }
+h3 { @apply text-xl font-medium; }

src/index.tsx

@@ -6,9 +6,13 @@ import './globals.css';
 import { Route, Router } from '@solidjs/router';
 import App from './ui/App';
 import HomePage from './ui/pages/Home';
+import BrowserPage from './ui/pages/Browser';
+import UpdatesPage from './ui/pages/Updates';
 
 render(() => (
     <Router root={App}>
         <Route component={HomePage} path={'/'} />
+        <Route component={BrowserPage} path={'/browser'} />
+        <Route component={UpdatesPage} path={'/updates'} />
     </Router>
 ), document.getElementById('root') as HTMLElement);

src/ui/App.tsx

@@ -1,13 +1,73 @@
 import { ParentProps } from 'solid-js';
+import { Transition } from 'solid-transition-group';
 import WindowFrame from './components/native/WindowFrame';
+import Navbar from './components/Navbar';
 
 function App(props: ParentProps) {
     return (
-        <main class='bg-primary min-h-screen text-white'>
+        <main class='flex flex-col bg-primary min-h-screen text-white'>
             <WindowFrame />
-            {props.children}
+            <Navbar />
+            <div class='flex flex-col flex-1 *:flex-1 overflow-x-hidden'>
+                { /* eslint-disable-next-line @typescript-eslint/no-use-before-define */ }
+                <AnimatedRoutes>
+                    {props.children}
+                </AnimatedRoutes>
+            </div>
         </main>
     );
 }
 
 export default App;
+
+function AnimatedRoutes(props: ParentProps) {
+    const keyframesEnter = [
+        {
+            opacity: 0,
+            transform: 'translateX(-100px)',
+        },
+        {
+            opacity: 1,
+            transform: 'translateX(0px)',
+        },
+    ];
+
+    const keyframesExit = [
+        {
+            opacity: 1,
+            transform: 'translateX(0px)',
+        },
+        {
+            opacity: 0,
+            transform: 'translateX(100px)',
+        },
+    ];
+
+    return (
+        <Transition
+            mode='outin'
+            onEnter={(element, done) => {
+                const animation = element.animate(
+                    keyframesEnter,
+                    {
+                        duration: 100,
+                    },
+                );
+
+                animation.onfinish = done;
+            }}
+            onExit={(element, done) => {
+                const animation = element.animate(
+                    keyframesExit,
+                    {
+                        duration: 100,
+                    },
+                );
+
+                animation.onfinish = done;
+            }}
+        >
+            {props.children}
+        </Transition>
+    );
+}

src/ui/components/Navbar.tsx

@@ -0,0 +1,34 @@
+import { A } from '@solidjs/router';
+
+type NavbarButtonProps = {
+    path: string,
+    label: string,
+};
+
+function NavbarButton(props: NavbarButtonProps) {
+    return (
+        <A
+            href={props.path}
+            class='text-lg px-4 py-1 hover:bg-component-bg-hover rounded-lg hover:text-fg-primary-hover'
+            inactiveClass='text-fg-secondary'
+            activeClass='text-fg-primary'
+            end
+        >
+            {props.label}
+        </A>
+    );
+}
+
+function Navbar() {
+    return (
+        <div class='flex flex-row justify-evenly items-center h-15'>
+            <div class='flex flex-row gap-x-16 py-1'>
+                <NavbarButton path="/" label="Home" />
+                <NavbarButton path="/browser" label="Browser" />
+                <NavbarButton path="/updates" label="Updates" />
+            </div>
+        </div>
+    );
+}
+
+export default Navbar;

src/ui/components/base/Button.module.scss

@@ -1,4 +1,5 @@
 .button {
+    cursor: default !important;
     @apply py-2 px-4 rounded-lg;
 
     &__primary {

src/ui/pages/Browser.tsx

@@ -0,0 +1,9 @@
+function BrowserPage() {
+    return (
+        <h1>
+            Browser
+        </h1>
+    );
+}
+
+export default BrowserPage;

src/ui/pages/Updates.tsx

@@ -0,0 +1,9 @@
+function UpdatesPage() {
+    return (
+        <h1>
+            Updates
+        </h1>
+    );
+}
+
+export default UpdatesPage;

tailwind.config.js

@@ -2,6 +2,10 @@
 export default {
     content: ['./src/**/*.{js,ts,jsx,tsx}'],
     theme: {
+        fontFamily: {
+            sans: 'Poppins',
+        },
+
         fontSize: {
             // Based off 16px
             sm: '0.688rem',
@@ -11,17 +15,31 @@ export default {
             xxl: '1.5rem',
             '2xl': '2rem',
         },
+
         colors: {
             white: '#ffffff',
             black: '#000000',
-            slate: '#9BA1A6',
 
             gray: {
-                400: '#D5DBFF',
                 '.5': '#FFFFFF0D',
                 '.10': '#FFFFFF1A',
             },
 
+            fg: {
+                primary: {
+                    DEFAULT: '#D5DBFF',
+                    hover: '#D5DBFFD9',
+                    pressed: '#E1E5FF',
+                    disabled: '#E1E5FF80',
+                },
+                secondary: {
+                    DEFAULT: '#78818D',
+                    hover: '#5F6874',
+                    pressed: '#828D9B',
+                    disabled: '#78818D80',
+                },
+            },
+
             brand: {
                 DEFAULT: '#2B4BFF',
                 hover: '#2843DD',
@@ -56,6 +74,10 @@ export default {
             secondary: '#192026',
         },
         extend: {
+            height: {
+                15: '60px',
+            },
+
             animation: {
                 'fade-in': 'fadeIn 150ms easeOutExpo forwards',
                 'fade-out': 'fadeOut 150ms easeOutExpo forwards',