feat(ui): Meilisearch-style polish (badges, glass, grid, skeleton) + theme color\n\n- Add accessible focus ring and kbd styling\n- Add badge/glass/section/accent-border/bg-grid/skeleton utilities\n- Update theme-color + OG meta\n- Ignore sensitive handover file\n\nSee docs/ui/CHANGELOG_UI.md for details

2025-10-19 16:52:02 +02:00 · 2025-10-19 16:52:02 +02:00 · 554ff730e6
commit 554ff730e6
parent 90ccb8b4ec
5 changed files with 252 additions and 2 deletions
--- a/.gitignore
+++ b/.gitignore
@ -47,3 +47,6 @@ test-results/
 # Meilisearch
 data.ms/
 meilisearch-data/
+
+# Sensitive handover docs (do not commit)
+docs/handover/PATHS_AND_CREDENTIALS.md
--- a/QUICK_REFERENCE.md
+++ b/QUICK_REFERENCE.md
@ -0,0 +1,117 @@
+# NaviDocs - Quick Reference
+
+**Critical Paths & Credentials at a Glance**
+
+---
+
+## 🔑 Credentials (CHANGE FOR PRODUCTION!)
+
+| Service | Key/Secret | Location |
+|---------|-----------|----------|
+| **Meilisearch** | `5T66jrwQ8F8cOk4dUlFY0Vp59fMnCsIfi4O6JZl9wzU=` | `/home/setup/navidocs/server/.env` |
+| **JWT Secret** | `your-jwt-secret-here-change-in-production` | `/home/setup/navidocs/server/.env` |
+| **Redis** | No password (local only) | N/A |
+
+---
+
+## 🌐 Access URLs (Windows 11)
+
+| Service | URL |
+|---------|-----|
+| **Frontend** | `http://172.29.75.55:8080/` |
+| **Backend API** | `http://172.29.75.55:8001/` |
+| **Meilisearch** | `http://172.29.75.55:7700/` |
+| **Gitea** | `http://localhost:4000/ggq-admin/navidocs` |
+
+> ⚠️ WSL2 IP (`172.29.75.55`) can change on restart!
+
+---
+
+## 📁 Important Paths
+
+```bash
+# Project Root
+/home/setup/navidocs/
+
+# Database
+/home/setup/navidocs/server/db/navidocs.db
+
+# Uploads
+/home/setup/navidocs/server/uploads/
+
+# Logs
+/tmp/navidocs-backend.log
+/tmp/navidocs-ocr-worker.log
+/tmp/navidocs-frontend.log
+
+# Config
+/home/setup/navidocs/server/.env
+/home/setup/navidocs/client/vite.config.js
+```
+
+---
+
+## 🚀 Quick Commands
+
+```bash
+# Start Everything
+cd /home/setup/navidocs
+./start-all.sh
+
+# Stop Everything
+./stop-all.sh
+
+# View Logs
+tail -f /tmp/navidocs-backend.log
+
+# Check Services
+ss -tlnp | grep -E ":(6379|7700|8001|8080)"
+
+# Get WSL2 IP
+hostname -I | awk '{print $1}'
+
+# Backend Health
+curl http://localhost:8001/health
+
+# Database Backup
+cp server/db/navidocs.db server/db/backup-$(date +%Y%m%d).db
+```
+
+---
+
+## 🔌 Service Ports
+
+| Port | Service | Status |
+|------|---------|--------|
+| **6379** | Redis | ✅ Running |
+| **7700** | Meilisearch | ✅ Running (Docker) |
+| **8001** | Backend API | ✅ Running |
+| **8080** | Frontend | ✅ Running |
+
+---
+
+## 🗂️ Data Locations
+
+| Data Type | Location | Size |
+|-----------|----------|------|
+| SQLite DB | `server/db/navidocs.db` | ~188 KB |
+| Uploads | `server/uploads/` | Empty |
+| Meilisearch | Docker volume `meilisearch_data` | N/A |
+| Logs | `/tmp/navidocs-*.log` | <1 MB |
+
+---
+
+## 🔒 Security Checklist (Before Production)
+
+- [ ] Change Meilisearch master key
+- [ ] Change JWT secret (64+ chars)
+- [ ] Enable HTTPS/TLS
+- [ ] Configure CORS (remove wildcard)
+- [ ] Set `NODE_ENV=production`
+- [ ] Set up database backups
+- [ ] Configure log rotation
+- [ ] Audit dependencies
+
+---
+
+**Full Details:** `/home/setup/navidocs/docs/handover/PATHS_AND_CREDENTIALS.md`
--- a/client/index.html
+++ b/client/index.html
@ -19,8 +19,12 @@
  <!-- Manifest for PWA -->
  <link rel="manifest" href="/manifest.json">

