Merge pull request 'Icons: init figma icon sync & optimizer' (#2315) from hsjobeki/clan-core:hsjobeki-main into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/2315

pkgs/flake-module.nix

@@ -9,6 +9,7 @@
     ./schemas/flake-module.nix
     ./webview-ui/flake-module.nix
     ./distro-packages/flake-module.nix
+    ./icon-update/flake-module.nix
   ];
 
   flake.packages.x86_64-linux =

pkgs/icon-update/.envrc

@@ -0,0 +1,7 @@
+# shellcheck shell=bash
+source_up
+
+watch_file flake-module.nix default.nix
+
+# Because we depend on nixpkgs sources, uploading to builders takes a long time
+use flake .#icon-update --builders ''

pkgs/icon-update/.gitignore

@@ -0,0 +1,2 @@
+icons/
+.vscode/

pkgs/icon-update/README.md

@@ -0,0 +1,16 @@
+# Clan Icons
+
+This script updates the clan icons.
+
+To update the icons
+
+https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
+
+- `export FIGMA_TOKEN=YOUR_TOKEN`
+- `nix run .#icon-update`
+
+## Development on the script
+
+- Vscode: open this folder as project root. This will configure vscode to use deno instead of nodejs.
+
+- Non-vscode: Use the deno lsp of your editor

pkgs/icon-update/default.nix

@@ -0,0 +1,19 @@
+{ pkgs, deno }:
+let
+  src = ./.;
+in
+pkgs.writeShellApplication {
+  name = "update";
+
+  runtimeInputs = [ deno ];
+  runtimeEnv = {
+    FIGMA_ICON_FILE_ID = "KJgLnsBI9nvUt44qKJXmVm";
+    FRAME_ID = "709-324";
+  };
+
+  text = ''
+    OUT_DIR="$(realpath ../webview-ui/app/icons)"
+    export OUT_DIR
+    deno run --allow-all ${src}/main.ts
+  '';
+}

pkgs/icon-update/deno.json

@@ -0,0 +1,14 @@
+{
+  "tasks": {
+    "dev": "deno run --watch main.ts"
+  },
+  "imports": {
+    "@libs/diff": "jsr:@libs/diff@^2.0.0",
+    "@std/assert": "jsr:@std/assert@1",
+    "svgo": "npm:svgo@^3.3.2",
+    "typescript": "npm:typescript@^5.6.3"
+  },
+  "compilerOptions": {
+    "lib": ["dom", "deno.ns"]
+  }
+}

pkgs/icon-update/deno.lock

@@ -0,0 +1,141 @@
+{
+  "version": "4",
+  "specifiers": {
+    "jsr:@libs/diff@2": "2.0.0",
+    "jsr:@std/assert@1": "1.0.7",
+    "jsr:@std/dotenv@*": "0.225.2",
+    "jsr:@std/internal@^1.0.5": "1.0.5",
+    "npm:svgo@^3.3.2": "3.3.2",
+    "npm:typescript@^5.6.3": "5.6.3"
+  },
+  "jsr": {
+    "@libs/diff@2.0.0": {
+      "integrity": "ef8e33c075d79f666d8241c5d274a03d9192a525eca77a6dd1f5ca6ada624262"
+    },
+    "@std/assert@1.0.7": {
+      "integrity": "64ce9fac879e0b9f3042a89b3c3f8ccfc9c984391af19e2087513a79d73e28c3",
+      "dependencies": [
+        "jsr:@std/internal"
+      ]
+    },
+    "@std/dotenv@0.225.2": {
+      "integrity": "e2025dce4de6c7bca21dece8baddd4262b09d5187217e231b033e088e0c4dd23"
+    },
+    "@std/internal@1.0.5": {
+      "integrity": "54a546004f769c1ac9e025abd15a76b6671ddc9687e2313b67376125650dc7ba"
+    }
+  },
+  "npm": {
+    "@trysound/sax@0.2.0": {
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="
+    },
+    "boolbase@1.0.0": {
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
+    "commander@7.2.0": {
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+    },
+    "css-select@5.1.0": {
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dependencies": [
+        "boolbase",
+        "css-what",
+        "domhandler",
+        "domutils",
+        "nth-check"
+      ]
+    },
+    "css-tree@2.2.1": {
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dependencies": [
+        "mdn-data@2.0.28",
+        "source-map-js"
+      ]
+    },
+    "css-tree@2.3.1": {
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dependencies": [
+        "mdn-data@2.0.30",
+        "source-map-js"
+      ]
+    },
+    "css-what@6.1.0": {
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
+    },
+    "csso@5.0.5": {
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dependencies": [
+        "css-tree@2.2.1"
+      ]
+    },
+    "dom-serializer@2.0.0": {
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": [
+        "domelementtype",
+        "domhandler",
+        "entities"
+      ]
+    },
+    "domelementtype@2.3.0": {
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+    },
+    "domhandler@5.0.3": {
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": [
+        "domelementtype"
+      ]
+    },
+    "domutils@3.1.0": {
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dependencies": [
+        "dom-serializer",
+        "domelementtype",
+        "domhandler"
+      ]
+    },
+    "entities@4.5.0": {
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+    },
+    "mdn-data@2.0.28": {
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
+    },
+    "mdn-data@2.0.30": {
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
+    },
+    "nth-check@2.1.1": {
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dependencies": [
+        "boolbase"
+      ]
+    },
+    "picocolors@1.1.1": {
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+    },
+    "source-map-js@1.2.1": {
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
+    },
+    "svgo@3.3.2": {
+      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+      "dependencies": [
+        "@trysound/sax",
+        "commander",
+        "css-select",
+        "css-tree@2.3.1",
+        "css-what",
+        "csso",
+        "picocolors"
+      ]
+    },
+    "typescript@5.6.3": {
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw=="
+    }
+  },
+  "workspace": {
+    "dependencies": [
+      "jsr:@libs/diff@2",
+      "jsr:@std/assert@1",
+      "npm:svgo@^3.3.2",
+      "npm:typescript@^5.6.3"
+    ]
+  }
+}

