Function ChatSideBarComponent

frontend/src/components/sidebar.tsx:88–248

({
  setIsModalOpen,
  isCollapsed,
  setIsCollapsed,
  chats,
  loading,
  error,
  onRefetch,
}: SidebarProps)

        className="flex-col border-r border-border"
      >
        {/* Header Row */}
        <div
          className={
            isCollapsed
              ? 'flex flex-col items-center gap-1 px-2 pt-3'
              : 'flex h-14 items-center justify-between gap-1 px-3'
          }
        >
          <button
            type="button"
            onClick={() => router.push('/')}
            aria-label="CodeFox home"
            tabIndex={-1}
            className="flex h-9 items-center rounded-md transition-opacity hover:opacity-80"
          >
            {isCollapsed ? (
              <FoxMark className="h-5 w-5 text-foreground" />
            ) : (
              <Wordmark />
            )}
          </button>

          {/* Always reachable — collapsing must be reversible. */}
          <SidebarTrigger
            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-accent"
            onClick={() => setIsCollapsed(!isCollapsed)}
          />
        </div>

        <div className="w-full border-t border-border" />

        {/* Primary action */}
        <div
          className={`mt-2 ${isCollapsed ? 'flex justify-center px-2' : 'px-3'}`}
        >
          <button
            type="button"
            onClick={() => router.push('/')}
            title="New project"
            className={cn(
              'flex h-9 items-center rounded-md text-sm font-medium transition-colors hover:bg-accent',
              isCollapsed ? 'w-9 justify-center' : 'w-full justify-start'
            )}
          >
            <span className="flex w-5 shrink-0 justify-center">
              <PlusIcon
                className="h-5 w-5"
                style={{ color: 'hsl(var(--primary))' }}
              />
            </span>
            {!isCollapsed && <span className="ml-2">New project</span>}
          </button>
        </div>

        {/* Chat list. A plain scroll container: the virtualized version sized
            itself from `window.innerHeight - 300`, which was wrong at every
            viewport but one and never updated on resize. */}
        <SidebarContent className="mt-3">