style: 🎨 lucide icons

frontend/index.html

@@ -5,7 +5,7 @@
     <link
       rel="icon"
       type="image/png"
-      href="https://assets.jdbnet.co.uk/ssh.png"
+      href="https://assets.jdbnet.co.uk/projects/ssh.png"
     />
     <link rel="manifest" href="/manifest.webmanifest" />
     <meta name="theme-color" content="#0f1419" />

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@xterm/addon-fit": "^0.10.0",
         "@xterm/xterm": "^5.5.0",
+        "lucide-vue-next": "^1.0.0",
         "pinia": "^2.2.6",
         "vue": "^3.5.13"
       },
@@ -1609,6 +1610,14 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/lucide-vue-next": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-1.0.0.tgz",
+      "integrity": "sha512-V6SPvx1IHTj/UY+FrIYWV5faISsPSb8BnWSFDxAtezWKvWc9ZZ40PDrdu1/Qb5vg4lHWr1hs1BAMGVGm6V1Xdg==",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",

frontend/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@xterm/xterm": "^5.5.0",
     "@xterm/addon-fit": "^0.10.0",
+    "lucide-vue-next": "^1.0.0",
     "pinia": "^2.2.6",
     "vue": "^3.5.13"
   },

frontend/src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
+import { Folder } from "lucide-vue-next";
 import {
   api,
   type HostRow,
@@ -463,7 +464,10 @@ async function deleteIdentityRow(id: number) {
                 class="min-w-0 flex-1 truncate text-left text-sm text-accent hover:underline"
                 @click="goToFolder(f.id)"
               >
-                📁 {{ f.label }}
+                <span class="inline-flex items-center gap-1.5">
+                  <Folder class="h-4 w-4 shrink-0" aria-hidden="true" />
+                  <span>{{ f.label }}</span>
+                </span>
               </button>
               <button
                 type="button"
@@ -761,7 +765,7 @@ async function deleteIdentityRow(id: number) {
           required
           class="mt-1 w-full rounded border border-slate-700 bg-surface-overlay px-2 py-1.5 text-sm"
         />
-        <label class="mt-3 block text-xs uppercase text-slate-500">Hostname</label>
+        <label class="mt-3 block text-xs uppercase text-slate-500">Hostname or IP</label>
         <input
           v-model="hostForm.hostname"
           required
@@ -873,7 +877,7 @@ async function deleteIdentityRow(id: number) {
           required
           class="mt-1 w-full rounded border border-slate-700 bg-surface-overlay px-2 py-1.5 text-sm"
         >
-        <label class="mt-3 block text-xs uppercase text-slate-500">Hostname</label>
+        <label class="mt-3 block text-xs uppercase text-slate-500">Hostname or IP</label>
         <input
           v-model="editHostForm.hostname"
           required

frontend/src/components/SftpPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { File, Folder } from "lucide-vue-next";
 import { api, type SftpEntry } from "@/api";
 
 const props = defineProps<{ connId: string }>();
@@ -198,7 +199,19 @@ function fmtSize(n: number): string {
             :class="isDir(e.st_mode) ? 'text-accent' : 'text-slate-200'"
             @click="enter(e)"
           >
-            {{ isDir(e.st_mode) ? "📁" : "📄" }} {{ e.filename }}
+            <span class="inline-flex items-center gap-1.5">
+              <Folder
+                v-if="isDir(e.st_mode)"
+                class="h-3.5 w-3.5 shrink-0"
+                aria-hidden="true"
+              />
+              <File
+                v-else
+                class="h-3.5 w-3.5 shrink-0"
+                aria-hidden="true"
+              />
+              <span>{{ e.filename }}</span>
+            </span>
           </button>
           <span class="shrink-0 text-[10px] text-slate-500">{{
             isDir(e.st_mode) ? "" : fmtSize(e.st_size)

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "ssh",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}