pkgs/icon-update/figma.types.ts

@@ -0,0 +1,45 @@
+export type FigmaFile = {
+  document: Document;
+  schemaVersion: number;
+  components: Record<string, Component>;
+};
+
+export type Component = {
+  key: string;
+  name: string;
+  remote: boolean;
+  description: string;
+};
+
+export type FigmaNodeFile = {
+  name: string;
+  version: string;
+  nodes: {
+    [id: string]: FigmaFile;
+  };
+};
+
+export type Node = Document | Instance | ComponentNode;
+
+export type Document = {
+  // Maybe: Split those types
+  type: "DOCUMENT" | "CANVAS" | "FRAME" | "COMPONENT_SET";
+  id: string;
+  name: string;
+  children?: Node[];
+};
+
+export type Instance = {
+  type: "INSTANCE";
+  id: string;
+  name: string;
+  children?: Node[];
+  componentId: string;
+};
+
+export type ComponentNode = {
+  type: "COMPONENT";
+  id: string;
+  name: string;
+  children?: Node[];
+};

pkgs/icon-update/flake-module.nix

@@ -0,0 +1,15 @@
+{ ... }:
+{
+  perSystem =
+    {
+      pkgs,
+      system,
+      lib,
+      ...
+    }:
+    lib.optionalAttrs (system == "x86_64-linux") {
+      packages.icon-update = pkgs.callPackage ./default.nix { };
+
+      devShells.icon-update = pkgs.callPackage ./shell.nix { };
+    };
+}

pkgs/icon-update/main.ts

