refactor: improve web UI with rounded corners and micro-interactions

web-svelte/src/lib/components/Button.svelte

@@ -74,9 +74,10 @@
   {disabled}
   {onclick}
   class={cn(
-    "inline-flex items-center justify-center rounded-lg border font-medium cursor-pointer",
-    "transition-colors duration-150",
+    "inline-flex items-center justify-center border font-medium cursor-pointer",
+    "transition-all duration-150 rounded-xl",
     "disabled:opacity-50 disabled:cursor-not-allowed",
+    "active:scale-[0.98]",
     variantClasses.base,
     variantClasses.hover,
     sizeClasses,

web-svelte/src/lib/components/ConnectionsPanel.svelte

@@ -41,8 +41,7 @@
   bind:this={sectionEl}
   style="opacity: 0;"
   class={cn(
-    "flex flex-col overflow-hidden rounded-xl border shadow-sm transition-all duration-200",
-    "hover:shadow-lg hover:-translate-y-px",
+    "flex flex-col overflow-hidden rounded-3xl border shadow-sm transition-all duration-200",
     "bg-card border-border",
   )}
 >
@@ -55,7 +54,7 @@
     )}
   >
     <h2
-      class="m-0 text-[17px] font-semibold font-serif text-text-heading flex items-center gap-2"
+      class="m-0 text-base font-semibold font-serif text-text-heading flex items-center gap-2"
     >
       {t("connections")}
     </h2>

web-svelte/src/lib/components/DeleteModal.svelte

@@ -106,9 +106,8 @@
         </h3>
         <button
           class={cn(
-            "w-8 h-8 flex items-center justify-center rounded-lg cursor-pointer",
-            "bg-transparent border-none text-text-muted",
-            "transition-all duration-150 hover:rotate-90 hover:bg-hover",
+            "w-8 h-8 flex items-center justify-center rounded-xl cursor-pointer",
+            "bg-transparent border-none text-text-muted transition-all duration-150 hover:rotate-90 hover:bg-hover"
           )}
           onclick={handleCancel}
           aria-label={t("close")}

web-svelte/src/lib/components/Dropdown.svelte

@@ -112,7 +112,7 @@
     aria-expanded={isOpen}
     aria-haspopup="true"
     class={cn(
-      "flex items-center gap-1.5 px-3 py-2 text-xs h-9 rounded-lg border min-h-9 cursor-pointer",
+      "flex items-center gap-1.5 px-3 py-2 text-xs h-9 rounded-xl border min-h-9 cursor-pointer",
       "bg-card border-border text-text hover:bg-hover flex-1",
     )}
   >
@@ -135,7 +135,7 @@
       aria-orientation="vertical"
       style="opacity: 0; scale: 0.95; transform: translateY(-4px);"
       class={cn(
-        "absolute min-w-[150px] max-h-[300px] rounded-lg border p-1 z-50 overflow-y-auto cursor-default",
+        "absolute min-w-[150px] max-h-[300px] rounded-2xl border p-1 z-50 overflow-y-auto cursor-default",
         menuPosition,
         "bg-card border-border",
       )}
