From 7ffd8aa518611946e6fee2d69fa7572a8477ced6 Mon Sep 17 00:00:00 2001
From: Evgeny Shurakov <eshurakov@users.noreply.github.com>
Date: Wed, 1 Apr 2026 13:15:28 +0200
Subject: [PATCH 1/2] refactor(chat): replace New Session button with icon in
 sidebar header

Replace the prominent 'New Session' button with a compact SquarePen icon
button with tooltip. Move search and filter controls to the right side
of the header for a cleaner, more minimal sidebar layout.
---
 .../cloud-agent-next/ChatSidebar.tsx          | 48 +++++++++++--------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/components/cloud-agent-next/ChatSidebar.tsx b/src/components/cloud-agent-next/ChatSidebar.tsx
index 28d7c559ff..2174716c10 100644
--- a/src/components/cloud-agent-next/ChatSidebar.tsx
+++ b/src/components/cloud-agent-next/ChatSidebar.tsx
@@ -1,9 +1,8 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Button } from '@/components/Button';
 import {
-  Plus,
+  SquarePen,
   Search,
   SlidersHorizontal,
   MoreHorizontal,
@@ -12,6 +11,7 @@ import {
   X,
   Pencil,
 } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { TimeAgo } from '@/components/shared/TimeAgo';
 import { usePathname, useRouter } from 'next/navigation';
 import { isToday, isYesterday, startOfDay, differenceInCalendarDays, format } from 'date-fns';
@@ -358,21 +358,30 @@ export function ChatSidebar({
     <div className="flex h-full flex-col">
       {/* Header */}
       <div className={cn('flex items-center gap-2 border-b px-3 py-2.5', isInSheet && 'pt-14')}>
-        <Button onClick={handleNewSession} className="flex-1" variant="primary" size="sm">
-          <Plus className="mr-2 h-4 w-4" />
-          New Session
-        </Button>
-        <button
-          onClick={toggleSearch}
-          className={cn(
-            'hover:bg-accent rounded-md p-1.5 transition-colors',
-            showSearch && 'bg-accent'
-          )}
-        >
-          <Search className="text-muted-foreground h-4 w-4" />
-        </button>
-        {(onPlatformChange || onProjectChange) && (
-          <DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              onClick={handleNewSession}
+              className="hover:bg-accent rounded-md p-1.5 transition-colors"
+              aria-label="New session"
+            >
+              <SquarePen className="text-muted-foreground h-4 w-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">New session</TooltipContent>
+        </Tooltip>
+        <div className="ml-auto flex items-center gap-1">
+          <button
+            onClick={toggleSearch}
+            className={cn(
+              'hover:bg-accent rounded-md p-1.5 transition-colors',
+              showSearch && 'bg-accent'
+            )}
+          >
+            <Search className="text-muted-foreground h-4 w-4" />
+          </button>
+          {(onPlatformChange || onProjectChange) && (
+            <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <button
                 className={cn(
@@ -433,8 +442,9 @@ export function ChatSidebar({
                 </>
               )}
             </DropdownMenuContent>
-          </DropdownMenu>
-        )}
+            </DropdownMenu>
+          )}
+        </div>
       </div>
 
       {/* Collapsible search */}

From 907dfdc489f3064b8dd479cfc9e128c494b1469b Mon Sep 17 00:00:00 2001
From: Evgeny Shurakov <eshurakov@users.noreply.github.com>
Date: Wed, 1 Apr 2026 14:45:25 +0200
Subject: [PATCH 2/2] style: format ChatSidebar

---
 .../cloud-agent-next/ChatSidebar.tsx          | 118 +++++++++---------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/src/components/cloud-agent-next/ChatSidebar.tsx b/src/components/cloud-agent-next/ChatSidebar.tsx
index 2174716c10..42096a3e7a 100644
--- a/src/components/cloud-agent-next/ChatSidebar.tsx
+++ b/src/components/cloud-agent-next/ChatSidebar.tsx
@@ -382,66 +382,66 @@ export function ChatSidebar({
           </button>
           {(onPlatformChange || onProjectChange) && (
             <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button
-                className={cn(
-                  'hover:bg-accent rounded-md p-1.5 transition-colors',
-                  hasActiveFilter && 'bg-accent'
+              <DropdownMenuTrigger asChild>
+                <button
+                  className={cn(
+                    'hover:bg-accent rounded-md p-1.5 transition-colors',
+                    hasActiveFilter && 'bg-accent'
+                  )}
+                >
+                  <SlidersHorizontal className="text-muted-foreground h-4 w-4" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {onProjectChange && recentProjects.length > 0 && (
+                  <>
+                    <DropdownMenuLabel>Project</DropdownMenuLabel>
+                    <DropdownMenuItem onClick={() => onProjectChange(undefined)}>
+                      <Check
+                        className={cn('mr-2 h-4 w-4', !projectFilter ? 'opacity-100' : 'opacity-0')}
+                      />
+                      All projects
+                    </DropdownMenuItem>
+                    {recentProjects.map(project => {
+                      const isActive = projectFilter === project.gitUrl;
+                      return (
+                        <DropdownMenuItem
+                          key={project.gitUrl}
+                          onClick={() => onProjectChange(project.gitUrl)}
+                        >
+                          <Check
+                            className={cn('mr-2 h-4 w-4', isActive ? 'opacity-100' : 'opacity-0')}
+                          />
+                          {project.displayName}
+                        </DropdownMenuItem>
+                      );
+                    })}
+                  </>
                 )}
-              >
-                <SlidersHorizontal className="text-muted-foreground h-4 w-4" />
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {onProjectChange && recentProjects.length > 0 && (
-                <>
-                  <DropdownMenuLabel>Project</DropdownMenuLabel>
-                  <DropdownMenuItem onClick={() => onProjectChange(undefined)}>
-                    <Check
-                      className={cn('mr-2 h-4 w-4', !projectFilter ? 'opacity-100' : 'opacity-0')}
-                    />
-                    All projects
-                  </DropdownMenuItem>
-                  {recentProjects.map(project => {
-                    const isActive = projectFilter === project.gitUrl;
-                    return (
-                      <DropdownMenuItem
-                        key={project.gitUrl}
-                        onClick={() => onProjectChange(project.gitUrl)}
-                      >
-                        <Check
-                          className={cn('mr-2 h-4 w-4', isActive ? 'opacity-100' : 'opacity-0')}
-                        />
-                        {project.displayName}
-                      </DropdownMenuItem>
-                    );
-                  })}
-                </>
-              )}
-              {onPlatformChange && (
-                <>
-                  {onProjectChange && recentProjects.length > 0 && <DropdownMenuSeparator />}
-                  <DropdownMenuLabel>Platform</DropdownMenuLabel>
-                  {PLATFORM_FILTERS.map(p => {
-                    const isFilterActive = p === 'all' ? !platformFilter : platformFilter === p;
-                    return (
-                      <DropdownMenuItem
-                        key={p}
-                        onClick={() => onPlatformChange(p === 'all' ? undefined : p)}
-                      >
-                        <Check
-                          className={cn(
-                            'mr-2 h-4 w-4',
-                            isFilterActive ? 'opacity-100' : 'opacity-0'
-                          )}
-                        />
-                        {platformFilterLabel(p)}
-                      </DropdownMenuItem>
-                    );
-                  })}
-                </>
-              )}
-            </DropdownMenuContent>
+                {onPlatformChange && (
+                  <>
+                    {onProjectChange && recentProjects.length > 0 && <DropdownMenuSeparator />}
+                    <DropdownMenuLabel>Platform</DropdownMenuLabel>
+                    {PLATFORM_FILTERS.map(p => {
+                      const isFilterActive = p === 'all' ? !platformFilter : platformFilter === p;
+                      return (
+                        <DropdownMenuItem
+                          key={p}
+                          onClick={() => onPlatformChange(p === 'all' ? undefined : p)}
+                        >
+                          <Check
+                            className={cn(
+                              'mr-2 h-4 w-4',
+                              isFilterActive ? 'opacity-100' : 'opacity-0'
+                            )}
+                          />
+                          {platformFilterLabel(p)}
+                        </DropdownMenuItem>
+                      );
+                    })}
+                  </>
+                )}
+              </DropdownMenuContent>
             </DropdownMenu>
           )}
         </div>