@@ -0,0 +1,116 @@
+#!/usr/bin/env -S deno run --allow-env --allow-net --allow-read --allow-write
+import "jsr:@std/dotenv/load";
+import type { FigmaNodeFile } from "./figma.types.ts";
+import { optimize } from "svgo";
+
+const FIGMA_ICON_FILE_ID = Deno.env.get("FIGMA_ICON_FILE_ID");
+const FIGMA_TOKEN = Deno.env.get("FIGMA_TOKEN");
+const FRAME_ID = Deno.env.get("FRAME_ID");
+const OUT_DIR = Deno.env.get("OUT_DIR");
+
+if (!FIGMA_ICON_FILE_ID) {
+  console.error("env: FIGMA_ICON_FILE_ID is not set.");
+  Deno.exit(2);
+}
+if (!FRAME_ID) {
+  console.error("env: FRAME_ID is not set.");
+  Deno.exit(2);
+}
+if (!FIGMA_TOKEN) {
+  console.error("env: FIGMA_TOKEN is not set.");
+  Deno.exit(2);
+}
+
+const raw = await fetch(
+  `https://api.figma.com/v1/files/${FIGMA_ICON_FILE_ID}/nodes?ids=${FRAME_ID}`,
+  {
+    headers: {
+      "X-FIGMA-TOKEN": FIGMA_TOKEN,
+    },
+  },
+);
+
+const figmaFile: FigmaNodeFile = await raw.json();
+
+// @ts-ignore: could be an error response
+if (figmaFile.status) {
+  console.error(`Failed to fetch`, { figmaFile });
+  Deno.exit();
+}
+
+const nodeId = FRAME_ID.replace("-", ":");
+const iconComponentIds = Object.keys(figmaFile.nodes[nodeId].components);
+
+const images = await fetch(
+  `https://api.figma.com/v1/images/${FIGMA_ICON_FILE_ID}?ids=${iconComponentIds.join(
+    ",",
+  )}&format=svg`,
+  {
+    headers: {
+      "X-FIGMA-TOKEN": FIGMA_TOKEN,
+    },
+  },
+);
+
+type ImageResonse =
+  | {
+      err: null;
+      images: {
+        [id: string]: string | null;
+      };
+    }
+  | {
+      err: string;
+    };
+const urlSet: ImageResonse = await images.json();
+
+if (urlSet.err !== null) {
+  console.error("Could not get image paths", { urlSet });
+  Deno.exit(1);
+}
+
+const getNamefromType = (str: string) => {
+  const [_type, name] = str.split("=");
+  if (!name) {
+    console.error("Icon doesnt have name");
+    Deno.exit(1);
+  }
+  return name;
+};
+
+const final = await Promise.all(
+  Object.entries(urlSet.images)
+    .filter(([, url]) => url !== null)
+    .map(async ([id, url]) => {
+      const entry = figmaFile.nodes[nodeId].components[id];
+      const rawSvg = await fetch(url as string);
+      let svgText = await rawSvg.text();
+      const replace = /fill=["']#?[0-9a-fA-F]{3,6}["']|fill=["'][a-zA-Z]+["']/g;
+      svgText = svgText.replaceAll(replace, 'fill="currentColor"');
+
+      const optimizedSvg = optimize(svgText, {}).data;
+      return {
+        name: getNamefromType(entry.name),
+        file: optimizedSvg,
+      };
+    }),
+);
+
+const path = OUT_DIR;
+if (!path) {
+  console.error("OUT_DIR is not set");
+  Deno.exit(1);
+}
+
+console.log(`Will write icons to: ${path}/*`);
+
+final.filter(Boolean).forEach((i) => {
+  const icon = i!;
+  Deno.mkdirSync(path, { recursive: true });
+  Deno.writeTextFileSync(`${path}/${icon.name}.svg`, icon.file);
+  console.log(`Wrote: ${path}/${icon.name}.svg`);
+});
+
+console.info("All icons up to date");
+
+export {};

pkgs/icon-update/shell.nix

@@ -0,0 +1,9 @@
+{ pkgs }:
+pkgs.mkShell {
+  packages = with pkgs; [ deno ];
+  env = {
+    FIGMA_ICON_FILE_ID = "KJgLnsBI9nvUt44qKJXmVm";
+    FRAME_ID = "709-324";
+    OUT_DIR = "./icons";
+  };
+}

pkgs/webview-ui/app/icons/arrow-bottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M21 4h5v30.75h5v5.125h-5V45h-5v-5.125h-5V34.75h5zM11 29.625v5.125h5v-5.125zm0 0V24.5H6v5.125zm25 0v5.125h-5v-5.125zm0 0V24.5h5v5.125z"/></svg>

pkgs/webview-ui/app/icons/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M43.9 21.338v4.987H13.975v4.988H8.988v-4.988H4v-4.988h4.988V16.35h4.987v4.987zm-24.937-9.975h-4.988v4.987h4.987zm0 0h4.987V6.375h-4.988zm0 24.937h-4.988v-4.987h4.987zm0 0h4.987v4.988h-4.988z"/></svg>

pkgs/webview-ui/app/icons/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M4 21.571v4.858h29.25v4.857h4.875v-4.857H43V21.57h-4.875v-4.857H33.25v4.857zm24.375-9.714h4.875v4.857h-4.875zm0 0H23.5V7h4.875zm0 24.286h4.875v-4.857h-4.875zm0 0H23.5V41h4.875z"/></svg>

pkgs/webview-ui/app/icons/arrow-top.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M20.857 45h5.286V14.25h5.286V9.125h-5.286V4h-5.286v5.125h-5.286v5.125h5.286zM10.286 19.375V14.25h5.285v5.125zm0 0V24.5H5v-5.125zm26.428 0V14.25H31.43v5.125zm0 0V24.5H42v-5.125z"/></svg>

pkgs/webview-ui/app/icons/caret-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M8 19.25V15h33v4.25h-4.125v4.25h-6.187v4.25h-4.125V32h-4.125v-4.25h-4.125V23.5h-6.188v-4.25z"/></svg>

pkgs/webview-ui/app/icons/caret-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M20.25 41H16V8h4.25v4.125h4.25v6.188h4.25v4.125H33v4.125h-4.25v4.125H24.5v6.187h-4.25z"/></svg>

pkgs/webview-ui/app/icons/checkmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M36.888 11H41.3v4.413h-4.412zm-4.413 8.825v-4.412h4.413v4.412zm-4.413 4.413v-4.413h4.413v4.413zM23.65 28.65h4.413v-4.412H23.65zm-4.412 4.413h4.412V28.65h-4.412zm-4.413 0v4.412h4.413v-4.413zm-4.412-4.413h4.412v4.413h-4.412zm0 0H6v-4.412h4.413z"/></svg>

pkgs/webview-ui/app/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M5 6h5.286v5.286H5zm10.571 10.571h-5.285v-5.285h5.285zm5.286 5.286h-5.286v-5.286h5.286zm5.286 0h-5.286v5.286h-5.286v5.286h-5.285v5.285H5V43h5.286v-5.286h5.285V32.43h5.286v-5.286h5.286v5.286h5.286v5.285h5.285V43H42v-5.286h-5.286V32.43H31.43v-5.286h-5.286zm5.286-5.286v5.286h-5.286v-5.286zm5.285-5.285v5.285H31.43v-5.285zm0 0V6H42v5.286z"/></svg>

pkgs/webview-ui/app/icons/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M35.8 4h-4.1v4.1h-4.1v4.1h-4.1v4.1h-4.1v4.1h-4.1v4.1h-4.1v4.1H7.1v4.1H3V45h12.3v-4.1h4.1v-4.1h4.1v-4.1h4.1v-4.1h4.1v-4.1h4.1v-4.1h4.1v-4.1H44v-4.1h-4.1V8.1h-4.1zm0 16.4h-4.1v4.1h-4.1v4.1h-4.1v4.1h-4.1v4.1h-4.1v-4.1h-4.1v-4.1h4.1v-4.1h4.1v-4.1h4.1v-4.1h4.1v-4.1h4.1v4.1h4.1zM11.2 32.7H7.1v8.2h8.2v-4.1h-4.1z"/></svg>

pkgs/webview-ui/app/icons/expand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M21.8 8.444h4.4v4.445h4.4v4.444H35V12.89h-4.4V8.444h-4.4V4h-4.4zm-4.4 4.445V8.444h4.4v4.445zm0 0v4.444H13V12.89zm8.8 26.667h-4.4V35.11h-4.4v-4.444H13v4.444h4.4v4.445h4.4V44h4.4zm4.4-4.445h-4.4v4.445h4.4zm0 0H35v-4.444h-4.4z"/></svg>

pkgs/webview-ui/app/icons/eye-close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M2 15h3.583v3.6H2zm7.167 7.2H5.583v-3.6h3.584zm7.166 3.6v-3.6H9.167v3.6H5.583v3.6h3.584v-3.6zm14.334 0H16.333v3.6H12.75V33h3.583v-3.6h14.334V33h3.583v-3.6h-3.583zm7.166-3.6h-7.166v3.6h7.166v3.6h3.584v-3.6h-3.584zm3.584-3.6v3.6h-3.584v-3.6zm0 0V15H45v3.6z"/></svg>

pkgs/webview-ui/app/icons/eye-open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M17 11h15v3.857H17zm-7.5 7.714v-3.857H17v3.857zm-3.75 3.857v-3.857H9.5v3.857zm0 3.858V22.57H2v3.858zm3.75 3.857H5.75v-3.857H9.5zm7.5 3.857H9.5v-3.857H17zm15 0V38H17v-3.857zm7.5-3.857v3.857H32v-3.857zm3.75-3.857v3.857H39.5v-3.857zm0-3.858H47v3.858h-3.75zm-3.75-3.857h3.75v3.857H39.5zm0 0v-3.857H32v3.857zm-18.75 1.929h7.5v7.714h-7.5z"/></svg>

pkgs/webview-ui/app/icons/flash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M23.5 2h4.1v16H44v8h-4.1v-4H23.5V10h-4.1V6h4.1zm-8.2 12v-4h4.1v4zm-4.1 4v-4h4.1v4zm-4.1 4v-4h4.1v4zm20.5 16v4h-4.1v4h-4.1V30H3v-8h4.1v4h16.4v12zm4.1-4v4h-4.1v-4zm4.1-4v4h-4.1v-4zm0 0h4.1v-4h-4.1z"/></svg>

pkgs/webview-ui/app/icons/grid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M4 4h39v39H4zm3.9 3.9v7.8h7.8V7.9zm11.7 0v7.8h7.8V7.9zm11.7 0v7.8h7.8V7.9zm7.8 11.7h-7.8v7.8h7.8zm0 11.7h-7.8v7.8h7.8zm-11.7 7.8v-7.8h-7.8v7.8zm-11.7 0v-7.8H7.9v7.8zM7.9 27.4h7.8v-7.8H7.9zm11.7-7.8v7.8h7.8v-7.8z"/></svg>

pkgs/webview-ui/app/icons/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z" clip-rule="evenodd"/></svg>

pkgs/webview-ui/app/icons/list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M4 5h39v38H4zm3.9 4.571v6.572h31.2V9.57zm31.2 11.143H7.9v6.572h31.2zm0 11.143H7.9v6.572h31.2z"/></svg>

pkgs/webview-ui/app/icons/load.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M26.165 2h-4.393v13.181h4.393zm0 30.756h-4.393v13.181h4.393zm19.772-10.984v4.393H32.756v-4.393zm-30.756 4.393v-4.393H2v4.393zm15.378-13.18h4.394v4.393h-4.394zm8.787-4.394h-4.393v4.393h4.393zm-21.968 4.393h-4.394v4.394h4.394zM8.591 8.591h4.393v4.393H8.591zm21.968 26.362h4.394v4.393h4.393v-4.393h-4.393v-4.394h-4.394zm-17.575 0v-4.394h4.394v4.394zv4.393H8.591v-4.393z"/></svg>

pkgs/webview-ui/app/icons/paperclip.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M12.573 7.573v32.01H8V3h32.01v41.155H17.146v-32.01h13.718V35.01h-4.573V16.718h-4.573v22.864h13.719V7.572z"/></svg>

pkgs/webview-ui/app/icons/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M22.004 8h4.001v14.004H40.01v4.001H26.005V40.01h-4V26.005H8v-4h14.004z"/></svg>

pkgs/webview-ui/app/icons/reload.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M33.106 6h-4.518v4.518h4.518v4.517H10.518v4.518H6v18.07h4.518v4.519H24.07v-4.518H10.518v-18.07h22.588v4.517h-4.518v4.517h4.518v-4.517h4.518v-4.518h4.517v-4.518h-4.517v-4.517h-4.518z"/></svg>

pkgs/webview-ui/app/icons/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M9.714 9.714h8.572V6.857h2.857V4h5.714v2.857h2.857v2.857h8.572v8.572h2.857v2.857H44v5.714h-2.857v2.857h-2.857v8.572h-8.572v2.857h-2.857V44h-5.714v-2.857h-2.857v-2.857H9.714v-8.572H6.857v-2.857H4v-5.714h2.857v-2.857h2.857zm8.572 5.715v2.857h-2.857v11.428h2.857v2.857h11.428v-2.857h2.857V18.286h-2.857v-2.857z" clip-rule="evenodd"/></svg>

pkgs/webview-ui/app/icons/trash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M32 4v8h12v4h-4v28H8V16H4v-4h12V4zm-4 4h-8v4h8zm0 8H12v24h24V16z"/></svg>

pkgs/webview-ui/app/icons/update.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M32.4 3h-4.2v4.2h4.2v4.2H7.2v4.2H3v10.5h4.2V15.6h25.2v4.2h-4.2V24h4.2v-4.2h4.2v-4.2h4.2v-4.2h-4.2V7.2h-4.2zm-21 37.8h4.2V45h4.2v-4.2h-4.2v-4.2h25.2v-4.2H45V21.9h-4.2v10.5H15.6v-4.2h4.2V24h-4.2v4.2h-4.2v4.2H7.2v4.2h4.2z"/></svg>

pkgs/webview-ui/app/package-lock.json

@@ -20,7 +20,8 @@
         "nanoid": "^5.0.7",
         "solid-js": "^1.8.11",
         "solid-markdown": "^2.0.13",
-        "solid-toast": "^0.5.0"
+        "solid-toast": "^0.5.0",
+        "vite-plugin-solid-svg": "^0.8.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.3.0",
@@ -49,7 +50,6 @@
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz",
       "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==",
-      "dev": true,
       "optional": true,
       "peer": true
     },