@@ -153,7 +153,7 @@
               onSelect?.(option);
             }}
             class={cn(
-              "flex items-center gap-2 w-full px-3 py-2 text-xs rounded-lg text-left cursor-pointer",
+              "flex items-center gap-2 w-full px-3 py-2 text-xs rounded-xl text-left cursor-pointer",
               "text-text bg-transparent border-none hover:bg-hover",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               option.danger && "text-red-500 hover:bg-red-500/10",

web-svelte/src/lib/components/EditConnection.svelte

@@ -110,7 +110,7 @@
 <section
   bind:this={sectionEl}
   style="opacity: 0;"
-  class="rounded-xl p-5 bg-card border border-border"
+  class="rounded-2xl p-5 bg-card border border-border"
 >
   <div
     bind:this={headerEl}
@@ -125,7 +125,7 @@
     <button
       type="button"
       onclick={onCancel}
-      class="p-1 rounded text-lg bg-transparent border-none text-text-muted cursor-pointer transition-colors hover:bg-hover hover:text-text"
+      class="p-1 rounded-xl text-lg bg-transparent border-none text-text-muted cursor-pointer transition-all hover:bg-hover hover:text-text"
     >
       <X size={18} />
     </button>
@@ -145,7 +145,7 @@
           placeholder={t("name_placeholder")}
           required
           autocomplete="off"
-          class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
+          class="w-full h-9 px-3 py-2 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
         />
       </div>
       <div class="grid grid-cols-2 gap-4">
@@ -161,7 +161,7 @@
             min="1"
             max="65535"
             required
-            class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
+            class="w-full h-9 px-3 py-2 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
           />
         </div>
         <div class="mb-4">

web-svelte/src/lib/components/NewConnection.svelte

@@ -84,7 +84,7 @@
 <section
   bind:this={sectionEl}
   style="opacity: 0;"
-  class="rounded-xl p-5 bg-card border border-border"
+  class="rounded-2xl p-5 bg-card border border-border"
 >
   <div bind:this={headerEl} style="opacity: 0;" class="mb-5">
     <h2 class="text-base font-semibold text-text-heading flex items-center gap-2">
@@ -104,7 +104,7 @@
           placeholder={t("tunnel_name_hint")}
           required
           autocomplete="off"
-          class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
+          class="w-full h-9 px-3 py-2 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
         />
       </div>
       <div class="grid grid-cols-2 gap-4">
@@ -119,7 +119,7 @@
             min="1"
             max="65535"
             required
-            class="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
+            class="w-full h-9 px-3 py-2 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-offset-1 bg-input-bg text-text border-border focus:ring-primary transition-all duration-200"
           />
         </div>
         <div class="mb-4">

web-svelte/src/lib/components/TunnelCard.svelte

@@ -200,11 +200,11 @@
 </script>
 
 <div
-  class={cn("border rounded-xl cursor-default", "bg-card border-border")}
+  class="border rounded-3xl cursor-default transition-all duration-150 hover:scale-[1.01] bg-card border-border"
 >
   <div class="flex flex-col">
     <div
-      class="flex justify-between items-start p-4 gap-4 flex-row sm:items-stretch sm:p-3.5 sm:gap-3"
+      class="flex justify-between items-start p-5 gap-4 flex-row sm:items-stretch sm:p-3.5 sm:gap-3"
     >
       <div class="flex-1 min-w-0">
         <div

web-svelte/src/lib/data/themes.ts

@@ -24,6 +24,7 @@ export const themeGroups: ThemeGroup[] = [
       { id: 'red', color: '#ff5555' },
       { id: 'blue', color: '#8be9fd' },
       { id: 'purple', color: '#ff79c6' },
+      { id: 'rust-dark', color: '#e05824' },
     ]
   },
   {
@@ -38,6 +39,7 @@ export const themeGroups: ThemeGroup[] = [
       { id: 'red-light', color: '#ff6e6e' },
       { id: 'blue-light', color: '#8be9fd' },
       { id: 'purple-light', color: '#ff79c6' },
+      { id: 'rust', color: '#e05824' },
     ]
   }
-];
+];

web-svelte/src/lib/stores/theme.svelte.ts

@@ -19,11 +19,11 @@ const THEMES = [
   'blue',
   'blue-light',
   'purple',
-  'purple-light'
+  'purple-light',
+  'rust-dark',
+  'rust'
 ] as const;
 
-type Theme = typeof THEMES[number];
-
 const STORAGE_KEY = 'ftm-theme';
 
 let currentTheme = $state<Theme>('dracula');

web-svelte/src/styles/app.css

