feat: Sidebar UI updates #4748

raunakab · 2025-05-21T15:15:06Z

Description

UI updates to sidebar.

How Has This Been Tested?

This is a pure UI change; no tests were written.

vercel · 2025-05-21T15:15:11Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
internal-search	❌ Failed (Inspect)			May 22, 2025 0:13am

greptile-apps

PR Summary

This PR refactors the sidebar UI to fix chat dragging within groups while introducing a new standardized sidebar component system. The changes primarily focus on improving the user experience and fixing a specific dragging issue.

New sidebar.tsx component introduces a comprehensive, accessible sidebar system with proper TypeScript typing and mobile responsiveness
Removed drag handle from ChatSessionDisplay.tsx in favor of making the entire chat item draggable
ChatGroup.tsx now uses a collapsible menu structure but has commented-out props that need review
useIsMobile hook needs SSR consideration and consistent width checking between initial load and subsequent changes
Potential state management concerns in PagesTab.tsx with commented-out drag-and-drop implementation

_{9 file(s) reviewed, 11 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-05-21T15:15:46Z

web/src/app/chat/sessionSidebar/ChatGroup.tsx

+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {chatSessions.map((chatSession) => (
+              <SidebarMenuSubItem key={chatSession.name}>


logic: Using chatSession.name as key is unsafe. Should use chatSession.id for stable list rendering

Suggested change

<SidebarMenuSubItem key={chatSession.name}>

<SidebarMenuSubItem key={chatSession.id}>

greptile-apps · 2025-05-21T15:15:47Z

web/src/app/chat/sessionSidebar/ChatGroup.tsx

+                    // showShareModal={showShareModal}
+                    // showDeleteModal={showDeleteModal}
+                    // closeSidebar={closeSidebar}
+                    // isDragging={isDraggingSessionId === chat.id}


logic: Critical props are commented out. These need to be properly passed through or the chat sharing, deletion and dragging functionality will break

greptile-apps · 2025-05-21T15:15:47Z

web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx

          draggable={!isMobile}
          onDragStart={!isMobile ? handleDragStart : undefined}


logic: draggable and onDragStart are only set when !isMobile, but handleTouchStart is never used. Mobile drag-and-drop functionality may be broken.

greptile-apps · 2025-05-21T15:15:48Z

web/src/app/chat/sessionSidebar/ChatGroup.tsx

+        open={hasChatsToShow && expanded}
+        defaultOpen={true}
+      >


style: Conflicting open states - defaultOpen is true but open depends on hasChatsToShow && expanded. This could cause unexpected behavior

greptile-apps · 2025-05-21T15:15:54Z

web/src/app/chat/sessionSidebar/PagesTab.tsx

+  const groupedChatSessionsLength = Object.entries(groupedChatSesssions).length;
+  const foldersLength = (folders ?? []).length;
+  const totalLength = groupedChatSessionsLength + foldersLength;
+  const [expands, setExpands] = useState<boolean[]>(
+    Array(totalLength).fill(true)
+  );


logic: Initial state of expands array depends on dynamic length calculation, which could cause UI flicker if folders/chats load asynchronously

greptile-apps · 2025-05-21T15:16:12Z

web/src/components/ui/sheet.tsx

+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",


syntax: Extra space after bg-black/80 in className string could cause inconsistent styling

Suggested change

"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",

"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",

greptile-apps · 2025-05-21T15:16:12Z

web/src/components/ui/sheet.tsx

+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",


syntax: Extra space after w-3/4 in className string could cause inconsistent styling

Suggested change

"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",

"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",

greptile-apps · 2025-05-21T15:16:26Z

web/src/components/ui/sidebar.tsx

+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}


style: tabIndex={-1} on a clickable button may cause accessibility issues for keyboard users.

Suggested change

tabIndex={-1}

aria-label="Toggle Sidebar"

onClick={toggleSidebar}

title="Toggle Sidebar"

greptile-apps · 2025-05-21T15:16:51Z

web/src/hooks/use-mobile.tsx

+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };


logic: Inconsistent width checking between matchMedia and innerWidth. Use mql.matches instead of innerWidth for consistency

Suggested change

const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);

const onChange = () => {

setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);

};

const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);

const onChange = () => {

setIsMobile(mql.matches);

};

greptile-apps · 2025-05-21T15:16:52Z

web/src/hooks/use-mobile.tsx

+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);


style: Add check for window object to support SSR: if (typeof window === 'undefined') return false

Suggested change

React.useEffect(() => {

const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);

const onChange = () => {

setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);

};