@@ -413,7 +413,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -429,7 +428,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -445,7 +443,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -461,7 +458,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -477,7 +473,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -493,7 +488,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -509,7 +503,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -525,7 +518,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -541,7 +533,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -557,7 +548,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -573,7 +563,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -589,7 +578,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -605,7 +593,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -621,7 +608,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -637,7 +623,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -653,7 +638,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -669,7 +653,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -685,7 +668,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -701,7 +683,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -717,7 +698,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -733,7 +713,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -749,7 +728,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -765,7 +743,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1076,7 +1053,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1089,7 +1065,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1102,7 +1077,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1115,7 +1089,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1128,7 +1101,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1141,7 +1113,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1154,7 +1125,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1167,7 +1137,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1180,7 +1149,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1193,7 +1161,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1206,7 +1173,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1219,7 +1185,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1232,7 +1197,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1245,7 +1209,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1258,7 +1221,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1271,7 +1233,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1718,6 +1679,15 @@
         "solid-js": "^1.6.0"
       }
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1771,8 +1741,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/hast": {
       "version": "2.3.10",
@@ -1808,7 +1777,7 @@
       "version": "20.12.12",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
       "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -2206,7 +2175,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -2345,7 +2314,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       },
@@ -2353,6 +2322,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -2518,7 +2493,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -2542,7 +2517,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -2623,7 +2598,6 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
       "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -2637,7 +2611,6 @@
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
       "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
