From dbb044ced400dfc7b2e63694468be201a6d2ea46 Mon Sep 17 00:00:00 2001
From: Desmond Edem <edemintech@gmail.com>
Date: Sun, 17 May 2026 09:26:24 +0100
Subject: [PATCH] feat: polish community gallery

---
 apps/web/src/components/Gallery.tsx   | 215 +++++++++++++++++++-------
 apps/web/src/components/MiniDots.tsx  |  60 +++++++
 apps/web/src/components/Templates.tsx |  55 +------
 apps/web/src/pages/GalleryPage.tsx    |  11 ++
 4 files changed, 234 insertions(+), 107 deletions(-)
 create mode 100644 apps/web/src/components/MiniDots.tsx

diff --git a/apps/web/src/components/Gallery.tsx b/apps/web/src/components/Gallery.tsx
index bfbb29c..aacedc2 100644
--- a/apps/web/src/components/Gallery.tsx
+++ b/apps/web/src/components/Gallery.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { ApiError, fetchGallery } from '../lib/api'
 import { FatalError } from './FatalError'
+import { MiniDots } from './MiniDots'
 import type { GallerySort, GallerySummary } from '../lib/api.types'
 
 const colors = {
@@ -34,6 +35,29 @@ function formatDate(iso: string): string {
   return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
 }
 
+// Visually distinct thumbnail accents. Six colours already used elsewhere in
+// the design system; no new colours introduced for this.
+const GALLERY_COLOURS = [
+  '#00e5ff', // cyan
+  '#00e676', // green
+  '#ffab00', // amber
+  '#d500f9', // magenta
+  '#ff5252', // coral
+  '#ffd600', // yellow
+] as const
+
+// Simple FNV-1a-style hash; deterministic so the same slug always picks the
+// same palette index. Stable across reloads and across the config's position
+// in the result list.
+function slugToColour(slug: string): string {
+  let hash = 2166136261
+  for (let i = 0; i < slug.length; i++) {
+    hash ^= slug.charCodeAt(i)
+    hash = Math.imul(hash, 16777619)
+  }
+  return GALLERY_COLOURS[Math.abs(hash) % GALLERY_COLOURS.length]
+}
+
 export const Gallery: React.FC = () => {
   const navigate = useNavigate()
 
@@ -302,7 +326,7 @@ const GalleryCard: React.FC<{
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       style={{
-        padding: 16,
+        padding: 0,
         background: colors.cardBackground,
         border: `1px solid ${hovered ? colors.borderHover : colors.border}`,
         borderRadius: 8,
@@ -311,68 +335,153 @@ const GalleryCard: React.FC<{
         cursor: 'pointer',
         display: 'flex',
         flexDirection: 'column',
-        gap: 8,
+        overflow: 'hidden',
       }}
     >
       <div
         style={{
-          color: colors.textPrimary,
-          fontSize: 14,
-          fontWeight: 600,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
+          position: 'relative',
+          height: 110,
+          background: '#080f1e',
+          borderBottom: `1px solid ${colors.border}`,
+          flexShrink: 0,
         }}
       >
-        {item.title}
+        <MiniDots color={slugToColour(item.slug)} />
+        <CounterOverlay views={item.viewCount} forks={item.forkCount} />
       </div>
 
-      <div
-        style={{
-          color: colors.textMuted,
-          fontSize: 10,
-          display: 'flex',
-          gap: 10,
-          flexWrap: 'wrap',
-        }}
-      >
-        {item.author && <span>@{item.author.username}</span>}
-        <span>
-          {item.viewCount} view{item.viewCount !== 1 ? 's' : ''}
-        </span>
-        <span>
-          {item.forkCount} fork{item.forkCount !== 1 ? 's' : ''}
-        </span>
-        <span>{formatDate(item.createdAt)}</span>
-      </div>
+      <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <div
+          style={{
+            color: colors.textPrimary,
+            fontSize: 14,
+            fontWeight: 600,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {item.title}
+        </div>
 
-      {item.tags.length > 0 && (
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
-          {item.tags.map((t) => {
-            const isActive = activeTag === t
-            return (
-              <span
-                key={t}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onTagClick(t)
-                }}
-                style={{
-                  padding: '2px 8px',
-                  background: isActive ? `${colors.primary}20` : 'rgba(0, 229, 255, 0.06)',
-                  border: `1px solid ${isActive ? colors.primary : colors.border}`,
-                  borderRadius: 10,
-                  color: isActive ? colors.primary : colors.textSecondary,
-                  fontSize: 9,
-                  cursor: 'pointer',
-                }}
-              >
-                {t}
-              </span>
-            )
-          })}
+        <div
+          style={{
+            color: colors.textMuted,
+            fontSize: 10,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 10,
+            flexWrap: 'wrap',
+          }}
+        >
+          {item.author && <AuthorAvatar username={item.author.username} />}
+          {item.author && <span>@{item.author.username}</span>}
+          <span>{formatDate(item.createdAt)}</span>
         </div>
-      )}
+
+        {item.tags.length > 0 && (
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+            {item.tags.map((t) => {
+              const isActive = activeTag === t
+              return (
+                <span
+                  key={t}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onTagClick(t)
+                  }}
+                  style={{
+                    padding: '2px 8px',
+                    background: isActive ? `${colors.primary}20` : 'rgba(0, 229, 255, 0.06)',
+                    border: `1px solid ${isActive ? colors.primary : colors.border}`,
+                    borderRadius: 10,
+                    color: isActive ? colors.primary : colors.textSecondary,
+                    fontSize: 9,
+                    cursor: 'pointer',
+                  }}
+                >
+                  {t}
+                </span>
+              )
+            })}
+          </div>
+        )}
+      </div>
     </div>
   )
 }
