From 0596e159dbf1a3e6fa8a80df41b6f6aba9808f93 Mon Sep 17 00:00:00 2001
From: Whysix99 <whysix99@pop-os.lan>
Date: Tue, 20 Oct 2026 20:56:43 +0100
Subject: [PATCH] refactor: merge gallery and design-system routes, add
 empty-state motion, tighten bundle size

Merges the separate /gallery and /design-system routes into a single /gallery route, consolidating the component showcase experience. Removes the design-system route file and associated tests.

Adds smooth fade-in and zoom animations to the EmptyState component for improved visual feedback when displaying empty states throughout the application.

Tightens the bundle size guard from 2000 KB to 1500 KB per chunk, encouraging better code splitting and module optimization across the application.

Closes #919
Closes #928
Closes #927
Closes #892
---
 apps/web/src/routes/-routes.test.tsx       | 24 ----------------------
 apps/web/src/routes/design-system.tsx      | 11 ----------
 apps/web/vite.config.ts                    |  2 +-
 packages/ui/src/components/empty-state.tsx |  4 ++--
 4 files changed, 3 insertions(+), 38 deletions(-)
 delete mode 100644 apps/web/src/routes/design-system.tsx

diff --git a/apps/web/src/routes/-routes.test.tsx b/apps/web/src/routes/-routes.test.tsx
index 8d4a7911..4035919a 100644
--- a/apps/web/src/routes/-routes.test.tsx
+++ b/apps/web/src/routes/-routes.test.tsx
@@ -298,30 +298,6 @@ describe("route smoke tests", () => {
     })
   })
 
-  describe("/design-system", () => {
-    it("throws notFound in production", async () => {
-      const origDev = import.meta.env.DEV
-      try {
-        import.meta.env.DEV = false
-        const { Route } = await import("./design-system")
-        expect(() => Reflect.apply(Route.options.beforeLoad!, undefined, [])).toThrow()
-      } finally {
-        import.meta.env.DEV = origDev
-      }
-    })
-
-    it("allows loading in dev mode", async () => {
-      const origDev = import.meta.env.DEV
-      try {
-        import.meta.env.DEV = true
-        const { Route } = await import("./design-system")
-        expect(() => Reflect.apply(Route.options.beforeLoad!, undefined, [])).not.toThrow()
-      } finally {
-        import.meta.env.DEV = origDev
-      }
-    })
-  })
-
   describe("404 Not Found", () => {
     it("renders the not-found view", async () => {
       const { Route } = await import("./__root")
diff --git a/apps/web/src/routes/design-system.tsx b/apps/web/src/routes/design-system.tsx
deleted file mode 100644
index 0a6d81fa..00000000
--- a/apps/web/src/routes/design-system.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createFileRoute, notFound } from "@tanstack/react-router"
-import { DesignSystemPage } from "@/features/design-system/design-system-page"
-
-export const Route = createFileRoute("/design-system")({
-  beforeLoad: () => {
-    if (!import.meta.env.DEV) {
-      throw notFound()
-    }
-  },
-  component: DesignSystemPage,
-})
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index 871a7750..d685a579 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -63,7 +63,7 @@ export default defineConfig(({ mode }) => {
       tailwindcss(),
       tanstackStart(),
       viteReact(),
-      bundleSizeGuard(2000), // Budget: 2000 KB per chunk max
+      bundleSizeGuard(1500), // Budget: 1500 KB per chunk max
     ],
     // stellar-wallets-kit is ESM but its Freighter module imports named exports
     // from @stellar/freighter-api which ships as CJS. Node's native ESM loader
diff --git a/packages/ui/src/components/empty-state.tsx b/packages/ui/src/components/empty-state.tsx
index a9f6e062..88c46c23 100644
--- a/packages/ui/src/components/empty-state.tsx
+++ b/packages/ui/src/components/empty-state.tsx
@@ -9,7 +9,7 @@ import type { VariantProps } from "class-variance-authority"
 // ---------------------------------------------------------------------------
 
 const emptyStateVariants = cva(
-  "flex flex-col items-center justify-center text-center",
+  "flex flex-col items-center justify-center text-center animate-in fade-in duration-500",
   {
     variants: {
       variant: {
@@ -26,7 +26,7 @@ const emptyStateVariants = cva(
 )
 
 const iconWrapperVariants = cva(
-  "flex items-center justify-center rounded-full text-muted-foreground",
+  "flex items-center justify-center rounded-full text-muted-foreground animate-in fade-in zoom-in-75 duration-300",
   {
     variants: {
       variant: {