add tanstack query

packages/landing/public/sw.js

@@ -74,7 +74,7 @@ self.addEventListener('install', event => {
       }
 
       const buildAssets = Array.from(discovered);
-      console.log('[SW] Caching', buildAssets.length, 'build assets');
+      console.info('[SW] Caching', buildAssets.length, 'build assets');
 
       for (const url of buildAssets) {
         try {

packages/landing/scripts/version-sw.js

@@ -14,7 +14,7 @@ try {
   const buildTime = Date.now().toString(36); // Short, unique identifier
   const updated = content.replace(/__BUILD_TIME__/g, buildTime);
   writeFileSync(swPath, updated);
-  console.log(`[version-sw] Updated sw.js with build version: ${buildTime}`);
+  console.info(`[version-sw] Updated sw.js with build version: ${buildTime}`);
 } catch (error) {
   console.error('[version-sw] Failed to update sw.js:', error.message);
   process.exit(1);

packages/web/package.json

@@ -20,8 +20,10 @@
     "@corates/shared": "workspace:*",
     "@corates/ui": "workspace:*",
     "@solidjs/router": "^0.15.4",
+    "@tanstack/solid-query": "^5.90.18",
     "better-auth": "^1.4.9",
     "d3": "^7.9.0",
+    "idb": "^8.0.3",
     "pdfjs-dist": "^5.4.530",
     "solid-icons": "^1.1.0",
     "solid-js": "^1.9.10",

packages/web/src/api/better-auth-store.js

@@ -1,6 +1,7 @@
 import { createSignal, createRoot, createEffect } from 'solid-js';
 import { authClient, useSession } from '@api/auth-client.js';
-import projectStore from '@/stores/projectStore.js';
+import { queryClient } from '@lib/queryClient.js';
+import { queryKeys } from '@lib/queryKeys.js';
 import { API_BASE, BASEPATH } from '@config/api.js';
 import { saveLastLoginMethod, LOGIN_METHODS } from '@lib/lastLoginMethod.js';
 import {
@@ -204,21 +205,20 @@ function createBetterAuthStore() {
           // Wait a bit for session to update
           await new Promise(resolve => setTimeout(resolve, 100));
 
-          // Validate and refresh project list if user is authenticated
+          // Invalidate project list query if user is authenticated
           const currentUser = user();
           if (currentUser?.id) {
-            // Validate project list cache against current user
-            projectStore.validateProjectListCache(currentUser.id);
-
-            // Refresh project list to ensure it's current
+            // Invalidate and refetch project list query to ensure it's current
             try {
-              await projectStore.refreshProjectList(currentUser.id);
+              await queryClient.invalidateQueries({
+                queryKey: queryKeys.projects.list(currentUser.id),
+              });
             } catch (err) {
               console.warn('[auth] Failed to refresh project list after visibility change:', err);
             }
           } else {
-            // User is not authenticated, clear project list
-            projectStore.clearProjectList();
+            // User is not authenticated, clear query cache for all projects
+            queryClient.removeQueries({ queryKey: queryKeys.projects.all });
           }
         } catch (err) {
           console.warn('[auth] Failed to refresh session on visibility change:', err);
@@ -398,8 +398,8 @@ function createBetterAuthStore() {
       // Clear cached avatar from IndexedDB
       clearAvatarCache();
 
-      // Clear cached project data on logout
-      projectStore.clearProjectList();
+      // Clear query cache for all projects on logout
+      queryClient.removeQueries({ queryKey: queryKeys.projects.all });
 
       // Refetch session to immediately clear it in current tab
       // This ensures session().data becomes null right away, preventing components
@@ -704,7 +704,7 @@ function createBetterAuthStore() {
       }
 
       // Clear local data
-      projectStore.clearProjectList();
+      queryClient.removeQueries({ queryKey: queryKeys.projects.all });
       localStorage.removeItem('pendingEmail');
       saveCachedAuth(null);
       setCachedUser(null);

packages/web/src/api/google-drive.js

@@ -49,7 +49,6 @@ export async function disconnectGoogleDrive() {
  * @returns {Promise<{success: boolean, file: Object}>}
  */
 export async function importFromGoogleDrive(fileId, projectId, studyId) {
-  console.log('importing from google drive', fileId, projectId, studyId);
   const response = await fetch(`${API_BASE}/api/google-drive/import`, {
     method: 'POST',
     credentials: 'include',

packages/web/src/components/admin/AdminDashboard.jsx

@@ -2,7 +2,7 @@
  * Admin Dashboard - Main admin panel page
  */
 
-import { createSignal, createResource, Show, onMount } from 'solid-js';
+import { createSignal, Show, onMount } from 'solid-js';
 import { useNavigate, A } from '@solidjs/router';
 import {
   FiUsers,
@@ -16,13 +16,8 @@ import {
   FiAlertCircle,
   FiDatabase,
 } from 'solid-icons/fi';
-import {
-  isAdmin,
-  isAdminChecked,
-  checkAdminStatus,
-  fetchStats,
-  fetchUsers,
-} from '@/stores/adminStore.js';
+import { isAdmin, isAdminChecked, checkAdminStatus } from '@/stores/adminStore.js';
+import { useAdminStats, useAdminUsers } from '@primitives/useAdminQueries.js';
 import UserTable from './UserTable.jsx';
 import StatsCard from './StatsCard.jsx';
 
@@ -40,14 +35,17 @@ export default function AdminDashboard() {
     }
   });
 
-  // Fetch stats
-  const [stats] = createResource(fetchStats);
+  // Fetch stats using TanStack Query
+  const statsQuery = useAdminStats();
+  const stats = () => statsQuery.data;
 
-  // Fetch users with pagination and search
-  const [usersData, { refetch: refetchUsers }] = createResource(
-    () => ({ page: page(), search: debouncedSearch() }),
-    fetchUsers,
-  );
+  // Fetch users with pagination and search using TanStack Query
+  const usersDataQuery = useAdminUsers(() => ({
+    page: page(),
+    limit: 20,
+    search: debouncedSearch(),
+  }));
+  const usersData = () => usersDataQuery.data;
 
   // Debounce search
   let searchTimeout;
@@ -61,7 +59,7 @@ export default function AdminDashboard() {
   };
 
   const handleRefresh = () => {
-    refetchUsers();
+    usersDataQuery.refetch();
   };
 
   return (
@@ -111,28 +109,28 @@ export default function AdminDashboard() {
               value={stats()?.users ?? '-'}
               icon={FiUsers}
               color='blue'
-              loading={stats.loading}
+              loading={statsQuery.isLoading}
             />
             <StatsCard
               title='Projects'
               value={stats()?.projects ?? '-'}
               icon={FiFolder}
               color='green'
-              loading={stats.loading}
+              loading={statsQuery.isLoading}
             />
             <StatsCard
               title='Active Sessions'
               value={stats()?.activeSessions ?? '-'}
               icon={FiActivity}
               color='purple'
-              loading={stats.loading}
+              loading={statsQuery.isLoading}
             />
             <StatsCard
               title='New This Week'
               value={stats()?.recentSignups ?? '-'}
               icon={FiUserPlus}
               color='orange'
-              loading={stats.loading}
+              loading={statsQuery.isLoading}
             />
           </div>
 

packages/web/src/components/admin/StorageManagement.jsx

@@ -2,7 +2,7 @@
  * Storage Management - Admin interface for managing R2 documents
  */
 
-import { createSignal, createResource, Show, For, onMount } from 'solid-js';
+import { createSignal, Show, For, onMount } from 'solid-js';
 import { useNavigate } from '@solidjs/router';
 import {
   FiTrash2,
@@ -18,9 +18,9 @@ import {
   isAdmin,
   isAdminChecked,
   checkAdminStatus,
-  fetchStorageDocuments,
   deleteStorageDocuments,
 } from '@/stores/adminStore.js';
+import { useStorageDocuments } from '@primitives/useAdminQueries.js';
 import { Dialog, showToast } from '@corates/ui';
 
 function formatFileSize(bytes) {
@@ -63,11 +63,14 @@ export default function StorageManagement() {
     }
   });
 
-  // Fetch documents with cursor-based pagination
-  const [documentsData, { refetch: refetchDocuments }] = createResource(
-    () => ({ cursor: cursor(), limit, prefix: prefix(), search: debouncedSearch() }),
-    fetchStorageDocuments,
-  );
+  // Fetch documents with cursor-based pagination using TanStack Query
+  const documentsDataQuery = useStorageDocuments(() => ({
+    cursor: cursor(),
+    limit,
+    prefix: prefix(),
+    search: debouncedSearch(),
+  }));
+  const documentsData = () => documentsDataQuery.data;
 
   // Debounce search
   let searchTimeout;
@@ -158,7 +161,7 @@ export default function StorageManagement() {
         showToast.success('Documents Deleted', `Successfully deleted ${result.deleted} documents.`);
       }
 
-      refetchDocuments();
+      documentsDataQuery.refetch();
     } catch (error) {
       showToast.error('Delete Failed', error.message || 'Failed to delete documents');
     } finally {
@@ -336,7 +339,7 @@ export default function StorageManagement() {
                 </thead>
                 <tbody class='divide-y divide-gray-200'>
                   <Show
-                    when={!documentsData.loading}
+                    when={!documentsDataQuery.isLoading}
                     fallback={
                       <tr>
                         <td colspan='7' class='px-6 py-12 text-center'>

packages/web/src/components/checklist/ChecklistYjsWrapper.jsx

@@ -336,7 +336,6 @@ export default function ChecklistYjsWrapper() {
 
   // Determine back button navigation from tab query param
   const getBackTab = () => {
-    // console.log('location', location.search);
     const tabFromUrl = new URLSearchParams(location.search).get('tab');
     return tabFromUrl || 'overview';
   };

packages/web/src/components/profile/ProfilePage.jsx

@@ -153,7 +153,7 @@ export default function ProfilePage() {
         maxSize: AVATAR_MAX_SIZE,
         quality: AVATAR_QUALITY,
       });
-      console.log(
+      console.info(
         `Image compressed: ${(file.size / 1024).toFixed(1)}KB -> ${(compressedFile.size / 1024).toFixed(1)}KB`,
       );