+
+const CounterOverlay: React.FC<{
+  views: number
+  forks: number
+}> = ({ views, forks }) => (
+  <div
+    style={{
+      position: 'absolute',
+      top: 6,
+      right: 6,
+      display: 'flex',
+      gap: 6,
+      pointerEvents: 'none',
+    }}
+  >
+    <CounterChip icon="eye" value={views} />
+    <CounterChip icon="fork" value={forks} />
+  </div>
+)
+
+const CounterChip: React.FC<{
+  icon: 'eye' | 'fork'
+  value: number
+}> = ({ icon, value }) => (
+  <span
+    aria-label={`${value} ${icon === 'eye' ? 'views' : 'forks'}`}
+    style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 3,
+      padding: '2px 6px',
+      background: 'rgba(8, 15, 30, 0.75)',
+      border: `1px solid ${colors.border}`,
+      borderRadius: 3,
+      fontSize: 9,
+      color: colors.textSecondary,
+      letterSpacing: '0.06em',
+    }}
+  >
+    {icon === 'eye' ? (
+      <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5C21.3 7.6 17 4.5 12 4.5zM12 17a5 5 0 110-10 5 5 0 010 10zm0-8a3 3 0 100 6 3 3 0 000-6z" />
+      </svg>
+    ) : (
+      <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M6 3a3 3 0 00-1 5.83v6.34a3.001 3.001 0 102 0V15a2 2 0 002-2V9h3.17a3.001 3.001 0 100-2H9v6a4 4 0 01-4 4v.17A3.001 3.001 0 006 3z" />
+      </svg>
+    )}
+    {value}
+  </span>
+)
+
+const AuthorAvatar: React.FC<{ username: string }> = ({ username }) => (
+  <div
+    aria-hidden
+    style={{
+      width: 18,
+      height: 18,
+      borderRadius: '50%',
+      background: 'rgba(0, 229, 255, 0.08)',
+      border: `1px solid ${colors.border}`,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: 8,
+      color: colors.primary,
+      fontWeight: 700,
+      letterSpacing: 0,
+      flexShrink: 0,
+    }}
+  >
+    {username.slice(0, 2).toUpperCase()}
+  </div>
+)
diff --git a/apps/web/src/components/MiniDots.tsx b/apps/web/src/components/MiniDots.tsx
new file mode 100644
index 0000000..95c33e5
--- /dev/null
+++ b/apps/web/src/components/MiniDots.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+
+/**
+ * Generic preview glyph used in card thumbnails. Same topology for every
+ * config — only the stroke colour of the top row changes. The bottom row is
+ * always green to evoke "services running."
+ *
+ * Per-card visual variety is deferred to a future phase that can render real
+ * previews from each config's YAML.
+ */
+export const MiniDots: React.FC<{ color: string }> = ({ color }) => (
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 200 120"
+    preserveAspectRatio="none"
+    style={{ display: 'block' }}
+  >
+    <line
+      x1="20"
+      y1="30"
+      x2="180"
+      y2="30"
+      stroke={color}
+      strokeWidth="0.5"
+      strokeDasharray="2 3"
+      opacity="0.5"
+    />
+    <line x1="100" y1="30" x2="100" y2="90" stroke={color} strokeWidth="0.5" opacity="0.5" />
+    <line x1="40" y1="90" x2="160" y2="90" stroke={color} strokeWidth="0.5" opacity="0.5" />
+    {[30, 80, 130, 170].map((x, i) => (
+      <g key={`top-${i}`}>
+        <rect
+          x={x - 12}
+          y={20}
+          width="24"
+          height="20"
+          rx="2"
+          fill="rgba(12, 21, 39, 0.6)"
+          stroke={color}
+          strokeWidth="0.5"
+        />
+        <circle cx={x} cy="30" r="2" fill={color} />
+      </g>
+    ))}
+    {[40, 80, 120, 160].map((x, i) => (
+      <rect
+        key={`bot-${i}`}
+        x={x - 10}
+        y={80}
+        width="20"
+        height="14"
+        rx="1.5"
+        fill="rgba(12, 21, 39, 0.6)"
+        stroke="#00e676"
+        strokeWidth="0.4"
+      />
+    ))}
+  </svg>
+)
diff --git a/apps/web/src/components/Templates.tsx b/apps/web/src/components/Templates.tsx
index 9d40ecc..54dbc60 100644
--- a/apps/web/src/components/Templates.tsx
+++ b/apps/web/src/components/Templates.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { ApiError, fetchTemplate, fetchTemplates, createTemplateFromSlug } from '../lib/api'
 import { FatalError } from './FatalError'