-      "dev": true,
       "optional": true,
       "peer": true
     },
@@ -2654,6 +2627,22 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/css-selector-tokenizer": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
@@ -2664,6 +2653,31 @@
         "fastparse": "^1.1.2"
       }
     },
+    "node_modules/css-tree": {
+      "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==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2676,6 +2690,39 @@
         "node": ">=4"
       }
     },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "license": "CC0-1.0"
+    },
     "node_modules/cssstyle": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz",
@@ -2868,6 +2915,61 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2890,7 +2992,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -2902,7 +3003,6 @@
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
       "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -2916,7 +3016,6 @@
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
       "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -3454,7 +3553,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -3568,7 +3666,6 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
       "optional": true,
       "peer": true
     },
@@ -3655,7 +3752,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -3675,7 +3772,6 @@
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
       "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "bin": {
@@ -3689,7 +3785,6 @@
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
       "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
-      "dev": true,
       "optional": true,
       "peer": true
     },
@@ -3741,7 +3836,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -4019,7 +4114,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
       "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -4158,7 +4252,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
       "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -4173,7 +4266,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "engines": {
@@ -4184,7 +4276,6 @@
       "version": "5.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
       "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "bin": {
@@ -4434,6 +4525,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "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==",
+      "license": "CC0-1.0"
+    },
     "node_modules/merge-anything": {
       "version": "5.1.7",
       "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-5.1.7.tgz",
@@ -5042,7 +5139,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "bin": {
@@ -5171,7 +5267,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
       "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -5195,7 +5290,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5236,6 +5331,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/nwsapi": {
       "version": "2.2.10",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.10.tgz",
@@ -5342,7 +5449,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
       "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "engines": {
@@ -5442,8 +5548,7 @@
     "node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
-      "dev": true
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -5489,7 +5594,6 @@
       "version": "8.4.38",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
       "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5705,7 +5809,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5782,7 +5885,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
       "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true,
       "optional": true,
       "peer": true
     },
@@ -5844,7 +5946,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -5998,7 +6100,6 @@
       "version": "4.17.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.17.2.tgz",
       "integrity": "sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
       },
@@ -6073,13 +6174,12 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/sass": {
       "version": "1.77.2",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.2.tgz",
       "integrity": "sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -6098,7 +6198,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
       "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==",
-      "dev": true,
       "optional": true,
       "peer": true
     },