@@ -16,3 +16,10 @@ html, body {
 * {
   box-sizing: border-box;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}

web-svelte/src/styles/themes.css

@@ -23,6 +23,8 @@
 @import './themes/_blue-light.css';
 @import './themes/_purple.css';
 @import './themes/_purple-light.css';
+@import './themes/_rust.css';
+@import './themes/_rust-dark.css';
 
 @theme {
   --color-bg: var(--color-bg);

web-svelte/src/styles/themes/_rust-dark.css

@@ -0,0 +1,63 @@
+/* ===========================================
+   RUST DARK - Rust Language Theme (Dark)
+   Inspired by rust-lang.org dark branding
+   =========================================== */
+
+:root[data-theme="rust-dark"] {
+  /* Base - dark warm */
+  --color-bg: #1a1210;
+  --color-card: #2a1f18;
+  --color-text: #f0e6d9;
+  --color-heading: #ffffff;
+  --color-muted: #9a8873;
+  --color-border: #3d2d24;
+  --color-border-light: #2a1f18;
+
+  /* Primary - Rust orange */
+  --color-primary: #e05824;
+  --color-primary-hover: #f06834;
+  --color-hover: #3d2d24;
+
+  /* Buttons */
+  --color-btn-primary: #e05824;
+  --color-btn-text: #ffffff;
+  --color-btn-primary-hover: #f06834;
+
+  /* Start/Stop */
+  --color-btn-start: #5cb85c;
+  --color-btn-start-hover: #6fc96f;
+  --color-btn-stop: #dc2626;
+  --color-btn-stop-hover: #ef4444;
+
+  /* Danger */
+  --color-btn-danger: #dc2626;
+  --color-btn-danger-hover: #ef4444;
+
+  /* Status */
+  --color-status-running: #5cb85c;
+  --color-status-starting: #e05824;
+  --color-status-installing: #c97a3c;
+  --color-status-error: #dc2626;
+  --color-status-stopped: #9a8873;
+
+  /* Logs */
+  --color-logs-bg: #120e0a;
+  --color-logs-text: #f0e6d9;
+
+  /* URL bar */
+  --color-url-bg: #3d2d24;
+  --color-url-text: #e05824;
+
+  /* Inputs */
+  --color-input-bg: #2a1f18;
+  --color-input-text: #f0e6d9;
+  --color-input-placeholder: #7a6a5a;
+  --color-input-disabled: #3d2d24;
+
+  /* Badge */
+  --color-badge-text: #1a1210;
+
+  /* Secondary button */
+  --color-secondary-btn: #3d2d24;
+  --color-secondary-btn-text: #f0e6d9;
+}

web-svelte/src/styles/themes/_rust.css

@@ -0,0 +1,63 @@
+/* ===========================================
+   RUST - Rust Language Theme (Light)
+   Inspired by rust-lang.org branding
+   =========================================== */
+
+:root[data-theme="rust"] {
+  /* Base - warm cream */
+  --color-bg: #fdf6ec;
+  --color-card: #ffffff;
+  --color-text: #3d1c0a;
+  --color-heading: #2a1205;
+  --color-muted: #8b6b4d;
+  --color-border: #e8d5c4;
+  --color-border-light: #f5ebe0;
+
+  /* Primary - Rust orange */
+  --color-primary: #e05824;
+  --color-primary-hover: #c44d1f;
+  --color-hover: #f5ebe0;
+
+  /* Buttons */
+  --color-btn-primary: #e05824;
+  --color-btn-text: #ffffff;
+  --color-btn-primary-hover: #c44d1f;
+
+  /* Start/Stop */
+  --color-btn-start: #3d8b40;
+  --color-btn-start-hover: #2f7032;
+  --color-btn-stop: #b91c1c;
+  --color-btn-stop-hover: #991b1b;
+
+  /* Danger */
+  --color-btn-danger: #b91c1c;
+  --color-btn-danger-hover: #991b1b;
+
+  /* Status */
+  --color-status-running: #3d8b40;
+  --color-status-starting: #e05824;
+  --color-status-installing: #8b4513;
+  --color-status-error: #b91c1c;
+  --color-status-stopped: #9ca3af;
+
+  /* Logs */
+  --color-logs-bg: #faf3e8;
+  --color-logs-text: #3d1c0a;
+
+  /* URL bar */
+  --color-url-bg: #f5ebe0;
+  --color-url-text: #e05824;
+
+  /* Inputs */
+  --color-input-bg: #ffffff;
+  --color-input-text: #3d1c0a;
+  --color-input-placeholder: #b89e7d;
+  --color-input-disabled: #f5ebe0;
+
+  /* Badge */
+  --color-badge-text: #ffffff;
+
+  /* Secondary button */
+  --color-secondary-btn: #f0e6d9;
+  --color-secondary-btn-text: #3d1c0a;
+}