From 2d04a4273685732bee43f581fc1d5f27c6d6279e Mon Sep 17 00:00:00 2001
From: Daniel Legt <contact@danlegt.com>
Date: Sun, 31 May 2026 21:03:00 +0300
Subject: [PATCH] feat(ui): style admin shell for retro theme and add prod
 docker config

- Update the retro theme CSS to style the dashboard, account, and admin pages with a classic Windows 98 aesthetic (silver sidebar, bevelled tabs, sunken metric cards).
- Exclude sidebar links and tabs from default retro link styles to ensure readability.
- Add `docker-compose-prod.yml` for production deployments.
- Add `.prod.env` to `.gitignore`.
---
 .gitignore                      |   1 +
 backend/static/css/16-retro.css | 115 ++++++++++++++++++++++++++++++--
 docker-compose-prod.yml         |  22 ++++++
 3 files changed, 134 insertions(+), 4 deletions(-)
 create mode 100644 docker-compose-prod.yml

diff --git a/.gitignore b/.gitignore
index 971188b..0bbe111 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,5 +12,6 @@ backend/static/uploads/*
 .env
 .env.*
 !.env.example
+.prod.env
 scripts/env/dev.env
 docker-compose.yml
diff --git a/backend/static/css/16-retro.css b/backend/static/css/16-retro.css
index d508076..d30a9dd 100644
--- a/backend/static/css/16-retro.css
+++ b/backend/static/css/16-retro.css
@@ -150,17 +150,18 @@
   box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
 }
 
-/* Links: classic blue, underlined, purple when visited. */
-:root[data-theme="retro"] a:not(.button):not(.brand) {
+/* Links: classic blue, underlined, purple when visited. Sidebar links and tabs
+   are styled as their own Win98 controls below, so they're excluded here. */
+:root[data-theme="retro"] a:not(.button):not(.brand):not(.sidebar-link):not(.tab) {
   color: #0000ee;
   text-decoration: underline;
 }
 
-:root[data-theme="retro"] a:not(.button):not(.brand):visited {
+:root[data-theme="retro"] a:not(.button):not(.brand):not(.sidebar-link):not(.tab):visited {
   color: #551a8b;
 }
 
-:root[data-theme="retro"] a:not(.button):not(.brand):hover {
+:root[data-theme="retro"] a:not(.button):not(.brand):not(.sidebar-link):not(.tab):hover {
   color: #ee0000;
 }
 
@@ -440,3 +441,109 @@
     display: none;
   }
 }
+
+/* ------------------------------------------------------------------------- */
+/* App / admin shell (dashboard, account, admin pages)                       */
+/* These use dark revamp tokens by default, which are unreadable on the black */
+/* retro desktop. Re-skin them as Win98 chrome: a raised silver sidebar with  */
+/* solid links, light page headers on the desktop, and bevelled stat cards.   */
+/* ------------------------------------------------------------------------- */
+
+/* Sidebar = raised silver panel. */
+:root[data-theme="retro"] .app-sidebar,
+:root[data-theme="retro"] .admin-shell .app-sidebar {
+  background: #c0c0c0;
+  border: 1px solid #000000;
+  box-shadow: var(--shadow);
+}
+
+:root[data-theme="retro"] .sidebar-link {
+  color: #000000;
+  border: 1px solid transparent;
+  font-weight: 700;
+}
+
+:root[data-theme="retro"] .sidebar-link:hover,
+:root[data-theme="retro"] .sidebar-link.is-active,
+:root[data-theme="retro"] .admin-shell .sidebar-link.is-active {
+  background: linear-gradient(to right, #000078, 80%, #0f80cd);
+  color: #ffffff;
+  border-color: #000000;
+}
+
+:root[data-theme="retro"] .sidebar-sep {
+  background: #808080;
+  height: 2px;
+  box-shadow: 0 1px 0 #ffffff;
+}
+
+/* Page header sits on the black desktop: light kicker, plain light title
+   (not a floating title bar), light subtitle. */
+:root[data-theme="retro"] .admin-header .kicker {
+  color: #ffd966;
+}
+
+:root[data-theme="retro"] .admin-header .muted-copy {
+  color: #cfd8ff;
+}
+
+:root[data-theme="retro"] .admin-header h1 {
+  margin: 0;
+  padding: 0;
+  display: block;
+  background: none;
+  color: #ffffff;
+}
+
+:root[data-theme="retro"] .admin-header h1::after {
+  content: none;
+}
+
+/* Collection / nav tabs become small bevelled buttons. */
+:root[data-theme="retro"] .tab {
+  background: #c0c0c0;
+  color: #000000;
+  border: 1px solid #000000;
+  font-weight: 700;
+  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
+}
+
+:root[data-theme="retro"] .tab:hover {
+  background: #d4d0c8;
+  color: #000000;
+}
+
+:root[data-theme="retro"] .tab.is-active {
+  background: linear-gradient(to right, #000078, 80%, #0f80cd);
+  color: #ffffff;
+}
+
+/* Metric cards = sunken white stat boxes with crisp black numbers. */
+:root[data-theme="retro"] .metric-card {
+  background: #ffffff;
+  border: 1px solid #000000;
+  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
+}
+
+:root[data-theme="retro"] .metric-card span {
+  color: #404040;
+}
+
+:root[data-theme="retro"] .metric-card strong {
+  color: #000000;
+}
+
+/* The "+ Collection" popover becomes a small floating window. */
+:root[data-theme="retro"] .new-collection-body {
+  background: #c0c0c0;
+  border: 1px solid #000000;
+  box-shadow: var(--shadow);
+  color: #000000;
+}
+
+/* The storage inline edit form panel. */
+:root[data-theme="retro"] .storage-edit-form {
+  background: #c0c0c0;
+  border: 1px solid #000000;
+  box-shadow: var(--shadow);
+}
diff --git a/docker-compose-prod.yml b/docker-compose-prod.yml
new file mode 100644
index 0000000..4b0bbcd
--- /dev/null
+++ b/docker-compose-prod.yml
@@ -0,0 +1,22 @@
+services:
+  app:
+    image: tea.chunkbyte.com/kato/warpbox-dev:latest
+    container_name: warpbox-dev
+    env_file:
+      - .prod.env
+    environment:
+      WARPBOX_ADDR: ":8080"
+      WARPBOX_DATA_DIR: /data
+      WARPBOX_STATIC_DIR: /app/static
+      WARPBOX_TEMPLATE_DIR: /app/templates
+    volumes:
+      - ./data:/data:Z
+    ports:
+      - "6070:8080"
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD-SHELL", "wget -qO- http://127.0.0.1:8080/health >/dev/null || exit 1"]
+      interval: 30s
+      timeout: 3s
+      start_period: 10s
+      retries: 3