feat: gallery masonry layout, favorites system, left-right detail dialog, bump v0.17.0

Gallery UI overhaul:
- GalleryGrid: replace equal-size grid with CSS columns masonry layout (6 columns),
  pure image cards without text/date info, hover gray ring highlight,
  favorited items show red heart badge
- GalleryDetail: left-right layout dialog (70% image / 30% info),
  nearly full-screen size with minimal margins, black background for image area,
  absolute-positioned image container for correct sizing across all aspect ratios,
  favorite toggle button replaces tag manager, removed outer border
- Gallery page: added "favorites only" filter button, replaced load-more button
  with IntersectionObserver infinite scroll, removed tag system references

Favorites system:
- db.ts: added `favorited` column to media_generations with migration
- New API: PUT /api/media/[id]/favorite for toggle
- gallery/route.ts: support favoritesOnly=1 filter, return favorited field
- i18n: added favorites-related translations (en/zh)

Other:
- Default image model changed from Nano Banana Pro to Nano Banana 2
- providers/models/route.ts: skip media provider types in chat model selector

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

Author: 7418

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "codepilot",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "private": true,
   "author": {
     "name": "op7418",

package.json

@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getDb } from '@/lib/db';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+export async function PUT(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  try {
+    const { id } = await params;
+    const db = getDb();
+
+    const row = db.prepare('SELECT favorited FROM media_generations WHERE id = ?').get(id) as { favorited: number } | undefined;
+    if (!row) {
+      return NextResponse.json({ error: 'Not found' }, { status: 404 });
+    }
+
+    const newValue = row.favorited ? 0 : 1;
+    db.prepare('UPDATE media_generations SET favorited = ? WHERE id = ?').run(newValue, id);
+
+    return NextResponse.json({ favorited: newValue });
+  } catch (error) {
+    console.error('[media/favorite] Error:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Failed to toggle favorite' },
+      { status: 500 },
+    );
+  }
+}

src/app/api/media/[id]/favorite/route.ts

