refactor: align article author with VideoModel, streamline selects, fix flyout inert

- Remove ArticleAuthor type; article.author now reuses VideoModel (id, artist_name, slug, avatar)
- updateArticle accepts authorId; author selectable in admin article edit page
- Article edit: single Select with bind:value + $derived selectedAuthor display
- Video edit: replace pill toggles with Select type="multiple" bind:value for models
- Video table: replace inline badge spans with Badge component
- Magazine: display artist_name throughout, author bio links to model profile
- Fix flyout aria-hidden warning: replace with inert attribute

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/frontend/src/routes/admin/videos/[id]/+page.svelte

@@ -9,6 +9,7 @@
   import { TagsInput } from "$lib/components/ui/tags-input";
   import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
   import { getAssetUrl } from "$lib/api";
+  import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
 
   const { data } = $props();
 
@@ -56,12 +57,6 @@
     }
   }
 
-  function toggleModel(id: string) {
-    selectedModelIds = selectedModelIds.includes(id)
-      ? selectedModelIds.filter((m) => m !== id)
-      : [...selectedModelIds, id];
-  }
-
   async function handleSubmit() {
     saving = true;
     try {
@@ -155,23 +150,27 @@
     </div>
 
     {#if data.models.length > 0}
-      <div class="space-y-2">
+      <div class="space-y-1.5">
         <Label>Models</Label>
-        <div class="flex flex-wrap gap-2">
-          {#each data.models as model (model.id)}
-            <button
-              type="button"
-              class={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
-                selectedModelIds.includes(model.id)
-                  ? "border-primary bg-primary/10 text-primary"
-                  : "border-border/40 text-muted-foreground hover:border-primary/40"
-              }`}
-              onclick={() => toggleModel(model.id)}
-            >
-              {model.artist_name || model.id}
-            </button>
-          {/each}
-        </div>
+        <Select type="multiple" bind:value={selectedModelIds}>
+          <SelectTrigger class="w-full">
+            {#if selectedModelIds.length}
+              {selectedModelIds.length} model{selectedModelIds.length > 1 ? "s" : ""} selected
+            {:else}
+              <span class="text-muted-foreground">No models</span>
+            {/if}
+          </SelectTrigger>
+          <SelectContent>
+            {#each data.models as model (model.id)}
+              <SelectItem value={model.id}>
+                {#if model.avatar}
+                  <img src={getAssetUrl(model.avatar, "mini")} alt="" class="h-5 w-5 rounded-full object-cover shrink-0" />
+                {/if}
+                {model.artist_name}
+              </SelectItem>
+            {/each}
+          </SelectContent>
+        </Select>
       </div>
     {/if}