a video in a carousel gets its poster, not a 404

A video has no width rungs — poster-448.webp and friends are cut from a still —
so asking for 320.webp returns a 404 and the grid drew a broken tile with no clue
why. Every grid in the panel was doing it, and a carousel is explicitly allowed
to hold both kinds.

posterUrl already existed for this and nothing called it. mediaThumbUrl decides
from the extension so a screen showing mixed media does not have to know the
difference.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/sections/CarouselItems.tsx

@@ -5,7 +5,7 @@ import { Input } from '@/components/ui/input';
 import { useClient } from 'hooks/useClient';
 import { MediaPicker } from '../MediaPicker';
 import { readableError } from '../errors';
-import { thumbUrl } from '../thumbnail';
+import { mediaThumbUrl } from '../thumbnail';
 
 /**
  * One carousel's contents: what is in it, in what order, and what each picture is called.
@@ -151,7 +151,7 @@ export const CarouselItems = ({ carouselId, onChanged }: { carouselId: number; o
               and a browser cannot show the original at all.
             */}
             <img
-              src={thumbUrl(item.url)}
+              src={mediaThumbUrl(item.url)}
               alt=""
               loading="lazy"
               className="size-24 shrink-0 rounded bg-muted object-cover"

web/sections/SubjectPanel.tsx

@@ -7,7 +7,7 @@ import { Input } from '@/components/ui/input';
 import { CarouselPicker } from '../CarouselPicker';
 import { readableError } from '../errors';
 import { useEditorSlot } from '../useEditorSlot';
-import { thumbUrl } from '../thumbnail';
+import { mediaThumbUrl } from '../thumbnail';
 import { SubjectFields } from './SubjectFields';
 import type { SubjectPhoto, SubjectRecord, SubjectSection } from './subjects';
 
@@ -273,7 +273,7 @@ export const SubjectPanel = <T extends SubjectRecord>({ section }: { section: Su
               {photos.map((photo) => (
                 <li key={photo.path}>
                   <div className="overflow-hidden rounded-md border border-border">
-                    <img src={thumbUrl(photo.path, 320)} alt="" className="aspect-square w-full object-cover" />
+                    <img src={mediaThumbUrl(photo.path, 320)} alt="" className="aspect-square w-full object-cover" />
                   </div>
                   <p className="mt-1 truncate font-mono text-[10px] text-muted-foreground/70">{photo.name}</p>
                 </li>