@@ -13,6 +13,7 @@ interface DbRow {
   local_path: string;
   tags: string;
   metadata: string;
+  favorited: number;
   created_at: string;
   session_id: string | null;
   [key: string]: unknown;
@@ -56,6 +57,7 @@ function mapRow(row: DbRow) {
     aspectRatio: row.aspect_ratio,
     imageSize: row.image_size,
     tags,
+    favorited: !!row.favorited,
     created_at: row.created_at,
     session_id: row.session_id || undefined,
     referenceImages,
@@ -68,6 +70,7 @@ export async function GET(request: NextRequest) {
     const tags = searchParams.get('tags');
     const dateFrom = searchParams.get('dateFrom');
     const dateTo = searchParams.get('dateTo');
+    const favoritesOnly = searchParams.get('favoritesOnly') === '1';
     const sort = searchParams.get('sort') || 'newest';
     const limit = parseInt(searchParams.get('limit') || '50', 10);
     const offset = parseInt(searchParams.get('offset') || '0', 10);
@@ -77,6 +80,10 @@ export async function GET(request: NextRequest) {
     const conditions: string[] = [];
     const params: unknown[] = [];
 
+    if (favoritesOnly) {
+      conditions.push("mg.favorited = 1");
+    }
+
     if (tags) {
       const tagList = tags.split(',').map(t => t.trim()).filter(Boolean);
       for (const tag of tagList) {

src/app/api/media/gallery/route.ts

@@ -84,8 +84,12 @@ export async function GET() {
       });
     }
 
+    // Provider types that are not LLMs (e.g. image generation) — skip in chat model selector
+    const MEDIA_PROVIDER_TYPES = new Set(['gemini-image']);
+
     // Build a group for each configured provider
     for (const provider of providers) {
+      if (MEDIA_PROVIDER_TYPES.has(provider.provider_type)) continue;
       const matched = PROVIDER_MODEL_LABELS[provider.base_url];
       const rawModels = matched || DEFAULT_MODELS;
       const models = deduplicateModels(rawModels);

src/app/api/providers/models/route.ts

@@ -1,18 +1,18 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { HugeiconsIcon } from '@hugeicons/react';
 import {
   PaintBrush01Icon,
   SortingDownIcon,
   FilterIcon,
   Loading02Icon,
+  FavouriteIcon,
 } from '@hugeicons/core-free-icons';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { GalleryGrid, type GalleryItem } from '@/components/gallery/GalleryGrid';
 import { GalleryDetail } from '@/components/gallery/GalleryDetail';
-import { TagManager, useTags, type Tag } from '@/components/gallery/TagManager';
 import { useTranslation } from '@/hooks/useTranslation';
 import type { TranslationKey } from '@/i18n';
 
@@ -22,19 +22,18 @@ type SortOrder = 'newest' | 'oldest';
 
 export default function GalleryPage() {
   const { t } = useTranslation();
-  const { tags, loading: tagsLoading, addTag, removeTag, fetchTags } = useTags();
 
   const [items, setItems] = useState<GalleryItem[]>([]);
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(true);
   const [offset, setOffset] = useState(0);
 
   // Filters
-  const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [dateFrom, setDateFrom] = useState('');
   const [dateTo, setDateTo] = useState('');
   const [sort, setSort] = useState<SortOrder>('newest');
   const [showFilters, setShowFilters] = useState(false);
+  const [favoritesOnly, setFavoritesOnly] = useState(false);
 
   // Detail
   const [selectedItem, setSelectedItem] = useState<GalleryItem | null>(null);
@@ -44,9 +43,9 @@ export default function GalleryPage() {
     setLoading(true);
     try {
       const params = new URLSearchParams();
-      if (selectedTags.length > 0) params.set('tags', selectedTags.join(','));
       if (dateFrom) params.set('dateFrom', dateFrom);
       if (dateTo) params.set('dateTo', dateTo);
+      if (favoritesOnly) params.set('favoritesOnly', '1');
       params.set('sort', sort);
       params.set('limit', String(PAGE_SIZE));
       params.set('offset', reset ? '0' : String(offset));
@@ -68,22 +67,14 @@ export default function GalleryPage() {
     } finally {
       setLoading(false);
     }
-  }, [selectedTags, dateFrom, dateTo, sort, offset]);
+  }, [dateFrom, dateTo, sort, offset, favoritesOnly]);
 
   // Initial load and reload on filter changes
   useEffect(() => {
     setOffset(0);
     fetchItems(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedTags, dateFrom, dateTo, sort]);
-
-  const handleToggleTag = useCallback((tagId: string) => {
-    setSelectedTags((prev) =>
-      prev.includes(tagId)
-        ? prev.filter((t) => t !== tagId)
-        : [...prev, tagId]
-    );
-  }, []);
+  }, [dateFrom, dateTo, sort, favoritesOnly]);
 
   const handleSelect = useCallback((item: GalleryItem) => {
     setSelectedItem(item);
@@ -102,22 +93,19 @@ export default function GalleryPage() {
     }
   }, []);
 
-  const handleTagsChange = useCallback(async (id: string, newTags: string[]) => {
+  const handleToggleFavorite = useCallback(async (id: string) => {
     try {
-      const res = await fetch(`/api/media/${id}/tags`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ tags: newTags }),
-      });
+      const res = await fetch(`/api/media/${id}/favorite`, { method: 'PUT' });
       if (res.ok) {
+        const data = await res.json();
+        const favorited = !!data.favorited;
         setItems((prev) =>
           prev.map((item) =>
-            item.id === id ? { ...item, tags: newTags } : item
+            item.id === id ? { ...item, favorited } : item
           )
         );
-        // Update selected item too
         setSelectedItem((prev) =>
-          prev && prev.id === id ? { ...prev, tags: newTags } : prev
+          prev && prev.id === id ? { ...prev, favorited } : prev
         );
       }
     } catch {
@@ -126,6 +114,29 @@ export default function GalleryPage() {
   }, []);
 
   const hasMore = items.length < total;
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const loadingRef = useRef(false);
+
+  // Infinite scroll via IntersectionObserver
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore && !loadingRef.current) {
+          loadingRef.current = true;
+          fetchItems(false).finally(() => {
+            loadingRef.current = false;
+          });
+        }
+      },
+      { rootMargin: '200px' },
+    );
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasMore, fetchItems]);
 
   return (
     <div className="flex h-full flex-col overflow-hidden">
@@ -136,6 +147,20 @@ export default function GalleryPage() {
             {t('gallery.title' as TranslationKey)}
           </h1>
           <div className="flex items-center gap-2">
+            {/* Favorites toggle */}
+            <Button
+              variant={favoritesOnly ? 'secondary' : 'ghost'}
+              size="sm"
+              onClick={() => setFavoritesOnly((v) => !v)}
+            >
+              <HugeiconsIcon
+                icon={FavouriteIcon}
+                className={cn('h-3.5 w-3.5', favoritesOnly && 'text-red-500')}
+                fill={favoritesOnly ? 'currentColor' : 'none'}
+              />
+              {t('gallery.favoritesOnly' as TranslationKey)}
+            </Button>
+
             {/* Filter toggle */}
             <Button
               variant={showFilters ? 'secondary' : 'ghost'}
@@ -163,18 +188,6 @@ export default function GalleryPage() {
         {/* Filter bar */}
         {showFilters && (
           <div className="mt-3 space-y-2.5">
-            {/* Tag filter */}
-            {!tagsLoading && tags.length > 0 && (
-              <div>
-                <TagManager
-                  tags={tags}
-                  selectedTags={selectedTags}
-                  onToggleTag={handleToggleTag}
-                  compact
-                />
-              </div>
-            )}
-
             {/* Date range */}
             <div className="flex items-center gap-2">
               <label className="text-xs text-muted-foreground">
@@ -195,14 +208,13 @@ export default function GalleryPage() {
                 onChange={(e) => setDateTo(e.target.value)}
                 className="h-7 rounded-md border border-input bg-transparent px-2 text-xs outline-none focus:ring-1 focus:ring-ring"
               />
-              {(dateFrom || dateTo || selectedTags.length > 0) && (
+              {(dateFrom || dateTo) && (
                 <Button
                   variant="ghost"
                   size="xs"
                   onClick={() => {
                     setDateFrom('');
                     setDateTo('');
-                    setSelectedTags([]);
                   }}
                 >
                   {t('gallery.clearFilters' as TranslationKey)}
@@ -226,40 +238,28 @@ export default function GalleryPage() {
             <p className="text-xs opacity-70">{t('gallery.emptyHint' as TranslationKey)}</p>
           </div>
         ) : (
-          <div className="space-y-4">
+          <div>
             <GalleryGrid
               items={items}
-              tags={tags}
               onSelect={handleSelect}
             />
-            {hasMore && (
-              <div className="flex justify-center py-4">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => fetchItems(false)}
-                  disabled={loading}
-                >
-                  {loading ? (
-                    <HugeiconsIcon icon={Loading02Icon} className="h-3.5 w-3.5 animate-spin" />
-                  ) : (
-                    t('gallery.loadMore' as TranslationKey)
-                  )}
-                </Button>
-              </div>
-            )}
+            {/* Sentinel for infinite scroll */}
+            <div ref={sentinelRef} className="flex justify-center py-4">
+              {loading && (
+                <HugeiconsIcon icon={Loading02Icon} className="h-4 w-4 animate-spin text-muted-foreground" />
+              )}
+            </div>
           </div>
         )}
       </div>
 
       {/* Detail dialog */}
       <GalleryDetail
         item={selectedItem}
-        tags={tags}
         open={detailOpen}
         onOpenChange={setDetailOpen}
         onDelete={handleDelete}
-        onTagsChange={handleTagsChange}
+        onToggleFavorite={handleToggleFavorite}
       />
     </div>
   );