build app logo

2026-03-28 22:48:37 -05:00
parent b08e9523e4
commit 7fba3645c3
8 changed files with 186 additions and 10 deletions
--- a/frontend/src/App.tsx
+++ b/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 />} />
-      <Route path="*" element={<Navigate to="/" replace />} />
-    </Routes>
+    <>
+      <FaviconUpdater />
+      <Routes>
+        <Route path="/" element={<Gallery />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </>
  );
 }
--- a/frontend/src/api/client.ts
+++ b/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');
--- a/frontend/src/components/SettingsModal.tsx
+++ b/frontend/src/components/SettingsModal.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
-import { X, ScanText, Database, RefreshCw, CheckCircle2, AlertCircle, Loader2, Share2, MousePointerClick } from 'lucide-react';
+import React, { useState, useEffect } from '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
--- a/frontend/src/hooks/useSettings.ts
+++ b/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);
+    },
+  });
+}
--- a/frontend/src/pages/Gallery.tsx
+++ b/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>
-            <span className="font-bold text-lg tracking-tight hidden sm:block">Memer</span>
+            {logoUrl ? (
+              <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 */}