web: navigation & sidebar

web/package-lock.json

@@ -8,6 +8,10 @@
             "name": "cobalt-web",
             "version": "0.0.1",
             "license": "CC-BY-NC-SA-4.0",
+            "dependencies": {
+                "@fontsource/ibm-plex-mono": "^5.0.13",
+                "@tabler/icons-svelte": "^3.6.0"
+            },
             "devDependencies": {
                 "@sveltejs/adapter-auto": "^3.0.0",
                 "@sveltejs/kit": "^2.0.0",
@@ -23,7 +27,6 @@
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
             "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-            "dev": true,
             "dependencies": {
                 "@jridgewell/gen-mapping": "^0.3.5",
                 "@jridgewell/trace-mapping": "^0.3.24"
@@ -400,11 +403,15 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@fontsource/ibm-plex-mono": {
+            "version": "5.0.13",
+            "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-mono/-/ibm-plex-mono-5.0.13.tgz",
+            "integrity": "sha512-gtlMmvk//2AgDEZDFsoL5z9mgW3ZZg/9SC7pIfDwNKp5DtZpApgqd1Fua3HhPwYRIHrT76IQ1tMTzQKLEGtJGQ=="
+        },
         "node_modules/@jridgewell/gen-mapping": {
             "version": "0.3.5",
             "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
             "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-            "dev": true,
             "dependencies": {
                 "@jridgewell/set-array": "^1.2.1",
                 "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -418,7 +425,6 @@
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
             "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-            "dev": true,
             "engines": {
                 "node": ">=6.0.0"
             }
@@ -427,7 +433,6 @@
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
             "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-            "dev": true,
             "engines": {
                 "node": ">=6.0.0"
             }
@@ -435,14 +440,12 @@
         "node_modules/@jridgewell/sourcemap-codec": {
             "version": "1.4.15",
             "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-            "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+            "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
-            "dev": true
         },
         "node_modules/@jridgewell/trace-mapping": {
             "version": "0.3.25",
             "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
             "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-            "dev": true,
             "dependencies": {
                 "@jridgewell/resolve-uri": "^3.1.0",
                 "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -780,6 +783,30 @@
                 "vite": "^5.0.0"
             }
         },
+        "node_modules/@tabler/icons": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.6.0.tgz",
+            "integrity": "sha512-Zv0Ofc64RCMpZ2F8CvsWAphrSjerx5hEErt/RMmE+W8r4E5l5Lizi+My9KbbZQ4NyAtrtrOX80OY1oROZrRzEA==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/codecalm"
+            }
+        },
+        "node_modules/@tabler/icons-svelte": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/@tabler/icons-svelte/-/icons-svelte-3.6.0.tgz",
+            "integrity": "sha512-phI61t81MlWhodATjvQQdqw8vTL0srSW6GsHzJmuhIMJGB4rwFzAXB2Ec4Pkz0vWFzVQgkeSE/AsiOLIUKWkxA==",
+            "dependencies": {
+                "@tabler/icons": "3.6.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/codecalm"
+            },
+            "peerDependencies": {
+                "svelte": ">=3 <5"
+            }
+        },
         "node_modules/@types/cookie": {
             "version": "0.6.0",
             "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -789,8 +816,7 @@
         "node_modules/@types/estree": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-            "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+            "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
-            "dev": true
         },
         "node_modules/@types/pug": {
             "version": "2.0.10",
@@ -802,7 +828,6 @@
             "version": "8.11.3",
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
             "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-            "dev": true,
             "bin": {
                 "acorn": "bin/acorn"
             },
@@ -827,7 +852,6 @@
             "version": "5.3.0",
             "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
             "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-            "dev": true,
             "dependencies": {
                 "dequal": "^2.0.3"
             }
@@ -836,7 +860,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
             "integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
-            "dev": true,
             "dependencies": {
                 "dequal": "^2.0.3"
             }
@@ -927,7 +950,6 @@
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
             "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
-            "dev": true,
             "dependencies": {
                 "@jridgewell/sourcemap-codec": "^1.4.15",
                 "@types/estree": "^1.0.1",
@@ -955,7 +977,6 @@
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
             "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-            "dev": true,
             "dependencies": {
                 "mdn-data": "2.0.30",
                 "source-map-js": "^1.0.1"
@@ -994,7 +1015,6 @@
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
             "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-            "dev": true,
             "engines": {
                 "node": ">=6"
             }
@@ -1068,7 +1088,6 @@
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
             "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-            "dev": true,
             "dependencies": {
                 "@types/estree": "^1.0.0"
             }
@@ -1270,7 +1289,6 @@
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
             "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
-            "dev": true,
             "dependencies": {
                 "@types/estree": "*"
             }
@@ -1287,14 +1305,12 @@
         "node_modules/locate-character": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-            "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+            "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
-            "dev": true
         },
         "node_modules/magic-string": {
             "version": "0.30.10",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
             "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
-            "dev": true,
             "dependencies": {
                 "@jridgewell/sourcemap-codec": "^1.4.15"
             }
@@ -1302,8 +1318,7 @@
         "node_modules/mdn-data": {
             "version": "2.0.30",
             "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-            "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+            "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
-            "dev": true
         },
         "node_modules/merge2": {
             "version": "1.4.1",
@@ -1454,7 +1469,6 @@
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
             "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-            "dev": true,
             "dependencies": {
                 "@types/estree": "^1.0.0",
                 "estree-walker": "^3.0.0",
@@ -1692,7 +1706,6 @@
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
             "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-            "dev": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -1713,7 +1726,6 @@
             "version": "4.2.18",
             "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.18.tgz",
             "integrity": "sha512-d0FdzYIiAePqRJEb90WlJDkjUEx42xhivxN8muUBmfZnP+tzUgz12DJ2hRJi8sIHCME7jeK1PTMgKPSfTd8JrA==",
-            "dev": true,
             "dependencies": {
                 "@ampproject/remapping": "^2.2.1",
                 "@jridgewell/sourcemap-codec": "^1.4.15",

web/package.json

@@ -28,5 +28,9 @@
         "tslib": "^2.4.1",
         "typescript": "^5.0.0",
         "vite": "^5.0.3"
+    },
+    "dependencies": {
+        "@fontsource/ibm-plex-mono": "^5.0.13",
+        "@tabler/icons-svelte": "^3.6.0"
     }
 }

web/src/components/sidebar/CobaltLogo.svelte

@@ -0,0 +1,15 @@
+<div id="cobalt-logo">
+    <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0 15.6363L0 12.8594L9.47552 8.293L0 3.14038L0 0.363525L12.8575 7.4908V9.21862L0 15.6363Z" fill="white"/>
+        <path d="M11.1425 15.6363V12.8594L20.6181 8.293L11.1425 3.14038V0.363525L24 7.4908V9.21862L11.1425 15.6363Z" fill="white"/>
+    </svg>
+</div>
+
+<style>
+    #cobalt-logo {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: calc(var(--sidebar-padding) * 2 - 2px);
+    }
+</style>

web/src/components/sidebar/Sidebar.svelte

@@ -0,0 +1,72 @@
+<script>
+    import CobaltLogo from "./CobaltLogo.svelte";
+    import SidebarTab from "./SidebarTab.svelte";
+
+    import {
+        IconDownload,
+        IconCut,
+        IconCrop,
+        IconTransform,
+        IconSettings,
+        IconComet,
+        IconHeart,
+        IconInfoCircle,
+    } from "@tabler/icons-svelte";
+
+    const iconSize = 21;
+    const iconStroke = 1.2;
+</script>
+
+<nav id="sidebar">
+    <CobaltLogo />
+    <div id="sidebar-tabs">
+        <div id="sidebar-actions" class="sidebar-inner-container">
+            <SidebarTab tabName="save" tabLink="/">
+                <IconDownload size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+            <SidebarTab tabName="trim" tabLink="/trim">
+                <IconCut size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+            <SidebarTab tabName="crop" tabLink="/crop">
+                <IconCrop size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+            <SidebarTab tabName="convert" tabLink="/convert">
+                <IconTransform size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+            <SidebarTab tabName="settings" tabLink="/settings">
+                <IconSettings size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+        </div>
+        <div id="sidebar-info" class="sidebar-inner-container">
+            <SidebarTab tabName="updates" tabLink="/updates">
+                <IconComet size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+            <SidebarTab tabName="donate" tabLink="/donate">
+                <IconHeart size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+            <SidebarTab tabName="about" tabLink="/about">
+                <IconInfoCircle size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+        </div>
+    </div>
+</nav>
+
+<style>
+    #sidebar,
+    #sidebar-tabs,
+    .sidebar-inner-container {
+        display: flex;
+        flex-direction: column;
+    }
+    #sidebar {
+        background: black;
+        height: 100vh;
+        position: sticky;
+        width: var(--sidebar-width);
+    }
+    #sidebar-tabs {
+        height: 100%;
+        justify-content: space-between;
+        padding-bottom: var(--sidebar-padding);
+    }
+</style>

web/src/components/sidebar/SidebarTab.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+
+    export let tabName: string;
+    export let tabLink: string;
+
+    $: isTabActive = $page.url.pathname === tabLink;
+</script>
+
+<a
+    id="sidebar-tab-{tabName}"
+    class="sidebar-tab"
+    class:active={isTabActive}
+    href={tabLink}
+>
+    <slot></slot>
+    {tabName}
+</a>
+
+<style>
+    .sidebar-tab {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        gap: 5px;
+        padding: var(--sidebar-padding) 5px;
+        color: var(--accent);
+        font-size: var(--sidebar-font-size);
+        opacity: 0.8;
+    }
+    .sidebar-tab.active {
+        color: var(--background);
+        background: var(--accent);
+        opacity: 1;
+    }
+    .sidebar-tab:hover {
+        opacity: 1;
+    }
+</style>

web/src/routes/+layout.svelte

@@ -0,0 +1,41 @@
+<script>
+    import "@fontsource/ibm-plex-mono/400.css";
+    import "@fontsource/ibm-plex-mono/500.css";
+    import Sidebar from "../components/sidebar/Sidebar.svelte";
+</script>
+
+<div id="cobalt">
+    <Sidebar />
+    <div id="content">
+        <slot></slot>
+    </div>
+</div>
+
+<style>
+    :global(:root) {
+        --accent: #ffffff;
+        --background: #000000;
+        --sidebar-width: 80px;
+        --sidebar-font-size: 11px;
+        --sidebar-padding: 12px;
+    }
+    :global(html),
+    :global(body) {
+        font-family: "IBM Plex Mono", "Noto Sans Mono", monospace;
+        margin: 0;
+    }
+    :global(a) {
+        text-decoration: none;
+        text-decoration-line: none;
+    }
+    #cobalt {
+        height: 100vh;
+        display: grid;
+        grid-template-columns: var(--sidebar-width) 1fr;
+        overflow: hidden;
+    }
+    #content {
+        display: flex;
+        overflow: scroll;
+    }
+</style>

web/src/routes/+page.svelte

@@ -1 +1,2 @@
-<h1>hello world</h1>
+<!-- home (save) page -->
+<div>home</div>

web/src/routes/about/+page.svelte

@@ -0,0 +1,2 @@
+<!-- about page -->
+<div>about</div>

web/src/routes/convert/+page.svelte

@@ -0,0 +1,2 @@
+<!-- convert page -->
+<div>convert</div>

web/src/routes/crop/+page.svelte

@@ -0,0 +1,2 @@
+<!-- crop page -->
+<div>crop</div>

web/src/routes/donate/+page.svelte

@@ -0,0 +1,2 @@
+<!-- donate page -->
+<div>donate</div>

web/src/routes/settings/+page.svelte

@@ -0,0 +1,2 @@
+<!-- settings page -->
+<div>settings</div>

web/src/routes/trim/+page.svelte

@@ -0,0 +1,2 @@
+<!-- trim page -->
+<div>trim</div>

web/src/routes/updates/+page.svelte

@@ -0,0 +1,2 @@
+<!-- updates (changelog) page -->
+<div>updates</div>