chore(history): squash 16 commit(s) from 2026-09-26

- chore(backend): sync Cargo.lock with gateway dev-dependency
- feat(frontend): ClickGui replica matching the in-game GUI — category panels, Modules/Settings switch, theme cards
- feat(frontend): floating glass top bar in the mod's UI language
- fix(frontend): soft night backdrop for the ClickGui, editor that fits one screen
- chore(frontend): replace em dashes in UI copy with lighter separators
- refactor(frontend): split landing sections and theme editor into subfolders (4-files-per-folder rule)
- feat(frontend): login and registration in the mod's glass panel style
- feat(frontend): link the game with a device code
- feat(frontend): account page with avatar upload and linked games
- feat(frontend): my configs with share codes and publishing
- feat(frontend): public showcase listing and detail pages
- chore(frontend): drop em dashes from visible copy
- feat(frontend): atmospheric backdrop, glass download block and ClickGui-style FAQ on the landing
- feat(frontend): Konami code, DevTools console greeting and ASCII 404 block
- feat: public player profiles at /u/:id and author link in the showcase
- fix(frontend): stop the theme editor overflowing horizontally at 375px

frontend/src/features/themes/editor/fields/GradientField.tsx

@@ -0,0 +1,47 @@
+import { useTranslation } from 'react-i18next'
+import type { GradientSpec } from '../../types'
+import { ColorField } from './ColorField'
+
+type Props = { title: string; value: GradientSpec; onChange: (patch: Partial<GradientSpec>) => void }
+
+/** A gradient slot: enable toggle, start/end colors and a 0–360° angle control. */
+export function GradientField({ title, value, onChange }: Props) {
+  const { t } = useTranslation('themes')
+
+  return (
+    <div className="lv-gradient-field flex min-w-0 flex-col gap-3 rounded-panel border border-white/10 bg-black/25 p-3">
+      <label className="flex items-center justify-between gap-2">
+        <span className="text-sm font-semibold text-snow">{title}</span>
+        <span className="flex items-center gap-2 text-xs text-frost">
+          {t('editor.enabled')}
+          <input
+            type="checkbox"
+            aria-label={`${title} · ${t('editor.enabled')}`}
+            checked={value.enabled}
+            onChange={(e) => onChange({ enabled: e.target.checked })}
+            className="size-4 accent-[var(--color-ice)]"
+          />
+        </span>
+      </label>
+
+      <ColorField label={t('editor.start')} value={value.start} onChange={(start) => onChange({ start })} />
+      {value.enabled && (
+        <>
+          <ColorField label={t('editor.end')} value={value.end} onChange={(end) => onChange({ end })} />
+          <label className="flex items-center gap-2 text-xs text-frost">
+            <span className="w-12 shrink-0">{t('editor.angle')}</span>
+            <input
+              type="range"
+              min={0}
+              max={359}
+              value={Math.round(value.angle)}
+              onChange={(e) => onChange({ angle: Number(e.target.value) })}
+              className="h-1.5 flex-1 cursor-pointer appearance-none rounded-full bg-white/20"
+            />
+            <span className="w-10 shrink-0 text-right font-code text-snow">{Math.round(value.angle)}°</span>
+          </label>
+        </>
+      )}
+    </div>
+  )
+}