@@ -6274,7 +6373,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "engines": {
@@ -6285,7 +6383,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"
       }
@@ -6462,7 +6559,6 @@
       "version": "0.62.0",
       "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.62.0.tgz",
       "integrity": "sha512-v3YCf31atbwJQIMtPNX8hcQ+okD4NQaTuKGUWfII8eaqn+3otrbttGL1zSMZAAtiPsBztQnujVBugg/cXFUpyg==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -6486,7 +6582,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -6499,7 +6594,6 @@
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "deprecated": "Glob versions prior to v9 are no longer supported",
-      "dev": true,
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -6521,7 +6615,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -6535,7 +6628,6 @@
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
       "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-      "dev": true,
       "optional": true,
       "peer": true,
       "engines": {
@@ -6588,6 +6680,40 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svgo": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -6769,7 +6895,6 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true,
       "optional": true,
       "peer": true
     },
@@ -6852,7 +6977,7 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/unified": {
       "version": "10.1.2",
@@ -7077,7 +7202,6 @@
       "version": "5.2.11",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz",
       "integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==",
-      "dev": true,
       "dependencies": {
         "esbuild": "^0.20.1",
         "postcss": "^8.4.38",
@@ -7174,6 +7298,19 @@
         }
       }
     },
+    "node_modules/vite-plugin-solid-svg": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-solid-svg/-/vite-plugin-solid-svg-0.8.1.tgz",
+      "integrity": "sha512-ROGC2ae1eYUCMd+zfJtsbUtuZwsb6DZS0+Sy5/ZXDokOunGi0Ez/cL7OPdsixN3I0/rNYd/3hilo3kpRMAS+IA==",
+      "license": "MIT",
+      "dependencies": {
+        "svgo": "^3.1.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1",
+        "vite": ">=4"
+      }
+    },
     "node_modules/vitefu": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",

