Explorer homepage, new subsection based sidebar, refined transitions (#4042)

- **feat(app2): add statistics explorer**
- **fix(app2): delete clearFiber**
- **fix(app2): refine stats page**
- **docs(app2): note how to use existing components**
- **fix(app2): polish**
- **fix(app2): use datetime on the stats page**
- **feat(app2): stat display names**
- **feat(app2): render bar chart**
- **fix(app2): refine bar chart**
- **fix(app2): graph styling**
- **fix(app2): bar chart**
- **feat(app2): bar hover effect**
- **feat(app2): better bar chart**
- **fix(app2): barchart component**
- **fix(app2): add explorer to the sidebar**
- **feat(app2): sidebar subroutes**
- **fix(app2): better sidebar**
- **chore: fmt**

Author: cor

app/src/generated/graphql-env.d.ts

@@ -29,6 +29,14 @@
 - never use `mx-auto` to style. use flexbox instead.
 - If you want to apply a gap between components, use `flex gap-*`, rather than `space-x-*`
 
+## Use of existing components
+
+- Don't create your own cards, instead, use the `components/ui/Card.svelte`
+- When creating a label, use `components/ui/Label.svelte`
+- When creating skeletons, use `components/ui/Skeleton.svelte`
+- When displaying an error somewhere, use `components/model/ErrorComponent.svelte`
+- When displaying dates or times somewhere, use `components/ui/DateTimeComponent.svelte`
+
 ## UI Components
 
 - All UI components must accept a `class` prop for styling customization

app2/CONVENTIONS.md

@@ -20,7 +20,7 @@ _: {
     {
       packages = {
         app2 = jsPkgs.buildNpmPackage {
-          npmDepsHash = "sha256-R+7qoYHPuUmBKnvBwjsb4arZQikBckKndQlSYH2lQ5I=";
+          npmDepsHash = "sha256-LlSGZhPStl8xGhbHfQ6uXskvnK6yjL9VTY7/iUK1/Hg=";
           src = ./.;
           sourceRoot = "app2";
           npmFlags = [ "--legacy-peer-deps" ];

app2/app2.nix

@@ -21,12 +21,12 @@
     "@cosmjs/proto-signing": "^0.33.0",
     "@cosmjs/stargate": "0.33.0",
     "@cosmjs/tendermint-rpc": "^0.33.0",
-    "patch-package": "^8.0.0",
     "@effect/platform": "^0.77.2",
     "@eslint/compat": "^1.2.6",
     "@eslint/js": "^9.20.0",
     "@keplr-wallet/types": "^0.12.190",
     "@leapwallet/types": "^0.0.5",
+    "@scure/base": "^1.2.4",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.17.2",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
@@ -46,6 +46,7 @@
     "graphql": "^16.10.0",
     "graphql-request": "^7.1.2",
     "jsdom": "^26.0.0",
+    "patch-package": "^8.0.0",
     "svelte": "^5.20.1",
     "svelte-check": "^4.1.4",
     "tailwind-merge": "^3.0.2",
@@ -54,7 +55,9 @@
     "typescript-eslint": "^8.24.1",
     "viem": "^2.23.5",
     "vite": "^6.1.0",
-    "vitest": "^3.0.5",
-    "@scure/base": "^1.2.4"
+    "vitest": "^3.0.5"
+  },
+  "dependencies": {
+    "@number-flow/svelte": "^0.3.5"
   }
 }

app2/package-lock.json

@@ -1,7 +1,11 @@
+
 <script lang="ts">
 import { page } from "$app/state"
 import { navigation } from "../Sidebar/navigation.ts"
 import { Option } from "effect"
+import { fade, fly, slide } from "svelte/transition"
+import { quintOut } from "svelte/easing"
+import { flip } from "svelte/animate"
 
 const toTitleCase = (str: string): string => {
   return str.charAt(0).toUpperCase() + str.slice(1)
@@ -10,60 +14,56 @@ const toTitleCase = (str: string): string => {
 type Crumb = {
   title: string
   path: string
+  id: string
 }
 
-// Get current page info
-const currentPageInfo = $derived(
-  Option.fromNullable(
-    navigation.find(section => section.items.find(s => s.path === page.url.pathname))
-  ).pipe(
-    Option.flatMap(s => Option.fromNullable(s.items.find(i => i.path === page.url.pathname))),
-    Option.getOrElse(() => ({ title: page.url.pathname, path: page.url.pathname }))
-  )
-)
-
-// Build breadcrumb path
-const breadcrumbs = $derived(
-  ((): Array<Crumb> => {
-    const parts = page.url.pathname.split("/").filter(Boolean)
-    const crumbs: Array<Crumb> = []
+// Store the current breadcrumbs
+let currentBreadcrumbs = $state<Array<Crumb>>([])
 
-    // Add home
-    // crumbs.push({ title: "Home", path: "/" })
+// Update breadcrumbs when the page changes
+$effect(() => {
+  const parts = page.url.pathname.split("/").filter(Boolean)
+  const newCrumbs: Array<Crumb> = []
 
-    // Build path progressively
-    let currentPath = ""
-    for (const part of parts) {
-      currentPath += `/${part}`
+  // Build path progressively
+  let currentPath = ""
+  for (const part of parts) {
+    currentPath += `/${part}`
 
-      // Try to find matching navigation item for nice labels
-      const matchingItem = navigation
-        .flatMap(section => section.items)
-        .find(item => item.path === currentPath)
+    // Try to find matching navigation item for nice labels
+    const matchingItem = navigation
+      .flatMap(section => section.items)
+      .find(item => item.path === currentPath)
 
-      crumbs.push({
-        title: matchingItem?.title || toTitleCase(part),
-        path: currentPath
-      })
-    }
+    newCrumbs.push({
+      title: matchingItem?.title || toTitleCase(part),
+      path: currentPath,
+      id: currentPath // Unique ID for animation keying
+    })
+  }
 
-    return crumbs
-  })()
-)
+  // Replace the breadcrumbs array
+  currentBreadcrumbs = newCrumbs
+})
 </script>
 
-<nav class="flex items-center gap-2 text-zinc-400">
-  {#each breadcrumbs as crumb, i}
-    {#if i < breadcrumbs.length - 1}
-      <a 
-        href={crumb.path}
-        class="hover:text-zinc-100 transition-colors"
-      >
-        {crumb.title}
-      </a>
-      <span class="text-zinc-600">/</span>
-    {:else}
-      <span class="text-zinc-100">{crumb.title}</span>
-    {/if}
+<nav class="flex items-center gap-2 text-zinc-400 h-8 overflow-hidden">
+  {#each currentBreadcrumbs as crumb, i (crumb.id)}
+    <div animate:flip={{ duration: 400 }} class="flex items-center last:text-white">
+        <a 
+          href={crumb.path}
+          class="hover:text-zinc-100 transition-colors transition-delay-100"
+          in:fly={{ x: -30, duration: 200, delay: i * 100, easing: quintOut }}
+          out:fly={{ x: 30, duration: 100 }}
+        >
+          {crumb.title}
+        </a>
+        <span 
+          class="text-zinc-600 ml-2"
+          in:fade={{ duration: 200, delay: i * 200 }}
+          out:fade={{ duration: 150 }}
+        >/</span>
+    </div>
   {/each}
 </nav>
+