wip

.gitignore

@@ -1,9 +1,10 @@
-node_modules
-dist
-target
 .DS_Store
-**/export/export.json
-test.db*
+node_modules
+/build
+/.svelte-kit
+/package
 .env
-.direnv
-/proto/generated
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

biome.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": []
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "tab"
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "style": { "useConst": "warn" }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  }
+}

package.json

@@ -14,17 +14,27 @@
   "license": "MIT",
   "dependencies": {
     "@tauri-apps/api": "^2",
-    "@tauri-apps/plugin-shell": "^2"
+    "@tauri-apps/plugin-shell": "^2",
+    "@vanilla-extract/css": "^1.16.0",
+    "classnames": "^2.5.1"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
     "@sveltejs/adapter-static": "^3.0.5",
     "@sveltejs/kit": "^2.7.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tauri-apps/cli": "^2",
+    "@vanilla-extract/vite-plugin": "^4.0.17",
+    "sass-embedded": "^1.80.6",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "tslib": "^2.8.0",
     "typescript": "^5.5.0",
-    "vite": "^5.4.10",
-    "@tauri-apps/cli": "^2"
-  }
+    "vite": "^5.4.10"
+  },
+  "trustedDependencies": [
+    "@biomejs/biome",
+    "@sveltejs/kit",
+    "esbuild"
+  ]
 }

src-tauri/Cargo.toml

@@ -22,4 +22,5 @@ tauri = { version = "2", features = [] }
 tauri-plugin-shell = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
+sea-orm = { version = "1.1.1", features = ["sqlx-sqlite", "runtime-tokio-rustls", "macros"] }
 

src/components/composite/sidebar/Sidebar.svelte

@@ -0,0 +1,23 @@
+<script>
+</script>
+
+<div class="sidebar">
+  <div class="top">top</div>
+
+  <hr />
+
+  <div class="bottom">bottom</div>
+</div>
+
+<style lang="scss" scoped>
+  .sidebar {
+    width: 66px;
+
+    display: flex;
+    flex-direction: column;
+
+    .top {
+      flex-grow: 1;
+    }
+  }
+</style>

src/global.scss

@@ -0,0 +1,10 @@
+html,body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height:100%;
+}
+
+body {
+  font-family: sans-serif;
+}

src/routes/+page.svelte

@@ -0,0 +1,20 @@
+<script>
+  import "../global.scss";
+  import Sidebar from "../components/composite/sidebar/Sidebar.svelte";
+</script>
+
+<div class="container">
+  <Sidebar />
+  <main class="container">main shit</main>
+</div>
+
+<style lang="scss" scoped>
+  .container {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+  }
+</style>

src/utils/css.ts

@@ -0,0 +1,4 @@
+// Cribbed from https://github.com/cinnyapp/folds/blob/d5e4f8a3d48ae70d54e77a05808f5200e74072fb/src/theme/util.ts#L1
+// Just going to use this for now until I figure out my own system
+export const pxToRem = (px: number) => Number.parseFloat((px / 16).toFixed(4));
+export const toRem = (px: number) => `${pxToRem(px)}rem`;

ui/.gitignore

@@ -1,10 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*

ui/.vscode/extensions.json

@@ -1,7 +0,0 @@
-{
-  "recommendations": [
-    "svelte.svelte-vscode",
-    "tauri-apps.tauri-vscode",
-    "rust-lang.rust-analyzer"
-  ]
-}

ui/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "svelte.enable-ts-plugin": true
-}

ui/README.md

@@ -1,7 +0,0 @@
-# Tauri + SvelteKit + TypeScript
-
-This template should help get you started developing with Tauri, SvelteKit and TypeScript in Vite.
-
-## Recommended IDE Setup
-
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer).

ui/src/routes/+page.svelte

@@ -1,156 +0,0 @@
-<script lang="ts">
-  import { invoke } from "@tauri-apps/api/core";
-
-  let name = $state("");
-  let greetMsg = $state("");
-
-  async function greet(event: Event) {
-    event.preventDefault();
-    // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
-    greetMsg = await invoke("greet", { name });
-  }
-</script>
-
-<main class="container">
-  <h1>Welcome to Tauri + Svelte</h1>
-
-  <div class="row">
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo vite" alt="Vite Logo" />
-    </a>
-    <a href="https://tauri.app" target="_blank">
-      <img src="/tauri.svg" class="logo tauri" alt="Tauri Logo" />
-    </a>
-    <a href="https://kit.svelte.dev" target="_blank">
-      <img src="/svelte.svg" class="logo svelte-kit" alt="SvelteKit Logo" />
-    </a>
-  </div>
-  <p>Click on the Tauri, Vite, and SvelteKit logos to learn more.</p>
-
-  <form class="row" onsubmit={greet}>
-    <input id="greet-input" placeholder="Enter a name..." bind:value={name} />
-    <button type="submit">Greet</button>
-  </form>
-  <p>{greetMsg}</p>
-</main>
-
-<style>
-.logo.vite:hover {
-  filter: drop-shadow(0 0 2em #747bff);
-}
-
-.logo.svelte-kit:hover {
-  filter: drop-shadow(0 0 2em #ff3e00);
-}
-
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color: #0f0f0f;
-  background-color: #f6f6f6;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-.container {
-  margin: 0;
-  padding-top: 10vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: 0.75s;
-}
-
-.logo.tauri:hover {
-  filter: drop-shadow(0 0 2em #24c8db);
-}
-
-.row {
-  display: flex;
-  justify-content: center;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
-h1 {
-  text-align: center;
-}
-
-input,
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  color: #0f0f0f;
-  background-color: #ffffff;
-  transition: border-color 0.25s;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-}
-
-button {
-  cursor: pointer;
-}
-
-button:hover {
-  border-color: #396cd8;
-}
-button:active {
-  border-color: #396cd8;
-  background-color: #e8e8e8;
-}
-
-input,
-button {
-  outline: none;
-}
-
-#greet-input {
-  margin-right: 5px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color: #f6f6f6;
-    background-color: #2f2f2f;
-  }
-
-  a:hover {
-    color: #24c8db;
-  }
-
-  input,
-  button {
-    color: #ffffff;
-    background-color: #0f0f0f98;
-  }
-  button:active {
-    background-color: #0f0f0f69;
-  }
-}
-
-</style>

vite.config.js

@@ -1,12 +1,12 @@
 import { defineConfig } from "vite";
 import { sveltekit } from "@sveltejs/kit/vite";
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 
-// @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
-  plugins: [sveltekit()],
+  plugins: [vanillaExtractPlugin(), sveltekit()],
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //