More things

2026-09-21 23:02:37 +02:00
parent 2b29d55688
commit 42084aeeb4
16 changed files with 1324 additions and 274 deletions
--- a/frontend/app/components/Container.vue
+++ b/frontend/app/components/Container.vue
@@ -20,7 +20,7 @@
 <style lang="scss" scoped>
 .tui-frame {
  position: relative;
-  margin: 15px;
+  margin: var(--container-margin, 15px);
  background: var(--color-background-fore);
  box-shadow: 4px -4px 0px 0px var(--color-container-shadow);
 }
--- a/frontend/app/components/Footer.vue
+++ b/frontend/app/components/Footer.vue
@@ -16,6 +16,7 @@
    flex-direction: column;
    justify-content: center;
    margin-top: 60px;
+    margin-bottom: 60px;
 }

 span {
--- a/frontend/app/components/layouts/AdminLayout.vue
+++ b/frontend/app/components/layouts/AdminLayout.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import AdminSidebar from '~/components/parts/AdminSidebar.vue';
+</script>
+
+<template>
+  <div class="admin-shell">
+    <AdminSidebar />
+    <main class="admin-main">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.admin-shell {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  background: var(--color-background);
+}
+
+.admin-main {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.admin-main :slotted(*) {
+  flex: 1;
+}
+
+@media screen and (max-width: 900px) {
+  .admin-shell {
+    flex-direction: column;
+  }
+}
+</style>
--- a/frontend/app/components/parts/AdminSidebar.vue
+++ b/frontend/app/components/parts/AdminSidebar.vue
@@ -0,0 +1,225 @@
+<script setup lang="ts">
+const auth = useAuth()
+const route = useRoute()
+const localePath = useLocalePath()
+
+const orderCount = useState<number | null>('admin-order-count', () => null)
+
+const navItems = [
+  { key: 'dashboard', to: '/admin', label: 'admin.sidebar.nav_dashboard' },
+  { key: 'orders', to: '/admin/orders', label: 'admin.sidebar.nav_orders' }
+]
+
+const isActive = (key: string) =>
+  key === 'dashboard'
+    ? route.path === '/admin' || route.path === '/admin/'
+    : route.path.startsWith('/admin/orders')
+
+const onLogout = () => {
+  auth.logout()
+  navigateTo('/admin/login')
+}
+</script>
+
+<template>
+  <aside class="admin-sidebar">
+    <div class="sidebar-head">
+      <span class="sidebar-title">{{ $t('admin.sidebar.title') }}</span>
+    </div>
+
+    <span class="sidebar-rule" aria-hidden="true">══════════════════</span>
+
+    <nav class="sidebar-nav">
+      <NuxtLink
+        v-for="item in navItems"
+        :key="item.key"
+        :to="item.to"
+        class="nav-item"
+        :class="{ 'nav-item-active': isActive(item.key) }"
+      >
+        <span class="nav-sep" aria-hidden="true">{{ item.key === 'dashboard' ? '▸' : '├' }}</span>
+        <span class="nav-label">{{ $t(item.label) }}</span>
+        <span v-if="item.key === 'orders' && orderCount !== null" class="nav-badge">[{{ orderCount }}]</span>
+      </NuxtLink>
+    </nav>
+
+    <div class="sidebar-bottom">
+      <span class="sidebar-rule" aria-hidden="true">══════════════════</span>
+      <NuxtLink :to="localePath('index')" class="nav-item nav-item-site">
+        <span class="nav-sep" aria-hidden="true">←</span>
+        <span class="nav-label">{{ $t('admin.sidebar.back_site') }}</span>
+      </NuxtLink>
+      <button class="sidebar-logout" @click="onLogout">&gt;_ {{ $t('admin.dashboard.logout') }}</button>
+    </div>
+  </aside>
+</template>
+
+<style lang="scss" scoped>
+.admin-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 220px;
+  flex-shrink: 0;
+  padding: 16px 12px;
+  background: var(--color-background-fore);
+  border-right: 1px solid var(--color-border-color);
+  box-shadow: inset -2px 0 0 0 var(--color-container-shadow);
+}
+
+.sidebar-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 0 6px 8px;
+}
+
+.sidebar-title {
+  font-family: 'Hurmit', monospace;
+  font-size: 1rem;
+  letter-spacing: 2px;
+  color: var(--color-text);
+}
+
+.sidebar-rule {
+  display: block;
+  font-family: 'Hurmit', monospace;
+  font-size: 8px;
+  line-height: 1;
+  color: var(--color-border-color);
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 4px 0 12px;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  font-family: 'Hurmit', monospace;
+  font-size: 0.85rem;
+  color: var(--color-text);
+  text-decoration: none;
+  text-shadow: none;
+  border: 1px solid transparent;
+  transition: all 120ms steps(3);
+
+  .nav-sep {
+    color: var(--color-text);
+    opacity: 0.35;
+    font-size: 0.75rem;
+  }
+
+  &:hover {
+    background-color: var(--color-hover);
+    border-color: var(--color-border-color);
+
+    .nav-sep {
+      color: var(--color-link);
+      opacity: 1;
+    }
+  }
+}
+
+.nav-item-active {
+  color: var(--color-link);
+  border-color: var(--color-link);
+
+  .nav-sep,
+  .nav-badge {
+    color: var(--color-link);
+    opacity: 1;
+  }
+}
+
+.nav-badge {
+  margin-left: auto;
+  font-size: 0.72rem;
+  color: var(--color-link);
+  opacity: 0.7;
+}
+
+.sidebar-bottom {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sidebar-logout {
+  font-family: 'Hurmit', monospace;
+  font-size: 0.85rem;
+  color: var(--color-text);
+  background: transparent;
+  border: 1px solid var(--color-border-color);
+  padding: 6px 14px;
+  margin-top: 8px;
+  cursor: pointer;
+  text-align: left;
+  transition: all 120ms steps(3);
+
+  &:hover {
+    color: var(--color-link);
+    border-color: var(--color-link);
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .admin-sidebar {
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    border-right: none;
+    border-bottom: 1px solid var(--color-border-color);
+    box-shadow: inset 0 -2px 0 0 var(--color-container-shadow);
+  }
+
+  .sidebar-head {
+    padding: 0;
+    flex-shrink: 0;
+  }
+
+  .sidebar-rule {
+    display: none;
+  }
+
+  .sidebar-nav {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .sidebar-bottom {
+    margin-top: 0;
+    margin-left: auto;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .sidebar-logout {
+    margin-top: 0;
+    white-space: nowrap;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .nav-item {
+    font-size: 0.75rem;
+    padding: 4px 8px;
+  }
+
+  .sidebar-logout {
+    font-size: 0.75rem;
+    padding: 4px 10px;
+  }
+}
+</style>
--- a/frontend/app/components/parts/StickyHeader.vue
+++ b/frontend/app/components/parts/StickyHeader.vue
@@ -89,6 +89,13 @@ onUnmounted(() => window.removeEventListener('scroll', onScroll));
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;

+    // Below 900px the full header is hidden, so keep the bar always shown.
+    @media screen and (max-width: 900px) {
+        transform: translateY(0);
+        opacity: 1;
+        pointer-events: auto;
+    }
+
    &.visible {
        transform: translateY(0);
        opacity: 1;
--- a/frontend/app/components/parts/TableHeader.vue
+++ b/frontend/app/components/parts/TableHeader.vue
@@ -120,7 +120,7 @@ const preloadImages = (imageArray) => {
 <style lang="scss" scoped>
 .header {
    position: relative;
-    margin-top: 30px;
+    margin-top: 42px;
    user-select: none;
    display: flex;
    justify-content: space-between;
@@ -129,6 +129,10 @@ const preloadImages = (imageArray) => {
        flex-direction: column;
        gap: 8px;
    }
+
+    @media screen and (max-width: 900px) {
+        display: none;
+    }
 }

 .header-container {
@@ -139,6 +143,12 @@ const preloadImages = (imageArray) => {
            margin-top: 20px;
        }
    }
+
+    &.right {
+        :deep(.site-options) {
+            margin-top: 12px;
+        }
+    }
 }

 .undertable-wrapper {
@@ -153,16 +163,8 @@ const preloadImages = (imageArray) => {
        margin-top: -340px;
    }

-    @media screen and (max-width: 900px) and (min-width: 600px) {
-        margin-top: -240px;
-    }
-
-    @media screen and (max-width: 600px) {
-        margin-top: -300px;
-    }
-
-    @media screen and (max-width: 480px) {
-        margin-top: -340px;
+    @media screen and (max-width: 900px) {
+        display: none;
    }
 }

--- a/frontend/app/pages/admin/index.vue
+++ b/frontend/app/pages/admin/index.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import AdminLayout from '~/components/layouts/AdminLayout.vue';
+
 definePageMeta({ middleware: 'admin-auth' });

 useHead({
@@ -10,34 +12,9 @@ const { getAuth } = useApi();
 const auth = useAuth();

 const stats = ref<any>(null);
-const orders = ref<any[]>([]);
 const loading = ref(true);
 const errorMsg = ref('');

-const COLOR_HEX: Record<string, string> = {
-  red: '#d64545',
-  gold: '#d4af37',
-  silver: '#c0c0c0',
-  orange: '#e0823c',
-  yellow: '#e2cf3c',
-  green: '#5fae4e',
-  blue: '#4c8be0',
-  purple: '#9b59d0',
-  black: '#1a1a1a',
-  white: '#f2f2f2',
-  pink: '#e88fb3',
-  turquoise: '#40c4b8',
-  teal: '#17857c',
-  navy: '#34549c',
-  lavender: '#b98fe0',
-  magenta: '#cf479f',
-  lime: '#a8d14e',
-  coral: '#ef8368'
-};
-
-const orderSwatch = (order: any) =>
-  order.color === 'custom' ? order.customColor : COLOR_HEX[order.color] || 'transparent';
-
 const formatUptime = (seconds: number) => {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
@@ -68,28 +45,15 @@ const loadStats = async () => {
  }
 };

-const loadOrders = async () => {
-  try {
-    orders.value = await getAuth('/hibolia/orders');
-  } catch (e: any) {
-    if (e?.status === 401) {
-      redirectToLogin();
-    }
-  }
-};
-
-const formatDate = (value: string) => new Date(value).toLocaleString();
-
 onMounted(async () => {
  const me = await auth.fetchMe();
  if (!me) {
    redirectToLogin();
    return;
  }
-  await Promise.all([loadStats(), loadOrders()]);
+  await loadStats();
  intervalId = setInterval(() => {
    loadStats();
-    loadOrders();
  }, 30000);
 });

@@ -97,17 +61,12 @@ let intervalId: ReturnType<typeof setInterval> | null = null;
 onBeforeUnmount(() => {
  if (intervalId) clearInterval(intervalId);
 });
-
-const onLogout = () => redirectToLogin();
 </script>

 <template>
-  <div class="dash-screen">
+  <AdminLayout>
    <Container class="dash-frame">
-      <div class="dash-top">
-        <h1 class="dash-title">&gt; {{ $t('admin.dashboard.title') }}</h1>
-        <button class="logout-btn" @click="onLogout">&gt;_ {{ $t('admin.dashboard.logout') }}</button>
-      </div>
+      <h1 class="dash-title">{{ $t('admin.dashboard.title') }}</h1>

      <p v-if="auth.user.value" class="dash-welcome">
        {{ $t('admin.dashboard.welcome') }} <span class="hl">{{ auth.user.value.username }}</span>
@@ -117,118 +76,54 @@ const onLogout = () => redirectToLogin();
      <p v-if="loading" class="dash-loading blink">{{ $t('admin.dashboard.loading') }}</p>

      <template v-if="stats && !loading">
-        <h2 class="dash-section">{{ $t('admin.dashboard.section_status') }}</h2>
-        <div class="stat-grid">
-          <div class="stat-card">
-            <span class="stat-label">{{ $t('admin.dashboard.status') }}</span>
-            <span class="stat-value ok">{{ stats.status }}</span>
+        <section>
+          <h2 class="dash-section">{{ $t('admin.dashboard.section_status') }}</h2>
+          <div class="stat-grid">
+            <div class="stat-card">
+              <span class="stat-label">{{ $t('admin.dashboard.status') }}</span>
+              <span class="stat-value ok">{{ stats.status }}</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-label">{{ $t('admin.dashboard.mongo') }}</span>
+              <span class="stat-value" :class="stats.mongo === 'connected' ? 'ok' : 'bad'">{{ stats.mongo }}</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-label">{{ $t('admin.dashboard.uptime') }}</span>
+              <span class="stat-value">{{ formatUptime(stats.uptime) }}</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-label">{{ $t('admin.dashboard.memory_rss') }}</span>
+              <span class="stat-value">{{ formatMB(stats.memory.rss) }}</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-label">{{ $t('admin.dashboard.memory_heap') }}</span>
+              <span class="stat-value">{{ formatMB(stats.memory.heapUsed) }}</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-label">{{ $t('admin.dashboard.total_cells') }}</span>
+              <span class="stat-value">{{ stats.grid.totalCells }}</span>
+            </div>
          </div>
-          <div class="stat-card">
-            <span class="stat-label">{{ $t('admin.dashboard.mongo') }}</span>
-            <span class="stat-value" :class="stats.mongo === 'connected' ? 'ok' : 'bad'">{{ stats.mongo }}</span>
-          </div>
-          <div class="stat-card">
-            <span class="stat-label">{{ $t('admin.dashboard.uptime') }}</span>
-            <span class="stat-value">{{ formatUptime(stats.uptime) }}</span>
-          </div>
-          <div class="stat-card">
-            <span class="stat-label">{{ $t('admin.dashboard.memory_rss') }}</span>
-            <span class="stat-value">{{ formatMB(stats.memory.rss) }}</span>
-          </div>
-          <div class="stat-card">
-            <span class="stat-label">{{ $t('admin.dashboard.memory_heap') }}</span>
-            <span class="stat-value">{{ formatMB(stats.memory.heapUsed) }}</span>
-          </div>
-          <div class="stat-card">
-            <span class="stat-label">{{ $t('admin.dashboard.total_cells') }}</span>
-            <span class="stat-value">{{ stats.grid.totalCells }}</span>
-          </div>
-        </div>
-
-        <h2 class="dash-section">{{ $t('admin.dashboard.section_orders') }} <span class="hl">[{{ orders.length }}]</span></h2>
-        <p v-if="!orders.length" class="dash-loading">{{ $t('admin.dashboard.orders_empty') }}</p>
-        <table v-else class="orders-table">
-          <thead>
-            <tr>
-              <th>{{ $t('admin.dashboard.col_date') }}</th>
-              <th>{{ $t('admin.dashboard.col_name') }}</th>
-              <th>{{ $t('admin.dashboard.col_email') }}</th>
-              <th>{{ $t('admin.dashboard.col_message') }}</th>
-              <th>{{ $t('admin.dashboard.col_color') }}</th>
-              <th>{{ $t('admin.dashboard.col_shipping') }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="order in orders" :key="order._id">
-              <td class="nowrap">{{ formatDate(order.createdAt) }}</td>
-              <td>{{ order.name }} {{ order.surname }}</td>
-              <td>{{ order.email }}</td>
-              <td class="msg-cell">{{ order.message }}</td>
-              <td>
-                <span class="color-chip">
-                  <span class="swatch" :style="{ background: orderSwatch(order) }" aria-hidden="true"></span>
-                  {{ $t(`order.hibolia.colors.${order.color}`) }}<template v-if="order.color === 'custom'"> {{ order.customColor }}</template>
-                </span>
-              </td>
-              <td class="msg-cell">{{ order.shipping }}</td>
-            </tr>
-          </tbody>
-        </table>
+        </section>
      </template>
    </Container>
-  </div>
+  </AdminLayout>
 </template>

 <style lang="scss" scoped>
-.dash-screen {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  background: var(--color-background);
-  overflow-y: auto;
-}
-
 .dash-frame {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+  --container-margin: 0;

  :deep(.tui-inner) {
-    flex: 1;
-    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
+    padding-bottom: 96px;
  }
 }

-.dash-top {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
 .dash-title {
  font-family: 'Hurmit', monospace;
-  margin-bottom: 8px;
-}
-
-.logout-btn {
-  font-family: 'Hurmit', monospace;
-  font-size: 0.85rem;
-  color: var(--color-text);
-  background: transparent;
-  border: 1px solid var(--color-border-color);
-  padding: 6px 14px;
-  cursor: pointer;
-  transition: all 120ms steps(3);
-
-  &:hover {
-    color: var(--color-link);
-    border-color: var(--color-link);
-  }
+  margin: 44px 0 32px;
 }

 .dash-welcome {
@@ -259,7 +154,7 @@ const onLogout = () => redirectToLogin();
  font-family: 'Hurmit', monospace;
  font-size: 1rem;
  color: var(--color-link);
-  margin: 28px 0 12px;
+  margin: 64px 0 18px;
  display: flex;
  align-items: baseline;
  gap: 16px;
@@ -270,53 +165,6 @@ const onLogout = () => redirectToLogin();
  }
 }

-.orders-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.85rem;
-
-  th,
-  td {
-    border: 1px solid var(--color-border-color);
-    padding: 6px 10px;
-    text-align: left;
-    vertical-align: top;
-  }
-
-  th {
-    font-family: 'Hurmit', monospace;
-    font-size: 0.72rem;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    color: var(--color-link);
-    background: var(--color-background-line);
-  }
-}
-
-.nowrap {
-  white-space: nowrap;
-}
-
-.msg-cell {
-  white-space: pre-wrap;
-  word-break: break-word;
-  min-width: 200px;
-}
-
-.color-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  white-space: nowrap;
-}
-
-.swatch {
-  width: 12px;
-  height: 12px;
-  border: 1px solid var(--color-border-color);
-  flex-shrink: 0;
-}
-
 .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
--- a/frontend/app/pages/admin/orders.vue
+++ b/frontend/app/pages/admin/orders.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import AdminLayout from '~/components/layouts/AdminLayout.vue';
+
+definePageMeta({ middleware: 'admin-auth' });
+
+useHead({
+  title: 'Hibolia Orders — Admin',
+  meta: [{ name: 'robots', content: 'noindex, nofollow', tagPriority: 'high' }]
+});
+
+const { getAuth } = useApi();
+const auth = useAuth();
+
+const orders = ref<any[]>([]);
+const loading = ref(true);
+
+const orderCount = useState<number | null>('admin-order-count', () => null);
+watch(orders, (value) => {
+  orderCount.value = value.length;
+});
+
+const COLOR_HEX: Record<string, string> = {
+  red: '#d64545',
+  gold: '#d4af37',
+  silver: '#c0c0c0',
+  orange: '#e0823c',
+  yellow: '#e2cf3c',
+  green: '#5fae4e',
+  blue: '#4c8be0',
+  purple: '#9b59d0',
+  black: '#1a1a1a',
+  white: '#f2f2f2',
+  pink: '#e88fb3',
+  turquoise: '#40c4b8',
+  teal: '#17857c',
+  navy: '#34549c',
+  lavender: '#b98fe0',
+  magenta: '#cf479f',
+  lime: '#a8d14e',
+  coral: '#ef8368'
+};
+
+const orderSwatch = (order: any) =>
+  order.color === 'custom' ? order.customColor : COLOR_HEX[order.color] || 'transparent';
+
+const redirectToLogin = () => {
+  auth.logout();
+  navigateTo('/admin/login');
+};
+
+const loadOrders = async () => {
+  try {
+    orders.value = await getAuth('/hibolia/orders');
+  } catch (e: any) {
+    if (e?.status === 401) {
+      redirectToLogin();
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+const formatDate = (value: string) => new Date(value).toLocaleString();
+
+onMounted(async () => {
+  const me = await auth.fetchMe();
+  if (!me) {
+    redirectToLogin();
+    return;
+  }
+  await loadOrders();
+  intervalId = setInterval(() => {
+    loadOrders();
+  }, 30000);
+});
+
+let intervalId: ReturnType<typeof setInterval> | null = null;
+onBeforeUnmount(() => {
+  if (intervalId) clearInterval(intervalId);
+});
+</script>
+
+<template>
+  <AdminLayout>
+    <Container class="dash-frame">
+      <h1 class="dash-title">{{ $t('admin.dashboard.section_orders') }} <span class="hl">[{{ orders.length }}]</span></h1>
+
+      <p v-if="loading" class="dash-loading blink">{{ $t('admin.dashboard.loading') }}</p>
+
+      <p v-if="!loading && !orders.length" class="dash-loading">{{ $t('admin.dashboard.orders_empty') }}</p>
+      <table v-else-if="!loading" class="orders-table">
+        <thead>
+          <tr>
+            <th>{{ $t('admin.dashboard.col_date') }}</th>
+            <th>{{ $t('admin.dashboard.col_name') }}</th>
+            <th>{{ $t('admin.dashboard.col_email') }}</th>
+            <th>{{ $t('admin.dashboard.col_message') }}</th>
+            <th>{{ $t('admin.dashboard.col_color') }}</th>
+            <th>{{ $t('admin.dashboard.col_shipping') }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="order in orders" :key="order._id">
+            <td class="nowrap">{{ formatDate(order.createdAt) }}</td>
+            <td>{{ order.name }} {{ order.surname }}</td>
+            <td>{{ order.email }}</td>
+            <td class="msg-cell">{{ order.message }}</td>
+            <td>
+              <span class="color-chip">
+                <span class="swatch" :style="{ background: orderSwatch(order) }" aria-hidden="true"></span>
+                {{ $t(`order.hibolia.colors.${order.color}`) }}<template v-if="order.color === 'custom'"> {{ order.customColor }}</template>
+              </span>
+            </td>
+            <td class="msg-cell">{{ order.shipping }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </Container>
+  </AdminLayout>
+</template>
+
+<style lang="scss" scoped>
+.dash-frame {
+  --container-margin: 0;
+
+  :deep(.tui-inner) {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding-bottom: 96px;
+  }
+}
+
+.dash-title {
+  font-family: 'Hurmit', monospace;
+  margin: 44px 0 32px;
+
+  .hl {
+    color: var(--color-text);
+    opacity: 0.6;
+  }
+}
+
+.dash-loading {
+  font-family: 'Hurmit', monospace;
+  color: var(--color-link);
+  margin-top: 16px;
+}
+
+.orders-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+
+  th,
+  td {
+    border: 1px solid var(--color-border-color);
+    padding: 6px 10px;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  th {
+    font-family: 'Hurmit', monospace;
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--color-link);
+    background: var(--color-background-line);
+  }
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.msg-cell {
+  white-space: pre-wrap;
+  word-break: break-word;
+  min-width: 200px;
+}
+
+.color-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.swatch {
+  width: 12px;
+  height: 12px;
+  border: 1px solid var(--color-border-color);
+  flex-shrink: 0;
+}
+
+.blink {
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  0%, 50%, 100% { opacity: 1; }
+  25%, 75% { opacity: 0; }
+}
+</style>