fx

src/lib/components/Pages/Pictuary.svelte

@@ -11,20 +11,12 @@
   let canonicalPiclets: PicletInstance[] = $state([]);
   let isLoading = $state(true);
   let selectedPiclet: PicletInstance | null = $state(null);
-  let viewMode: 'all' | 'canonical' | 'variations' = $state('all');
   let searchQuery = $state('');
 
-  // Filter piclets based on view mode and search
-  let filteredPiclets = $derived(() => {
+  // Filter piclets based on search
+  let filteredPiclets = $derived.by(() => {
     let piclets = collectedPiclets;
 
-    // Filter by view mode
-    if (viewMode === 'canonical') {
-      piclets = piclets.filter(p => p.isCanonical);
-    } else if (viewMode === 'variations') {
-      piclets = piclets.filter(p => !p.isCanonical && p.canonicalId);
-    }
-
     // Filter by search query
     if (searchQuery.trim()) {
       const query = searchQuery.toLowerCase();
@@ -39,7 +31,7 @@
   });
 
   // Group piclets by object for display
-  let groupedPiclets = $derived(() => {
+  let groupedPiclets = $derived.by(() => {
     const groups = new Map<string, PicletInstance[]>();
 
     filteredPiclets.forEach(piclet => {
@@ -55,7 +47,7 @@
   });
 
   // Stats calculation
-  let stats = $derived(() => {
+  let stats = $derived.by(() => {
     const totalDiscovered = collectedPiclets.length;
     const uniqueObjects = new Set(collectedPiclets.map(p => p.objectName)).size;
     const canonicalCount = collectedPiclets.filter(p => p.isCanonical).length;
@@ -140,7 +132,7 @@
     </div>
   </div>
 
-  <!-- Search and Filters -->
+  <!-- Search -->
   <div class="controls">
     <input
       type="text"
@@ -148,29 +140,6 @@
       bind:value={searchQuery}
       class="search-input"
     />
-    <div class="view-selector">
-      <button
-        class="view-btn"
-        class:active={viewMode === 'all'}
-        onclick={() => viewMode = 'all'}
-      >
-        All
-      </button>
-      <button
-        class="view-btn"
-        class:active={viewMode === 'canonical'}
-        onclick={() => viewMode = 'canonical'}
-      >
-        Canonical
-      </button>
-      <button
-        class="view-btn"
-        class:active={viewMode === 'variations'}
-        onclick={() => viewMode = 'variations'}
-      >
-        Variations
-      </button>
-    </div>
   </div>
 
   <!-- Collection Grid -->

src/lib/db/piclets.ts

@@ -103,29 +103,8 @@ export async function getPicletInstance(id: number): Promise<PicletInstance | un
 
 // Get collected piclets (those that have been discovered)
 export async function getCollectedPiclets(): Promise<PicletInstance[]> {
-  console.log('🔍 DEBUG: Getting collected piclets...');
-
-  // First, let's see ALL records in the database
   const allRecords = await db.picletInstances.toArray();
-  console.log('📊 Total records in DB:', allRecords.length);
-  console.log('📋 All records:', allRecords);
-
-  // Check what values we have for isInCollection
-  allRecords.forEach((record, i) => {
-    console.log(`Record ${i}:`, {
-      id: record.id,
-      typeId: record.typeId,
-      nickname: record.nickname,
-      isInCollection: record.isInCollection,
-      isInCollection_type: typeof record.isInCollection,
-      isInCollection_value: JSON.stringify(record.isInCollection)
-    });
-  });
-
-  // Filter by isInCollection (using filter instead of where/equals for boolean reliability)
-  const result = allRecords.filter(p => p.isInCollection === true);
-  console.log('✅ Filtered result:', result.length, 'piclets found');
-  return result;
+  return allRecords.filter(p => p.isInCollection === true);
 }
 
 // Get canonical piclets