Skip to content

Feat/sidebar adjustments #1743

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 9 commits into from
Closed

Feat/sidebar adjustments #1743

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a0f8b57
feat: improve navigation rail menu functionality
kaochannel154 Aug 25, 2025
1158b2a
feat: implement URL-based display type synchronization
kaochannel154 Aug 25, 2025
4154fa7
refactor: improve NavigationRailFooterMenu maintainability
kaochannel154 Aug 25, 2025
f01ccc5
feat: Replace navigation rail icons with simpler chevron design
kaochannel154 Aug 25, 2025
413c444
fix: address CodeRabbit review feedback
kaochannel154 Aug 25, 2025
bde54f0
fix: remove Continue button and X icon from View Style dialogs
kaochannel154 Aug 25, 2025
e03c935
fix: remove Cancel button and keep only X close button in View Style …
kaochannel154 Aug 25, 2025
cc91ce6
fix: increase z-index for dialogs to ensure they appear above all con…
kaochannel154 Aug 25, 2025
97dbced
fix: remove unused imports and fix formatting to pass CI checks
kaochannel154 Aug 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion ....ai/app/stage/(top)/hooks/use-ui-state.ts → ...ai/app/stage/(top)/hooks/use-ui-state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";

export function useUIState() {
const [isMobile, setIsMobile] = useState(false);
const [isCarouselView, setIsCarouselView] = useState(false);
const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
const searchParams = useSearchParams();
const router = useRouter();
const isCarouselView = searchParams.get("view") === "carousel";

useEffect(() => {
const checkMobile = () => {
Expand All @@ -16,6 +21,16 @@ export function useUIState() {
return () => window.removeEventListener("resize", checkMobile);
}, []);

const setIsCarouselView = (value: boolean) => {
const params = new URLSearchParams(searchParams.toString());
if (value) {
params.set("view", "carousel");
} else {
params.delete("view");
}
router.push(`?${params.toString()}`, { scroll: false });
};

return {
isMobile,
isCarouselView,
Expand Down
48 changes: 2 additions & 46 deletions apps/studio.giselles.ai/app/stage/(top)/settings-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
import {
Dialog,
DialogContent,
DialogFooter,
DialogTitle,
} from "@giselle-internal/ui/dialog";
import clsx from "clsx/lite";
Expand All @@ -16,8 +15,6 @@ import {
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { cn } from "@/lib/utils";
import { buttonVariants } from "../../(main)/settings/components/button";

interface SettingsDialogProps {
isOpen: boolean;
Expand All @@ -39,8 +36,8 @@ export function SettingsDialog({
if (isMobile) {
return (
isOpen && (
<div className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-4">
<div className="relative z-10 w-[90vw] max-w-[500px] max-h-[90vh] overflow-y-auto rounded-[12px] p-6 shadow-xl focus:outline-none">
<div className="fixed inset-0 z-[9999] bg-black/60 flex items-center justify-center p-4">
<div className="relative z-[10000] w-[90vw] max-w-[500px] max-h-[90vh] overflow-y-auto rounded-[12px] p-6 shadow-xl focus:outline-none">
<div
className="absolute inset-0 -z-10 rounded-[12px] backdrop-blur-md"
style={{
Expand Down Expand Up @@ -141,28 +138,6 @@ export function SettingsDialog({
Coming Soon
</div>
</div>

<div className="mt-6 flex justify-end gap-x-3">
<button
type="button"
onClick={handleClose}
className={cn(buttonVariants({ variant: "link" }))}
aria-label="Cancel"
>
Cancel
</button>
<button
type="button"
onClick={handleClose}
className={cn(
buttonVariants({ variant: "primary" }),
"whitespace-nowrap",
)}
aria-label="Continue"
>
Continue
</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -267,25 +242,6 @@ export function SettingsDialog({
<option className="bg-gray-900">Coming Soon</option>
</select>
</div>

<DialogFooter>
<div className="flex justify-end gap-x-3">
<button
type="button"
onClick={handleClose}
className={cn(buttonVariants({ variant: "link" }))}
>
Cancel
</button>
<button
type="button"
onClick={handleClose}
className={cn(buttonVariants({ variant: "primary" }))}
>
Continue
</button>
</div>
</DialogFooter>
</DialogContent>
</Dialog>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/studio.giselles.ai/app/stage/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { NavigationRail } from "./ui/navigation-rail";
export default function StageLayout({ children }: { children: ReactNode }) {
const data = getSidebarData();
return (
<div className="min-h-screen flex flex-col md:flex-row bg-black-900">
<div className="min-h-screen flex flex-col md:flex-row bg-[var(--color-stage-background)]">
<Suspense fallback="">
<MobileHeader />
<NavigationRail user={data} />
Expand Down
4 changes: 2 additions & 2 deletions apps/studio.giselles.ai/app/stage/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

export default function Loading() {
return (
<div className="flex h-screen bg-black-900">
<div className="flex h-screen bg-[var(--color-stage-background)]">
{/* Sidebar placeholder */}
<div className="w-[200px] bg-black-950 border-r border-white/10 animate-pulse">
<div className="w-[200px] bg-[var(--color-stage-background)] border-r border-white/10 animate-pulse">
<div className="p-4 border-b border-white/10">
<div className="h-6 bg-white/10 rounded mb-4"></div>
<div className="h-8 bg-white/10 rounded"></div>
Expand Down
5 changes: 5 additions & 0 deletions apps/studio.giselles.ai/app/stage/query.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import { fetchCurrentTeam, isProPlan } from "@/services/teams";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Confirm barrel exports exist for @/services/teams.

Importing both fetchCurrentTeam and isProPlan from the package root implies a barrel. Please verify the index exports to avoid runtime/import errors.

Run from repo root:

🏁 Script executed:

#!/bin/bash
# Verify exports in services/teams
rg -nP 'export\s+(?:\{[^}]*\}|const|function|type|interface)\s+isProPlan|fetchCurrentTeam' -- apps/studio.giselles.ai/services
rg -nP 'from\s+"@/services/teams"' -C2

Length of output: 13617

Add missing barrel exports in services/teams

It looks like index.ts in apps/studio.giselles.ai/services/teams only re-exports fetchCurrentTeam, but you’re importing both fetchCurrentTeam and isProPlan (and elsewhere also fetchUserTeams) from "@/services/teams". That will cause unresolved-module errors at runtime.

Please update apps/studio.giselles.ai/services/teams/index.ts to include:

--- a/apps/studio.giselles.ai/services/teams/index.ts
+++ b/apps/studio.giselles.ai/services/teams/index.ts
 export { fetchCurrentTeam } from "./fetch-current-team";
+export { isProPlan } from "./utils";
+export { fetchUserTeams } from "./fetch-user-teams";

• Verify that ./utils.ts exports isProPlan.
• Verify that there is a fetch-user-teams.ts (or equivalent) exporting fetchUserTeams.
• After adding these barrel exports, confirm all imports from "@/services/teams" resolve without errors.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import { fetchCurrentTeam, isProPlan } from "@/services/teams";
// apps/studio.giselles.ai/services/teams/index.ts
export { fetchCurrentTeam } from "./fetch-current-team";
export { isProPlan } from "./utils";
export { fetchUserTeams } from "./fetch-user-teams";
🤖 Prompt for AI Agents 
In apps/studio.giselles.ai/services/teams/index.ts around the current exports
(affecting imports in apps/studio.giselles.ai/app/stage/query.ts line 1), the
barrel file only re-exports fetchCurrentTeam but callers import isProPlan and
fetchUserTeams as well; update the barrel to export isProPlan (verify it is
exported from ./utils.ts) and export fetchUserTeams from its module (e.g.,
./fetch-user-teams.ts or the actual filename), and run a TypeScript build or IDE
import resolution to confirm all imports from "@/services/teams" resolve without
errors.

import { getAccountInfo } from "../(main)/settings/account/actions";

export async function getSidebarData() {
const accountInfo = await getAccountInfo();
const currentTeam = await fetchCurrentTeam();
const isPro = isProPlan(currentTeam);

return {
displayName: accountInfo.displayName ?? undefined,
email: accountInfo.email ?? undefined,
avatarUrl: accountInfo.avatarUrl ?? undefined,
planName: isPro ? "Pro plan" : "Free plan",
};
}
2 changes: 1 addition & 1 deletion apps/studio.giselles.ai/app/stage/ui/navigation-rail/menu-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export function MenuButton({
<button
type="button"
className={clsx(
"group size-8 hover:bg-ghost-element-hover transition-colors rounded flex items-center justify-center",
"group size-8 text-[var(--color-stage-sidebar-text)] hover:text-[var(--color-stage-sidebar-text-hover)] transition-colors rounded flex items-center justify-center",
className,
)}
onClick={onClick}
Expand Down
2 changes: 1 addition & 1 deletion apps/studio.giselles.ai/app/stage/ui/navigation-rail/navigation-list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export function NavigationListItem(
return (
<Link
href={props.href}
className="text-text-muted text-sm flex items-center py-0.5 hover:bg-ghost-element-hover rounded-lg px-1"
className="text-[var(--color-stage-sidebar-text)] text-sm flex items-center py-0.5 hover:text-[var(--color-stage-sidebar-text-hover)] rounded-lg px-1"
>
<div className="size-8 flex items-center justify-center">
<props.icon className="size-4" />
Expand Down
7 changes: 4 additions & 3 deletions apps/studio.giselles.ai/app/stage/ui/navigation-rail/navigation-rail-collapsed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { GiselleIcon } from "@giselle-internal/workflow-designer-ui";
import { PanelLeftOpenIcon } from "lucide-react";

import { Suspense } from "react";
import { MenuButton } from "./menu-button";
import { navigationItems } from "./navigation-items";
Expand All @@ -10,6 +10,7 @@ import { NavigationRailContentsContainer } from "./navigation-rail-contents-cont
import { NavigationRailFooter } from "./navigation-rail-footer";
import { NavigationRailFooterMenu } from "./navigation-rail-footer-menu";
import { NavigationRailHeader } from "./navigation-rail-header";
import { SimpleChevronRight } from "./simple-chevron-icons";
import type { UserDataForNavigationRail } from "./types";

export function NavigationRailCollapsed({
Expand All @@ -26,8 +27,8 @@ export function NavigationRailCollapsed({
onClick={() => onExpandButtonClick()}
className="cursor-e-resize"
>
<GiselleIcon className="size-6 text-text-muted stroke-1 group-hover:hidden" />
<PanelLeftOpenIcon className="size-6 text-text-muted stroke-1 hidden group-hover:block" />
<GiselleIcon className="size-6 text-[var(--color-stage-sidebar-text-hover)] stroke-1 group-hover:hidden" />
<SimpleChevronRight className="size-5 text-[var(--color-stage-sidebar-text)] hidden group-hover:block" />
</MenuButton>
</NavigationRailHeader>
<NavigationRailContentsContainer>
Expand Down
13 changes: 8 additions & 5 deletions apps/studio.giselles.ai/app/stage/ui/navigation-rail/navigation-rail-expanded.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { GiselleIcon } from "@giselle-internal/workflow-designer-ui";
import { PanelLeftCloseIcon } from "lucide-react";

import { Suspense } from "react";
import { MenuButton } from "./menu-button";
import { navigationItems } from "./navigation-items";
Expand All @@ -10,6 +10,7 @@ import { NavigationRailContentsContainer } from "./navigation-rail-contents-cont
import { NavigationRailFooter } from "./navigation-rail-footer";
import { NavigationRailFooterMenu } from "./navigation-rail-footer-menu";
import { NavigationRailHeader } from "./navigation-rail-header";
import { SimpleChevronLeft } from "./simple-chevron-icons";
import type { UserDataForNavigationRail } from "./types";

export function NavigationRailExpanded({
Expand All @@ -23,17 +24,19 @@ export function NavigationRailExpanded({
<NavigationRailContainer variant="expanded">
<NavigationRailHeader>
<div className="flex items-center justify-start w-full">
<div className="size-8 flex justify-center items-center">
<GiselleIcon className="size-6 text-text-muted stroke-1 group-hover:hidden shrink-0" />
<div className="group size-8 flex justify-center items-center">
<GiselleIcon className="size-6 text-[var(--color-stage-sidebar-text-hover)] stroke-1 group-hover:hidden shrink-0" />
</div>
<p className="text-white-900 text-[13px] font-semibold">Stage</p>
<p className="text-[var(--color-stage-sidebar-text-hover)] text-[13px] font-semibold">
Stage
</p>
</div>
<div className="absolute right-3 top-1.5">
<MenuButton
onClick={() => onCollapseButtonClick()}
className="cursor-w-resize"
>
<PanelLeftCloseIcon className="size-6 text-text-muted stroke-1" />
<SimpleChevronLeft className="size-5 text-[var(--color-stage-sidebar-text)]" />
</MenuButton>
</div>
</NavigationRailHeader>
Expand Down
Loading