add shop promo to header

Author: marle3003

webui/src/assets/vars.css

@@ -3,6 +3,9 @@
     --color-background-mute:  #2e2e31;
     --color-background-soft: rgb(40,43,51);
     --color-background-light: #393a40;
+    
+    --color-background-promo: #323743;
+    --color-border-promo: rgba(211, 212, 213, 0.25);
 
     --color-border: #282b33;
 
@@ -105,6 +108,9 @@
     --color-background-light: #e5e9f0;
     --color-border: #e2e8f0;
 
+    --color-background-promo: #fff;
+    --color-border-promo: #dee2e6;
+
     --color-refresh-background: rgb(8, 109, 215);
 
     --color-text: rgb(3,6,11);

webui/src/components/Header.vue

@@ -8,9 +8,11 @@ import { parseMarkdown } from '@/composables/markdown';
 import { Modal } from 'bootstrap';
 import type { AppInfoResponse } from '@/types/dashboard';
 import { useDashboard } from '@/composables/dashboard';
+import { usePromo } from '@/composables/promo';
 
 const isDashboard = import.meta.env.VITE_DASHBOARD === 'true'
 const useDemo = import.meta.env.VITE_USE_DEMO === 'true'
+const promo = usePromo()
 let appInfo: AppInfoResponse | null = null
 const query = ref('')
 const tooltipDark = 'Switch to light mode';
@@ -196,6 +198,15 @@ function navigateAndClose(params: Record<string, string>) {
 
 <template>
   <header>
+<!-- Promotion banner -->
+<div class="promo-banner" v-if="promo.activePromotion.value">
+  <strong>Shop discount!</strong>
+  Get <strong>{{ promo.activePromotion.value.discount }}% off</strong> Mokapi Gear —
+  <span class="d-none d-md-inline">
+    support Mokapi with code in your heart and style on your sleeve.
+  </span>
+  <a href="https://mokapi.myspreadshop.net" class="promo-link ms-2">Visit shop →</a>
+</div>
     <nav class="navbar navbar-expand-lg">
       <div class="container-fluid">
         <a class="navbar-brand" href="./"><img src="/logo-header.svg" height="30" alt="Mokapi home"/></a>
@@ -356,6 +367,29 @@ header {
 header .container-fluid {
   padding: 0;
 }
+.promo-banner {
+  background-color: var(--color-background-promo);
+  border-bottom: 1px solid var(--color-border-promo);
+  color: var(--color-text);
+  text-align: center;
+  padding: 0.5rem 1rem;
+  font-size: 0.95rem;
+  margin-bottom: 5px;
+}
+
+.promo-banner strong {
+  font-weight: 600;
+}
+
+.promo-link {
+  color: var(--color-doc-link);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.promo-link:hover {
+  text-decoration: underline;
+}
 .navbar {
   background-color: var(--color-background);
 }

webui/src/composables/promo.ts

@@ -0,0 +1,17 @@
+import { computed } from 'vue'
+import { promotions, type Promotion } from '@/config/promo'
+
+export function usePromo() {
+  const now = new Date()
+
+  const activePromotion = computed<Promotion | undefined>(() =>
+    promotions.find(p =>
+      p.enabled &&
+      now >= new Date(p.validFrom) &&
+      now <= new Date(p.validUntil)
+    )
+  )
+  return {
+    activePromotion,
+  }
+}

webui/src/config/promo.ts

@@ -0,0 +1,33 @@
+export interface Promotion {
+  enabled: boolean
+  discount: number
+  validFrom: string
+  validUntil: string
+}
+
+export const promotions: Promotion[] = [
+  {
+    enabled: true,
+    discount: 25,
+    validFrom: '2025-12-29',
+    validUntil: '2026-01-06',
+  },
+  {
+    enabled: true,
+    discount: 20,
+    validFrom: '2026-01-13',
+    validUntil: '2026-01-18',
+  },
+  {
+    enabled: true,
+    discount: 20,
+    validFrom: '2026-01-20',
+    validUntil: '2026-01-25',
+  },
+  {
+    enabled: true,
+    discount: 30,
+    validFrom: '2026-01-30',
+    validUntil: '2026-02-01',
+  },
+]