Skip to content

Commit 3ce4a85

Browse files
DuncidDuncid
authored
Fixing issues with Tree and Navigation (#9699)
1 parent b1de44a commit 3ce4a85

File tree

6 files changed

+142
-171
lines changed

6 files changed

+142
-171
lines changed

‎front/components/assistant/conversation/SidebarMenu.tsx

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
NavigationListLabel,
1717
PlusIcon,
1818
RobotIcon,
19-
ScrollArea,
2019
TrashIcon,
2120
XMarkIcon,
2221
} from "@dust-tt/sparkle";
@@ -278,7 +277,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
278277
Error loading conversations
279278
</Label>
280279
)}
281-
<ScrollArea className="w-full px-2">
280+
<NavigationList className="w-full px-2">
282281
{conversationsByDate &&
283282
Object.keys(conversationsByDate).map((dateLabel) => (
284283
<RenderConversations
@@ -292,7 +291,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
292291
owner={owner}
293292
/>
294293
))}
295-
</ScrollArea>
294+
</NavigationList>
296295
</div>
297296
</div>
298297
</div>
@@ -318,18 +317,16 @@ const RenderConversations = ({
318317
}
319318

320319
return (
321-
<div>
320+
<>
322321
<NavigationListLabel label={dateLabel} />
323-
<NavigationList>
324-
{conversations.map((conversation) => (
325-
<RenderConversation
326-
key={conversation.sId}
327-
conversation={conversation}
328-
{...props}
329-
/>
330-
))}
331-
</NavigationList>
332-
</div>
322+
{conversations.map((conversation) => (
323+
<RenderConversation
324+
key={conversation.sId}
325+
conversation={conversation}
326+
{...props}
327+
/>
328+
))}
329+
</>
333330
);
334331
};
335332

‎front/components/navigation/NavigationSidebar.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -93,13 +93,13 @@ export const NavigationSidebar = React.forwardRef<
9393
/>
9494
))}
9595
</TabsList>
96-
{navs.map((tab) => (
97-
<TabsContent key={tab.id} value={tab.id}>
98-
{subNavigation && tab.isCurrent(activePath) && (
99-
<>
100-
{subNavigation.map((nav) => (
101-
<div key={nav.id} className="px-2">
102-
<NavigationList>
96+
<NavigationList className="px-2">
97+
{navs.map((tab) => (
98+
<TabsContent key={tab.id} value={tab.id}>
99+
{subNavigation && tab.isCurrent(activePath) && (
100+
<>
101+
{subNavigation.map((nav) => (
102+
<div key={nav.id}>
103103
{nav.label && (
104104
<NavigationListLabel
105105
label={nav.label}
@@ -136,13 +136,13 @@ export const NavigationSidebar = React.forwardRef<
136136
)}
137137
</React.Fragment>
138138
))}
139-
</NavigationList>
140-
</div>
141-
))}
142-
</>
143-
)}
144-
</TabsContent>
145-
))}
139+
</div>
140+
))}
141+
</>
142+
)}
143+
</TabsContent>
144+
))}
145+
</NavigationList>
146146
</Tabs>
147147
</div>
148148
)}

‎front/components/spaces/SpaceSideBarMenu.tsx

