feat(web): add i18n, light/dark theme switching, and version constant

- Add i18n (English + 简体中文) with a locale store, $t() magic, and a language toggle (persisted)
- Add light/dark/system theme switching via a theme store and [data-theme] token overrides
- Set the theme before paint to avoid a flash of the wrong theme
- Add frontend version constant web/version.js (window.YDROPBX_VERSION) shown in the app footer
- Update AGENTS.md version-control convention to mention web/version.js
- Bump version to 0.1.1 across frontend, webui changelog, and backend constant

web/styles/components.css

@@ -23,6 +23,12 @@
   margin-bottom: var(--space-8);
 }
 
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
 .brand {
   font-size: var(--text-2xl);
   font-weight: 700;
@@ -209,7 +215,7 @@
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-3) var(--space-5);
-  border-bottom: 1px solid #f3f4f6;
+  border-bottom: 1px solid var(--color-divider);
   transition: background var(--transition-fast);
 }
 .file-row:last-child {
@@ -284,8 +290,8 @@
   padding: var(--space-3) var(--space-5);
   font-size: var(--text-sm);
   font-weight: 500;
-  color: #fff;
-  background: var(--color-text);
+  color: var(--color-toast-fg);
+  background: var(--color-toast-bg);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
   opacity: 0;
@@ -304,6 +310,24 @@
   }
 }
 
+/* ----- App footer (version) ----- */
+.app-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  margin-top: var(--space-8);
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+}
+.app-footer-version {
+  font-variant-numeric: tabular-nums;
+  padding: 2px 8px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-full);
+}
+
 /* ----- Modal (confirmation dialog) ----- */
 .modal-overlay {
   position: fixed;
@@ -346,6 +370,15 @@
 }
 
 /* ----- Login ----- */
+.page-topbar {
+  position: fixed;
+  top: var(--space-4);
+  right: var(--space-4);
+  display: flex;
+  gap: var(--space-2);
+  z-index: var(--z-toast);
+}
+
 .login-wrap {
   display: flex;
   align-items: center;

web/styles/tokens.css

@@ -21,6 +21,13 @@
 
   --color-success: #10b981;
 
+  /* Structural tokens */
+  --color-divider: #f3f4f6;
+  --color-toast-bg: #1a1d23;
+  --color-toast-fg: #ffffff;
+
+  color-scheme: light;
+
   /* ===== Spacing (4px base) ===== */
   --space-1: 0.25rem;
   --space-2: 0.5rem;
@@ -61,3 +68,31 @@
   --z-toast: 1000;
   --z-modal: 1100;
 }
+
+/* ===== Dark theme ===== */
+[data-theme="dark"] {
+  --color-bg: #0f1115;
+  --color-bg-gradient: radial-gradient(1200px 600px at 50% -10%, #1a2030 0%, var(--color-bg) 55%);
+  --color-surface: #171a21;
+  --color-surface-hover: #1e222b;
+  --color-border: #262b35;
+  --color-border-strong: #323844;
+
+  --color-text: #e6e8ec;
+  --color-text-secondary: #9aa1ad;
+  --color-text-tertiary: #6b7280;
+
+  --color-primary: #3b82f6;
+  --color-primary-hover: #2f6fe0;
+  --color-primary-soft: #16233f;
+
+  --color-danger: #f87171;
+  --color-danger-hover: #ef4444;
+  --color-danger-soft: #2a1717;
+
+  --color-divider: #23262f;
+  --color-toast-bg: #e6e8ec;
+  --color-toast-fg: #1a1d23;
+
+  color-scheme: dark;
+}