+import { MiniDots } from './MiniDots'
 import { useAuth } from '../context/AuthContext'
 import type { TemplateCategory, TemplateSummary } from '../lib/api.types'
 
@@ -52,60 +53,6 @@ const CATEGORY_OPTIONS: CategoryOption[] = [
   { value: 'home-automation', label: 'HOME AUTOMATION' },
 ]
 
-// Generic preview glyph. Same topology for every template — only the stroke
-// colour changes. Per-template visual variety is deferred to a future phase
-// that can render real previews from the YAML.
-const MiniDots: React.FC<{ color: string }> = ({ color }) => (
-  <svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 200 120"
-    preserveAspectRatio="none"
-    style={{ display: 'block' }}
-  >
-    <line
-      x1="20"
-      y1="30"
-      x2="180"
-      y2="30"
-      stroke={color}
-      strokeWidth="0.5"
-      strokeDasharray="2 3"
-      opacity="0.5"
-    />
-    <line x1="100" y1="30" x2="100" y2="90" stroke={color} strokeWidth="0.5" opacity="0.5" />
-    <line x1="40" y1="90" x2="160" y2="90" stroke={color} strokeWidth="0.5" opacity="0.5" />
-    {[30, 80, 130, 170].map((x, i) => (
-      <g key={`top-${i}`}>
-        <rect
-          x={x - 12}
-          y={20}
-          width="24"
-          height="20"
-          rx="2"
-          fill="rgba(12, 21, 39, 0.6)"
-          stroke={color}
-          strokeWidth="0.5"
-        />
-        <circle cx={x} cy="30" r="2" fill={color} />
-      </g>
-    ))}
-    {[40, 80, 120, 160].map((x, i) => (
-      <rect
-        key={`bot-${i}`}
-        x={x - 10}
-        y={80}
-        width="20"
-        height="14"
-        rx="1.5"
-        fill="rgba(12, 21, 39, 0.6)"
-        stroke="#00e676"
-        strokeWidth="0.4"
-      />
-    ))}
-  </svg>
-)
-
 export const Templates: React.FC = () => {
   const navigate = useNavigate()
   const { isLoggedIn } = useAuth()
diff --git a/apps/web/src/pages/GalleryPage.tsx b/apps/web/src/pages/GalleryPage.tsx
index a2dad36..dbffa67 100644
--- a/apps/web/src/pages/GalleryPage.tsx
+++ b/apps/web/src/pages/GalleryPage.tsx
@@ -8,6 +8,7 @@ const colors = {
   border: 'rgba(0, 229, 255, 0.12)',
   textPrimary: '#e0f7fa',
   textSecondary: '#78909c',
+  textMuted: '#455a64',
 }
 
 const fonts = {
@@ -68,6 +69,16 @@ export const GalleryPage: React.FC = () => {
           >
             GALLERY
           </h1>
+          <span
+            style={{
+              color: colors.textMuted,
+              fontSize: 11,
+              fontWeight: 400,
+              letterSpacing: 0,
+            }}
+          >
+            // what the community is running
+          </span>
         </div>
         <UserMenu />
       </div>