@allbluecn/web-app 0.4.11 → 0.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allbluecn/web-app",
-  "version": "0.4.11",
+  "version": "0.4.15",
   "license": "AGPL-3.0-or-later",
   "type": "module",
   "files": [
@@ -141,8 +141,8 @@
     "@allbluecn/plugins-core": "0.4.11",
     "@allbluecn/prototype": "0.1.1",
     "@allbluecn/tiptap": "0.4.11",
-    "@allbluecn/shared": "0.4.11",
-    "@allbluecn/ui": "0.4.11"
+    "@allbluecn/ui": "0.4.11",
+    "@allbluecn/shared": "0.4.11"
   },
   "devDependencies": {
     "@babel/parser": "^8.0.4",

package/src/components/changelog/changelog-page.tsx

@@ -16,10 +16,15 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { cn } from '@/lib/utils'
-import { ScrollText, AlertTriangle, ArrowLeft } from 'lucide-react'
+import { ScrollText, AlertTriangle, ArrowLeft, ChevronDown } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
 import { useTranslation } from 'react-i18next'
 import { useMemo, useState } from 'react'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
 import { Route } from '@/routes/_nav/changelog/route'
 import type { DeveloperLogEntry } from '@allbluecn/shared'
 import { SDK_GROUPS } from '@/lib/changelog/sdk-versions'
@@ -31,12 +36,23 @@ const REQUIRES_ACTION_TAGS = new Set(['breaking'])
 
 function ChangelogSidebar() {
   const { t } = useTranslation('common')
+  const [openGroups, setOpenGroups] = useState<Set<string>>(
+    new Set(SDK_GROUPS.map((g) => g.id))
+  )
+
+  const toggleGroup = (id: string) => {
+    setOpenGroups((prev) => {
+      const next = new Set(prev)
+      next.has(id) ? next.delete(id) : next.add(id)
+      return next
+    })
+  }
 
   return (
-    <aside className="shrink-0 w-150 h-full flex flex-col py-6 pr-12 pl-10 border-r border-border bg-muted/50">
-      <div className="flex-1 flex flex-col gap-8 justify-center">
+    <aside className="shrink-0 w-1/2 max-w-130 h-full flex flex-col py-6 pr-12 pl-10 border-r border-border bg-muted/50">
+      <div className="flex-1 flex flex-col gap-6 justify-between min-h-0">
         <div>
-          <h1 className="text-4xl  font-medium tracking-tight">
+          <h1 className="text-4xl font-medium tracking-tight">
             {t('changelog.title')}
           </h1>
           <p className="text-sm text-muted-foreground mt-3 leading-relaxed">
@@ -44,13 +60,21 @@ function ChangelogSidebar() {
           </p>
         </div>
 
-        <div className="flex flex-col gap-4">
-          <h2 className="text-sm font-semibold tracking-tight">
+        <div className="flex flex-col gap-3 min-h-0 flex-1">
+          <h2 className="text-sm font-semibold tracking-tight shrink-0">
             {t('changelog.sdkVersions')}
           </h2>
-          {SDK_GROUPS.map((group) => (
-            <SdkGroupSection key={group.id} group={group} t={t} />
-          ))}
+          <div className="flex flex-col gap-3 min-h-0 flex-1">
+            {SDK_GROUPS.map((group) => (
+              <SdkGroupSection
+                key={group.id}
+                group={group}
+                t={t}
+                open={openGroups.has(group.id)}
+                onToggle={() => toggleGroup(group.id)}
+              />
+            ))}
+          </div>
         </div>
 
         <div>
@@ -249,54 +273,73 @@ function ChangelogDetail({
   )
 }
 
-function SdkGroupSection({ group, t }: { group: (typeof SDK_GROUPS)[0]; t: (key: string) => string }) {
+function SdkGroupSection({
+  group,
+  t,
+  open,
+  onToggle,
+}: {
+  group: (typeof SDK_GROUPS)[0]
+  t: (key: string) => string
+  open: boolean
+  onToggle: () => void
+}) {
   const isTanstack = group.id === 'tanstack'
 
   return (
-    <div>
-      <div
-        className="flex items-center gap-1.5 w-full py-1"
-      >
-        {isTanstack ? (
-          <span className="shrink-0">
-            <img
-              src="/tanstack-landscape-black.svg"
-              alt="TanStack"
-              className="h-4 dark:hidden"
-            />
-            <img
-              src="/tanstack-landscape-white.svg"
-              alt="TanStack"
-              className="hidden h-4 dark:block"
-            />
+    <Collapsible
+      open={open}
+      onOpenChange={() => onToggle()}
+      className="flex flex-col min-h-0 flex-1 overflow-hidden"
+    >
+      <CollapsibleTrigger className="flex items-center gap-1.5 w-full py-1 group shrink-0">
+        <span className="flex-1 min-w-0 flex items-center gap-1.5">
+          {isTanstack ? (
+            <span className="shrink-0">
+              <img
+                src="/tanstack-landscape-black.svg"
+                alt="TanStack"
+                className="h-4 dark:hidden"
+              />
+              <img
+                src="/tanstack-landscape-white.svg"
+                alt="TanStack"
+                className="hidden h-4 dark:block"
+              />
+            </span>
+          ) : (
+            <span className="text-base">{group.icon}</span>
+          )}
+          <span className="text-xs mt-1 font-semibold text-foreground/80">
+            {t(`changelog.sdkGroups.${group.label}`)}
           </span>
-        ) : (
-          <span className="text-base">{group.icon}</span>
-        )}
-        <span className="text-xs mt-1 font-semibold text-foreground/80">
-          {t(`changelog.sdkGroups.${group.label}`)}
         </span>
-      </div>
-      <ul className="mt-1 flex flex-col">
-        {group.items.map((sdk) => (
-          <li key={sdk.name}>
-            <a
-              href={sdk.docsUrl || undefined}
-              target={sdk.docsUrl ? '_blank' : undefined}
-              rel={sdk.docsUrl ? 'noopener noreferrer' : undefined}
-              className="flex items-center justify-between gap-2 py-1.5 group"
-            >
-              <span className="text-xs font-medium text-muted-foreground group-hover:text-primary transition-colors truncate">
-                {sdk.name}
-              </span>
-              <code className="text-[10px] font-mono text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded shrink-0 group-hover:text-primary transition-colors">
-                {sdk.version}
-              </code>
-            </a>
-          </li>
-        ))}
-      </ul>
-    </div>
+        <ChevronDown
+          className="size-3.5 shrink-0 text-muted-foreground transition-transform group-hover:text-foreground"
+        />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <ul className="mt-1 flex flex-col min-h-0 overflow-y-auto pr-1 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border">
+          {group.items.map((sdk) => (
+            <li key={sdk.name}>
+              <a
+                href={sdk.docsUrl || undefined}
+                target={sdk.docsUrl ? '_blank' : undefined}
+                rel={sdk.docsUrl ? 'noopener noreferrer' : undefined}
+                className="flex items-center justify-between gap-2 py-1.5 group"
+              >
+                <span className="text-xs font-medium text-muted-foreground group-hover:text-primary transition-colors truncate">
+                  {sdk.name}
+                </span>
+                <code className="text-[10px] font-mono text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded shrink-0 group-hover:text-primary transition-colors">
+                  {sdk.version}
+                </code>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </CollapsibleContent>
+    </Collapsible>
   )
 }
 

package/src/lib/changelog/sdk-versions.ts

@@ -7,73 +7,73 @@ export const SDK_GROUPS: SdkGroup[] = [
     "icon": "⚡",
     "items": [
       {
-        "name": "TanStack Start",
+        "name": "@tanstack/react-start",
         "version": "v1.168.46",
         "lastUpdate": "Aug 23, 2026",
-        "source": "apps/web/package.json#dependencies (@tanstack/react-start)",
+        "source": "apps/web/package.json#dependencies",
         "docsUrl": "https://tanstack.com/start/latest"
       },
       {
-        "name": "TanStack Router",
+        "name": "@tanstack/react-router",
         "version": "v1.170.29",
         "lastUpdate": "Aug 23, 2026",
-        "source": "apps/web/package.json#dependencies (@tanstack/react-router)",
+        "source": "apps/web/package.json#dependencies",
         "docsUrl": "https://tanstack.com/router/latest"
       },
       {
-        "name": "TanStack Query",
+        "name": "@tanstack/react-query",
         "version": "v5.101.2",
         "lastUpdate": "Aug 23, 2026",
-        "source": "apps/web/package.json#dependencies (@tanstack/react-query)",
+        "source": "apps/web/package.json#dependencies",
         "docsUrl": "https://tanstack.com/query/latest"
       },
       {
-        "name": "TanStack AI",
+        "name": "@tanstack/ai",
         "version": "v0.43.0",
         "lastUpdate": "Aug 23, 2026",
-        "source": "apps/web/package.json#dependencies (@tanstack/ai)",
+        "source": "apps/web/package.json#dependencies",
         "docsUrl": "https://tanstack.com/ai/latest"
       },
       {
-        "name": "TanStack Table",
+        "name": "@tanstack/react-table",
         "version": "v9.1.0",
         "lastUpdate": "Aug 23, 2026",
-        "source": "apps/web/package.json#dependencies (@tanstack/react-table)",
+        "source": "apps/web/package.json#dependencies",
         "docsUrl": "https://tanstack.com/table/latest"
       },
       {
-        "name": "TanStack Form",
+        "name": "@tanstack/react-form",
         "version": "v2.0.0-alpha.0",
         "lastUpdate": "Aug 23, 2026",
-        "source": "apps/web/package.json#dependencies (@tanstack/react-form)",
+        "source": "apps/web/package.json#dependencies",
         "docsUrl": "https://tanstack.com/form/latest"
       },
       {
-        "name": "TanStack Charts",
-        "version": "v4.0.0-beta.1",
+        "name": "@tanstack/charts",
+        "version": "v0.9.0",
         "lastUpdate": "Aug 23, 2026",
-        "source": "apps/web/package.json#dependencies (@tanstack/react-charts)",
+        "source": "apps/admin/package.json#dependencies",
         "docsUrl": "https://tanstack.com/charts/latest"
       },
       {
-        "name": "TanStack Pacer",
+        "name": "@tanstack/react-pacer",
         "version": "v0.22.1",
         "lastUpdate": "Aug 23, 2026",
-        "source": "apps/web/package.json#dependencies (@tanstack/react-pacer)",
+        "source": "apps/web/package.json#dependencies",
         "docsUrl": "https://tanstack.com/pacer/latest"
       },
       {
-        "name": "TanStack Hotkeys",
+        "name": "@tanstack/react-hotkeys",
         "version": "v0.10.0",
         "lastUpdate": "Aug 23, 2026",
-        "source": "apps/web/package.json#dependencies (@tanstack/react-hotkeys)",
+        "source": "apps/web/package.json#dependencies",
         "docsUrl": "https://tanstack.com/hotkeys/latest"
       },
       {
-        "name": "TanStack Virtual",
+        "name": "@tanstack/react-virtual",
         "version": "v3.14.9",
         "lastUpdate": "Aug 23, 2026",
-        "source": "apps/admin/package.json#dependencies (@tanstack/react-virtual)",
+        "source": "apps/admin/package.json#dependencies",
         "docsUrl": "https://tanstack.com/virtual/latest"
       }
     ]
@@ -81,11 +81,11 @@ export const SDK_GROUPS: SdkGroup[] = [
   {
     "id": "allblue",
     "label": "allblue-sdk",
-    "icon": "🎉",
+    "icon": "🔷",
     "items": [
       {
         "name": "@allbluecn/web-app",
-        "version": "v0.4.10",
+        "version": "v0.4.15",
         "lastUpdate": "Aug 23, 2026",
         "source": "apps/web/package.json",
         "docsUrl": "https://github.com/allbluecn/allblue"