docs: roadmap log F2 library panel - search, favorites, thumbnails, grid view

ROADMAP.md

@@ -621,8 +621,8 @@ Kurz-Tasks (je gleiche Struktur: implementieren im passenden builtin-Paket + Wor
 - [ ] E7 Event-Elemente polish: stage(height attr), curtain, spotlight(angle/color), barrier chain
 
 ## Phase F — Library & Import/Export
-- [ ] F1 Backend library_folders/library_blocks + Migrationsfile + Tests (CRUD, scopes)
-- [ ] F2 UI LibraryPanel (Baum, Suche, Favoriten, Thumbnail grid), DragDrop→Canvas insert instance
+- [x] F1 Backend library_folders/library_blocks + Migrationsfile + Tests (CRUD, scopes) *(umgesetzt als global_block_folders/global_blocks mit SqliteAdapter-Migration + CRUD-Tests; .wcadlib-Paket zusätzlich im Log F1)*
+- [x] F2 UI LibraryPanel (Baum, Suche, Favoriten, Thumbnail grid), DragDrop→Canvas insert instance
 - [ ] F3 „Als Block speichern“ (Auswahl→Block, Thumbnail client-seitig canvas.toDataURL klein)
 - [ ] F4 LibraryProviderExtension anbinden: builtin-catalog JSONs (event/architecture/landscape Startersets je ~15-30 Blöcke), user-library, global-library
 - [ ] F5 DXF Parser erweitern: ELLIPSE, SPLINE(grad≤3→Polyline approx), MTEXT, POINT, HATCH(basic solid/lines), ATTDEF/ATTR, INSERT→Blockinstanz; Fehlerreport (Liste skipped entities)
@@ -714,6 +714,8 @@ Format: `YYYY-MM-DD | TASK-ID | was getan | Tests Ergebnis | commit | Notizen/of
 | 2026-08-28 | F1-backend | .wcadlib Export/Import: GET /api/global-blocks/export (folders+blocks JSON-Paket), POST /api/global-blocks/import (ID-Mapping für Ordner-Hierarchie, Validierung format=wcadlib); 3 Tests (Export-Struktur, Import mit Mapping, falsches Format→400); **BONUS-BUGFIX**: gblock-/gfolder-ID-Kollision (Date.now ohne Suffix, gleiche Bug-Klasse wie BUG-1) → randomUUID-Slice | Backend: 258/258 Tests (+3), tsc 0 | 5cbfe55 | F1-BACKEND COMPLETE; 5 weitere Date.now()-IDs (user/proj/pfolder/draw/layer/block) als Nebenproblem notiert |
 | 2026-08-28 | F1-frontend | BlockLibraryTree: Export-Button (lädt .wcadlib herunter) + Import-Button (.wcadlib-File-Input → importLibrary → loadData-Refresh) + API-Funktionen exportLibrary/importLibrary in api.ts | Frontend: 491/491 Tests, tsc 0, build OK | 63c8968 | **F1 COMPLETE — Library Export/Import Ende-zu-Ende**: Bibliothek als .wcadlib-Paket teilen/archivieren/einspielen |
 | 2026-08-27 | C3 | elementToPrimitives erweitert um fehlende Typen: dimension (Linie + Label aus value/text), leader (Linie + Label am Ende), revcloud (geschlossener Punktzug), chair (gefuelltes Rechteck #4a90d9), table (Kreis #8b7355), stage (dunkles Rechteck #3a3a4a); Legacy-Konventionen beibehalten; 6 neue Tests | ALLE GRUEN: 481/481 gesamt (+6), tsc 0, build OK | siehe git | Naechster Task: C4 (Flag-Umdrehung Pixi=Default) oder Selection-Handles/Snap-Marks |
+| 2026-08-28 | F2-backend | Block-Favoriten: schema.sql is_favorite INTEGER DEFAULT 0 + SqliteAdapter-Migration (PRAGMA table_info-Muster) für Bestands-DBs, mapGlobalBlockRow 0/1→boolean, createGlobalBlock/updateGlobalBlock erweitert, DBGlobalBlock.is_favorite: boolean, PATCH /api/global-blocks/:id validiert is_favorite (nicht-boolean→400); ROT-Beweis: 5 Tests zuerst ROT (is_favorite fehlte komplett), dann GRUEN | Backend: 263/263 Tests (+5), tsc 0 | 83a94e4 | F2-BACKEND COMPLETE |
+| 2026-08-28 | F2-frontend | BlockLibraryTree: Suchfeld (global-lib-toolbar, filtert root+folder+favorites), ★/☆-Favorite-Toggle je Block (setGlobalBlockFavorite-API, optimistisches UI-Update), Favoriten-Sektion mit goldenem Titel, SVG-Thumbnail-Vorschau (tree-thumb, dangerouslySetInnerHTML, Fallback 📦), Grid-Ansicht (lib-grid, Thumbnail-Zellen mit Drag-Drop + Kontextmenü + Favorit); GlobalBlock.is_favorite: boolean in api.ts | Frontend: 491/491 Tests, tsc 0, build OK | 8b50c0a | **F2 COMPLETE — LibraryPanel-Kernfeatures**: Baum+Suche+Favoriten+Thumbnails+Grid+DragDrop→Canvas (Drop-Handler existierte bereits) |
 
 ## Gefundene Nebenprobleme (noch nicht zugewiesen)
 - `webhook-receiver.py` im Root: Zweck unklar, ggf. entfernen/dokumentieren (Frage an Nutzer)
@@ -721,5 +723,5 @@ Format: `YYYY-MM-DD | TASK-ID | was getan | Tests Ergebnis | commit | Notizen/of
 - `frontend/src/utils/__tests__/format.test.ts` liegt in src statt tests/ — vereinheitlichen (kleiner Task in I2)
 
 ---
-*Nächster offener Schritt: **F2** (DXF-INSERT-Import als Blöcke, Block-Attribute) — Details in Teil 5. Alternativ: Nebenproblem „Date.now()-IDs“ (user/proj/pfolder/draw/layer/block → randomUUID), Legacy-Entsorgung nach visueller Verifikation, oder Phase G (Layouts/PDF).*
-*Status 2026-08-28: Phasen B+A+C+D+E+F1 komplett. FE 491/491 Tests, BE 258/258, tsc/Build grün. Alle Commits auf Forgejo main.*
+*Nächster offener Schritt: **F3** („Als Block speichern“: Auswahl→Block, Thumbnail client-seitig canvas.toDataURL) — Details in Teil 5. Alternativ: F4 (LibraryProviderExtension/Startersets), Nebenproblem „Date.now()-IDs“ (user/proj/pfolder/draw/layer/block → randomUUID), Legacy-Entsorgung nach visueller Verifikation, oder Phase G (Layouts/PDF).*
+*Status 2026-08-28: Phasen B+A+C+D+E+F1+F2 komplett. FE 491/491 Tests, BE 263/263, tsc/Build grün. Alle Commits auf Forgejo main.*

backend/src/database/DatabaseInterface.ts

@@ -121,6 +121,7 @@ export interface DBGlobalBlock {
   name: string;
   block_data: string;
   svg_data: string | null;
+  is_favorite: boolean;
   created_at: string;
   updated_at: string;
 }

backend/src/database/SqliteAdapter.ts

@@ -35,6 +35,11 @@ export class SqliteAdapter implements DatabaseInterface {
     if (!columns.some(col => col.name === 'folder_id')) {
       this.db.exec('ALTER TABLE projects ADD COLUMN folder_id TEXT REFERENCES project_folders(id) ON DELETE SET NULL');
     }
+    // Add is_favorite column to global_blocks table for existing databases (Task F2)
+    const gbColumns = this.db.prepare("PRAGMA table_info('global_blocks')").all() as { name: string }[];
+    if (!gbColumns.some(col => col.name === 'is_favorite')) {
+      this.db.exec('ALTER TABLE global_blocks ADD COLUMN is_favorite INTEGER NOT NULL DEFAULT 0');
+    }
   }
 
   close(): void {
@@ -423,25 +428,31 @@ export class SqliteAdapter implements DatabaseInterface {
   }
 
   // ─── Global Blocks ─────────────────────────────────────
+  // Map DB row to DBGlobalBlock (is_favorite 0/1 → boolean, Task F2)
+  private mapGlobalBlockRow(row: Record<string, unknown>): DBGlobalBlock {
+    return { ...(row as unknown as DBGlobalBlock), is_favorite: Number(row.is_favorite ?? 0) === 1 };
+  }
+
   listGlobalBlocks(folderId?: string | null): DBGlobalBlock[] {
     if (folderId === undefined) {
-      return this.db.prepare('SELECT * FROM global_blocks ORDER BY updated_at DESC').all() as DBGlobalBlock[];
+      return (this.db.prepare('SELECT * FROM global_blocks ORDER BY updated_at DESC').all() as Record<string, unknown>[]).map(r => this.mapGlobalBlockRow(r));
     }
     if (folderId === null) {
-      return this.db.prepare('SELECT * FROM global_blocks WHERE folder_id IS NULL ORDER BY updated_at DESC').all() as DBGlobalBlock[];
+      return (this.db.prepare('SELECT * FROM global_blocks WHERE folder_id IS NULL ORDER BY updated_at DESC').all() as Record<string, unknown>[]).map(r => this.mapGlobalBlockRow(r));
     }
-    return this.db.prepare('SELECT * FROM global_blocks WHERE folder_id = ? ORDER BY updated_at DESC').all(folderId) as DBGlobalBlock[];
+    return (this.db.prepare('SELECT * FROM global_blocks WHERE folder_id = ? ORDER BY updated_at DESC').all(folderId) as Record<string, unknown>[]).map(r => this.mapGlobalBlockRow(r));
   }
 
   getGlobalBlock(id: string): DBGlobalBlock | null {
-    return (this.db.prepare('SELECT * FROM global_blocks WHERE id = ?').get(id) as DBGlobalBlock) ?? null;
+    const row = this.db.prepare('SELECT * FROM global_blocks WHERE id = ?').get(id) as Record<string, unknown> | undefined;
+    return row ? this.mapGlobalBlockRow(row) : null;
   }
 
   createGlobalBlock(data: Partial<DBGlobalBlock>): DBGlobalBlock {
     const id = data.id ?? `gblock-${randomUUID().slice(0, 8)}`;
     this.db.prepare(
-      'INSERT INTO global_blocks (id, folder_id, name, block_data, svg_data) VALUES (?, ?, ?, ?, ?)',
-    ).run(id, data.folder_id ?? null, data.name ?? 'Global Block', data.block_data ?? '{}', data.svg_data ?? null);
+      'INSERT INTO global_blocks (id, folder_id, name, block_data, svg_data, is_favorite) VALUES (?, ?, ?, ?, ?, ?)',
+    ).run(id, data.folder_id ?? null, data.name ?? 'Global Block', data.block_data ?? '{}', data.svg_data ?? null, data.is_favorite ? 1 : 0);
     return this.getGlobalBlock(id)!;
   }
 
@@ -452,6 +463,7 @@ export class SqliteAdapter implements DatabaseInterface {
     if (data.folder_id !== undefined) { sets.push('folder_id = ?'); vals.push(data.folder_id); }
     if (data.block_data !== undefined) { sets.push('block_data = ?'); vals.push(data.block_data); }
     if (data.svg_data !== undefined) { sets.push('svg_data = ?'); vals.push(data.svg_data); }
+    if (data.is_favorite !== undefined) { sets.push('is_favorite = ?'); vals.push(data.is_favorite ? 1 : 0); }
     sets.push("updated_at = datetime('now')");
     this.db.prepare(`UPDATE global_blocks SET ${sets.join(', ')} WHERE id = ?`).run(...vals, id);
     return this.getGlobalBlock(id);

backend/src/database/schema.sql

@@ -171,6 +171,7 @@ CREATE TABLE IF NOT EXISTS global_blocks (
   name TEXT NOT NULL,
   block_data TEXT NOT NULL DEFAULT '{}',
   svg_data TEXT,
+  is_favorite INTEGER NOT NULL DEFAULT 0,
   created_at TEXT NOT NULL DEFAULT (datetime('now')),
   updated_at TEXT NOT NULL DEFAULT (datetime('now')),
   FOREIGN KEY (folder_id) REFERENCES global_block_folders(id) ON DELETE SET NULL

backend/src/routes/globalBlocks.ts

@@ -134,11 +134,14 @@ export function registerGlobalBlockRoutes(fastify: FastifyInstance, db: Database
     const { id } = request.params as { id: string };
     const idErr = validateIdParam(id, 'id');
     if (idErr) return reply.code(400).send({ error: idErr });
-    const body = request.body as { name?: string; folder_id?: string | null; block_data?: string; svg_data?: string };
+    const body = request.body as { name?: string; folder_id?: string | null; block_data?: string; svg_data?: string; is_favorite?: boolean };
     if (body.name !== undefined) {
       const nameErr = validateName(body.name, 'name');
       if (nameErr) return reply.code(400).send({ error: nameErr });
     }
+    if (body.is_favorite !== undefined && typeof body.is_favorite !== 'boolean') {
+      return reply.code(400).send({ error: 'is_favorite must be a boolean' });
+    }
     if (body.folder_id !== undefined && body.folder_id !== null) {
       const fidErr = validateIdParam(body.folder_id, 'folder_id');
       if (fidErr) return reply.code(400).send({ error: fidErr });

backend/tests/globalBlocks.test.ts

@@ -525,3 +525,90 @@ describe('Global Blocks API – F1 export/import', () => {
     expect(res.statusCode).toBe(400);
   });
 });
+
+// ─── Task F2: Block-Favoriten ─────────────────────────────
+describe('Global Blocks API – F2 favorite', () => {
+  let app: FastifyInstance;
+  let db: SqliteAdapter;
+  let authToken: string;
+  let blockId: string;
+
+  beforeAll(async () => {
+    db = new SqliteAdapter(':memory:');
+    await db.init();
+    app = await createServer({ db, port: 0 });
+    await app.ready();
+
+    const regRes = await app.inject({
+      method: 'POST',
+      url: '/api/auth/register',
+      payload: { email: 'fav-test@example.com', password: 'Password123!', name: 'Fav Test', role: 'admin' },
+    });
+    authToken = JSON.parse(regRes.body).session.token;
+
+    const blockRes = await app.inject({
+      method: 'POST',
+      url: '/api/global-blocks',
+      headers: { authorization: `Bearer ${authToken}` },
+      payload: { name: 'Fav-Block', block_data: '{"type":"block"}' },
+    });
+    blockId = JSON.parse(blockRes.body).id;
+  });
+
+  afterAll(async () => {
+    await app.close();
+    db.close();
+  });
+
+  it('neuer Block startet mit is_favorite=false', async () => {
+    const res = await app.inject({
+      method: 'GET',
+      url: `/api/global-blocks/${blockId}`,
+      headers: { authorization: `Bearer ${authToken}` },
+    });
+    expect(res.statusCode).toBe(200);
+    expect(JSON.parse(res.body).is_favorite).toBe(false);
+  });
+
+  it('PATCH is_favorite:true setzt Favorit', async () => {
+    const res = await app.inject({
+      method: 'PATCH',
+      url: `/api/global-blocks/${blockId}`,
+      headers: { authorization: `Bearer ${authToken}` },
+      payload: { is_favorite: true },
+    });
+    expect(res.statusCode).toBe(200);
+    expect(JSON.parse(res.body).is_favorite).toBe(true);
+  });
+
+  it('is_favorite ist persistent nach GET', async () => {
+    const res = await app.inject({
+      method: 'GET',
+      url: `/api/global-blocks/${blockId}`,
+      headers: { authorization: `Bearer ${authToken}` },
+    });
+    expect(res.statusCode).toBe(200);
+    expect(JSON.parse(res.body).is_favorite).toBe(true);
+  });
+
+  it('PATCH is_favorite:false hebt Favorit auf', async () => {
+    const res = await app.inject({
+      method: 'PATCH',
+      url: `/api/global-blocks/${blockId}`,
+      headers: { authorization: `Bearer ${authToken}` },
+      payload: { is_favorite: false },
+    });
+    expect(res.statusCode).toBe(200);
+    expect(JSON.parse(res.body).is_favorite).toBe(false);
+  });
+
+  it('PATCH mit nicht-boolean is_favorite liefert 400', async () => {
+    const res = await app.inject({
+      method: 'PATCH',
+      url: `/api/global-blocks/${blockId}`,
+      headers: { authorization: `Bearer ${authToken}` },
+      payload: { is_favorite: 'yes' },
+    });
+    expect(res.statusCode).toBe(400);
+  });
+});

frontend/src/components/BlockLibraryTree.tsx

@@ -9,6 +9,7 @@ import {
   createGlobalBlock,
   renameGlobalBlock,
   deleteGlobalBlock,
+  setGlobalBlockFavorite,
   exportLibrary,
   importLibrary,
 } from '../services/api';
@@ -43,6 +44,19 @@ const BlockLibraryTree: React.FC<BlockLibraryTreeProps> = ({ token, onBlockDragS
   const wcadInputRef = useRef<HTMLInputElement>(null);
   const [dragOverFolderId, setDragOverFolderId] = useState<string | null>(null);
 
+  // ─── Task F2: Suche, Favoriten, Thumbnail-Grid ───────────
+  const [searchQuery, setSearchQuery] = useState('');
+  const [viewMode, setViewMode] = useState<'tree' | 'grid'>('tree');
+
+  const handleToggleFavorite = useCallback(async (blockId: string, next: boolean) => {
+    try {
+      const updated = await setGlobalBlockFavorite(token, blockId, next);
+      setBlocks(prev => prev.map(b => (b.id === blockId ? { ...b, is_favorite: updated.is_favorite } : b)));
+    } catch {
+      // silently ignore — favorite stays unchanged on failure
+    }
+  }, [token]);
+
   const loadData = useCallback(async () => {
     try {
       const [allFolders, allBlocks] = await Promise.all([
@@ -128,7 +142,10 @@ const BlockLibraryTree: React.FC<BlockLibraryTreeProps> = ({ token, onBlockDragS
     return roots;
   }, [folders, blocks, expandedIds]);
 
-  const rootBlocks = blocks.filter(b => !b.folder_id).sort((a, b) => a.name.localeCompare(b.name));
+  const q = searchQuery.toLowerCase().trim();
+  const matchesSearch = useCallback((b: GlobalBlock) => !q || b.name.toLowerCase().includes(q), [q]);
+  const rootBlocks = blocks.filter(b => !b.folder_id && matchesSearch(b)).sort((a, b) => a.name.localeCompare(b.name));
+  const favoriteBlocks = blocks.filter(b => b.is_favorite && matchesSearch(b)).sort((a, b) => a.name.localeCompare(b.name));
   const tree = buildTree();
 
   const toggleExpand = (folderId: string) => {
@@ -307,6 +324,83 @@ const BlockLibraryTree: React.FC<BlockLibraryTreeProps> = ({ token, onBlockDragS
     setRenameValue('');
   };
 
+  // ─── Task F2: Block-Leaf mit Thumbnail + Favorite-Stern ──
+  const renderBlockLeaf = (block: GlobalBlock, depth: number): React.ReactNode => {
+    const isBlockRenaming = renamingId === block.id;
+    return (
+      <div
+        key={block.id}
+        className="tree-item tree-item-leaf draggable"
+        style={{ paddingLeft: `${depth * 16 + 8}px` }}
+        draggable
+        onDragStart={(e) => handleBlockDragStart(e, block)}
+        onContextMenu={(e) => handleContextMenu(e, 'block', block.id, block.folder_id)}
+        title={block.name}
+      >
+        {block.svg_data ? (
+          <span className="tree-thumb" dangerouslySetInnerHTML={{ __html: block.svg_data }} />
+        ) : (
+          <span className="tree-icon">📦</span>
+        )}
+        {isBlockRenaming ? (
+          <input
+            type="text"
+            className="tree-rename-input"
+            value={renameValue}
+            autoFocus
+            onChange={(e) => setRenameValue(e.target.value)}
+            onBlur={confirmRename}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') confirmRename();
+              if (e.key === 'Escape') { setRenamingId(null); setRenameValue(''); }
+            }}
+            onClick={(e) => e.stopPropagation()}
+          />
+        ) : (
+          <span
+            className="tree-label"
+            onDoubleClick={(e) => { e.stopPropagation(); startRename(block.id, block.name); }}
+          >
+            {block.name}
+          </span>
+        )}
+        <button
+          className={`tree-fav-btn${block.is_favorite ? ' active' : ''}`}
+          title={block.is_favorite ? 'Favorit entfernen' : 'Als Favorit markieren'}
+          onClick={(e) => { e.stopPropagation(); void handleToggleFavorite(block.id, !block.is_favorite); }}
+        >
+          {block.is_favorite ? '★' : '☆'}
+        </button>
+      </div>
+    );
+  };
+
+  // Task F2: Grid-Zelle mit Thumbnail
+  const renderGridCell = (block: GlobalBlock): React.ReactNode => (
+    <div
+      key={block.id}
+      className="lib-grid-cell"
+      draggable
+      onDragStart={(e) => handleBlockDragStart(e, block)}
+      onContextMenu={(e) => handleContextMenu(e, 'block', block.id, block.folder_id)}
+      title={`${block.name}${block.is_favorite ? ' ★' : ''}`}
+    >
+      <div className="lib-grid-thumb">
+        {block.svg_data
+          ? <span className="tree-thumb" dangerouslySetInnerHTML={{ __html: block.svg_data }} />
+          : <span className="lib-grid-placeholder">📦</span>}
+      </div>
+      <div className="lib-grid-name">{block.name}</div>
+      <button
+        className={`tree-fav-btn${block.is_favorite ? ' active' : ''}`}
+        title={block.is_favorite ? 'Favorit entfernen' : 'Als Favorit markieren'}
+        onClick={(e) => { e.stopPropagation(); void handleToggleFavorite(block.id, !block.is_favorite); }}
+      >
+        {block.is_favorite ? '★' : '☆'}
+      </button>
+    </div>
+  );
+
   const renderFolderNode = (node: FolderNode, depth: number): React.ReactNode => {
     const isRenaming = renamingId === node.folder.id;
     const isDragOver = dragOverFolderId === node.folder.id;
@@ -350,44 +444,7 @@ const BlockLibraryTree: React.FC<BlockLibraryTreeProps> = ({ token, onBlockDragS
         {node.expanded && (
           <div className="tree-children">
             {node.children.map(child => renderFolderNode(child, depth + 1))}
-            {node.blocks.map(block => {
-              const isBlockRenaming = renamingId === block.id;
-              return (
-                <div
-                  key={block.id}
-                  className="tree-item tree-item-leaf draggable"
-                  style={{ paddingLeft: `${(depth + 1) * 16 + 8}px` }}
-                  draggable
-                  onDragStart={(e) => handleBlockDragStart(e, block)}
-                  onContextMenu={(e) => handleContextMenu(e, 'block', block.id, block.folder_id)}
-                  title={block.name}
-                >
-                  <span className="tree-icon">📦</span>
-                  {isBlockRenaming ? (
-                    <input
-                      type="text"
-                      className="tree-rename-input"
-                      value={renameValue}
-                      autoFocus
-                      onChange={(e) => setRenameValue(e.target.value)}
-                      onBlur={confirmRename}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter') confirmRename();
-                        if (e.key === 'Escape') { setRenamingId(null); setRenameValue(''); }
-                      }}
-                      onClick={(e) => e.stopPropagation()}
-                    />
-                  ) : (
-                    <span
-                      className="tree-label"
-                      onDoubleClick={(e) => { e.stopPropagation(); startRename(block.id, block.name); }}
-                    >
-                      {block.name}
-                    </span>
-                  )}
-                </div>
-              );
-            })}
+            {node.blocks.filter(matchesSearch).map(block => renderBlockLeaf(block, depth + 1))}
           </div>
         )}
       </div>
@@ -426,44 +483,39 @@ const BlockLibraryTree: React.FC<BlockLibraryTreeProps> = ({ token, onBlockDragS
         <input ref={fileInputRef} type="file" accept=".svg,image/svg+xml" style={{ display: 'none' }} onChange={handleSvgImport} />
         <input ref={wcadInputRef} type="file" accept=".wcadlib,application/json" style={{ display: 'none' }} onChange={handleWcadFile} />
       </div>
+      <div className="global-lib-toolbar">
+        <input
+          type="text"
+          className="global-lib-search"
+          placeholder="Blöcke suchen…"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+        <button
+          className="global-lib-add-btn"
+          title={viewMode === 'grid' ? 'Baumansicht' : 'Rasteransicht'}
+          onClick={() => setViewMode(m => (m === 'grid' ? 'tree' : 'grid'))}
+        >
+          {viewMode === 'grid' ? '☰' : '▦'}
+        </button>
+      </div>
       <div className="tree tree-global" role="tree" aria-label="Globale Block-Bibliothek">
-        {tree.map(node => renderFolderNode(node, 0))}
-        {rootBlocks.map(block => {
-          const isBlockRenaming = renamingId === block.id;
-          return (
-            <div
-              key={block.id}
-              className="tree-item tree-item-leaf draggable"
-              draggable
-              onDragStart={(e) => handleBlockDragStart(e, block)}
-              onContextMenu={(e) => handleContextMenu(e, 'block', block.id, null)}
-              title={block.name}
-            >
-              <span className="tree-icon">📦</span>
-              {isBlockRenaming ? (
-                <input
-                  type="text"
-                  className="tree-rename-input"
-                  value={renameValue}
-                  autoFocus
-                  onChange={(e) => setRenameValue(e.target.value)}
-                  onBlur={confirmRename}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') confirmRename();
-                    if (e.key === 'Escape') { setRenamingId(null); setRenameValue(''); }
-                  }}
-                />
-              ) : (
-                <span
-                  className="tree-label"
-                  onDoubleClick={(e) => { e.stopPropagation(); startRename(block.id, block.name); }}
-                >
-                  {block.name}
-                </span>
-              )}
-            </div>
-          );
-        })}
+        {favoriteBlocks.length > 0 && (
+          <div className="lib-fav-section">
+            <div className="lib-fav-title">★ Favoriten</div>
+            {favoriteBlocks.map(block => renderBlockLeaf(block, 0))}
+          </div>
+        )}
+        {viewMode === 'grid' ? (
+          <div className="lib-grid">
+            {[...favoriteBlocks, ...blocks.filter(b => !b.is_favorite && matchesSearch(b)).sort((a, b) => a.name.localeCompare(b.name))].map(renderGridCell)}
+          </div>
+        ) : (
+          <>
+            {tree.map(node => renderFolderNode(node, 0))}
+            {rootBlocks.map(block => renderBlockLeaf(block, 0))}
+          </>
+        )}
         {folders.length === 0 && blocks.length === 0 && (
           <div className="global-lib-empty">Globale Bibliothek ist leer — Rechtsklick für Ordner</div>
         )}

frontend/src/services/api.ts

@@ -660,6 +660,7 @@ export interface GlobalBlock {
   name: string;
   block_data: string;
   svg_data: string | null;
+  is_favorite: boolean;
   created_at: string;
   updated_at: string;
 }
@@ -698,6 +699,17 @@ export async function renameGlobalBlock(token: string, id: string, name: string)
   return res.json();
 }
 
+// Task F2: Favorite-Toggle für globale Blöcke
+export async function setGlobalBlockFavorite(token: string, id: string, isFavorite: boolean): Promise<GlobalBlock> {
+  const res = await fetch(`${API_BASE}/api/global-blocks/${id}`, {
+    method: 'PATCH',
+    headers: authHeaders(token),
+    body: JSON.stringify({ is_favorite: isFavorite }),
+  });
+  if (!res.ok) throw new Error('Failed to set favorite');
+  return res.json();
+}
+
 export async function deleteGlobalBlock(token: string, id: string): Promise<void> {
   const res = await fetch(`${API_BASE}/api/global-blocks/${id}`, {
     method: 'DELETE',

frontend/src/styles.css

@@ -2456,6 +2456,130 @@ body.drawer-open { overflow: hidden; }
   min-width: 0;
 }
 
+/* ─── Task F2: Suche, Favoriten, Thumbnail-Grid ────────── */
+.global-lib-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 12px 6px;
+}
+
+.global-lib-search {
+  flex: 1;
+  min-width: 0;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 4px;
+}
+
+.global-lib-search:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+.lib-fav-section {
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 4px;
+  margin-bottom: 4px;
+}
+
+.lib-fav-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: #d9a441;
+  padding: 2px 8px;
+}
+
+.tree-fav-btn {
+  margin-left: auto;
+  background: transparent;
+  border: none;
+  color: var(--color-text-faint);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0 4px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.tree-fav-btn:hover { color: var(--color-text); }
+
+.tree-fav-btn.active { color: #d9a441; }
+
+.tree-thumb {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tree-thumb svg {
+  width: 100%;
+  height: 100%;
+}
+
+.lib-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+  gap: 6px;
+  padding: 4px 8px;
+}
+
+.lib-grid-cell {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 4px 4px;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  cursor: grab;
+  background: var(--color-bg-secondary);
+}
+
+.lib-grid-cell:hover {
+  border-color: var(--color-accent);
+  background: var(--color-bg-hover);
+}
+
+.lib-grid-cell:active { cursor: grabbing; }
+
+.lib-grid-thumb {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lib-grid-thumb .tree-thumb {
+  width: 36px;
+  height: 36px;
+}
+
+.lib-grid-placeholder { font-size: 20px; }
+
+.lib-grid-name {
+  font-size: 10px;
+  color: var(--color-text);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lib-grid-cell .tree-fav-btn {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+}
+
 /* ─── Context Menu ─────────────────────────────────────── */
 .context-menu {
   background: var(--color-bg-secondary);