build app logo

backend/src/db.ts

@@ -43,6 +43,11 @@ db.exec(`
     name TEXT UNIQUE NOT NULL COLLATE NOCASE
   );
 
+  CREATE TABLE IF NOT EXISTS settings (
+    key   TEXT PRIMARY KEY,
+    value TEXT
+  );
+
   CREATE TABLE IF NOT EXISTS meme_tags (
     meme_id TEXT NOT NULL REFERENCES memes(id) ON DELETE CASCADE,
     tag_id  INTEGER NOT NULL REFERENCES tags(id) ON DELETE CASCADE,

backend/src/index.ts

@@ -10,6 +10,7 @@ import { authRoutes } from './routes/auth.js';
 import { collectionsRoutes } from './routes/collections.js';
 import { adminRoutes } from './routes/admin.js';
 import { shareRoutes } from './routes/share.js';
+import { settingsRoutes } from './routes/settings.js';
 
 // Ensure data dirs exist
 ensureImagesDir();
@@ -46,6 +47,7 @@ await app.register(tagsRoutes);
 await app.register(adminRoutes);
 
 await app.register(shareRoutes);
+await app.register(settingsRoutes);
 
 // SPA fallback — serve index.html for all non-API, non-image routes
 app.setNotFoundHandler(async (req, reply) => {

backend/src/routes/settings.ts

@@ -0,0 +1,38 @@
+import type { FastifyInstance } from 'fastify';
+import db from '../db.js';
+import { requireAuth } from '../auth.js';
+
+type SettingsRow = { key: string; value: string };
+
+function getAllSettings(): Record<string, string> {
+  const rows = db.prepare('SELECT key, value FROM settings').all() as SettingsRow[];
+  return Object.fromEntries(rows.map((r) => [r.key, r.value]));
+}
+
+export async function settingsRoutes(app: FastifyInstance) {
+  // Public — anyone can read settings (needed to render logo for guests)
+  app.get('/api/settings', async () => {
+    return getAllSettings();
+  });
+
+  // Admin — update one or more settings keys
+  app.put<{ Body: Record<string, string> }>(
+    '/api/settings',
+    { preHandler: requireAuth },
+    async (req) => {
+      const allowed = new Set(['logo_url']);
+      const stmt = db.prepare(
+        'INSERT INTO settings (key, value) VALUES (?, ?) ON CONFLICT(key) DO UPDATE SET value = excluded.value'
+      );
+      for (const [key, value] of Object.entries(req.body)) {
+        if (!allowed.has(key)) continue;
+        if (value === '' || value == null) {
+          db.prepare('DELETE FROM settings WHERE key = ?').run(key);
+        } else {
+          stmt.run(key, String(value));
+        }
+      }
+      return getAllSettings();
+    }
+  );
+}

frontend/src/App.tsx

@@ -1,11 +1,35 @@
+import { useEffect } from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { Gallery } from './pages/Gallery';
+import { useSettings } from './hooks/useSettings';
+
+function FaviconUpdater() {
+  const { data: settings } = useSettings();
+
+  useEffect(() => {
+    const logoUrl = settings?.logo_url;
+    if (!logoUrl) return;
+
+    let link = document.querySelector<HTMLLinkElement>('link[rel~="icon"]');
+    if (!link) {
+      link = document.createElement('link');
+      link.rel = 'icon';
+      document.head.appendChild(link);
+    }
+    link.href = logoUrl;
+  }, [settings?.logo_url]);
+
+  return null;
+}
 
 export default function App() {
   return (
-    <Routes>
+    <>
-      <Route path="/" element={<Gallery />} />
+      <FaviconUpdater />
-      <Route path="*" element={<Navigate to="/" replace />} />
+      <Routes>
-    </Routes>
+        <Route path="/" element={<Gallery />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </>
   );
 }

frontend/src/api/client.ts

@@ -147,6 +147,19 @@ export const api = {
     },
   },
 
+  settings: {
+    get(): Promise<Record<string, string>> {
+      return apiFetch('/api/settings');
+    },
+    update(body: Record<string, string>): Promise<Record<string, string>> {
+      return apiFetch('/api/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+    },
+  },
+
   admin: {
     reindexStatus(): Promise<{ pending: number; indexed: number }> {
       return apiFetch('/api/admin/reindex/status');

frontend/src/components/SettingsModal.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
-import { X, ScanText, Database, RefreshCw, CheckCircle2, AlertCircle, Loader2, Share2, MousePointerClick } from 'lucide-react';
+import { X, ScanText, Database, RefreshCw, CheckCircle2, AlertCircle, Loader2, Share2, MousePointerClick, ImageIcon, Save } from 'lucide-react';
 import { useReindexStatus, useReindex, useCollections, useTags, useMemes, useAdminStats } from '../hooks/useMemes';
+import { useSettings, useUpdateSettings } from '../hooks/useSettings';
 
 interface Props {
   onClose: () => void;
@@ -13,14 +14,32 @@ export function SettingsModal({ onClose }: Props) {
   const { data: tags } = useTags();
   const { data: allMemes } = useMemes({ parent_only: false, limit: 1 });
   const { data: adminStats } = useAdminStats();
+  const { data: settings } = useSettings();
+  const updateSettings = useUpdateSettings();
+
+  const [logoInput, setLogoInput] = useState('');
+  const [logoPreviewError, setLogoPreviewError] = useState(false);
+
+  // Populate field when settings load
+  useEffect(() => {
+    if (settings?.logo_url !== undefined) {
+      setLogoInput(settings.logo_url ?? '');
+    }
+  }, [settings?.logo_url]);
 
   async function handleReindex() {
     await reindex.mutateAsync();
     refetchStatus();
   }
 
+  async function saveLogo() {
+    await updateSettings.mutateAsync({ logo_url: logoInput.trim() });
+  }
+
+  const logoChanged = logoInput.trim() !== (settings?.logo_url ?? '');
   const hasPending = (status?.pending ?? 0) > 0;
   const reindexResult = reindex.data;
+  const previewUrl = logoInput.trim();
 
   return (
     <>
@@ -37,6 +56,54 @@ export function SettingsModal({ onClose }: Props) {
           </div>
 
           <div className="overflow-y-auto flex-1 p-5 space-y-6">
+
+            {/* Branding */}
+            <section>
+              <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-3 flex items-center gap-1.5">
+                <ImageIcon size={12} /> Branding
+              </h3>
+
+              <label className="block text-xs text-zinc-500 mb-1.5">Logo URL</label>
+              <div className="flex gap-2">
+                <input
+                  type="url"
+                  value={logoInput}
+                  onChange={(e) => { setLogoInput(e.target.value); setLogoPreviewError(false); }}
+                  placeholder="https://example.com/logo.png"
+                  className="flex-1 bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-accent placeholder-zinc-600"
+                />
+                <button
+                  onClick={saveLogo}
+                  disabled={!logoChanged || updateSettings.isPending}
+                  className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-accent hover:bg-accent-hover text-white text-sm font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed flex-shrink-0"
+                >
+                  {updateSettings.isPending ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
+                  Save
+                </button>
+              </div>
+
+              {/* Live preview */}
+              {previewUrl && !logoPreviewError && (
+                <div className="mt-3 flex items-center gap-3 bg-zinc-800/60 rounded-lg px-4 py-3">
+                  <img
+                    src={previewUrl}
+                    alt="Logo preview"
+                    className="h-8 w-auto object-contain"
+                    onError={() => setLogoPreviewError(true)}
+                  />
+                  <span className="text-xs text-zinc-500">Header &amp; favicon preview</span>
+                </div>
+              )}
+              {previewUrl && logoPreviewError && (
+                <p className="mt-2 text-xs text-red-400">Could not load image — check the URL.</p>
+              )}
+              {!previewUrl && settings?.logo_url == null && (
+                <p className="mt-2 text-xs text-zinc-600">Leave blank to use the default 🎭 emoji logo.</p>
+              )}
+            </section>
+
+            <div className="border-t border-zinc-800" />
+
             {/* Library Stats */}
             <section>
               <h3 className="text-xs font-semibold text-zinc-500 uppercase tracking-wider mb-3 flex items-center gap-1.5">
@@ -69,7 +136,6 @@ export function SettingsModal({ onClose }: Props) {
                 <ScanText size={12} /> OCR Index
               </h3>
 
-              {/* Status row */}
               <div className="flex items-center justify-between bg-zinc-800/60 rounded-lg px-4 py-3 mb-3">
                 {statusLoading ? (
                   <span className="text-sm text-zinc-500">Checking…</span>
@@ -96,7 +162,6 @@ export function SettingsModal({ onClose }: Props) {
                 </button>
               </div>
 
-              {/* Result banner */}
               {reindexResult && !reindex.isPending && (
                 <div className={`flex items-start gap-2.5 rounded-lg px-4 py-3 mb-3 text-sm ${
                   reindexResult.no_text_found > 0

frontend/src/hooks/useSettings.ts

@@ -0,0 +1,20 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../api/client';
+
+export function useSettings() {
+  return useQuery({
+    queryKey: ['settings'],
+    queryFn: () => api.settings.get(),
+    staleTime: 60_000,
+  });
+}
+
+export function useUpdateSettings() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (body: Record<string, string>) => api.settings.update(body),
+    onSuccess: (data) => {
+      qc.setQueryData(['settings'], data);
+    },
+  });
+}

