From 82f39e03350bf3061d35dfdc51dd80bf3a1a1e66 Mon Sep 17 00:00:00 2001
From: RevIQ <me@rev.iq>
Date: Thu, 8 Jan 2026 17:27:23 +0800
Subject: [PATCH] Add TanStack Query and update dashboard card styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Set up @tanstack/svelte-query and devtools in root layout
- Configure QueryClient with 5-minute stale time
- Update dashboard card to match Figma: regular font weight, no border
- Add .playwright-mcp to gitignore

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .gitignore                                       |  3 +++
 apps/publisher-dashboard/package.json            |  2 ++
 .../components/dashboard/dashboard-card.svelte   |  6 +++---
 .../src/routes/+layout.svelte                    | 16 +++++++++++++++-
 bun.lock                                         | 10 ++++++++++
 5 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index e3d36e3..1ce6e04 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,3 +42,6 @@ yarn-error.log*
 # Misc
 *.pem
 .vercel
+
+.playwright-mcp/
+
diff --git a/apps/publisher-dashboard/package.json b/apps/publisher-dashboard/package.json
index 5e73db1..1fb0416 100644
--- a/apps/publisher-dashboard/package.json
+++ b/apps/publisher-dashboard/package.json
@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@publisher/utils": "workspace:*",
+    "@tanstack/svelte-query": "^6.0.14",
+    "@tanstack/svelte-query-devtools": "^6.0.3",
     "bits-ui": "^2.15.4",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.4.0",
diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/dashboard-card.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/dashboard-card.svelte
index 7964f38..238fcbd 100644
--- a/apps/publisher-dashboard/src/lib/components/dashboard/dashboard-card.svelte
+++ b/apps/publisher-dashboard/src/lib/components/dashboard/dashboard-card.svelte
@@ -17,11 +17,11 @@ let { title, children, class: className }: Props = $props();
     className,
   )}
 >
-  <div class="border-b border-border px-5 py-3">
-    <h3 class="text-sm font-semibold text-foreground">{title}</h3>
+  <div class="px-4 pb-3 pt-6">
+    <h3 class="text-sm font-normal leading-[22px] text-foreground">{title}</h3>
   </div>
 
-  <div class="p-5">
+  <div class="px-4 pb-6">
     {@render children()}
   </div>
 </div>
diff --git a/apps/publisher-dashboard/src/routes/+layout.svelte b/apps/publisher-dashboard/src/routes/+layout.svelte
index 7dcf9e5..80c8b2c 100644
--- a/apps/publisher-dashboard/src/routes/+layout.svelte
+++ b/apps/publisher-dashboard/src/routes/+layout.svelte
@@ -1,12 +1,26 @@
 <script lang="ts">
 import "../app.css";
 import type { Snippet } from "svelte";
+import { QueryClient, QueryClientProvider } from "@tanstack/svelte-query";
+import { SvelteQueryDevtools } from "@tanstack/svelte-query-devtools";
 
 interface Props {
   children: Snippet;
 }
 
 let { children }: Props = $props();
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      refetchOnWindowFocus: false,
+    },
+  },
+});
 </script>
 
-{@render children()}
+<QueryClientProvider client={queryClient}>
+  {@render children()}
+  <SvelteQueryDevtools />
+</QueryClientProvider>
diff --git a/bun.lock b/bun.lock
index 251b8ce..d009858 100644
--- a/bun.lock
+++ b/bun.lock
@@ -16,6 +16,8 @@
       "version": "0.0.1",
       "dependencies": {
         "@publisher/utils": "workspace:*",
+        "@tanstack/svelte-query": "^6.0.14",
+        "@tanstack/svelte-query-devtools": "^6.0.3",
         "bits-ui": "^2.15.4",
         "clsx": "^2.1.1",
         "tailwind-merge": "^3.4.0",
@@ -248,6 +250,14 @@
 
     "@tailwindcss/vite": ["@tailwindcss/vite@4.1.18", "", { "dependencies": { "@tailwindcss/node": "4.1.18", "@tailwindcss/oxide": "4.1.18", "tailwindcss": "4.1.18" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA=="],
 
+    "@tanstack/query-core": ["@tanstack/query-core@5.90.16", "", {}, "sha512-MvtWckSVufs/ja463/K4PyJeqT+HMlJWtw6PrCpywznd2NSgO3m4KwO9RqbFqGg6iDE8vVMFWMeQI4Io3eEYww=="],
+
+    "@tanstack/query-devtools": ["@tanstack/query-devtools@5.92.0", "", {}, "sha512-N8D27KH1vEpVacvZgJL27xC6yPFUy0Zkezn5gnB3L3gRCxlDeSuiya7fKge8Y91uMTnC8aSxBQhcK6ocY7alpQ=="],
+
+    "@tanstack/svelte-query": ["@tanstack/svelte-query@6.0.14", "", { "dependencies": { "@tanstack/query-core": "5.90.16" }, "peerDependencies": { "svelte": "^5.25.0" } }, "sha512-gKuHxbyGP2pCQgE/Px9FtlyFmHTt0OV5xTrKrk7PMKGkv3LPWTTwDb7xlMDe1V7U2K5ci+jq1j3HsuTPqIZxjA=="],
+
+    "@tanstack/svelte-query-devtools": ["@tanstack/svelte-query-devtools@6.0.3", "", { "dependencies": { "@tanstack/query-devtools": "5.92.0", "esm-env": "^1.2.1" }, "peerDependencies": { "@tanstack/svelte-query": "^6.0.12", "svelte": "^5.25.0" } }, "sha512-AHc/vPiUWeMFXKvtrlZot7wIlsIm4z5vd0wDeQUKwE5XTfZODu0no1A4UCLzVnY2WpbBpakIEUMH+PmSMwYXKg=="],
+
     "@types/cookie": ["@types/cookie@0.6.0", "", {}, "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="],
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],