style changes

package.json

···
     "serve": "vite preview"
   },
   "devDependencies": {
-    "@iconify-json/lucide": "^1.2.66",
+    "@iconify-json/lucide": "^1.2.67",
     "@iconify/tailwind4": "^1.0.6",
     "@tailwindcss/vite": "^4.1.13",
     "prettier": "^3.6.2",

pnpm-lock.yaml

···
         version: 1.9.9
     devDependencies:
       '@iconify-json/lucide':
-        specifier: ^1.2.66
-        version: 1.2.66
+        specifier: ^1.2.67
+        version: 1.2.67
       '@iconify/tailwind4':
         specifier: ^1.0.6
         version: 1.0.6(tailwindcss@4.1.13)
···
       '@codemirror/view': ^6.0.0
       '@lezer/highlight': ^1.0.0
 
-  '@iconify-json/lucide@1.2.66':
-    resolution: {integrity: sha512-TrhmfThWY2FHJIckjz7g34gUx3+cmja61DcHNdmu0rVDBQHIjPMYO1O8mMjoDSqIXEllz9wDZxCqT3lFuI+f/A==}
+  '@iconify-json/lucide@1.2.67':
+    resolution: {integrity: sha512-YVLDYbFbX0cPxl6p9l55igm+UljlOCj0CQKwN3BoEbD3KOmDMtQumw2TGuWAE9JWURL5U6v/1oFXyKgEZDGSkQ==}
 
   '@iconify/tailwind4@1.0.6':
     resolution: {integrity: sha512-43ZXe+bC7CuE2LCgROdqbQeFYJi/J7L/k1UpSy8KDQlWVsWxPzLSWbWhlJx4uRYLOh1NRyw02YlDOgzBOFNd+A==}
···
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
-  '@jridgewell/trace-mapping@0.3.30':
-    resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
   '@jsr/mary__exif-rm@0.2.2':
     resolution: {integrity: sha512-+ZpLaC+1CyqWhH608Sqd6/yTG0pOlokn2tCXha7s1SMQ+GLKo4Nn/PskTeeP9Pt+6gNYSu6ednoSlRvXb2ZGxg==, tarball: https://npm.jsr.io/~/11/@jsr/mary__exif-rm/0.2.2.tgz}
···
     resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
 
-  electron-to-chromium@1.5.215:
-    resolution: {integrity: sha512-TIvGp57UpeNetj/wV/xpFNpWGb0b/ROw372lHPx5Aafx02gjTBtWnEEcaSX3W2dLM3OSdGGyHX/cHl01JQsLaQ==}
+  electron-to-chromium@1.5.218:
+    resolution: {integrity: sha512-uwwdN0TUHs8u6iRgN8vKeWZMRll4gBkz+QMqdS7DDe49uiK68/UX92lFb61oiFPrpYZNeZIqa4bA7O6Aiasnzg==}
 
   enhanced-resolve@5.18.3:
     resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
···
     engines: {node: ^18 || >=20}
     hasBin: true
 
-  node-releases@2.0.20:
-    resolution: {integrity: sha512-7gK6zSXEH6neM212JgfYFXe+GmZQM+fia5SsusuBIUgnPheLFBmIPhtFoAQRj8/7wASYQnbDlHPVwY0BefoFgA==}
+  node-releases@2.0.21:
+    resolution: {integrity: sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==}
 
   package-manager-detector@1.3.0:
     resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}
···
       '@babel/parser': 7.28.4
       '@babel/types': 7.28.4
       '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.30
+      '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.1.0
 
   '@babel/helper-compilation-targets@7.27.2':
···
       '@codemirror/view': 6.38.2
       '@lezer/highlight': 1.2.1
 
-  '@iconify-json/lucide@1.2.66':
+  '@iconify-json/lucide@1.2.67':
     dependencies:
       '@iconify/types': 2.0.0
 
···
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.30
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/remapping@2.3.5':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.30
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
-  '@jridgewell/trace-mapping@0.3.30':
+  '@jridgewell/trace-mapping@0.3.31':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
···
   browserslist@4.25.4:
     dependencies:
       caniuse-lite: 1.0.30001741
-      electron-to-chromium: 1.5.215
-      node-releases: 2.0.20
+      electron-to-chromium: 1.5.218
+      node-releases: 2.0.21
       update-browserslist-db: 1.1.3(browserslist@4.25.4)
 
   caniuse-lite@1.0.30001741: {}
···
 
   detect-libc@2.0.4: {}
 
-  electron-to-chromium@1.5.215: {}
+  electron-to-chromium@1.5.218: {}
 
   enhanced-resolve@5.18.3:
     dependencies:
···
 
   nanoid@5.1.5: {}
 
-  node-releases@2.0.20: {}
+  node-releases@2.0.21: {}
 
   package-manager-detector@1.3.0: {}
 

src/components/create.tsx

···
         <div class="dark:bg-dark-300 dark:shadow-dark-800 absolute top-12 left-[50%] w-[22rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 shadow-md transition-opacity duration-300 sm:w-xl sm:p-4 lg:w-[48rem] dark:border-neutral-700 starting:opacity-0">
           <div class="mb-2 flex w-full justify-between">
             <div class="flex items-center gap-1 font-semibold">
-              <span class="iconify lucide--square-pen"></span>
+              <span
+                class={`iconify ${props.create ? "lucide--square-pen" : "lucide--pencil"}`}
+              ></span>
               <span>{props.create ? "Creating" : "Editing"} record</span>
             </div>
             <button onclick={() => setOpenDialog(false)} class="flex items-center">
···
                     id="collection"
                     name="collection"
                     placeholder="Optional (default: record type)"
-                    class="w-[14rem]"
+                    class="w-[15rem]"
                   />
                 </div>
                 <div class="flex items-center gap-x-2">
                   <label for="rkey" class="min-w-20 select-none">
                     Record key
                   </label>
-                  <TextInput id="rkey" name="rkey" placeholder="Optional" class="w-[14rem]" />
+                  <TextInput
+                    id="rkey"
+                    name="rkey"
+                    placeholder="Optional (default: TID)"
+                    class="w-[15rem]"
+                  />
                 </div>
               </Show>
               <div class="flex items-center gap-x-2">
···
                   <label for="mimetype" class="min-w-20 select-none">
                     MIME type
                   </label>
-                  <TextInput id="mimetype" placeholder="Optional" class="w-[14rem]" />
+                  <TextInput id="mimetype" placeholder="Optional" class="w-[15rem]" />
                 </div>
                 <div class="flex items-center gap-1">
-                  <input id="exif-rm" class="size-4" type="checkbox" checked />
+                  <input id="exif-rm" type="checkbox" checked />
                   <label for="exif-rm" class="select-none">
                     Remove EXIF data
                   </label>
···
               <div class="flex items-center justify-end gap-2">
                 <Show when={!props.create}>
                   <div class="flex items-center gap-1">
-                    <input id="recreate" class="size-4" name="recreate" type="checkbox" />
+                    <input id="recreate" name="recreate" type="checkbox" />
                     <label for="recreate" class="text-sm select-none">
                       Recreate record
                     </label>

src/components/login.tsx

···
 
   return (
     <form class="flex flex-col gap-y-2" onsubmit={(e) => e.preventDefault()}>
-      <div class="flex items-center gap-2">
-        <label for="handle" class="flex items-center">
+      <div class="flex items-center gap-1">
+        <label for="handle" class="mr-1 flex items-center">
           <span class="iconify lucide--user-round-plus text-lg"></span>
         </label>
         <TextInput

src/components/video-player.tsx

···
   hls.on(Hls.Events.ERROR, () => setError(true));
 
   return (
-    <div class="max-w-md">
+    <div class="max-w-xs">
       <Show when={!error()}>
         <video
           ref={(node) => {
···
             });
           }}
           controls
-          autoplay
-          muted
           playsinline
           onPlay={() => setPlaying(true)}
           onPause={() => setPlaying(false)}

src/views/pds.tsx

···
           {(server) => (
             <>
               <Show when={server().inviteCodeRequired}>
-                <div class="flex items-baseline gap-x-1">
-                  <span class="font-semibold">Invite Code Required</span>
-                  <span class="text-sm">{server().inviteCodeRequired ? "Yes" : "No"}</span>
-                </div>
+                <span class="font-semibold">Invite Code Required</span>
               </Show>
               <Show when={server().phoneVerificationRequired}>
-                <div class="flex items-baseline gap-x-1">
-                  <span class="font-semibold">Phone Verification Required</span>
-                  <span class="text-sm">{server().phoneVerificationRequired ? "Yes" : "No"}</span>
-                </div>
+                <span class="font-semibold">Phone Verification Required</span>
               </Show>
               <Show when={server().availableUserDomains.length}>
                 <div class="flex flex-col">

src/views/settings.tsx

···
 
 const Settings = () => {
   return (
-    <div class="w-[22rem] sm:w-[24rem]">
-      <div class="mb-2 flex items-center gap-1 font-semibold">
+    <div class="flex w-[22rem] flex-col gap-3 sm:w-[24rem]">
+      <div class="flex items-center gap-1 font-semibold">
         <span>Settings</span>
       </div>
       <div class="flex flex-col gap-2">
···
           <div class="flex items-center gap-1">
             <input
               id="disableMedia"
-              class="size-4"
               type="checkbox"
               checked={localStorage.hideMedia === "true"}
               onChange={(e) => {