frontend/src/pages/Gallery.tsx

@@ -9,6 +9,7 @@ import { LoginModal } from '../components/LoginModal';
 import { SharePanel } from '../components/SharePanel';
 import { CollectionBar } from '../components/CollectionBar';
 import { SettingsModal } from '../components/SettingsModal';
+import { useSettings } from '../hooks/useSettings';
 import type { Meme } from '../api/client';
 
 const PAGE_SIZE = 100;
@@ -30,6 +31,8 @@ export function Gallery() {
   const { data: auth } = useAuth();
   const logout = useLogout();
   const isAdmin = auth?.authenticated === true;
+  const { data: settings } = useSettings();
+  const logoUrl = settings?.logo_url;
 
   const { data: collections } = useCollections();
 
@@ -99,8 +102,14 @@ export function Gallery() {
         <div className="max-w-screen-2xl mx-auto px-4 py-3 flex items-center gap-3">
           {/* Logo */}
           <div className="flex items-center gap-2 mr-2 flex-shrink-0">
-            <span className="text-2xl">🎭</span>
+            {logoUrl ? (
-            <span className="font-bold text-lg tracking-tight hidden sm:block">Memer</span>
+              <img src={logoUrl} alt="Logo" className="h-8 w-auto object-contain" />
+            ) : (
+              <>
+                <span className="text-2xl">🎭</span>
+                <span className="font-bold text-lg tracking-tight hidden sm:block">Memer</span>
+              </>
+            )}
           </div>
 
           {/* Search */}