@allbluecn/web-app 0.4.15 → 0.4.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allbluecn/web-app",
-  "version": "0.4.15",
+  "version": "0.4.16",
   "license": "AGPL-3.0-or-later",
   "type": "module",
   "files": [
@@ -136,13 +136,13 @@
     "tw-animate-css": "^1.4.0",
     "zod": "^4.4.3",
     "@allbluecn/ai-gateway": "0.4.11",
-    "@allbluecn/database": "0.4.11",
     "@allbluecn/kernel": "0.3.0",
     "@allbluecn/plugins-core": "0.4.11",
     "@allbluecn/prototype": "0.1.1",
+    "@allbluecn/shared": "0.4.11",
     "@allbluecn/tiptap": "0.4.11",
     "@allbluecn/ui": "0.4.11",
-    "@allbluecn/shared": "0.4.11"
+    "@allbluecn/database": "0.4.11"
   },
   "devDependencies": {
     "@babel/parser": "^8.0.4",

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

@@ -19,12 +19,7 @@ import { cn } from '@/lib/utils'
 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 { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Route } from '@/routes/_nav/changelog/route'
 import type { DeveloperLogEntry } from '@allbluecn/shared'
 import { SDK_GROUPS } from '@/lib/changelog/sdk-versions'
@@ -36,22 +31,68 @@ 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 [activeGroup, setActiveGroup] = useState<string | null>(null)
+  const [isOverflowing, setIsOverflowing] = useState(false)
+  const outerRef = useRef<HTMLDivElement>(null)
+  const isOverflowingRef = useRef(false)
+  const expandedHeightRef = useRef(0)
+
+  const checkOverflow = useCallback(() => {
+    if (!outerRef.current) return
+
+    let isOverflow: boolean
+    if (!isOverflowingRef.current) {
+      // Expanded: trust DOM scrollHeight
+      isOverflow = outerRef.current.scrollHeight > outerRef.current.clientHeight
+      if (isOverflow) {
+        expandedHeightRef.current = outerRef.current.scrollHeight
+      }
+    } else {
+      // Collapsed: compare cached expanded height against container
+      isOverflow = expandedHeightRef.current > outerRef.current.clientHeight
+    }
+
+    if (isOverflow !== isOverflowingRef.current) {
+      isOverflowingRef.current = isOverflow
+      setIsOverflowing(isOverflow)
+      if (isOverflow) setActiveGroup(null)
+    }
+  }, [])
+
+  useEffect(() => {
+    checkOverflow()
+    const ro = new ResizeObserver(checkOverflow)
+    if (outerRef.current) ro.observe(outerRef.current)
+    window.addEventListener('resize', checkOverflow)
+    return () => {
+      ro.disconnect()
+      window.removeEventListener('resize', checkOverflow)
+    }
+  }, [checkOverflow])
+
+  const handleGroupToggle = (groupId: string) => {
+    if (!isOverflowing) return
+    setActiveGroup((prev) => (prev === groupId ? null : groupId))
+  }
 
-  const toggleGroup = (id: string) => {
-    setOpenGroups((prev) => {
-      const next = new Set(prev)
-      next.has(id) ? next.delete(id) : next.add(id)
-      return next
-    })
+  const isGroupOpen = (groupId: string) => {
+    if (!isOverflowing) return true
+    return activeGroup === groupId
   }
 
+  const outerClasses = useMemo(
+    () =>
+      cn(
+        'flex-1 flex flex-col gap-6 justify-center min-h-0',
+        isOverflowing && 'overflow-y-auto'
+      ),
+    [isOverflowing]
+  )
+
   return (
-    <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>
+    <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 overflow-hidden">
+      <div ref={outerRef} className={outerClasses}>
+        <div className="shrink-0">
           <h1 className="text-4xl font-medium tracking-tight">
             {t('changelog.title')}
           </h1>
@@ -60,24 +101,25 @@ function ChangelogSidebar() {
           </p>
         </div>
 
-        <div className="flex flex-col gap-3 min-h-0 flex-1">
-          <h2 className="text-sm font-semibold tracking-tight shrink-0">
+        <div className="flex flex-col gap-3">
+          <h2 className="shrink-0 text-sm font-semibold tracking-tight">
             {t('changelog.sdkVersions')}
           </h2>
-          <div className="flex flex-col gap-3 min-h-0 flex-1">
+          <div className="flex flex-col gap-3">
             {SDK_GROUPS.map((group) => (
               <SdkGroupSection
                 key={group.id}
                 group={group}
                 t={t}
-                open={openGroups.has(group.id)}
-                onToggle={() => toggleGroup(group.id)}
+                open={isGroupOpen(group.id)}
+                onToggle={() => handleGroupToggle(group.id)}
+                isAccordion={isOverflowing}
               />
             ))}
           </div>
         </div>
 
-        <div>
+        <div className="shrink-0">
           <h3 className="text-sm font-semibold tracking-tight">
             {t('changelog.subscribe.title')}
           </h3>
@@ -278,21 +320,23 @@ function SdkGroupSection({
   t,
   open,
   onToggle,
+  isAccordion,
 }: {
   group: (typeof SDK_GROUPS)[0]
   t: (key: string) => string
   open: boolean
   onToggle: () => void
+  isAccordion: boolean
 }) {
   const isTanstack = group.id === 'tanstack'
 
   return (
-    <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">
+    <div className="flex flex-col">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex items-center gap-1.5 w-full py-1 group"
+      >
         <span className="flex-1 min-w-0 flex items-center gap-1.5">
           {isTanstack ? (
             <span className="shrink-0">
@@ -314,12 +358,17 @@ function SdkGroupSection({
             {t(`changelog.sdkGroups.${group.label}`)}
           </span>
         </span>
-        <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">
+        {isAccordion && (
+          <ChevronDown
+            className={cn(
+              'size-3.5 shrink-0 text-muted-foreground transition-transform group-hover:text-foreground',
+              open && 'rotate-180'
+            )}
+          />
+        )}
+      </button>
+      {open && (
+        <ul className="mt-1 flex flex-col">
           {group.items.map((sdk) => (
             <li key={sdk.name}>
               <a
@@ -338,8 +387,8 @@ function SdkGroupSection({
             </li>
           ))}
         </ul>
-      </CollapsibleContent>
-    </Collapsible>
+      )}
+    </div>
   )
 }
 

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

@@ -85,7 +85,7 @@ export const SDK_GROUPS: SdkGroup[] = [
     "items": [
       {
         "name": "@allbluecn/web-app",
-        "version": "v0.4.15",
+        "version": "v0.4.16",
         "lastUpdate": "Aug 23, 2026",
         "source": "apps/web/package.json",
         "docsUrl": "https://github.com/allbluecn/allblue"