pkgs/webview-ui/app/package.json

@@ -47,6 +47,7 @@
     "nanoid": "^5.0.7",
     "solid-js": "^1.8.11",
     "solid-markdown": "^2.0.13",
-    "solid-toast": "^0.5.0"
+    "solid-toast": "^0.5.0",
+    "vite-plugin-solid-svg": "^0.8.1"
   }
 }

pkgs/webview-ui/app/src/layout/header.tsx

@@ -4,6 +4,8 @@ import { callApi } from "../api";
 import { Accessor, Show } from "solid-js";
 import { useNavigate } from "@solidjs/router";
 
+import ArrowBottom from "@/icons/arrow-bottom.svg";
+
 interface HeaderProps {
   clan_dir: Accessor<string | null>;
 }
@@ -48,7 +50,7 @@ export const Header = (props: HeaderProps) => {
             <div class="tooltip tooltip-right" data-tip={activeURI()}>
               <div class="avatar placeholder online mx-4">
                 <div class="w-10 rounded-full bg-slate-700 text-3xl text-neutral-content">
-                  {meta().name.slice(0, 1)}
+                  <ArrowBottom />
                 </div>
               </div>
             </div>

pkgs/webview-ui/app/tsconfig.json

@@ -8,7 +8,7 @@
     "esModuleInterop": true,
     "jsx": "preserve",
     "jsxImportSource": "solid-js",
-    "types": ["vite/client"],
+    "types": [ "vite-plugin-solid-svg/types-component-solid", "vite/client" ],
     "noEmit": true,
     "resolveJsonModule": true,
     "allowJs": true,

pkgs/webview-ui/app/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from "vite";
 import solidPlugin from "vite-plugin-solid";
+import solidSvg from "vite-plugin-solid-svg";
 import devtools from "solid-devtools/vite";
 import path from "node:path";
 
@@ -16,6 +17,7 @@ export default defineConfig({
     */
     devtools(),
     solidPlugin(),
+    solidSvg(),
   ],
   server: {
     port: 3000,