v3: added customizable site emoji (logo), small visual tweaks

src/App.css

@@ -2868,6 +2868,12 @@ body.has-fab .page-content {
     align-self: center;
   }
 
+  /* Slightly smaller 16:9 thumb on phones so the body keeps enough width. */
+  .dump-card-preview {
+    width: 104px;
+    height: 58px;
+  }
+
   .dump-card-meta {
     flex-direction: column;
     gap: 0.1rem;
@@ -2886,21 +2892,35 @@ body.has-fab .page-content {
 .dump-card-preview,
 .playlist-card-preview {
   flex-shrink: 0;
-  width: 80px;
-  height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 6px;
   overflow: hidden;
   background: var(--color-bg);
+  /* Subtle matte so any unfilled space (icons, off-ratio art) reads as
+     intentional framing rather than a broken bar. */
+  box-shadow: inset 0 0 0 1px var(--color-border);
   transition: transform 0.18s ease, box-shadow 0.18s ease;
 }
 
+/* Feed thumbnails are mostly 16:9 (YouTube, og:image) — match that ratio so
+   object-fit: cover crops almost nothing, and go wider for legibility. */
+.dump-card-preview {
+  width: 128px;
+  height: 72px;
+}
+
+/* Playlist art is square (album covers) — keep it square. */
+.playlist-card-preview {
+  width: 80px;
+  height: 80px;
+}
+
 .dump-card-inner:hover .dump-card-preview,
 .playlist-card-inner:hover .playlist-card-preview {
   transform: scale(1.08);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 0 0 1px var(--color-border), 0 4px 12px rgba(0, 0, 0, 0.25);
 }
 
 /* ── Shared card preview icon ── */
@@ -2920,15 +2940,15 @@ body.has-fab .page-content {
 }
 
 .dump-card-preview .rich-content-compact {
-  width: 80px;
-  height: 80px;
+  width: 100%;
+  height: 100%;
   justify-content: center;
 }
 
 .dump-card-preview .rich-content-compact-thumbnail {
-  width: 80px;
-  height: 80px;
-  object-fit: contain;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
   border-radius: 0;
   border: none;
 }

src/components/AppHeader.tsx

@@ -7,6 +7,7 @@ import { useWS } from "../hooks/useWS.ts";
 import { NotificationBell } from "./NotificationBell.tsx";
 import { UserMenu } from "./UserMenu.tsx";
 import { SearchBar } from "./SearchBar.tsx";
+import { SITE_EMOJI, SITE_NAME } from "../hooks/useDocumentTitle.ts";
 
 const DumpCreateModal = lazy(() =>
   import("./DumpCreateModal.tsx").then((m) => ({ default: m.DumpCreateModal }))
@@ -43,10 +44,9 @@ export function AppHeader(
     <>
       <header className="app-header app-header--has-center">
         <Link to="/" className="app-header-brand">
-          🚚<span className="app-header-brand-name">
+          {SITE_EMOJI}<span className="app-header-brand-name">
             {" "}
-            {document.querySelector<HTMLMetaElement>('meta[name="site-name"]')
-              ?.content ?? "gerbeur"}
+            {SITE_NAME}
           </span>
         </Link>
 

src/hooks/useDocumentTitle.ts

@@ -12,6 +12,17 @@ function readSiteName(): string {
 
 export const SITE_NAME = readSiteName();
 
+// The server injects the configured emoji into a <meta name="site-emoji"> tag.
+// In the Vite dev server it's substituted too; fall back to the default truck.
+function readSiteEmoji(): string {
+  const meta = document.querySelector('meta[name="site-emoji"]')
+    ?.getAttribute("content")?.trim();
+  if (meta && meta !== "__SITE_EMOJI__") return meta;
+  return "🚚";
+}
+
+export const SITE_EMOJI = readSiteEmoji();
+
 /**
  * Keeps document.title in sync with the current page during client-side
  * navigation. Without this the tab title only ever reflects the server-rendered