Skip to content

Commit 8935cca

Browse files
Claudehotlong
Claude
and
hotlong
authored
Fix sidebar metadata navigation by replacing prop-based handlers with TanStack Router
Agent-Logs-Url: https://github.com/objectstack-ai/framework/sessions/964addb7-666d-4157-bcfb-55dc9ac11d14 Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent dd8f5c9 commit 8935cca

File tree

7 files changed

+33
-23
lines changed

7 files changed

+33
-23
lines changed

‎apps/studio/src/components/app-sidebar.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {
3636
type LucideIcon,
3737
} from "lucide-react"
3838
import { useState, useEffect, useCallback, useMemo } from "react"
39+
import { useNavigate, useParams, useLocation } from '@tanstack/react-router';
3940
import { useClient, useMetadataSubscriptionCallback } from '@objectstack/client-react';
4041
import type { InstalledPackage } from '@objectstack/spec/kernel';
4142
import { useSidebarGroups, useAllMetadataIcons } from '@/plugins/hooks';
@@ -167,23 +168,24 @@ const PKG_TYPE_ICONS: Record<string, LucideIcon> = {
167168
};
168169

169170
interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
170-
selectedObject: string | null;
171-
onSelectObject: (name: string) => void;
172-
selectedMeta?: { type: string; name: string } | null;
173-
onSelectMeta?: (type: string, name: string) => void;
174171
packages: InstalledPackage[];
175172
selectedPackage: InstalledPackage | null;
176173
onSelectPackage: (pkg: InstalledPackage) => void;
177-
onSelectView?: (view: 'overview' | 'packages' | 'api-console') => void;
178-
selectedView?: 'overview' | 'packages' | 'object' | 'metadata' | 'api-console';
179174
}
180175