mql.addEventListener("change", onChange);

setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);

return () => mql.removeEventListener("change", onChange);

}, []);

React.useEffect(() => {

if (typeof window === 'undefined') return;

const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);

const onChange = () => {

setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);

};

mql.addEventListener("change", onChange);

setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);

return () => mql.removeEventListener("change", onChange);

}, []);

- this cancels the editing state

github-actions · 2025-08-06T11:02:00Z

This PR is stale because it has been open 75 days with no activity. Remove stale label or comment or this will be closed in 15 days.

github-actions · 2025-08-15T11:01:35Z

This PR was closed because it has been stalled for 90 days with no activity.

raunakab added 5 commits May 19, 2025 15:32

Add basic stub for new pages-tab-section

bea6b24

Change UI; still working on draggability

3ce5e3c

Refresh new chat-group creation input

14db6b9

Render folders and disable caret for empty folders

849319f

Merge branch 'main' into fix/chat-dragging

399a28c

raunakab requested a review from a team as a code owner May 21, 2025 15:15

raunakab marked this pull request as draft May 21, 2025 15:15

greptile-apps bot reviewed May 21, 2025

View reviewed changes

vercel bot had a problem deploying to Preview May 21, 2025 15:17 Failure

raunakab added 3 commits May 21, 2025 09:40

Add kebab on group hover

3dc82ee

Update popover for chat-session-display

cb322e4

Add chat renaming + deleting

2172532

vercel bot had a problem deploying to Preview May 21, 2025 18:18 Failure

Add detection for when click is outside input

7c8b626

- this cancels the editing state

vercel bot had a problem deploying to Preview May 21, 2025 18:27 Failure

Update weird popover disappearing bug

b5f1647

vercel bot had a problem deploying to Preview May 21, 2025 18:37 Failure

Fix popover cancelling bug

7048049

vercel bot had a problem deploying to Preview May 21, 2025 19:26 Failure

raunakab added 2 commits May 21, 2025 16:44

Add ability to press escape and stop renaming

4dac1a2

Remove commented out code

2ca2fe6

vercel bot had a problem deploying to Preview May 21, 2025 22:48 Failure

vercel bot had a problem deploying to Preview May 21, 2025 22:53 Failure

raunakab added 4 commits May 21, 2025 17:13

Add dnd and sortable contexts

6e27448

Make props explicit

fab0896

Add group dragging

c8e675f

Merge branch 'main' into fix/chat-dragging

852f7c6

vercel bot had a problem deploying to Preview May 22, 2025 00:13 Failure

raunakab changed the title ~~fix: Chats dragging issue~~ feat: Sidebar UI updates May 22, 2025

github-actions bot added the Stale label Aug 6, 2025

github-actions bot closed this Aug 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Sidebar UI updates #4748

feat: Sidebar UI updates #4748

Uh oh!

raunakab commented May 21, 2025 •

edited

Loading

Uh oh!

vercel bot commented May 21, 2025 •

edited

Loading

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot May 21, 2025

Uh oh!

greptile-apps bot May 21, 2025

Uh oh!

greptile-apps bot May 21, 2025

Uh oh!

greptile-apps bot May 21, 2025

Uh oh!

greptile-apps bot May 21, 2025

Uh oh!

greptile-apps bot May 21, 2025

Uh oh!

greptile-apps bot May 21, 2025

Uh oh!

greptile-apps bot May 21, 2025

Uh oh!

greptile-apps bot May 21, 2025

Uh oh!

greptile-apps bot May 21, 2025

Uh oh!

github-actions bot commented Aug 6, 2025

Uh oh!

github-actions bot commented Aug 15, 2025

Uh oh!

Uh oh!

	<SidebarMenuSubItem key={chatSession.name}>
	<SidebarMenuSubItem key={chatSession.id}>

		draggable={!isMobile}
		onDragStart={!isMobile ? handleDragStart : undefined}

	"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
	"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",

	"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
	"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",

feat: Sidebar UI updates #4748

feat: Sidebar UI updates #4748

Uh oh!

Conversation

raunakab commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How Has This Been Tested?

Uh oh!

vercel bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

greptile-apps bot May 21, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 21, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 21, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 21, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 21, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 21, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 21, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 21, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 21, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 21, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Aug 6, 2025

Uh oh!

github-actions bot commented Aug 15, 2025

Uh oh!

Uh oh!

raunakab commented May 21, 2025 •

edited

Loading

vercel bot commented May 21, 2025 •

edited

Loading