Lines changed: 49 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
NavigationList,
88
NavigationListLabel,
99
PlusIcon,
10-
ScrollArea,
1110
Tree,
1211
} from "@dust-tt/sparkle";
1312
import type {
@@ -106,74 +105,65 @@ export default function SpaceSideBarMenu({
106105
return spaces.map((space) => (
107106
<Fragment key={`space-${space.sId}`}>
108107
{space.kind === "system" ? (
109-
<NavigationList>
110-
<SystemSpaceMenu owner={owner} space={space} />
111-
</NavigationList>
108+
<SystemSpaceMenu owner={owner} space={space} />
112109
) : (
113-
<NavigationList>
114-
<SpaceMenu
115-
owner={owner}
116-
space={space}
117-
isMember={!!spacesAsUser.find((v) => v.sId === space.sId)}
118-
/>
119-
</NavigationList>
110+
<SpaceMenu
111+
owner={owner}
112+
space={space}
113+
isMember={!!spacesAsUser.find((v) => v.sId === space.sId)}
114+
/>
120115
)}
121116
</Fragment>
122117
));
123118
};
124119

125120
return (
126121
<div className="flex h-0 min-h-full w-full overflow-y-auto">
127-
<ScrollArea className="w-full">
128-
<div className="px-2 pb-2">
129-
<NavigationList>
130-
{sortedGroupedSpaces.map(({ section, spaces }, index) => {
131-
if (section === "public" && !spaces.length) {
132-
return null;
133-
}
134-
135-
if (section === "restricted" && !spaces.length && !isAdmin) {
136-
return null;
137-
}
138-
139-
const sectionDetails = getSpaceSectionDetails(section);
140-
141-
return (
142-
<Fragment key={`space-section-${index}`}>
143-
<div className="flex items-center justify-between pr-1">
144-
<NavigationListLabel
145-
label={sectionDetails.label}
146-
variant="secondary"
122+
<NavigationList className="w-full px-2 pb-2">
123+
{sortedGroupedSpaces.map(({ section, spaces }, index) => {
124+
if (section === "public" && !spaces.length) {
125+
return null;
126+
}
127+
128+
if (section === "restricted" && !spaces.length && !isAdmin) {
129+
return null;
130+
}
131+
132+
const sectionDetails = getSpaceSectionDetails(section);
133+
134+
return (
135+
<Fragment key={`space-section-${index}`}>
136+
<div className="flex items-center justify-between pr-1">
137+
<NavigationListLabel
138+
label={sectionDetails.label}
139+
variant="secondary"
140+
/>
141+
{sectionDetails.displayCreateSpaceButton &&
142+
isAdmin &&
143+
openSpaceCreationModal && (
144+
<Button
145+
className="mt-4"
146+
size="xs"
147+
variant="ghost"
148+
label="New"
149+
icon={PlusIcon}
150+
onClick={() =>
151+
openSpaceCreationModal({
152+
defaultRestricted: sectionDetails.defaultRestricted,
153+
})
154+
}
147155
/>
148-
{sectionDetails.displayCreateSpaceButton &&
149-
isAdmin &&
150-
openSpaceCreationModal && (
151-
<Button
152-
className="mt-4"
153-
size="xs"
154-
variant="ghost"
155-
label="New"
156-
icon={PlusIcon}
157-
onClick={() =>
158-
openSpaceCreationModal({
159-
defaultRestricted:
160-
sectionDetails.defaultRestricted,
161-
})
162-
}
163-
/>
164-
)}
165-
</div>
166-
{renderSpaceItems(
167-
spaces.toSorted(compareSpaces),
168-
spacesAsUser,
169-
owner
170156
)}
171-
</Fragment>
172-
);
173-
})}
174-
</NavigationList>
175-
</div>
176-
</ScrollArea>
157+
</div>
158+
{renderSpaceItems(
159+
spaces.toSorted(compareSpaces),
160+
spacesAsUser,
161+
owner
162+
)}
163+
</Fragment>
164+
);
165+
})}
166+
</NavigationList>
177167
</div>
178168
);
179169
}

‎sparkle/src/components/NavigationList.tsx

Lines changed: 19 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -13,42 +13,28 @@ import { Button } from "@sparkle/components/Button";
1313
import { MoreIcon } from "@sparkle/icons";
1414
import { cn } from "@sparkle/lib/utils";
1515

16-
const listStyles = cva("s-flex", {
17-
variants: {
18-
layout: {
19-
container: "s-gap-1 s-relative s-flex-col s-overflow-hidden",
20-
item: cn(
21-
"s-box-border s-items-center s-w-full s-flex s-gap-1.5 s-cursor-pointer s-select-none s-items-center s-outline-none s-rounded-xl s-text-sm s-px-3 s-py-2 s-transition-colors s-duration-300",
22-
"data-[disabled]:s-pointer-events-none data-[disabled]:s-text-muted-foreground",
23-
"hover:s-text-foreground hover:s-bg-structure-150"
24-
),
16+
const NavigationListItemStyles = cva(
17+
"s-box-border s-flex s-items-center s-w-full s-gap-1.5 s-cursor-pointer s-select-none s-items-center s-outline-none s-rounded-xl s-text-sm s-px-3 s-py-2 s-transition-colors s-duration-300 data-[disabled]:s-pointer-events-none data-[disabled]:s-text-muted-foreground hover:s-text-foreground hover:s-bg-structure-150",
18+
{
19+
variants: {
20+
state: {
21+
active: "active:s-bg-structure-200",
22+
selected: "s-text-foreground s-font-medium s-bg-structure-150",
23+
unselected: "s-text-muted-foreground",
24+
},
2525
},
26-
state: {
27-
active: "active:s-bg-structure-200",
28-
selected: "s-text-foreground s-font-medium s-bg-structure-150",
29-
unselected: "s-text-muted-foreground",
26+
defaultVariants: {
27+
state: "unselected",
3028
},
31-
},
32-
defaultVariants: {
33-
layout: "container",
34-
state: "unselected",
35-
},
36-
});
37-
38-
const labelStyles = cva(
39-
"s-font-semibold s-pt-6 s-pb-2 s-text-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
29+
}
4030
);
4131

4232
const NavigationList = React.forwardRef<
4333
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
4434
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
4535
>(({ className, children, ...props }, ref) => (
46-
<ScrollArea
47-
ref={ref}
48-
className={cn(listStyles({ layout: "container" }), className)}
49-
{...props}
50-
>
51-
{children}
36+
<ScrollArea ref={ref} className={className} {...props}>
37+
<div className="s-flex s-flex-col s-gap-0.5">{children}</div>
5238
<ScrollBar />
5339
</ScrollArea>
5440
));
@@ -109,8 +95,7 @@ const NavigationListItem = React.forwardRef<
10995
<div
11096
className={cn(
11197
"s-peer/menu-button",
112-
listStyles({
113-
layout: "item",
98+
NavigationListItemStyles({
11499
state: selected
115100
? "selected"
116101
: isPressed
@@ -181,6 +166,10 @@ const variantStyles = cva("", {
181166
},
182167
});
183168

169+
const labelStyles = cva(
170+
"s-font-semibold s-pt-4 s-pb-2 s-text-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
171+
);
172+
184173
interface NavigationListLabelProps
185174
extends React.HTMLAttributes<HTMLDivElement>,
186175
VariantProps<typeof variantStyles> {

‎sparkle/src/components/Tree.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React, { ComponentType, ReactNode, useState } from "react";
22

3-
import Spinner from "@sparkle/components/Spinner";
3+
import { Button, Spinner } from "@sparkle/components/";
44
import { ArrowDownSIcon, ArrowRightSIcon } from "@sparkle/icons";
55
import { cn } from "@sparkle/lib/utils";
66

77
import { Checkbox, CheckboxProps } from "./Checkbox";
88
import { Icon } from "./Icon";
9-
import { IconButton } from "./IconButton";
109

1110
export interface TreeProps {
1211
children?: ReactNode;
@@ -64,9 +63,9 @@ export function Tree({
6463
}
6564

6665
const treeItemStyleClasses = {
67-
base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center s-gap-2 s-py-2",
66+
base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center s-gap-2 s-h-9",
6867
isNavigatableBase:
69-
"s-rounded-xl s-pl-1.5 s-pr-3 s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
68+
"s-rounded-xl s-pl-1 s-pr-3 s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
7069
isNavigatableUnselected: "s-bg-structure-150/0 hover:s-bg-structure-150",
7170
isNavigatableSelected: "s-font-medium s-bg-structure-150",
7271
};
@@ -160,10 +159,10 @@ Tree.Item = function ({
160159
onClick={onItemClick}
161160
>
162161
{type === "node" && (
163-
<IconButton
162+
<Button
164163
icon={isExpanded ? ArrowDownSIcon : ArrowRightSIcon}
165164
size="xs"
166-
variant="outline"
165+
variant="ghost-secondary"
167166
onClick={(e) => {
168167
e.stopPropagation();
169168
if (effectiveOnChevronClick) {

0 commit comments

Comments
 (0)