@allbluecn/web-app 0.4.13 → 0.4.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@allbluecn/web-app",
3
- "version": "0.4.13",
3
+ "version": "0.4.16",
4
4
  "license": "AGPL-3.0-or-later",
5
5
  "type": "module",
6
6
  "files": [
@@ -136,13 +136,13 @@
136
136
  "tw-animate-css": "^1.4.0",
137
137
  "zod": "^4.4.3",
138
138
  "@allbluecn/ai-gateway": "0.4.11",
139
- "@allbluecn/database": "0.4.11",
140
139
  "@allbluecn/kernel": "0.3.0",
141
140
  "@allbluecn/plugins-core": "0.4.11",
142
141
  "@allbluecn/prototype": "0.1.1",
143
142
  "@allbluecn/shared": "0.4.11",
144
143
  "@allbluecn/tiptap": "0.4.11",
145
- "@allbluecn/ui": "0.4.11"
144
+ "@allbluecn/ui": "0.4.11",
145
+ "@allbluecn/database": "0.4.11"
146
146
  },
147
147
  "devDependencies": {
148
148
  "@babel/parser": "^8.0.4",
@@ -16,10 +16,10 @@
16
16
  // along with this program. If not, see <https://www.gnu.org/licenses/>.
17
17
 
18
18
  import { cn } from '@/lib/utils'
19
- import { ScrollText, AlertTriangle, ArrowLeft } from 'lucide-react'
19
+ import { ScrollText, AlertTriangle, ArrowLeft, ChevronDown } from 'lucide-react'
20
20
  import ReactMarkdown from 'react-markdown'
21
21
  import { useTranslation } from 'react-i18next'
22
- import { useMemo, useState } from 'react'
22
+ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
23
23
  import { Route } from '@/routes/_nav/changelog/route'
24
24
  import type { DeveloperLogEntry } from '@allbluecn/shared'
25
25
  import { SDK_GROUPS } from '@/lib/changelog/sdk-versions'
@@ -31,12 +31,69 @@ const REQUIRES_ACTION_TAGS = new Set(['breaking'])
31
31
 
32
32
  function ChangelogSidebar() {
33
33
  const { t } = useTranslation('common')
34
+ const [activeGroup, setActiveGroup] = useState<string | null>(null)
35
+ const [isOverflowing, setIsOverflowing] = useState(false)
36
+ const outerRef = useRef<HTMLDivElement>(null)
37
+ const isOverflowingRef = useRef(false)
38
+ const expandedHeightRef = useRef(0)
39
+
40
+ const checkOverflow = useCallback(() => {
41
+ if (!outerRef.current) return
42
+
43
+ let isOverflow: boolean
44
+ if (!isOverflowingRef.current) {
45
+ // Expanded: trust DOM scrollHeight
46
+ isOverflow = outerRef.current.scrollHeight > outerRef.current.clientHeight
47
+ if (isOverflow) {
48
+ expandedHeightRef.current = outerRef.current.scrollHeight
49
+ }
50
+ } else {
51
+ // Collapsed: compare cached expanded height against container
52
+ isOverflow = expandedHeightRef.current > outerRef.current.clientHeight
53
+ }
54
+
55
+ if (isOverflow !== isOverflowingRef.current) {
56
+ isOverflowingRef.current = isOverflow
57
+ setIsOverflowing(isOverflow)
58
+ if (isOverflow) setActiveGroup(null)
59
+ }
60
+ }, [])
61
+
62
+ useEffect(() => {
63
+ checkOverflow()
64
+ const ro = new ResizeObserver(checkOverflow)
65
+ if (outerRef.current) ro.observe(outerRef.current)
66
+ window.addEventListener('resize', checkOverflow)
67
+ return () => {
68
+ ro.disconnect()
69
+ window.removeEventListener('resize', checkOverflow)
70
+ }
71
+ }, [checkOverflow])
72
+
73
+ const handleGroupToggle = (groupId: string) => {
74
+ if (!isOverflowing) return
75
+ setActiveGroup((prev) => (prev === groupId ? null : groupId))
76
+ }
77
+
78
+ const isGroupOpen = (groupId: string) => {
79
+ if (!isOverflowing) return true
80
+ return activeGroup === groupId
81
+ }
82
+
83
+ const outerClasses = useMemo(
84
+ () =>
85
+ cn(
86
+ 'flex-1 flex flex-col gap-6 justify-center min-h-0',
87
+ isOverflowing && 'overflow-y-auto'
88
+ ),
89
+ [isOverflowing]
90
+ )
34
91
 
35
92
  return (
36
- <aside className="shrink-0 w-150 h-full flex flex-col py-6 pr-12 pl-10 border-r border-border bg-muted/50">
37
- <div className="flex-1 flex flex-col gap-8 justify-center">
38
- <div>
39
- <h1 className="text-4xl font-medium tracking-tight">
93
+ <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">
94
+ <div ref={outerRef} className={outerClasses}>
95
+ <div className="shrink-0">
96
+ <h1 className="text-4xl font-medium tracking-tight">
40
97
  {t('changelog.title')}
41
98
  </h1>
42
99
  <p className="text-sm text-muted-foreground mt-3 leading-relaxed">
@@ -44,16 +101,25 @@ function ChangelogSidebar() {
44
101
  </p>
45
102
  </div>
46
103
 
47
- <div className="flex flex-col gap-4">
48
- <h2 className="text-sm font-semibold tracking-tight">
104
+ <div className="flex flex-col gap-3">
105
+ <h2 className="shrink-0 text-sm font-semibold tracking-tight">
49
106
  {t('changelog.sdkVersions')}
50
107
  </h2>
51
- {SDK_GROUPS.map((group) => (
52
- <SdkGroupSection key={group.id} group={group} t={t} />
53
- ))}
108
+ <div className="flex flex-col gap-3">
109
+ {SDK_GROUPS.map((group) => (
110
+ <SdkGroupSection
111
+ key={group.id}
112
+ group={group}
113
+ t={t}
114
+ open={isGroupOpen(group.id)}
115
+ onToggle={() => handleGroupToggle(group.id)}
116
+ isAccordion={isOverflowing}
117
+ />
118
+ ))}
119
+ </div>
54
120
  </div>
55
121
 
56
- <div>
122
+ <div className="shrink-0">
57
123
  <h3 className="text-sm font-semibold tracking-tight">
58
124
  {t('changelog.subscribe.title')}
59
125
  </h3>
@@ -249,53 +315,79 @@ function ChangelogDetail({
249
315
  )
250
316
  }
251
317
 
252
- function SdkGroupSection({ group, t }: { group: (typeof SDK_GROUPS)[0]; t: (key: string) => string }) {
318
+ function SdkGroupSection({
319
+ group,
320
+ t,
321
+ open,
322
+ onToggle,
323
+ isAccordion,
324
+ }: {
325
+ group: (typeof SDK_GROUPS)[0]
326
+ t: (key: string) => string
327
+ open: boolean
328
+ onToggle: () => void
329
+ isAccordion: boolean
330
+ }) {
253
331
  const isTanstack = group.id === 'tanstack'
254
332
 
255
333
  return (
256
- <div>
257
- <div
258
- className="flex items-center gap-1.5 w-full py-1"
334
+ <div className="flex flex-col">
335
+ <button
336
+ type="button"
337
+ onClick={onToggle}
338
+ className="flex items-center gap-1.5 w-full py-1 group"
259
339
  >
260
- {isTanstack ? (
261
- <span className="shrink-0">
262
- <img
263
- src="/tanstack-landscape-black.svg"
264
- alt="TanStack"
265
- className="h-4 dark:hidden"
266
- />
267
- <img
268
- src="/tanstack-landscape-white.svg"
269
- alt="TanStack"
270
- className="hidden h-4 dark:block"
271
- />
340
+ <span className="flex-1 min-w-0 flex items-center gap-1.5">
341
+ {isTanstack ? (
342
+ <span className="shrink-0">
343
+ <img
344
+ src="/tanstack-landscape-black.svg"
345
+ alt="TanStack"
346
+ className="h-4 dark:hidden"
347
+ />
348
+ <img
349
+ src="/tanstack-landscape-white.svg"
350
+ alt="TanStack"
351
+ className="hidden h-4 dark:block"
352
+ />
353
+ </span>
354
+ ) : (
355
+ <span className="text-base">{group.icon}</span>
356
+ )}
357
+ <span className="text-xs mt-1 font-semibold text-foreground/80">
358
+ {t(`changelog.sdkGroups.${group.label}`)}
272
359
  </span>
273
- ) : (
274
- <span className="text-base">{group.icon}</span>
275
- )}
276
- <span className="text-xs mt-1 font-semibold text-foreground/80">
277
- {t(`changelog.sdkGroups.${group.label}`)}
278
360
  </span>
279
- </div>
280
- <ul className="mt-1 flex flex-col">
281
- {group.items.map((sdk) => (
282
- <li key={sdk.name}>
283
- <a
284
- href={sdk.docsUrl || undefined}
285
- target={sdk.docsUrl ? '_blank' : undefined}
286
- rel={sdk.docsUrl ? 'noopener noreferrer' : undefined}
287
- className="flex items-center justify-between gap-2 py-1.5 group"
288
- >
289
- <span className="text-xs font-medium text-muted-foreground group-hover:text-primary transition-colors truncate">
290
- {sdk.name}
291
- </span>
292
- <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">
293
- {sdk.version}
294
- </code>
295
- </a>
296
- </li>
297
- ))}
298
- </ul>
361
+ {isAccordion && (
362
+ <ChevronDown
363
+ className={cn(
364
+ 'size-3.5 shrink-0 text-muted-foreground transition-transform group-hover:text-foreground',
365
+ open && 'rotate-180'
366
+ )}
367
+ />
368
+ )}
369
+ </button>
370
+ {open && (
371
+ <ul className="mt-1 flex flex-col">
372
+ {group.items.map((sdk) => (
373
+ <li key={sdk.name}>
374
+ <a
375
+ href={sdk.docsUrl || undefined}
376
+ target={sdk.docsUrl ? '_blank' : undefined}
377
+ rel={sdk.docsUrl ? 'noopener noreferrer' : undefined}
378
+ className="flex items-center justify-between gap-2 py-1.5 group"
379
+ >
380
+ <span className="text-xs font-medium text-muted-foreground group-hover:text-primary transition-colors truncate">
381
+ {sdk.name}
382
+ </span>
383
+ <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">
384
+ {sdk.version}
385
+ </code>
386
+ </a>
387
+ </li>
388
+ ))}
389
+ </ul>
390
+ )}
299
391
  </div>
300
392
  )
301
393
  }
@@ -9,70 +9,70 @@ export const SDK_GROUPS: SdkGroup[] = [
9
9
  {
10
10
  "name": "@tanstack/react-start",
11
11
  "version": "v1.168.46",
12
- "lastUpdate": "Aug 24, 2026",
12
+ "lastUpdate": "Aug 23, 2026",
13
13
  "source": "apps/web/package.json#dependencies",
14
14
  "docsUrl": "https://tanstack.com/start/latest"
15
15
  },
16
16
  {
17
17
  "name": "@tanstack/react-router",
18
18
  "version": "v1.170.29",
19
- "lastUpdate": "Aug 24, 2026",
19
+ "lastUpdate": "Aug 23, 2026",
20
20
  "source": "apps/web/package.json#dependencies",
21
21
  "docsUrl": "https://tanstack.com/router/latest"
22
22
  },
23
23
  {
24
24
  "name": "@tanstack/react-query",
25
25
  "version": "v5.101.2",
26
- "lastUpdate": "Aug 24, 2026",
26
+ "lastUpdate": "Aug 23, 2026",
27
27
  "source": "apps/web/package.json#dependencies",
28
28
  "docsUrl": "https://tanstack.com/query/latest"
29
29
  },
30
30
  {
31
31
  "name": "@tanstack/ai",
32
32
  "version": "v0.43.0",
33
- "lastUpdate": "Aug 24, 2026",
33
+ "lastUpdate": "Aug 23, 2026",
34
34
  "source": "apps/web/package.json#dependencies",
35
35
  "docsUrl": "https://tanstack.com/ai/latest"
36
36
  },
37
37
  {
38
38
  "name": "@tanstack/react-table",
39
39
  "version": "v9.1.0",
40
- "lastUpdate": "Aug 24, 2026",
40
+ "lastUpdate": "Aug 23, 2026",
41
41
  "source": "apps/web/package.json#dependencies",
42
42
  "docsUrl": "https://tanstack.com/table/latest"
43
43
  },
44
44
  {
45
45
  "name": "@tanstack/react-form",
46
46
  "version": "v2.0.0-alpha.0",
47
- "lastUpdate": "Aug 24, 2026",
47
+ "lastUpdate": "Aug 23, 2026",
48
48
  "source": "apps/web/package.json#dependencies",
49
49
  "docsUrl": "https://tanstack.com/form/latest"
50
50
  },
51
51
  {
52
52
  "name": "@tanstack/charts",
53
53
  "version": "v0.9.0",
54
- "lastUpdate": "Aug 24, 2026",
54
+ "lastUpdate": "Aug 23, 2026",
55
55
  "source": "apps/admin/package.json#dependencies",
56
56
  "docsUrl": "https://tanstack.com/charts/latest"
57
57
  },
58
58
  {
59
59
  "name": "@tanstack/react-pacer",
60
60
  "version": "v0.22.1",
61
- "lastUpdate": "Aug 24, 2026",
61
+ "lastUpdate": "Aug 23, 2026",
62
62
  "source": "apps/web/package.json#dependencies",
63
63
  "docsUrl": "https://tanstack.com/pacer/latest"
64
64
  },
65
65
  {
66
66
  "name": "@tanstack/react-hotkeys",
67
67
  "version": "v0.10.0",
68
- "lastUpdate": "Aug 24, 2026",
68
+ "lastUpdate": "Aug 23, 2026",
69
69
  "source": "apps/web/package.json#dependencies",
70
70
  "docsUrl": "https://tanstack.com/hotkeys/latest"
71
71
  },
72
72
  {
73
73
  "name": "@tanstack/react-virtual",
74
74
  "version": "v3.14.9",
75
- "lastUpdate": "Aug 24, 2026",
75
+ "lastUpdate": "Aug 23, 2026",
76
76
  "source": "apps/admin/package.json#dependencies",
77
77
  "docsUrl": "https://tanstack.com/virtual/latest"
78
78
  }
@@ -85,15 +85,15 @@ export const SDK_GROUPS: SdkGroup[] = [
85
85
  "items": [
86
86
  {
87
87
  "name": "@allbluecn/web-app",
88
- "version": "v0.4.12",
89
- "lastUpdate": "Aug 24, 2026",
88
+ "version": "v0.4.16",
89
+ "lastUpdate": "Aug 23, 2026",
90
90
  "source": "apps/web/package.json",
91
91
  "docsUrl": "https://github.com/allbluecn/allblue"
92
92
  },
93
93
  {
94
94
  "name": "@allbluecn/kernel",
95
95
  "version": "v0.3.0",
96
- "lastUpdate": "Aug 24, 2026",
96
+ "lastUpdate": "Aug 23, 2026",
97
97
  "source": "packages/kernel/package.json",
98
98
  "docsUrl": "https://github.com/allbluecn/allblue"
99
99
  }
@@ -107,42 +107,42 @@ export const SDK_GROUPS: SdkGroup[] = [
107
107
  {
108
108
  "name": "Vite",
109
109
  "version": "v8.1.5",
110
- "lastUpdate": "Aug 24, 2026",
110
+ "lastUpdate": "Aug 23, 2026",
111
111
  "source": "apps/web/package.json#devDependencies",
112
112
  "docsUrl": "https://vite.dev/"
113
113
  },
114
114
  {
115
115
  "name": "Node.js",
116
116
  "version": "v24.19.0",
117
- "lastUpdate": "Aug 24, 2026",
117
+ "lastUpdate": "Aug 23, 2026",
118
118
  "source": ".nvmrc",
119
119
  "docsUrl": "https://nodejs.org/"
120
120
  },
121
121
  {
122
122
  "name": "Prisma",
123
123
  "version": "v7.8.0",
124
- "lastUpdate": "Aug 24, 2026",
124
+ "lastUpdate": "Aug 23, 2026",
125
125
  "source": "packages/database/package.json#devDependencies",
126
126
  "docsUrl": "https://www.prisma.io/docs"
127
127
  },
128
128
  {
129
129
  "name": "shadcn UI",
130
130
  "version": "v1.2.4",
131
- "lastUpdate": "Aug 24, 2026",
131
+ "lastUpdate": "Aug 23, 2026",
132
132
  "source": "apps/web/package.json#dependencies",
133
133
  "docsUrl": "https://ui.shadcn.com/"
134
134
  },
135
135
  {
136
136
  "name": "TipTap",
137
137
  "version": "v3.27.4",
138
- "lastUpdate": "Aug 24, 2026",
138
+ "lastUpdate": "Aug 23, 2026",
139
139
  "source": "packages/shared/package.json#devDependencies",
140
140
  "docsUrl": "https://tiptap.dev/"
141
141
  },
142
142
  {
143
143
  "name": "Lucide React",
144
144
  "version": "v1.24.0",
145
- "lastUpdate": "Aug 24, 2026",
145
+ "lastUpdate": "Aug 23, 2026",
146
146
  "source": "packages/ui/package.json#dependencies",
147
147
  "docsUrl": "https://lucide.dev/"
148
148
  }