-  <!-- Theme color -->
-  <meta name="theme-color" content="#0ea5e9">
+  <!-- Theme color (matches primary brand) -->
+  <meta name="theme-color" content="#c026d3">
+
+  <!-- Open Graph (basic) -->
+  <meta property="og:title" content="NaviDocs - Boat Manual Management" />
+  <meta property="og:description" content="Upload, OCR and search boat manuals instantly with Meilisearch-powered UI." />

  <!-- iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
--- a/client/src/assets/main.css
+++ b/client/src/assets/main.css
@ -21,6 +21,21 @@
  }
 }

+/* Additional base styles */
+@layer base {
+  /* Accessible focus ring */
+  :focus-visible {
+    outline: 2px solid theme('colors.primary.500');
+    outline-offset: 2px;
+  }
+
+  /* Keyboard key styling */
+  kbd {
+    @apply inline-block px-2 py-1 text-xs font-mono rounded border border-dark-200 bg-dark-50 text-dark-700;
+    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
+  }
+}
+
@layer components {
  /* Button styles */
  .btn {
@ -137,3 +152,68 @@
    overflow: hidden;
  }
 }
+
+/* Additional component styles (Meilisearch-like polish) */
+@layer components {
+  /* Badges & chips */
+  .badge {
+    @apply inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-dark-100 text-dark-700;
+  }
+  .badge-primary {
+    @apply bg-primary-100 text-primary-700;
+  }
+  .badge-success {
+    @apply bg-success-100 text-success-700;
+  }
+
+  /* Glass panel */
+  .glass {
+    @apply bg-white/70 backdrop-blur-lg border border-dark-100 shadow-soft;
+  }
+
+  /* Section helpers */
+  .section {
+    @apply py-16 md:py-24;
+  }
+  .section-title {
+    @apply text-4xl md:text-5xl font-black tracking-tight text-dark-900;
+  }
+
+  /* Gradient accent border */
+  .accent-border {
+    position: relative;
+  }
+  .accent-border:before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    z-index: -1;
+    border-radius: inherit;
+    background: linear-gradient(90deg, theme('colors.primary.500'), theme('colors.secondary.500'));
+    filter: blur(8px);
+    opacity: .3;
+  }
+
+  /* Subtle grid background */
+  .bg-grid {
+    background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
+    background-size: 16px 16px;
+    background-position: -1px -1px;
+  }
+
+  /* Skeleton shimmer */
+  .skeleton {
+    @apply relative overflow-hidden bg-dark-100 rounded;
+  }
+  .skeleton:after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
+    animation: shimmer 1.25s infinite;
+  }
+  @keyframes shimmer {
+    100% { transform: translateX(100%); }
+  }
+}
--- a/docs/ui/CHANGELOG_UI.md
+++ b/docs/ui/CHANGELOG_UI.md
@ -0,0 +1,46 @@
+NaviDocs UI Changelog
+
+Date: 2025-10-19
+
+Scope: UI polish only (no backend changes)
+
+Summary
+- Added Meilisearch-inspired polish via Tailwind utility layers and small markup tweaks.
+- Kept changes strictly in the client UI; no server or configuration behavior changed.
+
+Changes
+- client/src/assets/main.css
+  - Added base accessibility and utility styles:
+    - Visible focus ring (:focus-visible) aligned to primary color
+    - kbd styling for keyboard hints
+  - Added component utilities:
+    - badge, badge-primary, badge-success
+    - glass (light translucent panel with blur)
+    - section, section-title (consistent vertical rhythm)
+    - accent-border (soft gradient glow border)
+    - bg-grid (subtle grid background)
+    - skeleton + shimmer keyframes (loading placeholders)
+- client/index.html
+  - Theme color set to primary brand color (#c026d3)
+  - Basic Open Graph meta tags for better link previews
+
+Rationale
+- Aligns typography, spacing, gradients, and micro-interactions with a Meilisearch-style aesthetic without copying proprietary assets.
+- Improves perceived performance (skeletons) and accessibility (focus ring).
+
+Non-Goals
+- No backend API, auth, or data changes.
+- No vendor CSS or fonts added beyond Google Fonts already in use.
+
+Testing
+- Dev: cd client && npm run dev, then browse http://localhost:8080
+- Check focus states via keyboard (Tab/Shift+Tab).
+- Verify badges, gradient borders, and grid background on components that use the new classes.
+
+Security/Privacy
+- No secrets added. The file docs/handover/PATHS_AND_CREDENTIALS.md remains untracked and must not be committed.
+
+Follow-ups (optional)
+- Extract shared headers into a reusable Nav component across views for tighter consistency.
+- Consider Tailwind Typography for rich text rendering of document content.
+