181176
export function AppSidebar({
182-
selectedObject, onSelectObject, selectedMeta, onSelectMeta,
183-
packages, selectedPackage, onSelectPackage, onSelectView, selectedView,
177+
packages, selectedPackage, onSelectPackage,
184178
...props
185179
}: AppSidebarProps) {
186180
const client = useClient();
181+
const navigate = useNavigate();
182+
const params = useParams({ strict: false });
183+
const location = useLocation();
184+
185+
// Extract current selection from URL params
186+
const selectedObject = params.name && params.package && !params.type ? params.name : null;
187+
const selectedMeta = params.type && params.name ? { type: params.type, name: params.name } : null;
188+
187189
const [loading, setLoading] = useState(false);
188190
const [searchQuery, setSearchQuery] = useState("");
189191
const [metaTypes, setMetaTypes] = useState<string[]>([]);
@@ -372,8 +374,8 @@ export function AppSidebar({
372374
<SidebarMenu>
373375
<SidebarMenuItem>
374376
<SidebarMenuButton
375-
isActive={selectedView === 'overview' && !selectedObject}
376-
onClick={() => { onSelectObject(''); onSelectView?.('overview'); }}
377+
isActive={!!params.package && !params.name && !params.type}
378+
onClick={() => navigate({ to: `/${selectedPackage?.manifest?.id || 'default'}` })}
377379
>
378380
<LayoutDashboard className="h-4 w-4" />
379381
<span>Overview</span>
@@ -466,9 +468,11 @@ export function AppSidebar({
466468
const isActive = isObjectType
467469
? selectedObject === itemName
468470
: selectedMeta?.type === type && selectedMeta?.name === itemName;
471+
472+
const packagePath = selectedPackage?.manifest?.id || 'default';
469473
const handleClick = isObjectType
470-
? () => onSelectObject(itemName)
471-
: () => onSelectMeta?.(type, itemName);
474+
? () => navigate({ to: `/${packagePath}/objects/${itemName}` })
475+
: () => navigate({ to: `/${packagePath}/metadata/${type}/${itemName}` });
472476

473477
return (
474478
<SidebarMenuSubItem key={itemName}>
@@ -550,7 +554,7 @@ export function AppSidebar({
550554
<SidebarMenuSubItem key={itemName}>
551555
<SidebarMenuSubButton
552556
isActive={selectedObject === itemName}
553-
onClick={() => onSelectObject(itemName)}
557+
onClick={() => navigate({ to: `/${selectedPackage?.manifest?.id || 'default'}/objects/${itemName}` })}
554558
>
555559
<span className="truncate">
556560
{isSystemObject(item) && (
@@ -572,8 +576,8 @@ export function AppSidebar({
572576
<SidebarMenuItem>
573577
<SidebarMenuButton
574578
tooltip="API Console"
575-
isActive={selectedView === 'api-console'}
576-
onClick={() => onSelectView?.('api-console')}
579+
isActive={location.pathname === '/api-console'}
580+
onClick={() => navigate({ to: '/api-console' })}
577581
>
578582
<Globe className="h-4 w-4" />
579583
<span>API Console</span>
@@ -582,8 +586,8 @@ export function AppSidebar({
582586
<SidebarMenuItem>
583587
<SidebarMenuButton
584588
tooltip="Packages"
585-
isActive={selectedView === 'packages'}
586-
onClick={() => onSelectView?.('packages')}
589+
isActive={location.pathname === '/packages'}
590+
onClick={() => navigate({ to: '/packages' })}
587591
>
588592
<Package className="h-4 w-4" />
589593
<span>Packages</span>

‎apps/studio/src/routes/$package.metadata.$type.$name.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ import { usePackages } from '../hooks/usePackages';
88

99
function MetadataViewComponent() {
1010
const { type, name } = Route.useParams();
11-
const { packages, selectedPackage } = usePackages();
11+
const { packages, selectedPackage, setSelectedPackage } = usePackages();
1212

1313
return (
1414
<>
1515
<AppSidebar
1616
packages={packages}
1717
selectedPackage={selectedPackage}
18+
onSelectPackage={setSelectedPackage}
1819
/>
1920
<main className="flex min-w-0 flex-1 flex-col h-svh overflow-hidden bg-background">
2021
<SiteHeader

‎apps/studio/src/routes/$package.objects.$name.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ import { usePackages } from '../hooks/usePackages';
88

99
function ObjectViewComponent() {
1010
const { name } = Route.useParams();
11-
const { packages, selectedPackage } = usePackages();
11+
const { packages, selectedPackage, setSelectedPackage } = usePackages();
1212

1313
return (
1414
<>
1515
<AppSidebar
1616
packages={packages}
1717
selectedPackage={selectedPackage}
18+
onSelectPackage={setSelectedPackage}
1819
/>
1920
<main className="flex min-w-0 flex-1 flex-col h-svh overflow-hidden bg-background">
2021
<SiteHeader

‎apps/studio/src/routes/$package.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { usePackages } from '../hooks/usePackages';
77
import { useEffect } from 'react';
88

99
function PackageLayoutComponent() {
10-
const { packageId } = Route.useParams();
10+
const { package: packageId } = Route.useParams();
1111
const { packages, selectedPackage, setSelectedPackage } = usePackages();
1212

1313
// Update selected package when route param changes
@@ -23,6 +23,7 @@ function PackageLayoutComponent() {
2323
<AppSidebar
2424
packages={packages}
2525
selectedPackage={selectedPackage}
26+
onSelectPackage={setSelectedPackage}
2627
/>
2728
<main className="flex min-w-0 flex-1 flex-col h-svh overflow-hidden bg-background">
2829
<SiteHeader

‎apps/studio/src/routes/api-console.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@ import { ApiConsolePage } from '../components/ApiConsolePage';
77
import { usePackages } from '../hooks/usePackages';
88

99
function ApiConsoleComponent() {
10-
const { packages, selectedPackage } = usePackages();
10+
const { packages, selectedPackage, setSelectedPackage } = usePackages();
1111

1212
return (
1313
<>
1414
<AppSidebar
1515
packages={packages}
1616
selectedPackage={selectedPackage}
17+
onSelectPackage={setSelectedPackage}
1718
/>
1819
<main className="flex min-w-0 flex-1 flex-col h-svh overflow-hidden bg-background">
1920
<SiteHeader

‎apps/studio/src/routes/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@ import { DeveloperOverview } from '../components/DeveloperOverview';
77
import { usePackages } from '../hooks/usePackages';
88

99
function IndexComponent() {
10-
const { packages, selectedPackage } = usePackages();
10+
const { packages, selectedPackage, setSelectedPackage } = usePackages();
1111

1212
return (
1313
<>
1414
<AppSidebar
1515
packages={packages}
1616
selectedPackage={selectedPackage}
17+
onSelectPackage={setSelectedPackage}
1718
/>
1819
<main className="flex min-w-0 flex-1 flex-col h-svh overflow-hidden bg-background">
1920
<SiteHeader

‎apps/studio/src/routes/packages.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@ import { PackageManager } from '../components/PackageManager';
77
import { usePackages } from '../hooks/usePackages';
88

99
function PackagesViewComponent() {
10-
const { packages, selectedPackage } = usePackages();
10+
const { packages, selectedPackage, setSelectedPackage } = usePackages();
1111

1212
return (
1313
<>
1414
<AppSidebar
1515
packages={packages}
1616
selectedPackage={selectedPackage}
17+
onSelectPackage={setSelectedPackage}
1718
/>
1819
<main className="flex min-w-0 flex-1 flex-col h-svh overflow-hidden bg-background">
1920
<SiteHeader

0 commit comments

Comments
 (0)