From 3bc5b84d61d3c9c487312981b9fe00c7739e1bc9 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 01:21:22 +0200
Subject: [PATCH 01/21] style: Redesign the Projects Dashboard and Sidebar

Give /projects a sticky navbar, quieter search/sort toolbar, and
folder-style cards. Drop the create-dialog close control, restyle
the sidebar Projects row, and align the workspace with the same
layout language.
---
 .../components/Chat/ProjectLandingChip.tsx    |   4 +-
 .../Conversations/ProjectsSection.tsx         |  96 +++---
 .../components/Projects/ProjectChatList.tsx   |  16 +-
 .../Projects/ProjectCreateDialog.tsx          |  66 +++--
 .../components/Projects/ProjectWorkspace.tsx  |  64 ++--
 .../components/Projects/ProjectsNavBar.tsx    |  36 +++
 .../src/components/Projects/ProjectsView.tsx  | 276 +++++++++++-------
 client/src/locales/en/translation.json        |   4 +
 8 files changed, 368 insertions(+), 194 deletions(-)
 create mode 100644 client/src/components/Projects/ProjectsNavBar.tsx

diff --git a/client/src/components/Chat/ProjectLandingChip.tsx b/client/src/components/Chat/ProjectLandingChip.tsx
index 3569a4df92a..4fe8871dd88 100644
--- a/client/src/components/Chat/ProjectLandingChip.tsx
+++ b/client/src/components/Chat/ProjectLandingChip.tsx
@@ -71,7 +71,7 @@ export default function ProjectLandingChip({ project }: { project: TChatProject
         showCarat={true}
         placement="top"
         containerClassName="w-auto px-0"
-        className="h-8 w-auto min-w-[11rem] gap-1.5 rounded-full px-2.5 text-sm font-medium text-text-secondary hover:text-text-primary"
+        className="h-8 w-auto min-w-[11rem] gap-1.5 rounded-full bg-surface-secondary px-2.5 text-sm font-medium text-text-secondary hover:bg-surface-hover hover:text-text-primary"
       />
       <TooltipAnchor
         description={localize('com_ui_remove_from_project')}
@@ -80,7 +80,7 @@ export default function ProjectLandingChip({ project }: { project: TChatProject
             type="button"
             aria-label={localize('com_ui_remove_from_project')}
             onClick={() => applyProject(null)}
-            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-text-secondary opacity-0 outline-none transition-all hover:bg-surface-hover hover:text-text-primary focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring-primary group-hover:opacity-100"
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-text-secondary opacity-0 outline-none transition-opacity hover:bg-surface-hover hover:text-text-primary focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-text-primary group-hover:opacity-100"
           >
             <X className="h-3.5 w-3.5" aria-hidden="true" />
           </button>
diff --git a/client/src/components/Conversations/ProjectsSection.tsx b/client/src/components/Conversations/ProjectsSection.tsx
index 5df242591c7..48d99e0d3f0 100644
--- a/client/src/components/Conversations/ProjectsSection.tsx
+++ b/client/src/components/Conversations/ProjectsSection.tsx
@@ -10,7 +10,6 @@ import {
   Ellipsis,
   Folder,
   FolderPlus,
-  Folders,
   Pencil,
   Trash2,
 } from 'lucide-react';
@@ -40,6 +39,7 @@ import {
 } from '~/data-provider';
 import ProjectCreateDialog from '~/components/Projects/ProjectCreateDialog';
 import { useLocalize, useLocalStorage, useNewConvo } from '~/hooks';
+import { Collapse } from '~/components/ui';
 import { clearMessagesCache, cn } from '~/utils';
 import { NotificationSeverity } from '~/common';
 import Convo from './Convo';
@@ -271,10 +271,11 @@ type ProjectItemProps = {
   project: TChatProject;
   toggleNav: () => void;
   defaultExpanded: boolean;
+  isActive: boolean;
 };
 
 const ProjectItem = memo(
-  function ProjectItem({ project, toggleNav, defaultExpanded }: ProjectItemProps) {
+  function ProjectItem({ project, toggleNav, defaultExpanded, isActive }: ProjectItemProps) {
     const localize = useLocalize();
     const navigate = useNavigate();
     const queryClient = useQueryClient();
@@ -332,25 +333,37 @@ const ProjectItem = memo(
 
     return (
       <li className="list-none">
-        <div className="group/project-row relative flex h-9 items-center rounded-lg text-sm text-text-primary transition-colors hover:bg-surface-active-alt">
+        <div
+          className={cn(
+            'group/project-row relative flex h-9 items-center rounded-lg text-sm text-text-primary transition-colors hover:bg-surface-hover',
+            isActive && 'bg-surface-active-alt',
+          )}
+        >
           <button
             type="button"
             onClick={() => setExpanded((prev) => !prev)}
             aria-expanded={expanded}
             aria-label={project.name}
-            className="flex min-w-0 flex-1 items-center gap-1.5 rounded-lg py-1.5 pl-1.5 pr-14 text-left outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary"
+            className="flex min-w-0 flex-1 items-center gap-2 rounded-lg py-1.5 pl-1.5 pr-16 text-left outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary"
           >
             <ChevronRight
               className={cn(
-                'h-3.5 w-3.5 shrink-0 text-text-secondary transition-transform duration-200',
+                'h-3.5 w-3.5 shrink-0 text-text-tertiary transition-transform duration-200',
                 expanded && 'rotate-90',
               )}
               aria-hidden="true"
             />
-            <Folder className="h-4 w-4 shrink-0 text-text-secondary" aria-hidden="true" />
-            <span className="truncate">{project.name}</span>
+            <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-surface-tertiary text-text-secondary">
+              <Folder className="h-3.5 w-3.5" aria-hidden="true" />
+            </span>
+            <span className="min-w-0 truncate">{project.name}</span>
+            {project.conversationCount > 0 ? (
+              <span className="ml-auto text-xs tabular-nums text-text-tertiary group-focus-within/project-row:opacity-0 group-hover/project-row:opacity-0">
+                {project.conversationCount}
+              </span>
+            ) : null}
           </button>
-          <div className="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-0.5 rounded-md bg-surface-active-alt opacity-0 transition-opacity group-focus-within/project-row:opacity-100 group-hover/project-row:opacity-100 has-[[data-state=open]]:opacity-100">
+          <div className="absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5 rounded-lg bg-surface-hover opacity-0 transition-opacity group-focus-within/project-row:opacity-100 group-hover/project-row:opacity-100 has-[[data-state=open]]:opacity-100">
             <TooltipAnchor
               description={localize('com_ui_new_chat_in_project', { name: project.name })}
               render={
@@ -388,13 +401,13 @@ const ProjectItem = memo(
             />
           </div>
         </div>
-        {expanded && (
+        <Collapse open={expanded} className="pl-2">
           <ProjectChatsInline
             projectId={project._id}
             toggleNav={toggleNav}
             onShowAll={openProject}
           />
-        )}
+        </Collapse>
         <ProjectRenameDialog open={isRenameOpen} onOpenChange={setIsRenameOpen} project={project} />
         <ProjectDeleteDialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen} project={project} />
       </li>
@@ -403,8 +416,10 @@ const ProjectItem = memo(
   (prevProps, nextProps) =>
     prevProps.project._id === nextProps.project._id &&
     prevProps.project.name === nextProps.project.name &&
+    prevProps.project.conversationCount === nextProps.project.conversationCount &&
     prevProps.project.updatedAt === nextProps.project.updatedAt &&
     prevProps.defaultExpanded === nextProps.defaultExpanded &&
+    prevProps.isActive === nextProps.isActive &&
     prevProps.toggleNav === nextProps.toggleNav,
 );
 
@@ -418,6 +433,7 @@ interface ProjectsSectionProps {
 const ProjectsSection = ({ toggleNav, isAuthenticated }: ProjectsSectionProps) => {
   const localize = useLocalize();
   const navigate = useNavigate();
+  const location = useLocation();
   const [storedExpanded, setStoredExpanded] = useLocalStorage('projectsSectionExpanded', true);
   const [hasToggledSection, setHasToggledSection] = useLocalStorage(
     'projectsSectionToggled',
@@ -434,11 +450,12 @@ const ProjectsSection = ({ toggleNav, isAuthenticated }: ProjectsSectionProps) =
 
   const projects = useMemo(() => data?.pages.flatMap((page) => page.projects) ?? [], [data?.pages]);
   const hasMore = (data?.pages[data.pages.length - 1]?.nextCursor ?? null) != null;
+  const isProjectsHome = location.pathname === '/projects';
 
   /**
    * Collapse the section by default for users with no projects who have never
-   * toggled it, to keep the sidebar compact. An explicit toggle — or a collapse
-   * set before this default existed (stored === false) — is always respected.
+   * toggled it, to keep the sidebar compact. An explicit toggle, or a collapse
+   * set before this default existed (stored === false), is always respected.
    */
   const respectStoredExpanded = hasToggledSection || storedExpanded === false;
   const isExpanded = respectStoredExpanded ? storedExpanded : isLoading || projects.length > 0;
@@ -463,9 +480,11 @@ const ProjectsSection = ({ toggleNav, isAuthenticated }: ProjectsSectionProps) =
           type="button"
           variant="ghost"
           onClick={() => setIsCreateOpen(true)}
-          className="flex h-auto w-full justify-start gap-2 rounded-lg px-2 py-1.5 text-sm font-normal text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary"
+          className="flex h-9 w-full justify-start gap-2 rounded-lg px-2 text-sm font-normal text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary"
         >
-          <FolderPlus className="h-4 w-4 shrink-0" aria-hidden="true" />
+          <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-surface-tertiary">
+            <FolderPlus className="h-3.5 w-3.5" aria-hidden="true" />
+          </span>
           <span className="truncate">{localize('com_ui_new_project')}</span>
         </Button>
       );
@@ -479,6 +498,9 @@ const ProjectsSection = ({ toggleNav, isAuthenticated }: ProjectsSectionProps) =
             project={project}
             toggleNav={toggleNav}
             defaultExpanded={project._id === activeProjectId}
+            isActive={
+              project._id === activeProjectId || location.pathname === `/projects/${project._id}`
+            }
           />
         ))}
         {hasMore && (
@@ -487,7 +509,7 @@ const ProjectsSection = ({ toggleNav, isAuthenticated }: ProjectsSectionProps) =
               type="button"
               variant="ghost"
               onClick={openProjects}
-              className="flex h-auto w-full justify-start gap-2 rounded-lg px-2 py-1.5 text-xs font-medium text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary"
+              className="flex h-8 w-full justify-start rounded-lg px-2 text-xs font-medium text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary"
             >
               {localize('com_ui_all_projects')}
             </Button>
@@ -503,38 +525,42 @@ const ProjectsSection = ({ toggleNav, isAuthenticated }: ProjectsSectionProps) =
 
   return (
     <div className="flex flex-col px-3 text-sm">
-      <div className="flex h-8 w-full items-center gap-0.5 pr-2">
+      <div
+        className={cn(
+          'flex h-9 w-full items-center gap-0.5 rounded-lg pr-0.5',
+          isProjectsHome && 'bg-surface-active-alt',
+        )}
+      >
         <button
           onClick={() => {
             setStoredExpanded(!isExpanded);
             setHasToggledSection(true);
           }}
-          className="group flex min-w-0 flex-1 items-center gap-1 rounded-lg px-1 py-2 text-xs font-bold text-text-secondary outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary"
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-text-secondary outline-none transition-colors hover:bg-surface-hover hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary"
           type="button"
           aria-expanded={isExpanded}
+          aria-label={localize('com_ui_projects')}
         >
-          <span className="select-none truncate">{localize('com_ui_projects')}</span>
           <ChevronDown
             className={cn(
-              'h-3 w-3 shrink-0 transition-transform duration-200',
+              'h-3.5 w-3.5 shrink-0 transition-transform duration-200',
               isExpanded ? '' : '-rotate-90',
             )}
             aria-hidden="true"
           />
         </button>
-        <TooltipAnchor
-          description={localize('com_ui_all_projects')}
-          render={
-            <button
-              type="button"
-              aria-label={localize('com_ui_all_projects')}
-              className={iconButtonClassName}
-              onClick={openProjects}
-            >
-              <Folders className="h-4 w-4" aria-hidden="true" />
-            </button>
-          }
-        />
+        <button
+          type="button"
+          onClick={openProjects}
+          className="flex min-w-0 flex-1 items-center gap-2 rounded-lg px-1 py-1.5 text-left text-sm font-medium text-text-primary outline-none hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary"
+        >
+          <span className="select-none truncate">{localize('com_ui_projects')}</span>
+          {projects.length > 0 ? (
+            <span className="text-xs font-normal tabular-nums text-text-tertiary">
+              {projects.length}
+            </span>
+          ) : null}
+        </button>
         <TooltipAnchor
           description={localize('com_ui_new_project')}
           render={
@@ -550,11 +576,11 @@ const ProjectsSection = ({ toggleNav, isAuthenticated }: ProjectsSectionProps) =
         />
       </div>
 
-      {isExpanded && (
-        <div className="scrollbar-gutter-stable max-h-[42vh] overflow-y-auto">
+      <Collapse open={isExpanded}>
+        <div className="scrollbar-gutter-stable max-h-[42vh] overflow-y-auto pt-0.5">
           {renderProjectsBody()}
         </div>
-      )}
+      </Collapse>
 
       <ProjectCreateDialog
         open={isCreateOpen}
diff --git a/client/src/components/Projects/ProjectChatList.tsx b/client/src/components/Projects/ProjectChatList.tsx
index fe1a8aa55a3..8ab5687b4d3 100644
--- a/client/src/components/Projects/ProjectChatList.tsx
+++ b/client/src/components/Projects/ProjectChatList.tsx
@@ -17,7 +17,7 @@ import ConversationEndpointIcon from '~/components/Conversations/ConversationEnd
 import { areConversationRenderPropsEqual } from '~/components/Conversations/utils';
 import { DateLabel } from '~/components/Conversations/Conversations';
 import { useLocalize, useNavigateToConvo } from '~/hooks';
-import { groupConversationsByDate, cn } from '~/utils';
+import { groupConversationsByDate } from '~/utils';
 import { useActiveJobs } from '~/data-provider';
 
 type ChatSortField = 'updatedAt' | 'createdAt';
@@ -84,15 +84,17 @@ const ConversationRow = memo(
     return (
       <button
         type="button"
-        className="flex w-full items-center gap-3 border-b border-border-light py-3 text-left outline-none transition-colors hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring-primary"
+        className="flex w-full items-center gap-3 rounded-xl px-2 py-2.5 text-left outline-none transition-colors hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary"
         onClick={() => navigateToConvo(conversation)}
       >
-        <span className="flex h-8 w-8 shrink-0 items-center justify-center">
+        <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-surface-tertiary">
           <ConversationEndpointIcon conversation={conversation} size={24} context="menu-item" />
         </span>
         <span className="min-w-0 flex-1">
           <span className="block truncate text-sm font-medium text-text-primary">{title}</span>
-          <span className="block truncate text-xs text-text-secondary">{formattedDate}</span>
+          <span className="block truncate text-xs tabular-nums text-text-secondary">
+            {formattedDate}
+          </span>
         </span>
         {isGenerating && (
           <Spinner
@@ -194,7 +196,7 @@ const ProjectChatList = ({
       if (item.type === 'empty') {
         return (
           <MeasuredRow key={key} {...rowProps}>
-            <div className="py-12 text-center text-sm text-text-secondary">{emptyLabel}</div>
+            <div className="px-3 py-14 text-center text-sm text-text-secondary">{emptyLabel}</div>
           </MeasuredRow>
         );
       }
@@ -234,9 +236,7 @@ const ProjectChatList = ({
   );
 
   return (
-    <div
-      className={cn('min-h-[280px] flex-1 overflow-hidden rounded-lg border border-border-light')}
-    >
+    <div className="min-h-[280px] flex-1 overflow-hidden">
       <AutoSizer>
         {({ width, height }) => (
           <List
diff --git a/client/src/components/Projects/ProjectCreateDialog.tsx b/client/src/components/Projects/ProjectCreateDialog.tsx
index faf0fc572c2..78f1aac6060 100644
--- a/client/src/components/Projects/ProjectCreateDialog.tsx
+++ b/client/src/components/Projects/ProjectCreateDialog.tsx
@@ -14,6 +14,7 @@ import {
   OGDialog,
   OGDialogTemplate,
   Spinner,
+  Textarea,
   useToastContext,
 } from '@librechat/client';
 import type { TChatProject } from 'librechat-data-provider';
@@ -39,6 +40,7 @@ export default function ProjectCreateDialog({
   const formId = useId();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
   const createProject = useCreateProjectMutation();
   const { showToast } = useToastContext();
 
@@ -50,10 +52,15 @@ export default function ProjectCreateDialog({
     return () => cancelAnimationFrame(frameId);
   }, [open]);
 
+  const resetForm = () => {
+    setName('');
+    setDescription('');
+  };
+
   const handleOpenChange = (nextOpen: boolean) => {
     onOpenChange(nextOpen);
     if (!nextOpen && !createProject.isLoading) {
-      setName('');
+      resetForm();
     }
   };
 
@@ -65,8 +72,12 @@ export default function ProjectCreateDialog({
     }
 
     try {
-      const project = await createProject.mutateAsync({ name: trimmedName });
-      setName('');
+      const trimmedDescription = description.trim();
+      const project = await createProject.mutateAsync({
+        name: trimmedName,
+        ...(trimmedDescription ? { description: trimmedDescription } : {}),
+      });
+      resetForm();
       onOpenChange(false);
       onCreated?.(project);
     } catch {
@@ -82,21 +93,41 @@ export default function ProjectCreateDialog({
       {children}
       <OGDialogTemplate
         title={localize('com_ui_create_project')}
-        showCloseButton={true}
-        className="w-11/12 max-w-lg bg-surface-dialog text-text-primary"
+        showCloseButton={false}
+        className="w-11/12 max-w-md"
         main={
-          <form id={formId} onSubmit={handleCreate} className="space-y-2">
-            <Label htmlFor={`${formId}-name`} className="text-sm font-medium text-text-primary">
-              {localize('com_ui_project_name')}
-            </Label>
-            <Input
-              id={`${formId}-name`}
-              ref={inputRef}
-              value={name}
-              onChange={(event) => setName(event.target.value)}
-              placeholder={localize('com_ui_project_name_placeholder')}
-              className="w-full bg-transparent text-text-primary placeholder:text-text-secondary focus-visible:ring-2 focus-visible:ring-ring-primary"
-            />
+          <form id={formId} onSubmit={handleCreate} className="flex flex-col gap-4">
+            <div className="space-y-2">
+              <Label htmlFor={`${formId}-name`} className="text-sm font-medium text-text-primary">
+                {localize('com_ui_project_name')}
+              </Label>
+              <Input
+                id={`${formId}-name`}
+                ref={inputRef}
+                value={name}
+                onChange={(event) => setName(event.target.value)}
+                placeholder={localize('com_ui_project_name_placeholder')}
+                className="w-full"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label
+                htmlFor={`${formId}-description`}
+                className="text-sm font-medium text-text-primary"
+              >
+                {localize('com_ui_description')}{' '}
+                <span className="font-normal text-text-secondary">
+                  {localize('com_ui_optional')}
+                </span>
+              </Label>
+              <Textarea
+                id={`${formId}-description`}
+                value={description}
+                onChange={(event) => setDescription(event.target.value)}
+                rows={3}
+                className="min-h-[4.5rem] bg-transparent"
+              />
+            </div>
           </form>
         }
         buttons={
@@ -106,6 +137,7 @@ export default function ProjectCreateDialog({
             variant="submit"
             disabled={!name.trim() || createProject.isLoading}
             aria-label={localize('com_ui_create_project')}
+            className="active:scale-[0.96]"
           >
             {createProject.isLoading ? (
               <Spinner className="size-4" />
diff --git a/client/src/components/Projects/ProjectWorkspace.tsx b/client/src/components/Projects/ProjectWorkspace.tsx
index e904029dff4..e8f3ba95abd 100644
--- a/client/src/components/Projects/ProjectWorkspace.tsx
+++ b/client/src/components/Projects/ProjectWorkspace.tsx
@@ -6,8 +6,9 @@ import { ArrowLeft, ArrowUpDown, Check, Folder, Plus } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { QueryKeys } from 'librechat-data-provider';
 import type { ConversationListResponse } from 'librechat-data-provider';
-import { Spinner, DropdownPopup } from '@librechat/client';
+import { Button, Spinner, DropdownPopup, useMediaQuery } from '@librechat/client';
 import type { MenuItemProps, RenderProp } from '~/common';
+import OpenSidebar from '~/components/Chat/Menus/OpenSidebar';
 import { useConversationsInfiniteQuery, useProjectQuery } from '~/data-provider';
 import { useLocalize, useNewConvo } from '~/hooks';
 import { cn, clearMessagesCache } from '~/utils';
@@ -43,6 +44,7 @@ export default function ProjectWorkspace() {
   const conversation = useRecoilValue(store.conversationByIndex(0));
   const { newConversation } = useNewConvo();
   const activeProjectId = project?._id;
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
 
   const sortOptions = useMemo(
     () => [
@@ -111,7 +113,7 @@ export default function ProjectWorkspace() {
 
   if (isProjectLoading) {
     return (
-      <div className="flex h-full items-center justify-center">
+      <div className="flex h-full items-center justify-center bg-surface-primary">
         <Spinner className="text-text-primary" />
       </div>
     );
@@ -119,62 +121,74 @@ export default function ProjectWorkspace() {
 
   if (!project) {
     return (
-      <div className="flex h-full items-center justify-center text-sm text-text-secondary">
-        {localize('com_ui_project_not_found')}
+      <div className="flex h-full flex-col items-center justify-center gap-3 bg-surface-primary px-6 text-center">
+        <p className="text-sm text-text-secondary">{localize('com_ui_project_not_found')}</p>
+        <Button type="button" variant="outline" size="sm" onClick={() => navigate('/projects')}>
+          {localize('com_ui_all_projects')}
+        </Button>
       </div>
     );
   }
 
   return (
     <main className="flex h-full min-h-0 flex-col overflow-y-auto bg-surface-primary text-text-primary">
-      <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col px-4 pb-10 pt-4 md:px-6 lg:pt-8">
-        <button
-          type="button"
-          onClick={() => navigate('/projects')}
-          className="-ml-1.5 inline-flex w-fit items-center gap-1.5 rounded-lg px-2 py-1 text-sm text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary"
-        >
-          <ArrowLeft className="h-4 w-4" aria-hidden="true" />
-          {localize('com_ui_all_projects')}
-        </button>
+      <header className="sticky top-0 z-10 border-b border-border-light bg-surface-primary/80 backdrop-blur-xl">
+        <div className="mx-auto flex h-14 w-full max-w-3xl items-center gap-2 px-4 md:h-16 md:px-6">
+          {isSmallScreen ? <OpenSidebar className="size-9 shrink-0" /> : null}
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => navigate('/projects')}
+            className="-ml-1.5 text-text-secondary hover:text-text-primary"
+          >
+            <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+            {localize('com_ui_all_projects')}
+          </Button>
+        </div>
+      </header>
 
-        <header className="mt-5 flex items-start gap-3">
-          <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-surface-secondary text-text-secondary">
+      <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col px-4 pb-10 pt-6 md:px-6 md:pt-8">
+        <div className="flex items-start gap-3.5">
+          <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-surface-secondary text-text-secondary">
             <Folder className="h-6 w-6" aria-hidden="true" />
           </span>
           <div className="min-w-0 flex-1 pt-0.5">
-            <h1 className="truncate text-2xl font-semibold tracking-tight text-text-primary">
+            <h1 className="truncate text-balance text-2xl font-semibold tracking-tight text-text-primary">
               {project.name}
             </h1>
             {project.description ? (
-              <p className="mt-0.5 line-clamp-2 text-sm text-text-secondary">
+              <p className="mt-1 text-pretty text-sm leading-relaxed text-text-secondary">
                 {project.description}
               </p>
             ) : null}
           </div>
-        </header>
+        </div>
 
         <button
           type="button"
           onClick={startProjectChat}
           className={cn(
-            'mt-6 flex w-full items-center gap-3 rounded-[26px] border border-border-medium bg-surface-secondary px-3.5 py-3 text-left shadow-sm transition-colors',
-            'hover:bg-surface-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary',
+            'mt-7 flex w-full items-center gap-3 rounded-2xl bg-surface-secondary px-3.5 py-3 text-left',
+            'transition-colors duration-150 hover:bg-surface-hover',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary',
+            'active:scale-[0.99]',
           )}
           aria-label={localize('com_ui_new_chat_in_project', { name: project.name })}
         >
-          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface-tertiary text-text-primary">
+          <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-surface-tertiary text-text-primary">
             <Plus className="h-4 w-4" aria-hidden="true" />
           </span>
-          <span className="min-w-0 flex-1 truncate text-text-secondary">
+          <span className="min-w-0 flex-1 truncate text-sm text-text-secondary">
             {localize('com_ui_new_chat_in_project', { name: project.name })}
           </span>
         </button>
 
         <section className="mt-8 flex min-h-0 flex-1 flex-col">
-          <div className="mb-2 flex items-center justify-between gap-3">
+          <div className="mb-3 flex items-center justify-between gap-3">
             <h2 className="flex items-baseline gap-2 text-sm font-medium text-text-primary">
               {localize('com_ui_chats')}
-              <span className="text-text-secondary">{project.conversationCount}</span>
+              <span className="tabular-nums text-text-secondary">{project.conversationCount}</span>
             </h2>
             <DropdownPopup
               portal={true}
@@ -188,7 +202,7 @@ export default function ProjectWorkspace() {
                 <Ariakit.MenuButton
                   aria-label={localize('com_ui_sort_chats_by')}
                   className={cn(
-                    'inline-flex h-8 items-center justify-center gap-1.5 whitespace-nowrap rounded-lg px-2.5 text-sm font-medium text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary',
+                    'inline-flex h-8 items-center justify-center gap-1.5 whitespace-nowrap rounded-lg px-2.5 text-sm font-medium text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary',
                     isSortMenuOpen && 'bg-surface-hover text-text-primary',
                   )}
                 >
diff --git a/client/src/components/Projects/ProjectsNavBar.tsx b/client/src/components/Projects/ProjectsNavBar.tsx
new file mode 100644
index 00000000000..d16cc67b83a
--- /dev/null
+++ b/client/src/components/Projects/ProjectsNavBar.tsx
@@ -0,0 +1,36 @@
+import { Plus } from 'lucide-react';
+import { Button, useMediaQuery } from '@librechat/client';
+import OpenSidebar from '~/components/Chat/Menus/OpenSidebar';
+import { useLocalize } from '~/hooks';
+
+type ProjectsNavBarProps = {
+  onCreate: () => void;
+};
+
+export default function ProjectsNavBar({ onCreate }: ProjectsNavBarProps) {
+  const localize = useLocalize();
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+
+  return (
+    <header className="sticky top-0 z-10 border-b border-border-light bg-surface-primary/80 backdrop-blur-xl">
+      <div className="mx-auto flex h-14 w-full max-w-5xl items-center justify-between gap-3 px-4 md:h-16 md:px-6">
+        <div className="flex min-w-0 items-center gap-2.5">
+          {isSmallScreen ? <OpenSidebar className="size-9 shrink-0" /> : null}
+          <h1 className="truncate text-balance text-lg font-semibold tracking-tight text-text-primary md:text-xl">
+            {localize('com_ui_projects')}
+          </h1>
+        </div>
+        <Button
+          type="button"
+          variant="default"
+          size="sm"
+          onClick={onCreate}
+          className="shrink-0 active:scale-[0.96]"
+        >
+          <Plus className="h-4 w-4" aria-hidden="true" />
+          {localize('com_ui_new_project')}
+        </Button>
+      </div>
+    </header>
+  );
+}
diff --git a/client/src/components/Projects/ProjectsView.tsx b/client/src/components/Projects/ProjectsView.tsx
index 0cbbab14047..2aa57ce0548 100644
--- a/client/src/components/Projects/ProjectsView.tsx
+++ b/client/src/components/Projects/ProjectsView.tsx
@@ -1,13 +1,13 @@
 import { useDeferredValue, useEffect, useId, useMemo, useState } from 'react';
 import * as Ariakit from '@ariakit/react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { ArrowUpDown, Check, Folder, Plus, Search } from 'lucide-react';
-import { Input, Button, Spinner, DropdownPopup, useMediaQuery } from '@librechat/client';
+import { ArrowRight, ArrowUpDown, Check, Folder, FolderPlus, Search } from 'lucide-react';
+import { Input, Button, Skeleton, DropdownPopup } from '@librechat/client';
 import type { TChatProject } from 'librechat-data-provider';
 import type { MenuItemProps, RenderProp } from '~/common';
-import OpenSidebar from '~/components/Chat/Menus/OpenSidebar';
 import { useProjectsInfiniteQuery } from '~/data-provider';
 import ProjectCreateDialog from './ProjectCreateDialog';
+import ProjectsNavBar from './ProjectsNavBar';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
@@ -40,6 +40,87 @@ function formatActivity(project: TChatProject) {
   return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
 }
 
+function ProjectCard({
+  project,
+  index,
+  onOpen,
+}: {
+  project: TChatProject;
+  index: number;
+  onOpen: (projectId: string) => void;
+}) {
+  const localize = useLocalize();
+  const activity = formatActivity(project);
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        'group/project flex min-h-[9.5rem] flex-col rounded-2xl bg-surface-secondary p-4 text-left',
+        'transition-[background-color,transform] duration-150 ease-out',
+        'hover:bg-surface-hover active:scale-[0.99]',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary',
+        'motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-1 motion-safe:fill-mode-both',
+      )}
+      style={{ animationDelay: `${Math.min(index, 8) * 40}ms` }}
+      onClick={() => onOpen(project._id)}
+    >
+      <span className="flex items-start justify-between gap-3">
+        <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-surface-tertiary text-text-secondary transition-colors group-hover/project:text-text-primary">
+          <Folder className="h-5 w-5" aria-hidden="true" />
+        </span>
+        <ArrowRight
+          className="mt-1 h-4 w-4 shrink-0 text-text-tertiary opacity-0 transition-opacity group-hover/project:opacity-100 group-focus-visible/project:opacity-100"
+          aria-hidden="true"
+        />
+      </span>
+      <span className="mt-3 truncate text-base font-semibold tracking-tight text-text-primary">
+        {project.name}
+      </span>
+      {project.description ? (
+        <span className="mt-1 line-clamp-2 text-pretty text-sm leading-relaxed text-text-secondary">
+          {project.description}
+        </span>
+      ) : null}
+      <span className="mt-auto flex items-center gap-2 pt-4 text-xs tabular-nums text-text-secondary">
+        <span>
+          {project.conversationCount === 1
+            ? localize('com_ui_project_chat_count_single')
+            : localize('com_ui_project_chat_count', {
+                count: project.conversationCount,
+              })}
+        </span>
+        {activity ? (
+          <>
+            <span aria-hidden="true">·</span>
+            <time dateTime={project.lastConversationAt ?? project.updatedAt ?? project.createdAt}>
+              {activity}
+            </time>
+          </>
+        ) : null}
+      </span>
+    </button>
+  );
+}
+
+function ProjectGridSkeleton() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3" aria-hidden="true">
+      {Array.from({ length: 6 }, (_, index) => (
+        <div
+          key={index}
+          className="flex min-h-[9.5rem] flex-col rounded-2xl bg-surface-secondary p-4"
+        >
+          <Skeleton className="h-11 w-11 rounded-xl" />
+          <Skeleton className="mt-3 h-5 w-2/3" />
+          <Skeleton className="mt-2 h-4 w-full" />
+          <Skeleton className="mt-auto h-3 w-24" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export default function ProjectsView() {
   const localize = useLocalize();
   const navigate = useNavigate();
@@ -50,7 +131,6 @@ export default function ProjectsView() {
   const sortMenuId = useId();
   const [isSortMenuOpen, setIsSortMenuOpen] = useState(false);
   const deferredSearch = useDeferredValue(search);
-  const isSmallScreen = useMediaQuery('(max-width: 768px)');
 
   const { data, fetchNextPage, isFetchingNextPage, isLoading } = useProjectsInfiniteQuery({
     search: deferredSearch || undefined,
@@ -86,6 +166,11 @@ export default function ProjectsView() {
     [sortBy, sortOptions],
   );
 
+  const projectCountLabel =
+    projects.length === 1
+      ? localize('com_ui_project_count_single')
+      : localize('com_ui_project_count', { count: projects.length });
+
   useEffect(() => {
     if (searchParams.get('new') === '1') {
       setIsCreating(true);
@@ -103,71 +188,56 @@ export default function ProjectsView() {
 
   return (
     <main className="flex h-full min-h-0 flex-col overflow-auto bg-surface-primary text-text-primary">
-      <div className="container mx-auto flex w-full max-w-4xl flex-1 flex-col gap-6 px-4 py-8 md:px-6 lg:pt-12">
-        <div className="flex flex-wrap items-center justify-between gap-3">
-          <div className="flex min-w-0 items-center gap-2.5">
-            {isSmallScreen ? <OpenSidebar /> : null}
-            <h1 className="text-2xl font-bold tracking-tight text-text-primary md:text-3xl">
-              {localize('com_ui_projects')}
-            </h1>
-          </div>
-          <div className="flex items-center gap-2">
-            <span className="hidden text-sm text-text-secondary sm:inline">
-              {localize('com_ui_sort_by')}
-            </span>
-            <DropdownPopup
-              portal={true}
-              focusLoop={true}
-              unmountOnHide={true}
-              menuId={sortMenuId}
-              isOpen={isSortMenuOpen}
-              setIsOpen={setIsSortMenuOpen}
-              className="z-[125] min-w-56"
-              trigger={
-                <Ariakit.MenuButton
-                  aria-label={localize('com_ui_sort_projects_by')}
-                  className={cn(
-                    'inline-flex h-10 items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-border-medium bg-surface-secondary px-3 text-sm font-medium text-text-primary transition-colors hover:bg-surface-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary disabled:pointer-events-none disabled:opacity-50 sm:w-44',
-                    isSortMenuOpen && 'bg-surface-hover text-text-primary',
-                  )}
-                >
-                  <span className="flex min-w-0 items-center gap-2">
-                    <ArrowUpDown
-                      className="h-4 w-4 shrink-0 text-text-secondary"
-                      aria-hidden="true"
-                    />
-                    <span className="truncate">{selectedSortLabel}</span>
-                  </span>
-                </Ariakit.MenuButton>
-              }
-              items={sortMenuItems}
-            />
-            <Button type="button" variant="submit" size="sm" onClick={() => setIsCreating(true)}>
-              <Plus className="h-4 w-4" aria-hidden="true" />
-              {localize('com_ui_new_project')}
-            </Button>
-          </div>
-        </div>
+      <ProjectsNavBar onCreate={() => setIsCreating(true)} />
 
-        <div className="flex flex-col gap-5">
+      <div className="mx-auto flex w-full max-w-5xl flex-1 flex-col px-4 pb-10 pt-6 md:px-6 md:pt-8">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
           <label className="relative min-w-0 flex-1">
             <span className="sr-only">{localize('com_ui_search_projects')}</span>
             <Search
-              className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary"
+              className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-text-tertiary"
               aria-hidden="true"
             />
             <Input
               value={search}
               onChange={(event) => setSearch(event.target.value)}
               placeholder={localize('com_ui_search_projects')}
-              className="border-border-medium bg-surface-secondary pl-9 text-text-primary placeholder:text-text-secondary focus-visible:ring-2 focus-visible:ring-ring-primary"
+              className="h-11 rounded-xl bg-surface-secondary pl-10"
             />
           </label>
-          <div className="flex items-center">
-            <span className="rounded-full bg-surface-active-alt px-4 py-2 text-sm font-medium text-text-primary">
-              {localize('com_ui_your_projects')}
-            </span>
-          </div>
+          <DropdownPopup
+            portal={true}
+            focusLoop={true}
+            unmountOnHide={true}
+            menuId={sortMenuId}
+            isOpen={isSortMenuOpen}
+            setIsOpen={setIsSortMenuOpen}
+            className="z-[125] min-w-56"
+            trigger={
+              <Ariakit.MenuButton
+                aria-label={localize('com_ui_sort_projects_by')}
+                className={cn(
+                  'inline-flex h-11 shrink-0 items-center justify-center gap-2 rounded-xl px-3 text-sm font-medium text-text-secondary transition-colors',
+                  'hover:bg-surface-hover hover:text-text-primary',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary',
+                  isSortMenuOpen && 'bg-surface-hover text-text-primary',
+                )}
+              >
+                <ArrowUpDown className="h-4 w-4 shrink-0" aria-hidden="true" />
+                <span className="truncate">{selectedSortLabel}</span>
+              </Ariakit.MenuButton>
+            }
+            items={sortMenuItems}
+          />
+        </div>
+
+        <div className="mt-8 flex items-baseline justify-between gap-3">
+          <h2 className="text-sm font-medium text-text-primary">
+            {localize('com_ui_your_projects')}
+          </h2>
+          {!isLoading && projects.length > 0 ? (
+            <p className="text-sm tabular-nums text-text-secondary">{projectCountLabel}</p>
+          ) : null}
         </div>
 
         <ProjectCreateDialog
@@ -176,62 +246,54 @@ export default function ProjectsView() {
           onCreated={(project) => navigate(`/projects/${project._id}`)}
         />
 
-        {isLoading ? (
-          <div className="flex flex-1 items-center justify-center">
-            <Spinner className="text-text-primary" />
-          </div>
-        ) : (
-          <div className="grid gap-3 md:grid-cols-2 md:gap-4">
-            {projects.map((project) => {
-              const activity = formatActivity(project);
-              return (
-                <button
+        <div className="mt-4 flex flex-1 flex-col">
+          {isLoading && <ProjectGridSkeleton />}
+          {!isLoading && projects.length > 0 && (
+            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+              {projects.map((project, index) => (
+                <ProjectCard
                   key={project._id}
-                  type="button"
-                  className={cn(
-                    'group/project flex min-h-[8.5rem] flex-col rounded-xl border border-border-medium bg-surface-secondary p-4 text-left transition-colors',
-                    'hover:border-border-heavy hover:bg-surface-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary',
-                  )}
-                  onClick={() => navigate(`/projects/${project._id}`)}
-                >
-                  <span className="flex min-w-0 items-center gap-2">
-                    <Folder className="h-4 w-4 shrink-0 text-text-secondary" aria-hidden="true" />
-                    <span className="truncate text-base font-semibold text-text-primary">
-                      {project.name}
-                    </span>
-                  </span>
-                  {project.description ? (
-                    <span className="mt-2 line-clamp-2 text-sm leading-relaxed text-text-secondary">
-                      {project.description}
-                    </span>
-                  ) : null}
-                  <span className="mt-auto flex items-center justify-between gap-2 pt-4 text-xs text-text-secondary">
-                    <span>
-                      {project.conversationCount === 1
-                        ? localize('com_ui_project_chat_count_single')
-                        : localize('com_ui_project_chat_count', {
-                            count: project.conversationCount,
-                          })}
-                    </span>
-                    {activity ? <span className="shrink-0 truncate">{activity}</span> : null}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        )}
-
-        {!isLoading && projects.length === 0 && (
-          <div className="rounded-lg border border-border-medium bg-transparent py-16 text-center text-sm text-text-secondary">
-            {localize('com_ui_no_projects')}
-          </div>
-        )}
+                  project={project}
+                  index={index}
+                  onOpen={(projectId) => navigate(`/projects/${projectId}`)}
+                />
+              ))}
+            </div>
+          )}
+          {!isLoading && projects.length === 0 && (
+            <div className="flex flex-1 flex-col items-center justify-center rounded-2xl bg-surface-secondary px-6 py-16 text-center">
+              <span className="flex h-14 w-14 items-center justify-center rounded-2xl bg-surface-tertiary text-text-secondary">
+                <FolderPlus className="h-7 w-7" aria-hidden="true" />
+              </span>
+              <h3 className="mt-4 text-balance text-base font-semibold text-text-primary">
+                {search ? localize('com_ui_no_matching_projects') : localize('com_ui_no_projects')}
+              </h3>
+              {!search ? (
+                <>
+                  <p className="mt-1 max-w-sm text-pretty text-sm text-text-secondary">
+                    {localize('com_ui_add_first_project')}
+                  </p>
+                  <Button
+                    type="button"
+                    variant="default"
+                    size="sm"
+                    className="mt-5 active:scale-[0.96]"
+                    onClick={() => setIsCreating(true)}
+                  >
+                    <FolderPlus className="h-4 w-4" aria-hidden="true" />
+                    {localize('com_ui_new_project')}
+                  </Button>
+                </>
+              ) : null}
+            </div>
+          )}
+        </div>
 
         {hasNextPage && (
           <Button
             type="button"
             variant="outline"
-            className="mx-auto"
+            className="mx-auto mt-8"
             onClick={() => fetchNextPage()}
             disabled={isFetchingNextPage}
           >
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 788c84ad2c4..9c643168be9 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -730,6 +730,7 @@
   "com_ui_add": "Add",
   "com_ui_add_first_bookmark": "Click on a chat to add one",
   "com_ui_add_first_mcp_server": "Create your first MCP server to get started",
+  "com_ui_add_first_project": "Create a project to keep related conversations together",
   "com_ui_add_first_prompt": "Create your first prompt to get started",
   "com_ui_add_labels": "Add Labels",
   "com_ui_add_mcp": "Add MCP",
@@ -1597,6 +1598,7 @@
   "com_ui_no_memories": "No memories. Create them manually or prompt the AI to remember something",
   "com_ui_no_memories_match": "No memories match your search",
   "com_ui_no_memories_title": "No memories yet",
+  "com_ui_no_matching_projects": "No projects match your search",
   "com_ui_no_options": "No options available",
   "com_ui_no_project_chats": "No chats yet",
   "com_ui_no_projects": "No projects yet",
@@ -1673,6 +1675,8 @@
   "com_ui_production": "Production",
   "com_ui_project_chat_count": "{{count}} chats",
   "com_ui_project_chat_count_single": "1 chat",
+  "com_ui_project_count": "{{count}} projects",
+  "com_ui_project_count_single": "1 project",
   "com_ui_project_create_error": "Failed to create project",
   "com_ui_project_delete_error": "Failed to delete project",
   "com_ui_project_name": "Project name",

From c658fffbf12f10afbde9ab650fb3699c0298c7bf Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 04:14:59 +0200
Subject: [PATCH 02/21] feat: Edit a Project Name and Description

Add a shared edit dialog so a project can be renamed and given a
description from the workspace or the sidebar menu. The create flow
already stored descriptions; this is the matching update path.
---
 .../Conversations/ProjectsSection.tsx         |  90 +-----------
 .../components/Projects/ProjectEditDialog.tsx | 132 ++++++++++++++++++
 .../components/Projects/ProjectWorkspace.tsx  |  41 +++++-
 client/src/locales/en/translation.json        |   2 +
 4 files changed, 174 insertions(+), 91 deletions(-)
 create mode 100644 client/src/components/Projects/ProjectEditDialog.tsx

diff --git a/client/src/components/Conversations/ProjectsSection.tsx b/client/src/components/Conversations/ProjectsSection.tsx
index 48d99e0d3f0..7d0a3072e68 100644
--- a/client/src/components/Conversations/ProjectsSection.tsx
+++ b/client/src/components/Conversations/ProjectsSection.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useId, useMemo, useState } from 'react';
 import * as Ariakit from '@ariakit/react';
 import { QueryKeys } from 'librechat-data-provider';
 import { useQueryClient } from '@tanstack/react-query';
@@ -15,7 +15,6 @@ import {
 } from 'lucide-react';
 import {
   Button,
-  Input,
   Spinner,
   OGDialog,
   OGDialogClose,
@@ -34,10 +33,10 @@ import {
   useProjectsInfiniteQuery,
   useActiveJobs,
   useConversationsInfiniteQuery,
-  useUpdateProjectMutation,
   useDeleteProjectMutation,
 } from '~/data-provider';
 import ProjectCreateDialog from '~/components/Projects/ProjectCreateDialog';
+import ProjectEditDialog from '~/components/Projects/ProjectEditDialog';
 import { useLocalize, useLocalStorage, useNewConvo } from '~/hooks';
 import { Collapse } from '~/components/ui';
 import { clearMessagesCache, cn } from '~/utils';
@@ -53,86 +52,6 @@ const iconButtonClassName = cn(
   'shrink-0',
 );
 
-function ProjectRenameDialog({
-  open,
-  onOpenChange,
-  project,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  project: TChatProject;
-}) {
-  const localize = useLocalize();
-  const formId = useId();
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const [name, setName] = useState(project.name);
-  const updateProject = useUpdateProjectMutation();
-  const { showToast } = useToastContext();
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    setName(project.name);
-    const frameId = requestAnimationFrame(() => inputRef.current?.focus());
-    return () => cancelAnimationFrame(frameId);
-  }, [open, project.name]);
-
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const trimmed = name.trim();
-    if (!trimmed || updateProject.isLoading) {
-      return;
-    }
-    updateProject.mutate(
-      { projectId: project._id, name: trimmed },
-      {
-        onSuccess: () => onOpenChange(false),
-        onError: () =>
-          showToast({
-            message: localize('com_ui_project_rename_error'),
-            severity: NotificationSeverity.ERROR,
-            showIcon: true,
-          }),
-      },
-    );
-  };
-
-  return (
-    <OGDialog open={open} onOpenChange={onOpenChange}>
-      <OGDialogContent className="w-11/12 max-w-md" showCloseButton={false}>
-        <OGDialogHeader>
-          <OGDialogTitle>{localize('com_ui_rename_project')}</OGDialogTitle>
-        </OGDialogHeader>
-        <form id={formId} onSubmit={handleSubmit}>
-          <Input
-            ref={inputRef}
-            value={name}
-            onChange={(event) => setName(event.target.value)}
-            aria-label={localize('com_ui_project_name')}
-            className="w-full bg-transparent text-text-primary placeholder:text-text-secondary focus-visible:ring-2 focus-visible:ring-ring-primary"
-          />
-        </form>
-        <div className="flex justify-end gap-4 pt-4">
-          <OGDialogClose asChild>
-            <Button aria-label="cancel" variant="outline">
-              {localize('com_ui_cancel')}
-            </Button>
-          </OGDialogClose>
-          <Button
-            type="submit"
-            form={formId}
-            variant="submit"
-            disabled={!name.trim() || updateProject.isLoading}
-          >
-            {updateProject.isLoading ? <Spinner className="size-4" /> : localize('com_ui_save')}
-          </Button>
-        </div>
-      </OGDialogContent>
-    </OGDialog>
-  );
-}
-
 function ProjectDeleteDialog({
   open,
   onOpenChange,
@@ -317,7 +236,7 @@ const ProjectItem = memo(
         },
         {
           id: `${menuId}-rename`,
-          label: localize('com_ui_rename'),
+          label: localize('com_ui_edit_project'),
           icon: <Pencil className="size-4 text-text-secondary" aria-hidden="true" />,
           onClick: () => setIsRenameOpen(true),
         },
@@ -408,7 +327,7 @@ const ProjectItem = memo(
             onShowAll={openProject}
           />
         </Collapse>
-        <ProjectRenameDialog open={isRenameOpen} onOpenChange={setIsRenameOpen} project={project} />
+        <ProjectEditDialog open={isRenameOpen} onOpenChange={setIsRenameOpen} project={project} />
         <ProjectDeleteDialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen} project={project} />
       </li>
     );
@@ -416,6 +335,7 @@ const ProjectItem = memo(
   (prevProps, nextProps) =>
     prevProps.project._id === nextProps.project._id &&
     prevProps.project.name === nextProps.project.name &&
+    prevProps.project.description === nextProps.project.description &&
     prevProps.project.conversationCount === nextProps.project.conversationCount &&
     prevProps.project.updatedAt === nextProps.project.updatedAt &&
     prevProps.defaultExpanded === nextProps.defaultExpanded &&
diff --git a/client/src/components/Projects/ProjectEditDialog.tsx b/client/src/components/Projects/ProjectEditDialog.tsx
new file mode 100644
index 00000000000..67f53b54b12
--- /dev/null
+++ b/client/src/components/Projects/ProjectEditDialog.tsx
@@ -0,0 +1,132 @@
+import { useEffect, useId, useRef, useState, type FormEvent } from 'react';
+import {
+  Button,
+  Input,
+  Label,
+  OGDialog,
+  OGDialogTemplate,
+  Spinner,
+  Textarea,
+  useToastContext,
+} from '@librechat/client';
+import type { TChatProject } from 'librechat-data-provider';
+import { useUpdateProjectMutation } from '~/data-provider';
+import { useLocalize } from '~/hooks';
+import { NotificationSeverity } from '~/common';
+
+type ProjectEditDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  project: TChatProject;
+};
+
+export default function ProjectEditDialog({ open, onOpenChange, project }: ProjectEditDialogProps) {
+  const localize = useLocalize();
+  const formId = useId();
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [name, setName] = useState(project.name);
+  const [description, setDescription] = useState(project.description ?? '');
+  const [wasOpen, setWasOpen] = useState(open);
+  const updateProject = useUpdateProjectMutation();
+  const { showToast } = useToastContext();
+
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open) {
+      setName(project.name);
+      setDescription(project.description ?? '');
+    }
+  }
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const frameId = requestAnimationFrame(() => inputRef.current?.focus());
+    return () => cancelAnimationFrame(frameId);
+  }, [open]);
+
+  const trimmedName = name.trim();
+  const trimmedDescription = description.trim();
+  const isUnchanged =
+    trimmedName === project.name && trimmedDescription === (project.description ?? '').trim();
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!trimmedName || isUnchanged || updateProject.isLoading) {
+      return;
+    }
+
+    updateProject.mutate(
+      {
+        projectId: project._id,
+        name: trimmedName,
+        description: trimmedDescription,
+      },
+      {
+        onSuccess: () => onOpenChange(false),
+        onError: () =>
+          showToast({
+            message: localize('com_ui_project_rename_error'),
+            severity: NotificationSeverity.ERROR,
+            showIcon: true,
+          }),
+      },
+    );
+  };
+
+  return (
+    <OGDialog open={open} onOpenChange={onOpenChange}>
+      <OGDialogTemplate
+        title={localize('com_ui_edit_project')}
+        showCloseButton={false}
+        className="w-11/12 max-w-md"
+        main={
+          <form id={formId} onSubmit={handleSubmit} className="flex flex-col gap-4">
+            <div className="space-y-2">
+              <Label htmlFor={`${formId}-name`} className="text-sm font-medium text-text-primary">
+                {localize('com_ui_project_name')}
+              </Label>
+              <Input
+                id={`${formId}-name`}
+                ref={inputRef}
+                value={name}
+                onChange={(event) => setName(event.target.value)}
+                className="w-full"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label
+                htmlFor={`${formId}-description`}
+                className="text-sm font-medium text-text-primary"
+              >
+                {localize('com_ui_description')}{' '}
+                <span className="font-normal text-text-secondary">
+                  {localize('com_ui_optional')}
+                </span>
+              </Label>
+              <Textarea
+                id={`${formId}-description`}
+                value={description}
+                onChange={(event) => setDescription(event.target.value)}
+                rows={3}
+                className="min-h-[4.5rem] bg-transparent"
+              />
+            </div>
+          </form>
+        }
+        buttons={
+          <Button
+            type="submit"
+            form={formId}
+            variant="submit"
+            disabled={!trimmedName || isUnchanged || updateProject.isLoading}
+            className="active:scale-[0.96]"
+          >
+            {updateProject.isLoading ? <Spinner className="size-4" /> : localize('com_ui_save')}
+          </Button>
+        }
+      />
+    </OGDialog>
+  );
+}
diff --git a/client/src/components/Projects/ProjectWorkspace.tsx b/client/src/components/Projects/ProjectWorkspace.tsx
index e8f3ba95abd..398f1755991 100644
--- a/client/src/components/Projects/ProjectWorkspace.tsx
+++ b/client/src/components/Projects/ProjectWorkspace.tsx
@@ -2,16 +2,17 @@ import { useCallback, useId, useMemo, useState } from 'react';
 import * as Ariakit from '@ariakit/react';
 import { useRecoilValue } from 'recoil';
 import { useQueryClient } from '@tanstack/react-query';
-import { ArrowLeft, ArrowUpDown, Check, Folder, Plus } from 'lucide-react';
+import { ArrowLeft, ArrowUpDown, Check, Folder, Pencil, Plus } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { QueryKeys } from 'librechat-data-provider';
 import type { ConversationListResponse } from 'librechat-data-provider';
-import { Button, Spinner, DropdownPopup, useMediaQuery } from '@librechat/client';
+import { Button, Spinner, DropdownPopup, TooltipAnchor, useMediaQuery } from '@librechat/client';
 import type { MenuItemProps, RenderProp } from '~/common';
 import OpenSidebar from '~/components/Chat/Menus/OpenSidebar';
 import { useConversationsInfiniteQuery, useProjectQuery } from '~/data-provider';
 import { useLocalize, useNewConvo } from '~/hooks';
 import { cn, clearMessagesCache } from '~/utils';
+import ProjectEditDialog from './ProjectEditDialog';
 import ProjectChatList from './ProjectChatList';
 import store from '~/store';
 
@@ -38,6 +39,7 @@ export default function ProjectWorkspace() {
   const queryClient = useQueryClient();
   const { projectId = '' } = useParams();
   const [sortBy, setSortBy] = useState<ChatSortField>('updatedAt');
+  const [isEditOpen, setIsEditOpen] = useState(false);
   const sortMenuId = useId();
   const [isSortMenuOpen, setIsSortMenuOpen] = useState(false);
   const { data: project, isLoading: isProjectLoading } = useProjectQuery(projectId);
@@ -154,17 +156,44 @@ export default function ProjectWorkspace() {
             <Folder className="h-6 w-6" aria-hidden="true" />
           </span>
           <div className="min-w-0 flex-1 pt-0.5">
-            <h1 className="truncate text-balance text-2xl font-semibold tracking-tight text-text-primary">
-              {project.name}
-            </h1>
+            <div className="flex min-w-0 items-center gap-1.5">
+              <h1 className="min-w-0 truncate text-balance text-2xl font-semibold tracking-tight text-text-primary">
+                {project.name}
+              </h1>
+              <TooltipAnchor
+                description={localize('com_ui_edit_project')}
+                render={
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-8 shrink-0 text-text-secondary hover:text-text-primary"
+                    aria-label={localize('com_ui_edit_project')}
+                    onClick={() => setIsEditOpen(true)}
+                  >
+                    <Pencil className="h-4 w-4" aria-hidden="true" />
+                  </Button>
+                }
+              />
+            </div>
             {project.description ? (
               <p className="mt-1 text-pretty text-sm leading-relaxed text-text-secondary">
                 {project.description}
               </p>
-            ) : null}
+            ) : (
+              <button
+                type="button"
+                onClick={() => setIsEditOpen(true)}
+                className="mt-1 text-sm text-text-tertiary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary"
+              >
+                {localize('com_ui_add_description')}
+              </button>
+            )}
           </div>
         </div>
 
+        <ProjectEditDialog open={isEditOpen} onOpenChange={setIsEditOpen} project={project} />
+
         <button
           type="button"
           onClick={startProjectChat}
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 9c643168be9..6658a4374b2 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -728,6 +728,7 @@
   "com_ui_action_button": "Action Button",
   "com_ui_active": "Active",
   "com_ui_add": "Add",
+  "com_ui_add_description": "Add a description",
   "com_ui_add_first_bookmark": "Click on a chat to add one",
   "com_ui_add_first_mcp_server": "Create your first MCP server to get started",
   "com_ui_add_first_project": "Create a project to keep related conversations together",
@@ -1184,6 +1185,7 @@
   "com_ui_edit_memory": "Edit Memory",
   "com_ui_edit_message": "Edit message",
   "com_ui_edit_preset_title": "Edit Preset - {{title}}",
+  "com_ui_edit_project": "Edit project",
   "com_ui_edit_prompt_page": "Edit Prompt Page",
   "com_ui_edit_skill": "Edit Skill",
   "com_ui_editable_message": "Editable Message",

From 87f9b6349e77a5279ec992e4bcdc8eb1ff74f1f1 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 04:15:23 +0200
Subject: [PATCH 03/21] feat: Delete a Project from the Workspace

Extract the project delete confirmation into a shared dialog and
expose it on the workspace header so deleting no longer requires
the sidebar menu.
---
 .../Conversations/ProjectsSection.tsx         | 65 +----------------
 .../Projects/ProjectDeleteDialog.tsx          | 73 +++++++++++++++++++
 .../components/Projects/ProjectWorkspace.tsx  | 20 ++++-
 client/src/locales/en/translation.json        |  1 +
 4 files changed, 94 insertions(+), 65 deletions(-)
 create mode 100644 client/src/components/Projects/ProjectDeleteDialog.tsx

diff --git a/client/src/components/Conversations/ProjectsSection.tsx b/client/src/components/Conversations/ProjectsSection.tsx
index 7d0a3072e68..2b34aa7db90 100644
--- a/client/src/components/Conversations/ProjectsSection.tsx
+++ b/client/src/components/Conversations/ProjectsSection.tsx
@@ -16,16 +16,10 @@ import {
 import {
   Button,
   Spinner,
-  OGDialog,
-  OGDialogClose,
-  OGDialogTitle,
-  OGDialogHeader,
-  OGDialogContent,
   TooltipAnchor,
   DropdownPopup,
   NewChatIcon,
   buttonVariants,
-  useToastContext,
 } from '@librechat/client';
 import type { TChatProject, TConversation } from 'librechat-data-provider';
 import type { MenuItemProps } from '~/common';
@@ -33,14 +27,13 @@ import {
   useProjectsInfiniteQuery,
   useActiveJobs,
   useConversationsInfiniteQuery,
-  useDeleteProjectMutation,
 } from '~/data-provider';
 import ProjectCreateDialog from '~/components/Projects/ProjectCreateDialog';
+import ProjectDeleteDialog from '~/components/Projects/ProjectDeleteDialog';
 import ProjectEditDialog from '~/components/Projects/ProjectEditDialog';
 import { useLocalize, useLocalStorage, useNewConvo } from '~/hooks';
 import { Collapse } from '~/components/ui';
 import { clearMessagesCache, cn } from '~/utils';
-import { NotificationSeverity } from '~/common';
 import Convo from './Convo';
 import store from '~/store';
 
@@ -52,62 +45,6 @@ const iconButtonClassName = cn(
   'shrink-0',
 );
 
-function ProjectDeleteDialog({
-  open,
-  onOpenChange,
-  project,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  project: TChatProject;
-}) {
-  const localize = useLocalize();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const deleteProject = useDeleteProjectMutation();
-  const { showToast } = useToastContext();
-
-  const confirmDelete = () => {
-    deleteProject.mutate(project._id, {
-      onSuccess: () => {
-        onOpenChange(false);
-        if (location.pathname === `/projects/${project._id}`) {
-          navigate('/projects');
-        }
-      },
-      onError: () =>
-        showToast({
-          message: localize('com_ui_project_delete_error'),
-          severity: NotificationSeverity.ERROR,
-          showIcon: true,
-        }),
-    });
-  };
-
-  return (
-    <OGDialog open={open} onOpenChange={onOpenChange}>
-      <OGDialogContent className="w-11/12 max-w-md" showCloseButton={false}>
-        <OGDialogHeader>
-          <OGDialogTitle>{localize('com_ui_delete_project')}</OGDialogTitle>
-        </OGDialogHeader>
-        <div className="text-sm text-text-secondary">
-          {localize('com_ui_delete_project_confirm', { name: project.name })}
-        </div>
-        <div className="flex justify-end gap-4 pt-4">
-          <OGDialogClose asChild>
-            <Button aria-label="cancel" variant="outline">
-              {localize('com_ui_cancel')}
-            </Button>
-          </OGDialogClose>
-          <Button variant="destructive" onClick={confirmDelete} disabled={deleteProject.isLoading}>
-            {deleteProject.isLoading ? <Spinner className="size-4" /> : localize('com_ui_delete')}
-          </Button>
-        </div>
-      </OGDialogContent>
-    </OGDialog>
-  );
-}
-
 const noop = () => {};
 
 type ProjectChatsInlineProps = {
diff --git a/client/src/components/Projects/ProjectDeleteDialog.tsx b/client/src/components/Projects/ProjectDeleteDialog.tsx
new file mode 100644
index 00000000000..18b3808d135
--- /dev/null
+++ b/client/src/components/Projects/ProjectDeleteDialog.tsx
@@ -0,0 +1,73 @@
+import {
+  Button,
+  Spinner,
+  OGDialog,
+  OGDialogClose,
+  OGDialogTitle,
+  OGDialogHeader,
+  OGDialogContent,
+  useToastContext,
+} from '@librechat/client';
+import type { TChatProject } from 'librechat-data-provider';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useDeleteProjectMutation } from '~/data-provider';
+import { useLocalize } from '~/hooks';
+import { NotificationSeverity } from '~/common';
+
+type ProjectDeleteDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  project: TChatProject;
+};
+
+export default function ProjectDeleteDialog({
+  open,
+  onOpenChange,
+  project,
+}: ProjectDeleteDialogProps) {
+  const localize = useLocalize();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const deleteProject = useDeleteProjectMutation();
+  const { showToast } = useToastContext();
+
+  const confirmDelete = () => {
+    deleteProject.mutate(project._id, {
+      onSuccess: () => {
+        onOpenChange(false);
+        if (location.pathname === `/projects/${project._id}`) {
+          navigate('/projects');
+        }
+      },
+      onError: () =>
+        showToast({
+          message: localize('com_ui_project_delete_error'),
+          severity: NotificationSeverity.ERROR,
+          showIcon: true,
+        }),
+    });
+  };
+
+  return (
+    <OGDialog open={open} onOpenChange={onOpenChange}>
+      <OGDialogContent className="w-11/12 max-w-md" showCloseButton={false}>
+        <OGDialogHeader>
+          <OGDialogTitle>{localize('com_ui_delete_project')}</OGDialogTitle>
+        </OGDialogHeader>
+        <div className="text-sm text-text-secondary">
+          {localize('com_ui_delete_project_confirm', { name: project.name })}
+        </div>
+        <div className="flex justify-end gap-4 pt-4">
+          <OGDialogClose asChild>
+            <Button aria-label={localize('com_ui_cancel')} variant="outline">
+              {localize('com_ui_cancel')}
+            </Button>
+          </OGDialogClose>
+          <Button variant="destructive" onClick={confirmDelete} disabled={deleteProject.isLoading}>
+            {deleteProject.isLoading ? <Spinner className="size-4" /> : localize('com_ui_delete')}
+          </Button>
+        </div>
+      </OGDialogContent>
+    </OGDialog>
+  );
+}
diff --git a/client/src/components/Projects/ProjectWorkspace.tsx b/client/src/components/Projects/ProjectWorkspace.tsx
index 398f1755991..66c7664175b 100644
--- a/client/src/components/Projects/ProjectWorkspace.tsx
+++ b/client/src/components/Projects/ProjectWorkspace.tsx
@@ -2,7 +2,7 @@ import { useCallback, useId, useMemo, useState } from 'react';
 import * as Ariakit from '@ariakit/react';
 import { useRecoilValue } from 'recoil';
 import { useQueryClient } from '@tanstack/react-query';
-import { ArrowLeft, ArrowUpDown, Check, Folder, Pencil, Plus } from 'lucide-react';
+import { ArrowLeft, ArrowUpDown, Check, Folder, Pencil, Plus, Trash2 } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { QueryKeys } from 'librechat-data-provider';
 import type { ConversationListResponse } from 'librechat-data-provider';
@@ -12,6 +12,7 @@ import OpenSidebar from '~/components/Chat/Menus/OpenSidebar';
 import { useConversationsInfiniteQuery, useProjectQuery } from '~/data-provider';
 import { useLocalize, useNewConvo } from '~/hooks';
 import { cn, clearMessagesCache } from '~/utils';
+import ProjectDeleteDialog from './ProjectDeleteDialog';
 import ProjectEditDialog from './ProjectEditDialog';
 import ProjectChatList from './ProjectChatList';
 import store from '~/store';
@@ -40,6 +41,7 @@ export default function ProjectWorkspace() {
   const { projectId = '' } = useParams();
   const [sortBy, setSortBy] = useState<ChatSortField>('updatedAt');
   const [isEditOpen, setIsEditOpen] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const sortMenuId = useId();
   const [isSortMenuOpen, setIsSortMenuOpen] = useState(false);
   const { data: project, isLoading: isProjectLoading } = useProjectQuery(projectId);
@@ -175,6 +177,21 @@ export default function ProjectWorkspace() {
                   </Button>
                 }
               />
+              <TooltipAnchor
+                description={localize('com_ui_delete_project_action')}
+                render={
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-8 shrink-0 text-text-secondary hover:text-text-destructive"
+                    aria-label={localize('com_ui_delete_project_action')}
+                    onClick={() => setIsDeleteOpen(true)}
+                  >
+                    <Trash2 className="h-4 w-4" aria-hidden="true" />
+                  </Button>
+                }
+              />
             </div>
             {project.description ? (
               <p className="mt-1 text-pretty text-sm leading-relaxed text-text-secondary">
@@ -193,6 +210,7 @@ export default function ProjectWorkspace() {
         </div>
 
         <ProjectEditDialog open={isEditOpen} onOpenChange={setIsEditOpen} project={project} />
+        <ProjectDeleteDialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen} project={project} />
 
         <button
           type="button"
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 6658a4374b2..75c21045bb2 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -1136,6 +1136,7 @@
   "com_ui_delete_not_allowed": "Delete operation is not allowed",
   "com_ui_delete_preset": "Delete Preset?",
   "com_ui_delete_project": "Delete project?",
+  "com_ui_delete_project_action": "Delete project",
   "com_ui_delete_project_confirm": "Delete \"{{name}}\"? The chats inside won't be deleted.",
   "com_ui_delete_prompt": "Delete Prompt?",
   "com_ui_delete_selected": "Delete selected",

From b243ab53ed445a78d8b9dfd16a1ca0338ab2c45b Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 04:15:47 +0200
Subject: [PATCH 04/21] feat: Add Edit and Delete Actions to Project Cards

Give dashboard cards a more-options menu that opens the same edit
and delete dialogs as the workspace, so those actions are not
workspace-only.
---
 .../src/components/Projects/ProjectsView.tsx  | 132 +++++++++++++-----
 1 file changed, 94 insertions(+), 38 deletions(-)

diff --git a/client/src/components/Projects/ProjectsView.tsx b/client/src/components/Projects/ProjectsView.tsx
index 2aa57ce0548..c08cd352cad 100644
--- a/client/src/components/Projects/ProjectsView.tsx
+++ b/client/src/components/Projects/ProjectsView.tsx
@@ -1,12 +1,23 @@
 import { useDeferredValue, useEffect, useId, useMemo, useState } from 'react';
 import * as Ariakit from '@ariakit/react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { ArrowRight, ArrowUpDown, Check, Folder, FolderPlus, Search } from 'lucide-react';
+import {
+  ArrowUpDown,
+  Check,
+  Ellipsis,
+  Folder,
+  FolderPlus,
+  Pencil,
+  Search,
+  Trash2,
+} from 'lucide-react';
 import { Input, Button, Skeleton, DropdownPopup } from '@librechat/client';
 import type { TChatProject } from 'librechat-data-provider';
 import type { MenuItemProps, RenderProp } from '~/common';
 import { useProjectsInfiniteQuery } from '~/data-provider';
 import ProjectCreateDialog from './ProjectCreateDialog';
+import ProjectDeleteDialog from './ProjectDeleteDialog';
+import ProjectEditDialog from './ProjectEditDialog';
 import ProjectsNavBar from './ProjectsNavBar';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
@@ -50,56 +61,101 @@ function ProjectCard({
   onOpen: (projectId: string) => void;
 }) {
   const localize = useLocalize();
+  const menuId = useId();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const activity = formatActivity(project);
+  const menuItems = useMemo<MenuItemProps[]>(
+    () => [
+      {
+        id: `${menuId}-edit`,
+        label: localize('com_ui_edit_project'),
+        icon: <Pencil className="size-4 text-text-secondary" aria-hidden="true" />,
+        onClick: () => setIsEditOpen(true),
+      },
+      {
+        id: `${menuId}-delete`,
+        label: localize('com_ui_delete'),
+        icon: <Trash2 className="size-4 text-text-secondary" aria-hidden="true" />,
+        onClick: () => setIsDeleteOpen(true),
+      },
+    ],
+    [localize, menuId],
+  );
 
   return (
-    <button
-      type="button"
+    <article
       className={cn(
-        'group/project flex min-h-[9.5rem] flex-col rounded-2xl bg-surface-secondary p-4 text-left',
-        'transition-[background-color,transform] duration-150 ease-out',
-        'hover:bg-surface-hover active:scale-[0.99]',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary',
+        'group/project relative flex min-h-[9.5rem] flex-col rounded-2xl bg-surface-secondary',
+        'transition-colors duration-150 ease-out hover:bg-surface-hover',
         'motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-1 motion-safe:fill-mode-both',
       )}
       style={{ animationDelay: `${Math.min(index, 8) * 40}ms` }}
-      onClick={() => onOpen(project._id)}
     >
-      <span className="flex items-start justify-between gap-3">
+      <button
+        type="button"
+        className="flex min-h-[9.5rem] flex-1 flex-col rounded-2xl p-4 pr-12 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary"
+        onClick={() => onOpen(project._id)}
+      >
         <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-surface-tertiary text-text-secondary transition-colors group-hover/project:text-text-primary">
           <Folder className="h-5 w-5" aria-hidden="true" />
         </span>
-        <ArrowRight
-          className="mt-1 h-4 w-4 shrink-0 text-text-tertiary opacity-0 transition-opacity group-hover/project:opacity-100 group-focus-visible/project:opacity-100"
-          aria-hidden="true"
-        />
-      </span>
-      <span className="mt-3 truncate text-base font-semibold tracking-tight text-text-primary">
-        {project.name}
-      </span>
-      {project.description ? (
-        <span className="mt-1 line-clamp-2 text-pretty text-sm leading-relaxed text-text-secondary">
-          {project.description}
-        </span>
-      ) : null}
-      <span className="mt-auto flex items-center gap-2 pt-4 text-xs tabular-nums text-text-secondary">
-        <span>
-          {project.conversationCount === 1
-            ? localize('com_ui_project_chat_count_single')
-            : localize('com_ui_project_chat_count', {
-                count: project.conversationCount,
-              })}
+        <span className="mt-3 truncate text-base font-semibold tracking-tight text-text-primary">
+          {project.name}
         </span>
-        {activity ? (
-          <>
-            <span aria-hidden="true">·</span>
-            <time dateTime={project.lastConversationAt ?? project.updatedAt ?? project.createdAt}>
-              {activity}
-            </time>
-          </>
+        {project.description ? (
+          <span className="mt-1 line-clamp-2 text-pretty text-sm leading-relaxed text-text-secondary">
+            {project.description}
+          </span>
         ) : null}
-      </span>
-    </button>
+        <span className="mt-auto flex items-center gap-2 pt-4 text-xs tabular-nums text-text-secondary">
+          <span>
+            {project.conversationCount === 1
+              ? localize('com_ui_project_chat_count_single')
+              : localize('com_ui_project_chat_count', {
+                  count: project.conversationCount,
+                })}
+          </span>
+          {activity ? (
+            <>
+              <span aria-hidden="true">·</span>
+              <time dateTime={project.lastConversationAt ?? project.updatedAt ?? project.createdAt}>
+                {activity}
+              </time>
+            </>
+          ) : null}
+        </span>
+      </button>
+      <div className="absolute right-2 top-2">
+        <DropdownPopup
+          portal={true}
+          focusLoop={true}
+          unmountOnHide={true}
+          menuId={menuId}
+          isOpen={isMenuOpen}
+          setIsOpen={setIsMenuOpen}
+          className="z-[125] min-w-44"
+          iconClassName="mr-2 text-text-secondary"
+          trigger={
+            <Ariakit.MenuButton
+              aria-label={localize('com_ui_more_options')}
+              className={cn(
+                'flex h-8 w-8 items-center justify-center rounded-lg text-text-secondary outline-none transition-colors',
+                'hover:bg-surface-tertiary hover:text-text-primary',
+                'focus-visible:ring-2 focus-visible:ring-text-primary',
+                isMenuOpen && 'bg-surface-tertiary text-text-primary',
+              )}
+            >
+              <Ellipsis className="h-4 w-4" aria-hidden="true" />
+            </Ariakit.MenuButton>
+          }
+          items={menuItems}
+        />
+      </div>
+      <ProjectEditDialog open={isEditOpen} onOpenChange={setIsEditOpen} project={project} />
+      <ProjectDeleteDialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen} project={project} />
+    </article>
   );
 }
 

From a8028bc1595da6e3f2f8c25ef445e1f369d48e4c Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 07:43:46 +0200
Subject: [PATCH 05/21] feat: Match Project Descriptions When Searching
 Projects

Project search only matched the name, so a project found by its
description was invisible in the sidebar and the projects dashboard.
Match the escaped search term against name or description.
---
 .../src/methods/chatProject.spec.ts           | 22 ++++++++++++++++++-
 .../data-schemas/src/methods/chatProject.ts   |  9 ++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/data-schemas/src/methods/chatProject.spec.ts b/packages/data-schemas/src/methods/chatProject.spec.ts
index 5563f90b6ca..7ba112dc741 100644
--- a/packages/data-schemas/src/methods/chatProject.spec.ts
+++ b/packages/data-schemas/src/methods/chatProject.spec.ts
@@ -1,8 +1,8 @@
 import mongoose from 'mongoose';
 import { MongoMemoryServer } from 'mongodb-memory-server';
-import { createModels } from '~/models';
 import type { IChatProject, IConversation } from '~/types';
 import { createChatProjectMethods, type ChatProjectMethods } from './chatProject';
+import { createModels } from '~/models';
 
 jest.mock('~/config/winston', () => ({
   error: jest.fn(),
@@ -83,6 +83,26 @@ describe('ChatProject methods', () => {
     expect(list.projects[0].name).toBe('Customer Alpha Updated');
   });
 
+  it('filters projects by name or description search', async () => {
+    await methods.createChatProject(user, {
+      name: 'Customer Alpha',
+      description: 'Support work',
+    });
+    await methods.createChatProject(user, {
+      name: 'Internal Tools',
+      description: 'Overflow menu test',
+    });
+
+    const byName = await methods.listChatProjects(user, { search: 'alpha' });
+    expect(byName.projects.map((project) => project.name)).toEqual(['Customer Alpha']);
+
+    const byDescription = await methods.listChatProjects(user, { search: 'overflow' });
+    expect(byDescription.projects.map((project) => project.name)).toEqual(['Internal Tools']);
+
+    const noMatch = await methods.listChatProjects(user, { search: 'zzzz' });
+    expect(noMatch.projects).toHaveLength(0);
+  });
+
   it('paginates projects deterministically when latest activity is null', async () => {
     const staleProject = await methods.createChatProject(user, { name: 'Stale' });
     await methods.createChatProject(user, { name: 'Quiet A' });
diff --git a/packages/data-schemas/src/methods/chatProject.ts b/packages/data-schemas/src/methods/chatProject.ts
index 038a6a979a1..1569a416719 100644
--- a/packages/data-schemas/src/methods/chatProject.ts
+++ b/packages/data-schemas/src/methods/chatProject.ts
@@ -1,9 +1,9 @@
 import type { FilterQuery, Model, SortOrder, Types } from 'mongoose';
-import logger from '~/config/winston';
-import { isValidObjectIdString } from '~/utils/objectId';
+import type { IChatProject, IChatProjectDocument, IConversation } from '~/types';
 import { buildRetentionVisibilityFilter } from '~/utils/retention';
+import { isValidObjectIdString } from '~/utils/objectId';
 import { escapeRegExp } from '~/utils/string';
-import type { IChatProject, IChatProjectDocument, IConversation } from '~/types';
+import logger from '~/config/winston';
 
 export type ChatProjectSortBy = 'name' | 'createdAt' | 'lastConversationAt';
 export type ChatProjectSortDirection = 'asc' | 'desc';
@@ -296,7 +296,8 @@ export function createChatProjectMethods(mongoose: typeof import('mongoose')): C
     const filters: FilterQuery<IChatProjectDocument>[] = [{ user }];
 
     if (options.search?.trim()) {
-      filters.push({ name: { $regex: escapeRegExp(options.search.trim()), $options: 'i' } });
+      const searchRegex = { $regex: escapeRegExp(options.search.trim()), $options: 'i' };
+      filters.push({ $or: [{ name: searchRegex }, { description: searchRegex }] });
     }
 
     const cursorFilter = createCursorFilter(

From 6f956aecadcae91d6e95836b073ccdc6ad1a97cd Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 07:44:23 +0200
Subject: [PATCH 06/21] feat: Let Consumers Place and Size the ControlCombobox
 Popover

The popover always matched the trigger width, sat 4px from it and used
the same enter animation, which is wrong for a pill-shaped trigger in a
composer and for a full-width field in a dialog.

Add popoverClassName, matchTriggerWidth, gutter and portal so a consumer
can opt out of each. All four keep the current behaviour by default, so
existing comboboxes are unchanged; portal in particular stays true, as
turning it off inside a scrollable dialog would clip the list.
---
 .../src/components/ControlCombobox.spec.tsx   | 68 ++++++++++++++++++-
 .../client/src/components/ControlCombobox.tsx | 28 ++++++--
 2 files changed, 91 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/ControlCombobox.spec.tsx b/packages/client/src/components/ControlCombobox.spec.tsx
index 1a659f0cd85..a7c765b2f3d 100644
--- a/packages/client/src/components/ControlCombobox.spec.tsx
+++ b/packages/client/src/components/ControlCombobox.spec.tsx
@@ -1,4 +1,5 @@
-import { act, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { OGDialog, OGDialogContent, OGDialogTitle } from './OriginalDialog';
 import ControlCombobox from './ControlCombobox';
 
 type CapturedObserver = {
@@ -196,4 +197,69 @@ describe('ControlCombobox popover sizing', () => {
 
     expect(getPopoverWidth()).toBe('275px');
   });
+
+  it('filters listed options when the search field is typed in', () => {
+    render(
+      <ControlCombobox
+        selectedValue="a"
+        displayValue="Option A"
+        items={items}
+        setValue={() => undefined}
+        ariaLabel="Test combobox"
+        searchPlaceholder="Search projects"
+        isCollapsed={false}
+        showCarat
+      />,
+    );
+    openPopover();
+
+    const search = screen.getByPlaceholderText('Search projects');
+    fireEvent.change(search, { target: { value: 'Option B' } });
+
+    expect(screen.getByRole('option', { name: 'Option B' })).toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'Option A' })).not.toBeInTheDocument();
+  });
+});
+
+describe('ControlCombobox portal placement', () => {
+  const renderInDialog = (portal: boolean) =>
+    render(
+      <OGDialog open>
+        <OGDialogContent>
+          <OGDialogTitle>Change project</OGDialogTitle>
+          <ControlCombobox
+            selectedValue="a"
+            displayValue="Option A"
+            items={items}
+            setValue={() => undefined}
+            ariaLabel="Test combobox"
+            searchPlaceholder="Search projects"
+            isCollapsed={false}
+            showCarat
+            portal={portal}
+          />
+        </OGDialogContent>
+      </OGDialog>,
+    );
+
+  it('portals to the document by default so existing dialogs keep their current placement', () => {
+    renderInDialog(true);
+    openPopover();
+
+    const dialog = screen.getByRole('dialog', { name: 'Change project' });
+    expect(dialog.contains(screen.getByPlaceholderText('Search projects'))).toBe(false);
+  });
+
+  it('keeps the popover inside the dialog when portal is false, so its search field stays typeable', () => {
+    renderInDialog(false);
+    openPopover();
+
+    const dialog = screen.getByRole('dialog', { name: 'Change project' });
+    const search = screen.getByPlaceholderText('Search projects');
+    expect(dialog.contains(search)).toBe(true);
+
+    fireEvent.change(search, { target: { value: 'Option B' } });
+    expect(screen.getByRole('option', { name: 'Option B' })).toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'Option A' })).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/client/src/components/ControlCombobox.tsx b/packages/client/src/components/ControlCombobox.tsx
index 3286bdafc26..0233501cf67 100644
--- a/packages/client/src/components/ControlCombobox.tsx
+++ b/packages/client/src/components/ControlCombobox.tsx
@@ -27,6 +27,16 @@ interface ControlComboboxProps {
   iconSide?: 'left' | 'right';
   selectId?: string;
   placement?: Ariakit.SelectStoreProps['placement'];
+  popoverClassName?: string;
+  matchTriggerWidth?: boolean;
+  gutter?: number;
+  /**
+   * Radix dialogs trap focus, so a portaled popover rendered outside the dialog
+   * cannot receive typing in its search field. Pass `false` from inside a dialog
+   * to keep the list in the dialog, and give that dialog `overflow-visible` so
+   * the popover is not clipped.
+   */
+  portal?: boolean;
 }
 
 const ROW_HEIGHT = 36;
@@ -49,6 +59,10 @@ function ControlCombobox({
   iconSide = 'left',
   selectId,
   placement,
+  popoverClassName,
+  matchTriggerWidth = true,
+  gutter = 4,
+  portal = true,
 }: ControlComboboxProps): JSX.Element {
   const [searchValue, setSearchValue] = useState('');
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -161,12 +175,18 @@ function ControlCombobox({
       </Ariakit.Select>
       <Ariakit.SelectPopover
         store={select}
-        gutter={4}
-        portal
+        gutter={gutter}
+        portal={portal}
         className={cn(
-          'animate-popover overflow-hidden rounded-xl border border-border-light bg-surface-secondary shadow-lg',
+          'overflow-hidden rounded-xl border border-border-light bg-surface-secondary shadow-lg',
+          popoverClassName ?? 'animate-popover',
         )}
-        style={{ zIndex: popoverZIndex, width: isCollapsed ? '300px' : (buttonWidth ?? '300px') }}
+        style={{
+          zIndex: popoverZIndex,
+          ...(matchTriggerWidth
+            ? { width: isCollapsed ? '300px' : (buttonWidth ?? '300px') }
+            : { minWidth: '16rem' }),
+        }}
       >
         <div className="py-1.5">
           <div className="relative">

From 2de7c067c89f7babe5cff98d4ec4c750096f55e5 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 07:44:49 +0200
Subject: [PATCH 07/21] fix: Re-render Conversation Rows When Pinned State
 Changes

areConversationListItemFieldsEqual left pinned out of its comparison, so
a row memoised on it kept rendering the stale pin state until some other
tracked field changed.
---
 client/src/components/Conversations/utils.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/Conversations/utils.ts b/client/src/components/Conversations/utils.ts
index ded60aa32fa..4b12d1a009b 100644
--- a/client/src/components/Conversations/utils.ts
+++ b/client/src/components/Conversations/utils.ts
@@ -31,6 +31,7 @@ export function areConversationListItemFieldsEqual(
     prevConversation.conversationId === nextConversation.conversationId &&
     prevConversation.title === nextConversation.title &&
     prevConversation.chatProjectId === nextConversation.chatProjectId &&
+    prevConversation.pinned === nextConversation.pinned &&
     prevConversation.isShared === nextConversation.isShared &&
     prevConversation.createdAt === nextConversation.createdAt &&
     prevConversation.updatedAt === nextConversation.updatedAt

From a0307aaad31640c0bfdc949f89da4d383eed5029 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 07:45:40 +0200
Subject: [PATCH 08/21] fix: Keep the Project Scope When Starting a Chat From a
 Project

Starting a chat from the project workspace set chatProjectId on the
draft but left the URL on the unscoped route, so a reload or a refresh
of the route dropped the project. Navigate to the project-scoped new
chat URL alongside the draft.
---
 .../components/Projects/ProjectWorkspace.tsx    | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Projects/ProjectWorkspace.tsx b/client/src/components/Projects/ProjectWorkspace.tsx
index 66c7664175b..fa53cc65306 100644
--- a/client/src/components/Projects/ProjectWorkspace.tsx
+++ b/client/src/components/Projects/ProjectWorkspace.tsx
@@ -1,19 +1,19 @@
 import { useCallback, useId, useMemo, useState } from 'react';
-import * as Ariakit from '@ariakit/react';
 import { useRecoilValue } from 'recoil';
+import * as Ariakit from '@ariakit/react';
 import { useQueryClient } from '@tanstack/react-query';
-import { ArrowLeft, ArrowUpDown, Check, Folder, Pencil, Plus, Trash2 } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { QueryKeys } from 'librechat-data-provider';
-import type { ConversationListResponse } from 'librechat-data-provider';
+import { Constants, QueryKeys } from 'librechat-data-provider';
+import { ArrowLeft, ArrowUpDown, Check, Folder, Pencil, Plus, Trash2 } from 'lucide-react';
 import { Button, Spinner, DropdownPopup, TooltipAnchor, useMediaQuery } from '@librechat/client';
+import type { ConversationListResponse } from 'librechat-data-provider';
 import type { MenuItemProps, RenderProp } from '~/common';
-import OpenSidebar from '~/components/Chat/Menus/OpenSidebar';
 import { useConversationsInfiniteQuery, useProjectQuery } from '~/data-provider';
-import { useLocalize, useNewConvo } from '~/hooks';
-import { cn, clearMessagesCache } from '~/utils';
+import OpenSidebar from '~/components/Chat/Menus/OpenSidebar';
 import ProjectDeleteDialog from './ProjectDeleteDialog';
 import ProjectEditDialog from './ProjectEditDialog';
+import { useLocalize, useNewConvo } from '~/hooks';
+import { cn, clearMessagesCache } from '~/utils';
 import ProjectChatList from './ProjectChatList';
 import store from '~/store';
 
@@ -112,8 +112,9 @@ export default function ProjectWorkspace() {
     }
     clearMessagesCache(queryClient, conversation?.conversationId);
     queryClient.invalidateQueries([QueryKeys.messages]);
+    navigate(`/c/${Constants.NEW_CONVO}?projectId=${encodeURIComponent(activeProjectId)}`);
     newConversation({ template: { chatProjectId: activeProjectId } });
-  }, [activeProjectId, conversation?.conversationId, newConversation, queryClient]);
+  }, [activeProjectId, conversation?.conversationId, navigate, newConversation, queryClient]);
 
   if (isProjectLoading) {
     return (

From c2356c915485e3ca1be849c09d53576f7e2c47c4 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 07:46:09 +0200
Subject: [PATCH 09/21] style: Move the Project Chip Into the Composer

The chip floated above the composer as a separate row, which read as an
unrelated control and pushed the conversation starters down. Render it
inside the composer border as the first row instead, and pass the
project through ChatForm so the memoised form still controls it.

The remove button no longer fades in on hover, since a control that only
appears on hover is unreachable by touch. Its popover opens upward with
a matching bottom-origin animation that honours reduced motion.
---
 client/src/components/Chat/ChatView.tsx       |  8 ++++---
 client/src/components/Chat/Input/ChatForm.tsx | 19 ++++++++++++++---
 .../components/Chat/ProjectLandingChip.tsx    | 21 +++++++++++--------
 .../Chat/__tests__/ChatView.spec.tsx          |  1 -
 client/src/style.css                          | 19 +++++++++++++++++
 5 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Chat/ChatView.tsx b/client/src/components/Chat/ChatView.tsx
index 846719417e8..3d97c4fee89 100644
--- a/client/src/components/Chat/ChatView.tsx
+++ b/client/src/components/Chat/ChatView.tsx
@@ -17,7 +17,6 @@ import {
 import { ChatContext, AddedChatContext, ChatFormProvider, useFileMapContext } from '~/Providers';
 import ConversationStarters from './Input/ConversationStarters';
 import { useGetMessagesByConvoId } from '~/data-provider';
-import ProjectLandingChip from './ProjectLandingChip';
 import MessagesView from './Messages/MessagesView';
 import Presentation from './Presentation';
 import ChatForm from './Input/ChatForm';
@@ -143,9 +142,12 @@ function ChatView({ index = 0, project }: { index?: number; project?: TChatProje
                       isLandingPage && 'max-w-3xl transition-all duration-200 xl:max-w-4xl',
                     )}
                   >
-                    {isProjectLandingPage && project && <ProjectLandingChip project={project} />}
                     {isLandingPage && <ConversationStarters />}
-                    <ChatForm index={index} placeholder={chatFormPlaceholder} />
+                    <ChatForm
+                      index={index}
+                      placeholder={chatFormPlaceholder}
+                      project={isProjectLandingPage ? project : undefined}
+                    />
                     {!isLandingPage && <Footer />}
                   </div>
                 </div>
diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
index d75b1677d4a..6395981914f 100644
--- a/client/src/components/Chat/Input/ChatForm.tsx
+++ b/client/src/components/Chat/Input/ChatForm.tsx
@@ -3,7 +3,7 @@ import { useWatch } from 'react-hook-form';
 import { TextareaAutosize } from '@librechat/client';
 import { useRecoilState, useRecoilValue, useRecoilCallback } from 'recoil';
 import { Constants, isAssistantsEndpoint, isAgentsEndpoint } from 'librechat-data-provider';
-import type { TMessage, TConversation } from 'librechat-data-provider';
+import type { TChatProject, TMessage, TConversation } from 'librechat-data-provider';
 import type { ExtendedFile, FileSetter, ConvoGenerator } from '~/common';
 import type { QueuedMessageContext } from '~/hooks/Chat/useSteering';
 import {
@@ -28,6 +28,7 @@ import useAskAnswerMode from '~/hooks/Input/useAskAnswerMode';
 import AskUserQuestionPopover from './AskUserQuestionPopover';
 import InterruptSteerButton from './InterruptSteerButton';
 import DuringRunSendButton from './DuringRunSendButton';
+import ProjectLandingChip from '../ProjectLandingChip';
 import { useGetStartupConfig } from '~/data-provider';
 import { mainTextareaId, BadgeItem } from '~/common';
 import PendingSteerChips from './PendingSteerChips';
@@ -54,7 +55,8 @@ import store from '~/store';
 interface ChatFormProps {
   index: number;
   placeholder?: string;
-  /** From ChatContext — individual values so memo can compare them */
+  project?: TChatProject;
+  /** From ChatContext: individual values so memo can compare them */
   files: Map<string, ExtendedFile>;
   setFiles: FileSetter;
   conversation: TConversation | null;
@@ -68,6 +70,7 @@ interface ChatFormProps {
 const ChatForm = memo(function ChatForm({
   index,
   placeholder,
+  project,
   files,
   setFiles,
   conversation,
@@ -556,6 +559,7 @@ const ChatForm = memo(function ChatForm({
                   : 'border-border-light bg-surface-chat',
               )}
             >
+              {project ? <ProjectLandingChip project={project} /> : null}
               <TextareaHeader addedConvo={addedConvo} setAddedConvo={setAddedConvo} />
               <PendingManualSkillsChips conversationId={conversationId} />
               {quotesEnabled && <PendingQuoteChips conversationId={conversationId} />}
@@ -732,7 +736,15 @@ ChatForm.displayName = 'ChatForm';
  * to the memo'd ChatForm. This prevents ChatForm from re-rendering on every
  * streaming chunk — it only re-renders when the specific values it uses change.
  */
-function ChatFormWrapper({ index = 0, placeholder }: { index?: number; placeholder?: string }) {
+function ChatFormWrapper({
+  index = 0,
+  placeholder,
+  project,
+}: {
+  index?: number;
+  placeholder?: string;
+  project?: TChatProject;
+}) {
   const {
     files,
     setFiles,
@@ -792,6 +804,7 @@ function ChatFormWrapper({ index = 0, placeholder }: { index?: number; placehold
     <ChatForm
       index={index}
       placeholder={placeholder}
+      project={project}
       files={files}
       setFiles={setFiles}
       conversation={stableConversation}
diff --git a/client/src/components/Chat/ProjectLandingChip.tsx b/client/src/components/Chat/ProjectLandingChip.tsx
index 4fe8871dd88..acd3b778269 100644
--- a/client/src/components/Chat/ProjectLandingChip.tsx
+++ b/client/src/components/Chat/ProjectLandingChip.tsx
@@ -9,10 +9,10 @@ import { useChatContext } from '~/Providers';
 import { useLocalize } from '~/hooks';
 
 /**
- * Subtle project indicator shown on a project-scoped new-chat landing.
- * Clicking the chip switches the project (searchable combobox); the trailing
- * `×` removes the project scope. Both update the conversation draft and the
- * `?projectId` search param in place, so the typed message and model are kept.
+ * Project scope control rendered inside the composer on a project-scoped
+ * new-chat landing. The trigger switches projects; the trailing × drops the
+ * scope. Both update the draft and `?projectId` in place so the typed message
+ * and model are kept.
  */
 export default function ProjectLandingChip({ project }: { project: TChatProject }) {
   const localize = useLocalize();
@@ -53,7 +53,7 @@ export default function ProjectLandingChip({ project }: { project: TChatProject
   );
 
   return (
-    <div className="group mb-2.5 flex items-center gap-1 px-1">
+    <div className="flex items-center gap-0.5 px-2.5 pt-2">
       <ControlCombobox
         selectId="project-landing-select"
         selectedValue={project._id}
@@ -69,9 +69,12 @@ export default function ProjectLandingChip({ project }: { project: TChatProject
         searchPlaceholder={localize('com_ui_search_projects')}
         isCollapsed={false}
         showCarat={true}
-        placement="top"
-        containerClassName="w-auto px-0"
-        className="h-8 w-auto min-w-[11rem] gap-1.5 rounded-full bg-surface-secondary px-2.5 text-sm font-medium text-text-secondary hover:bg-surface-hover hover:text-text-primary"
+        placement="top-start"
+        gutter={12}
+        matchTriggerWidth={false}
+        containerClassName="w-auto min-w-0 px-0"
+        className="h-8 w-auto min-w-[7.5rem] max-w-[14rem] gap-1.5 rounded-full border-0 bg-transparent px-2.5 text-sm font-medium text-text-secondary hover:bg-surface-hover hover:text-text-primary"
+        popoverClassName="animate-popover-bottom min-w-64 rounded-2xl shadow-xl"
       />
       <TooltipAnchor
         description={localize('com_ui_remove_from_project')}
@@ -80,7 +83,7 @@ export default function ProjectLandingChip({ project }: { project: TChatProject
             type="button"
             aria-label={localize('com_ui_remove_from_project')}
             onClick={() => applyProject(null)}
-            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-text-secondary opacity-0 outline-none transition-opacity hover:bg-surface-hover hover:text-text-primary focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-text-primary group-hover:opacity-100"
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-text-secondary outline-none transition-colors hover:bg-surface-hover hover:text-text-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary"
           >
             <X className="h-3.5 w-3.5" aria-hidden="true" />
           </button>
diff --git a/client/src/components/Chat/__tests__/ChatView.spec.tsx b/client/src/components/Chat/__tests__/ChatView.spec.tsx
index c6a30a3e224..f35c7a513eb 100644
--- a/client/src/components/Chat/__tests__/ChatView.spec.tsx
+++ b/client/src/components/Chat/__tests__/ChatView.spec.tsx
@@ -42,7 +42,6 @@ jest.mock('../Presentation', () => ({
 jest.mock('../Header', () => ({ __esModule: true, default: () => <div /> }));
 jest.mock('../Footer', () => ({ __esModule: true, default: () => <div /> }));
 jest.mock('../Landing', () => ({ __esModule: true, default: () => <div /> }));
-jest.mock('../ProjectLandingChip', () => ({ __esModule: true, default: () => <div /> }));
 jest.mock('../Messages/MessagesView', () => ({ __esModule: true, default: () => <div /> }));
 jest.mock('../Input/ChatForm', () => ({ __esModule: true, default: () => <div /> }));
 jest.mock('../Input/ConversationStarters', () => ({ __esModule: true, default: () => <div /> }));
diff --git a/client/src/style.css b/client/src/style.css
index 842d7952431..bc03c372a91 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -2339,6 +2339,25 @@ html[data-input-modality='keyboard']
   transform: scale(1) translateY(0);
 }
 
+.animate-popover-bottom {
+  transform-origin: bottom left;
+  opacity: 0;
+  transition:
+    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+  transform: translateY(0.5rem) scale(0.96);
+}
+.animate-popover-bottom[data-enter] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .animate-popover-bottom {
+    transition: none !important;
+    transform: none;
+  }
+}
+
 /* Left (existing) */
 .animate-popover-left {
   transform-origin: left;

From c8121f6b593d7fa2767bdeb11fb71ceb70e1c48e Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 07:46:30 +0200
Subject: [PATCH 10/21] feat: Rebuild the Change Project Dialog on the
 Searchable Combobox

The dialog used a bare select, so picking a project meant scrolling an
unsearchable native list capped at the default page of 25. Use the
searchable ControlCombobox, request the full first page, and disable
Save until the selection actually differs from the current project.

The combobox opts out of portalling so its search field sits inside the
dialog's focus trap and can be typed in, and the dialog is
overflow-visible so the list is not clipped.

Unassigning now lives on the menu's own Remove From Project action, so
the dialog no longer needs an empty option. Returning focus to the menu
button rather than the menu item fixes focus being lost on close, since
the item unmounts with the menu.
---
 .../ConvoOptions/ConvoOptions.tsx             |   7 +-
 .../ConvoOptions/ProjectButton.tsx            | 105 +++++++++++-------
 2 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx b/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
index 5aab1339e3a..1c53e7a88e2 100644
--- a/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
+++ b/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
@@ -69,6 +69,7 @@ function ConvoOptions({
   const { newConversation } = useNewConvo();
 
   const menuId = useId();
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
   const shareButtonRef = useRef<HTMLButtonElement>(null);
   const deleteButtonRef = useRef<HTMLButtonElement>(null);
   const projectButtonRef = useRef<HTMLButtonElement>(null);
@@ -145,8 +146,9 @@ function ConvoOptions({
   }, []);
 
   const projectHandler = useCallback(() => {
+    setIsPopoverActive(false);
     setShowProjectDialog(true);
-  }, []);
+  }, [setIsPopoverActive]);
 
   const removeProjectHandler = useCallback(() => {
     const convoId = conversationId ?? '';
@@ -427,6 +429,7 @@ function ConvoOptions({
         setIsOpen={setIsPopoverActive}
         trigger={
           <Ariakit.MenuButton
+            ref={menuButtonRef}
             id={`conversation-menu-${conversationId}`}
             aria-label={localize('com_nav_convo_menu_options')}
             aria-expanded={isPopoverActive}
@@ -470,7 +473,7 @@ function ConvoOptions({
           conversationId={conversationId ?? ''}
           chatProjectId={chatProjectId}
           setMenuOpen={setIsPopoverActive}
-          triggerRef={projectButtonRef}
+          triggerRef={menuButtonRef}
           showProjectDialog={showProjectDialog}
           setShowProjectDialog={setShowProjectDialog}
         />
diff --git a/client/src/components/Conversations/ConvoOptions/ProjectButton.tsx b/client/src/components/Conversations/ConvoOptions/ProjectButton.tsx
index a0860ef29b7..1cf44a19e02 100644
--- a/client/src/components/Conversations/ConvoOptions/ProjectButton.tsx
+++ b/client/src/components/Conversations/ConvoOptions/ProjectButton.tsx
@@ -1,18 +1,22 @@
-import { useEffect, useMemo, useState, type RefObject } from 'react';
+import { useMemo, useState, type RefObject } from 'react';
+import { Folder } from 'lucide-react';
 import {
   Button,
-  Spinner,
+  ControlCombobox,
+  Label,
   OGDialog,
   OGDialogClose,
-  OGDialogTitle,
-  OGDialogHeader,
   OGDialogContent,
+  OGDialogHeader,
+  OGDialogTitle,
+  Spinner,
   useToastContext,
 } from '@librechat/client';
 import type { TChatProject } from 'librechat-data-provider';
+import type { OptionWithIcon } from '~/common';
 import { useAssignConversationToProjectMutation, useProjectsInfiniteQuery } from '~/data-provider';
-import { useLocalize } from '~/hooks';
 import { NotificationSeverity } from '~/common';
+import { useLocalize } from '~/hooks';
 
 type ProjectButtonProps = {
   conversationId: string;
@@ -41,6 +45,7 @@ function ProjectConversationDialog({
   const { data, fetchNextPage, isFetchingNextPage } = useProjectsInfiniteQuery({
     sortBy: 'name',
     sortDirection: 'asc',
+    limit: 100,
   });
 
   const projects = useMemo<TChatProject[]>(
@@ -48,16 +53,29 @@ function ProjectConversationDialog({
     [data?.pages],
   );
   const hasNextPage = data?.pages[data.pages.length - 1]?.nextCursor != null;
-
-  useEffect(() => {
-    setSelectedProjectId(chatProjectId ?? '');
-  }, [chatProjectId]);
+  const selectedProject = projects.find((project) => project._id === selectedProjectId);
+  const projectItems = useMemo<OptionWithIcon[]>(
+    () =>
+      projects.map((project) => ({
+        label: project.name,
+        value: project._id,
+        icon: <Folder className="h-4 w-4 text-text-secondary" aria-hidden="true" />,
+      })),
+    [projects],
+  );
+  const canSave =
+    Boolean(selectedProjectId) &&
+    selectedProjectId !== (chatProjectId ?? '') &&
+    !assignConversation.isLoading;
 
   const saveProject = () => {
+    if (!canSave) {
+      return;
+    }
     assignConversation.mutate(
       {
         conversationId,
-        projectId: selectedProjectId || null,
+        projectId: selectedProjectId,
       },
       {
         onSuccess: () => {
@@ -83,44 +101,53 @@ function ProjectConversationDialog({
   return (
     <OGDialogContent
       id="project-conversation-dialog"
-      className="w-11/12 max-w-md"
+      className="w-11/12 max-w-md overflow-visible"
       showCloseButton={false}
     >
       <OGDialogHeader>
         <OGDialogTitle>{localize('com_ui_change_project')}</OGDialogTitle>
       </OGDialogHeader>
-      <label className="flex flex-col gap-2 text-sm text-text-primary">
-        {localize('com_ui_select_project')}
-        <select
-          value={selectedProjectId}
-          onChange={(event) => setSelectedProjectId(event.target.value)}
-          className="h-10 rounded-lg border border-border-light bg-surface-primary px-3 text-sm outline-none focus:ring-2 focus:ring-ring-primary"
-        >
-          <option value="">{localize('com_ui_unassigned')}</option>
-          {projects.map((project) => (
-            <option key={project._id} value={project._id}>
-              {project.name}
-            </option>
-          ))}
-        </select>
-      </label>
-      {hasNextPage && (
-        <button
-          type="button"
-          className="mt-3 text-sm text-text-secondary hover:text-text-primary"
-          onClick={() => fetchNextPage()}
-          disabled={isFetchingNextPage}
-        >
-          {isFetchingNextPage ? localize('com_ui_loading') : localize('com_ui_load_more')}
-        </button>
-      )}
-      <div className="flex justify-end gap-4 pt-4">
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="change-project-select" className="text-sm font-medium text-text-primary">
+          {localize('com_ui_select_project')}
+        </Label>
+        <ControlCombobox
+          selectId="change-project-select"
+          selectedValue={selectedProjectId}
+          displayValue={selectedProject?.name}
+          items={projectItems}
+          setValue={setSelectedProjectId}
+          SelectIcon={<Folder className="h-4 w-4 text-text-secondary" aria-hidden="true" />}
+          ariaLabel={localize('com_ui_select_project')}
+          searchPlaceholder={localize('com_ui_search_projects')}
+          selectPlaceholder={localize('com_ui_select_project')}
+          isCollapsed={false}
+          showCarat={true}
+          placement="bottom-start"
+          portal={false}
+          matchTriggerWidth={true}
+          containerClassName="w-full px-0"
+          className="h-10 w-full justify-start gap-2 rounded-xl border border-border-light bg-surface-tertiary px-3 text-sm text-text-primary hover:bg-surface-hover"
+        />
+        {hasNextPage ? (
+          <Button
+            type="button"
+            variant="link"
+            className="h-auto justify-start px-0 text-sm"
+            onClick={() => fetchNextPage()}
+            disabled={isFetchingNextPage}
+          >
+            {isFetchingNextPage ? localize('com_ui_loading') : localize('com_ui_load_more')}
+          </Button>
+        ) : null}
+      </div>
+      <div className="flex justify-end gap-2 pt-4">
         <OGDialogClose asChild>
-          <Button aria-label="cancel" variant="outline">
+          <Button type="button" variant="outline">
             {localize('com_ui_cancel')}
           </Button>
         </OGDialogClose>
-        <Button onClick={saveProject} disabled={assignConversation.isLoading}>
+        <Button type="button" variant="submit" onClick={saveProject} disabled={!canSave}>
           {assignConversation.isLoading ? <Spinner /> : localize('com_ui_save')}
         </Button>
       </div>

From fdf17042d6e5de827ab1ed0ecafb12b122e28a97 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 07:46:49 +0200
Subject: [PATCH 11/21] feat: Add an Overflow Menu to Project Workspace Chats

Chats in a project workspace could only be opened. Managing one meant
finding it again in the sidebar, so add the same actions to the row:
change project, remove from project, and delete.

The row becomes a card matching the project cards, and the endpoint icon
is rendered at landing size rather than in a tinted tile. Its memo
comparison now uses areConversationListItemFieldsEqual, since the render
props comparison ignored fields the row displays.
---
 .../components/Projects/ProjectChatList.tsx   |  71 +++++---
 .../Projects/ProjectChatOptions.tsx           | 154 ++++++++++++++++++
 2 files changed, 202 insertions(+), 23 deletions(-)
 create mode 100644 client/src/components/Projects/ProjectChatOptions.tsx

diff --git a/client/src/components/Projects/ProjectChatList.tsx b/client/src/components/Projects/ProjectChatList.tsx
index 8ab5687b4d3..2957af23370 100644
--- a/client/src/components/Projects/ProjectChatList.tsx
+++ b/client/src/components/Projects/ProjectChatList.tsx
@@ -4,6 +4,7 @@ import {
   useEffect,
   useMemo,
   useRef,
+  useState,
   type CSSProperties,
   type FC,
   type ReactNode,
@@ -14,10 +15,11 @@ import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtuali
 import type { TConversation } from 'librechat-data-provider';
 import type { MeasuredCellParent } from '~/components/Conversations/Conversations';
 import ConversationEndpointIcon from '~/components/Conversations/ConversationEndpointIcon';
-import { areConversationRenderPropsEqual } from '~/components/Conversations/utils';
+import { areConversationListItemFieldsEqual } from '~/components/Conversations/utils';
 import { DateLabel } from '~/components/Conversations/Conversations';
 import { useLocalize, useNavigateToConvo } from '~/hooks';
-import { groupConversationsByDate } from '~/utils';
+import { cn, groupConversationsByDate } from '~/utils';
+import ProjectChatOptions from './ProjectChatOptions';
 import { useActiveJobs } from '~/data-provider';
 
 type ChatSortField = 'updatedAt' | 'createdAt';
@@ -77,35 +79,56 @@ const ConversationRow = memo(
   ({ conversation, isGenerating }: { conversation: TConversation; isGenerating: boolean }) => {
     const { navigateToConvo } = useNavigateToConvo();
     const localize = useLocalize();
+    const conversationId = conversation.conversationId ?? '';
     const title = conversation.title || localize('com_ui_untitled');
     const updatedAt = conversation.updatedAt || conversation.createdAt;
     const formattedDate = updatedAt ? new Date(updatedAt).toLocaleString() : '';
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
 
     return (
-      <button
-        type="button"
-        className="flex w-full items-center gap-3 rounded-xl px-2 py-2.5 text-left outline-none transition-colors hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary"
-        onClick={() => navigateToConvo(conversation)}
+      <article
+        className={cn(
+          'group/project-chat mb-2 flex items-center rounded-2xl border border-border-light bg-surface-secondary',
+          'transition-colors hover:bg-surface-hover',
+          isMenuOpen && 'bg-surface-hover',
+        )}
       >
-        <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-surface-tertiary">
-          <ConversationEndpointIcon conversation={conversation} size={24} context="menu-item" />
-        </span>
-        <span className="min-w-0 flex-1">
-          <span className="block truncate text-sm font-medium text-text-primary">{title}</span>
-          <span className="block truncate text-xs tabular-nums text-text-secondary">
-            {formattedDate}
+        <button
+          type="button"
+          className="flex min-w-0 flex-1 items-center gap-3 rounded-2xl px-3.5 py-3 text-left outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary"
+          onClick={() => navigateToConvo(conversation)}
+        >
+          <span className="flex h-10 w-10 shrink-0 items-center justify-center">
+            <ConversationEndpointIcon conversation={conversation} size={40} context="landing" />
           </span>
-        </span>
-        {isGenerating && (
-          <Spinner
-            className="h-4 w-4 shrink-0 text-text-primary"
-            aria-label={localize('com_ui_generating')}
-          />
-        )}
-      </button>
+          <span className="min-w-0 flex-1">
+            <span className="block truncate text-sm font-medium text-text-primary">{title}</span>
+            <span className="block truncate text-xs tabular-nums text-text-secondary">
+              {formattedDate}
+            </span>
+          </span>
+          {isGenerating ? (
+            <Spinner
+              className="h-4 w-4 shrink-0 text-text-primary"
+              aria-label={localize('com_ui_generating')}
+            />
+          ) : null}
+        </button>
+        {conversationId ? (
+          <div className="pr-2">
+            <ProjectChatOptions
+              conversation={conversation}
+              isMenuOpen={isMenuOpen}
+              setIsMenuOpen={setIsMenuOpen}
+            />
+          </div>
+        ) : null}
+      </article>
     );
   },
-  areConversationRenderPropsEqual,
+  (prevProps, nextProps) =>
+    areConversationListItemFieldsEqual(prevProps.conversation, nextProps.conversation) &&
+    prevProps.isGenerating === nextProps.isGenerating,
 );
 
 ConversationRow.displayName = 'ProjectWorkspaceConversationRow';
@@ -204,7 +227,9 @@ const ProjectChatList = ({
       if (item.type === 'date') {
         return (
           <MeasuredRow key={key} {...rowProps}>
-            <DateLabel groupName={item.groupName} />
+            <div className="pb-3">
+              <DateLabel groupName={item.groupName} />
+            </div>
           </MeasuredRow>
         );
       }
diff --git a/client/src/components/Projects/ProjectChatOptions.tsx b/client/src/components/Projects/ProjectChatOptions.tsx
new file mode 100644
index 00000000000..085bc46543a
--- /dev/null
+++ b/client/src/components/Projects/ProjectChatOptions.tsx
@@ -0,0 +1,154 @@
+import { memo, useId, useMemo, useRef, useState } from 'react';
+import * as Ariakit from '@ariakit/react';
+import { Ellipsis, FolderInput, FolderX, Trash2 } from 'lucide-react';
+import { DropdownPopup, Spinner, useToastContext } from '@librechat/client';
+import type { TConversation } from 'librechat-data-provider';
+import type { MenuItemProps } from '~/common';
+import ProjectButton from '~/components/Conversations/ConvoOptions/ProjectButton';
+import DeleteButton from '~/components/Conversations/ConvoOptions/DeleteButton';
+import { useAssignConversationToProjectMutation } from '~/data-provider';
+import { NotificationSeverity } from '~/common';
+import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
+
+type ProjectChatOptionsProps = {
+  conversation: TConversation;
+  isMenuOpen: boolean;
+  setIsMenuOpen: (open: boolean) => void;
+};
+
+const noop = () => {};
+
+function ProjectChatOptions({ conversation, isMenuOpen, setIsMenuOpen }: ProjectChatOptionsProps) {
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+  const menuId = useId();
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [showProjectDialog, setShowProjectDialog] = useState(false);
+
+  const conversationId = conversation.conversationId ?? '';
+  const chatProjectId = conversation.chatProjectId ?? null;
+  const assignConversationToProject = useAssignConversationToProjectMutation();
+
+  const menuItems = useMemo<MenuItemProps[]>(() => {
+    if (!conversationId) {
+      return [];
+    }
+
+    return [
+      {
+        label: localize('com_ui_change_project'),
+        onClick: () => {
+          setIsMenuOpen(false);
+          setShowProjectDialog(true);
+        },
+        icon: <FolderInput className="size-4 text-text-secondary" aria-hidden="true" />,
+        hideOnClick: true,
+        render: (props) => <button {...props} />,
+      },
+      {
+        label: localize('com_ui_remove_from_project'),
+        show: Boolean(chatProjectId),
+        onClick: () => {
+          assignConversationToProject.mutate(
+            { conversationId, projectId: null },
+            {
+              onSuccess: () => {
+                setIsMenuOpen(false);
+                showToast({
+                  message: localize('com_ui_project_updated'),
+                  severity: NotificationSeverity.SUCCESS,
+                  showIcon: true,
+                });
+              },
+              onError: () => {
+                showToast({
+                  message: localize('com_ui_project_update_error'),
+                  severity: NotificationSeverity.ERROR,
+                  showIcon: true,
+                });
+              },
+            },
+          );
+        },
+        hideOnClick: false,
+        icon: assignConversationToProject.isLoading ? (
+          <Spinner className="size-4" />
+        ) : (
+          <FolderX className="size-4 text-text-secondary" aria-hidden="true" />
+        ),
+      },
+      {
+        label: localize('com_ui_delete'),
+        onClick: () => {
+          setIsMenuOpen(false);
+          setShowDeleteDialog(true);
+        },
+        hideOnClick: true,
+        render: (props) => <button {...props} />,
+        icon: <Trash2 className="size-4 text-text-secondary" aria-hidden="true" />,
+      },
+    ];
+  }, [
+    assignConversationToProject,
+    chatProjectId,
+    conversationId,
+    localize,
+    setIsMenuOpen,
+    showToast,
+  ]);
+
+  return (
+    <>
+      <DropdownPopup
+        portal={true}
+        focusLoop={true}
+        unmountOnHide={true}
+        menuId={menuId}
+        isOpen={isMenuOpen}
+        setIsOpen={setIsMenuOpen}
+        className="z-[125] min-w-44"
+        iconClassName="mr-2 text-text-secondary"
+        trigger={
+          <Ariakit.MenuButton
+            ref={menuButtonRef}
+            aria-label={localize('com_nav_convo_menu_options')}
+            className={cn(
+              'flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-text-secondary outline-none transition-colors',
+              'hover:bg-surface-hover hover:text-text-primary',
+              'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary',
+              isMenuOpen && 'bg-surface-hover text-text-primary',
+            )}
+          >
+            <Ellipsis className="h-4 w-4" aria-hidden="true" />
+          </Ariakit.MenuButton>
+        }
+        items={menuItems}
+      />
+      {showProjectDialog ? (
+        <ProjectButton
+          conversationId={conversationId}
+          chatProjectId={chatProjectId}
+          setMenuOpen={setIsMenuOpen}
+          triggerRef={menuButtonRef}
+          showProjectDialog={showProjectDialog}
+          setShowProjectDialog={setShowProjectDialog}
+        />
+      ) : null}
+      {showDeleteDialog ? (
+        <DeleteButton
+          title={conversation.title ?? ''}
+          retainView={noop}
+          triggerRef={menuButtonRef}
+          setMenuOpen={setIsMenuOpen}
+          showDeleteDialog={showDeleteDialog}
+          conversationId={conversationId}
+          setShowDeleteDialog={setShowDeleteDialog}
+        />
+      ) : null}
+    </>
+  );
+}
+
+export default memo(ProjectChatOptions);

From 160a6411814b914470f3361cd6950e0432f408f4 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 07:47:09 +0200
Subject: [PATCH 12/21] feat: Rework the Projects Sidebar Section

The section header duplicated the projects count and the New Project
action already on the dashboard, and spent a row on a chevron button
separate from its label. Collapse it to a single label toggle with an
All Projects action, and drop the per-project count that was hidden on
hover anyway.

The new chat action becomes a real link to the project-scoped URL, so it
can be middle-clicked and opened in a new tab, and modified clicks fall
through to the browser. On the new chat route it commits ?projectId
synchronously, because a deferred search param update lets ChatRoute see
a project-scoped draft on an unscoped URL and wipe it.

Row actions stay visible on devices without hover, where an action that
appears on hover cannot be reached.
---
 .../Conversations/ProjectsSection.tsx         | 160 +++++++++---------
 1 file changed, 84 insertions(+), 76 deletions(-)

diff --git a/client/src/components/Conversations/ProjectsSection.tsx b/client/src/components/Conversations/ProjectsSection.tsx
index 2b34aa7db90..bab1272996f 100644
--- a/client/src/components/Conversations/ProjectsSection.tsx
+++ b/client/src/components/Conversations/ProjectsSection.tsx
@@ -1,27 +1,29 @@
 import { memo, useCallback, useId, useMemo, useState } from 'react';
+import { useRecoilValue } from 'recoil';
 import * as Ariakit from '@ariakit/react';
-import { QueryKeys } from 'librechat-data-provider';
 import { useQueryClient } from '@tanstack/react-query';
-import { useRecoilCallback, useRecoilValue } from 'recoil';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { Constants, QueryKeys } from 'librechat-data-provider';
+import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
+import {
+  Button,
+  Spinner,
+  TooltipAnchor,
+  DropdownPopup,
+  NewChatIcon,
+  buttonVariants,
+} from '@librechat/client';
 import {
   ChevronDown,
   ChevronRight,
   Ellipsis,
   Folder,
   FolderPlus,
+  Folders,
   Pencil,
   Trash2,
 } from 'lucide-react';
-import {
-  Button,
-  Spinner,
-  TooltipAnchor,
-  DropdownPopup,
-  NewChatIcon,
-  buttonVariants,
-} from '@librechat/client';
 import type { TChatProject, TConversation } from 'librechat-data-provider';
+import type { MouseEvent } from 'react';
 import type { MenuItemProps } from '~/common';
 import {
   useProjectsInfiniteQuery,
@@ -32,8 +34,8 @@ import ProjectCreateDialog from '~/components/Projects/ProjectCreateDialog';
 import ProjectDeleteDialog from '~/components/Projects/ProjectDeleteDialog';
 import ProjectEditDialog from '~/components/Projects/ProjectEditDialog';
 import { useLocalize, useLocalStorage, useNewConvo } from '~/hooks';
-import { Collapse } from '~/components/ui';
 import { clearMessagesCache, cn } from '~/utils';
+import { Collapse } from '~/components/ui';
 import Convo from './Convo';
 import store from '~/store';
 
@@ -134,34 +136,57 @@ const ProjectItem = memo(
   function ProjectItem({ project, toggleNav, defaultExpanded, isActive }: ProjectItemProps) {
     const localize = useLocalize();
     const navigate = useNavigate();
+    const location = useLocation();
+    const [searchParams, setSearchParams] = useSearchParams();
     const queryClient = useQueryClient();
     const { newConversation } = useNewConvo();
-    const getCurrentConversationId = useRecoilCallback(
-      ({ snapshot }) =>
-        async () => {
-          const conversation = await snapshot.getPromise(store.conversationByIndex(0));
-          return conversation?.conversationId;
-        },
-      [],
-    );
+    const conversationId = useRecoilValue(store.conversationIdByIndex(0));
     const menuId = useId();
     const [expanded, setExpanded] = useState(defaultExpanded);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [isRenameOpen, setIsRenameOpen] = useState(false);
     const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+    const projectChatPath = `/c/${Constants.NEW_CONVO}?projectId=${encodeURIComponent(project._id)}`;
 
     const openProject = useCallback(() => {
       navigate(`/projects/${project._id}`);
       toggleNav();
     }, [navigate, project._id, toggleNav]);
 
-    const startChat = useCallback(async () => {
-      const conversationId = await getCurrentConversationId();
-      clearMessagesCache(queryClient, conversationId);
-      queryClient.invalidateQueries([QueryKeys.messages]);
-      newConversation({ template: { chatProjectId: project._id } });
-      toggleNav();
-    }, [getCurrentConversationId, newConversation, project._id, queryClient, toggleNav]);
+    const startChat = useCallback(
+      (event: MouseEvent<HTMLAnchorElement>) => {
+        if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey) {
+          return;
+        }
+        event.preventDefault();
+        clearMessagesCache(queryClient, conversationId);
+        queryClient.invalidateQueries([QueryKeys.messages]);
+        /** `navigate()` defers search-param updates; ChatRoute then sees a
+         *  project-scoped draft against an unscoped `/c/new` and wipes it.
+         *  Commit `?projectId` in the same turn, the same way the landing chip does. */
+        if (location.pathname === `/c/${Constants.NEW_CONVO}`) {
+          const nextParams = new URLSearchParams(searchParams);
+          nextParams.set('projectId', project._id);
+          setSearchParams(nextParams, { replace: true, flushSync: true });
+        } else {
+          navigate(projectChatPath);
+        }
+        newConversation({ template: { chatProjectId: project._id } });
+        toggleNav();
+      },
+      [
+        conversationId,
+        location.pathname,
+        navigate,
+        newConversation,
+        project._id,
+        projectChatPath,
+        queryClient,
+        searchParams,
+        setSearchParams,
+        toggleNav,
+      ],
+    );
 
     const menuItems = useMemo<MenuItemProps[]>(
       () => [
@@ -191,12 +216,14 @@ const ProjectItem = memo(
       <li className="list-none">
         <div
           className={cn(
-            'group/project-row relative flex h-9 items-center rounded-lg text-sm text-text-primary transition-colors hover:bg-surface-hover',
-            isActive && 'bg-surface-active-alt',
+            'group/project-row relative flex h-9 items-center rounded-lg text-sm text-text-primary hover:bg-surface-hover',
+            isActive && 'bg-surface-active-alt hover:bg-surface-active-alt',
+            !isActive && isMenuOpen && 'bg-surface-hover',
           )}
         >
           <button
             type="button"
+            onMouseDown={(event) => event.preventDefault()}
             onClick={() => setExpanded((prev) => !prev)}
             aria-expanded={expanded}
             aria-label={project.name}
@@ -209,28 +236,32 @@ const ProjectItem = memo(
               )}
               aria-hidden="true"
             />
-            <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-surface-tertiary text-text-secondary">
-              <Folder className="h-3.5 w-3.5" aria-hidden="true" />
-            </span>
+            <Folder className="h-4 w-4 shrink-0 text-text-secondary" aria-hidden="true" />
             <span className="min-w-0 truncate">{project.name}</span>
-            {project.conversationCount > 0 ? (
-              <span className="ml-auto text-xs tabular-nums text-text-tertiary group-focus-within/project-row:opacity-0 group-hover/project-row:opacity-0">
-                {project.conversationCount}
-              </span>
-            ) : null}
           </button>
-          <div className="absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5 rounded-lg bg-surface-hover opacity-0 transition-opacity group-focus-within/project-row:opacity-100 group-hover/project-row:opacity-100 has-[[data-state=open]]:opacity-100">
+          <div
+            className={cn(
+              'absolute right-1 top-1/2 flex -translate-y-1/2 items-center',
+              isMenuOpen
+                ? 'opacity-100'
+                : [
+                    '[@media(hover:hover)]:opacity-0 [@media(hover:hover)]:transition-opacity',
+                    'group-hover/project-row:opacity-100',
+                    'has-[:focus-visible]:opacity-100',
+                  ],
+            )}
+          >
             <TooltipAnchor
               description={localize('com_ui_new_chat_in_project', { name: project.name })}
               render={
-                <button
-                  type="button"
+                <a
+                  href={projectChatPath}
                   aria-label={localize('com_ui_new_chat_in_project', { name: project.name })}
                   className={iconButtonClassName}
                   onClick={startChat}
                 >
                   <NewChatIcon className="h-4 w-4" />
-                </button>
+                </a>
               }
             />
             <DropdownPopup
@@ -245,10 +276,7 @@ const ProjectItem = memo(
               trigger={
                 <Ariakit.MenuButton
                   aria-label={localize('com_ui_more_options')}
-                  className={cn(
-                    iconButtonClassName,
-                    isMenuOpen && 'bg-surface-active-alt text-text-primary',
-                  )}
+                  className={cn(iconButtonClassName, isMenuOpen && 'text-text-primary')}
                 >
                   <Ellipsis className="h-4 w-4" aria-hidden="true" />
                 </Ariakit.MenuButton>
@@ -307,7 +335,6 @@ const ProjectsSection = ({ toggleNav, isAuthenticated }: ProjectsSectionProps) =
 
   const projects = useMemo(() => data?.pages.flatMap((page) => page.projects) ?? [], [data?.pages]);
   const hasMore = (data?.pages[data.pages.length - 1]?.nextCursor ?? null) != null;
-  const isProjectsHome = location.pathname === '/projects';
 
   /**
    * Collapse the section by default for users with no projects who have never
@@ -339,9 +366,7 @@ const ProjectsSection = ({ toggleNav, isAuthenticated }: ProjectsSectionProps) =
           onClick={() => setIsCreateOpen(true)}
           className="flex h-9 w-full justify-start gap-2 rounded-lg px-2 text-sm font-normal text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary"
         >
-          <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-surface-tertiary">
-            <FolderPlus className="h-3.5 w-3.5" aria-hidden="true" />
-          </span>
+          <FolderPlus className="h-4 w-4 shrink-0" aria-hidden="true" />
           <span className="truncate">{localize('com_ui_new_project')}</span>
         </Button>
       );
@@ -382,52 +407,35 @@ const ProjectsSection = ({ toggleNav, isAuthenticated }: ProjectsSectionProps) =
 
   return (
     <div className="flex flex-col px-3 text-sm">
-      <div
-        className={cn(
-          'flex h-9 w-full items-center gap-0.5 rounded-lg pr-0.5',
-          isProjectsHome && 'bg-surface-active-alt',
-        )}
-      >
+      <div className="flex h-8 w-full items-center pr-2">
         <button
+          type="button"
           onClick={() => {
             setStoredExpanded(!isExpanded);
             setHasToggledSection(true);
           }}
-          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-text-secondary outline-none transition-colors hover:bg-surface-hover hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary"
-          type="button"
+          className="group flex min-w-0 flex-1 items-center gap-1 rounded-lg px-1 py-2 text-xs font-bold text-text-secondary outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary"
           aria-expanded={isExpanded}
-          aria-label={localize('com_ui_projects')}
         >
+          <span className="select-none truncate">{localize('com_ui_projects')}</span>
           <ChevronDown
             className={cn(
-              'h-3.5 w-3.5 shrink-0 transition-transform duration-200',
+              'h-3 w-3 shrink-0 transition-transform duration-200',
               isExpanded ? '' : '-rotate-90',
             )}
             aria-hidden="true"
           />
         </button>
-        <button
-          type="button"
-          onClick={openProjects}
-          className="flex min-w-0 flex-1 items-center gap-2 rounded-lg px-1 py-1.5 text-left text-sm font-medium text-text-primary outline-none hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-text-primary"
-        >
-          <span className="select-none truncate">{localize('com_ui_projects')}</span>
-          {projects.length > 0 ? (
-            <span className="text-xs font-normal tabular-nums text-text-tertiary">
-              {projects.length}
-            </span>
-          ) : null}
-        </button>
         <TooltipAnchor
-          description={localize('com_ui_new_project')}
+          description={localize('com_ui_all_projects')}
           render={
             <button
               type="button"
-              aria-label={localize('com_ui_new_project')}
-              className={iconButtonClassName}
-              onClick={() => setIsCreateOpen(true)}
+              aria-label={localize('com_ui_all_projects')}
+              className={cn(iconButtonClassName, 'hover:bg-surface-hover')}
+              onClick={openProjects}
             >
-              <FolderPlus className="h-4 w-4" aria-hidden="true" />
+              <Folders className="h-4 w-4" aria-hidden="true" />
             </button>
           }
         />

From 3f3acc4acaa1277be00b8e9da2e6eb7531fa5151 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 07:47:28 +0200
Subject: [PATCH 13/21] style: Widen the Projects Dashboard and Workspace
 Layout

The dashboard and the workspace sat on bg-surface-primary at different
max widths, so moving between them shifted the content and the shade did
not match the rest of the app. Put both on bg-presentation at max-w-6xl.

Project and chat cards gain a border, since colour alone separated them
from the background and that separation is thin in light mode. The
translucent blurred headers become opaque, and the scale-on-press
transforms are dropped.

In the workspace the edit and delete actions move out of the heading row
into their own group, so a long project name no longer pushes them
around.
---
 .../components/Projects/ProjectWorkspace.tsx  | 87 +++++++++----------
 .../components/Projects/ProjectsNavBar.tsx    | 12 +--
 .../src/components/Projects/ProjectsView.tsx  | 10 +--
 3 files changed, 51 insertions(+), 58 deletions(-)

diff --git a/client/src/components/Projects/ProjectWorkspace.tsx b/client/src/components/Projects/ProjectWorkspace.tsx
index fa53cc65306..2f5a0fdd276 100644
--- a/client/src/components/Projects/ProjectWorkspace.tsx
+++ b/client/src/components/Projects/ProjectWorkspace.tsx
@@ -118,7 +118,7 @@ export default function ProjectWorkspace() {
 
   if (isProjectLoading) {
     return (
-      <div className="flex h-full items-center justify-center bg-surface-primary">
+      <div className="flex h-full items-center justify-center bg-presentation">
         <Spinner className="text-text-primary" />
       </div>
     );
@@ -126,7 +126,7 @@ export default function ProjectWorkspace() {
 
   if (!project) {
     return (
-      <div className="flex h-full flex-col items-center justify-center gap-3 bg-surface-primary px-6 text-center">
+      <div className="flex h-full flex-col items-center justify-center gap-3 bg-presentation px-6 text-center">
         <p className="text-sm text-text-secondary">{localize('com_ui_project_not_found')}</p>
         <Button type="button" variant="outline" size="sm" onClick={() => navigate('/projects')}>
           {localize('com_ui_all_projects')}
@@ -136,9 +136,9 @@ export default function ProjectWorkspace() {
   }
 
   return (
-    <main className="flex h-full min-h-0 flex-col overflow-y-auto bg-surface-primary text-text-primary">
-      <header className="sticky top-0 z-10 border-b border-border-light bg-surface-primary/80 backdrop-blur-xl">
-        <div className="mx-auto flex h-14 w-full max-w-3xl items-center gap-2 px-4 md:h-16 md:px-6">
+    <main className="flex h-full min-h-0 flex-col overflow-y-auto bg-presentation text-text-primary">
+      <header className="sticky top-0 z-10 border-b border-border-light bg-presentation">
+        <div className="mx-auto flex h-14 w-full max-w-6xl items-center gap-2 px-4 md:h-16 md:px-6">
           {isSmallScreen ? <OpenSidebar className="size-9 shrink-0" /> : null}
           <Button
             type="button"
@@ -153,47 +153,15 @@ export default function ProjectWorkspace() {
         </div>
       </header>
 
-      <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col px-4 pb-10 pt-6 md:px-6 md:pt-8">
+      <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col px-4 pb-10 pt-6 md:px-6 md:pt-8">
         <div className="flex items-start gap-3.5">
           <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-surface-secondary text-text-secondary">
             <Folder className="h-6 w-6" aria-hidden="true" />
           </span>
           <div className="min-w-0 flex-1 pt-0.5">
-            <div className="flex min-w-0 items-center gap-1.5">
-              <h1 className="min-w-0 truncate text-balance text-2xl font-semibold tracking-tight text-text-primary">
-                {project.name}
-              </h1>
-              <TooltipAnchor
-                description={localize('com_ui_edit_project')}
-                render={
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className="size-8 shrink-0 text-text-secondary hover:text-text-primary"
-                    aria-label={localize('com_ui_edit_project')}
-                    onClick={() => setIsEditOpen(true)}
-                  >
-                    <Pencil className="h-4 w-4" aria-hidden="true" />
-                  </Button>
-                }
-              />
-              <TooltipAnchor
-                description={localize('com_ui_delete_project_action')}
-                render={
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className="size-8 shrink-0 text-text-secondary hover:text-text-destructive"
-                    aria-label={localize('com_ui_delete_project_action')}
-                    onClick={() => setIsDeleteOpen(true)}
-                  >
-                    <Trash2 className="h-4 w-4" aria-hidden="true" />
-                  </Button>
-                }
-              />
-            </div>
+            <h1 className="truncate text-balance text-2xl font-semibold tracking-tight text-text-primary">
+              {project.name}
+            </h1>
             {project.description ? (
               <p className="mt-1 text-pretty text-sm leading-relaxed text-text-secondary">
                 {project.description}
@@ -208,6 +176,38 @@ export default function ProjectWorkspace() {
               </button>
             )}
           </div>
+          <div className="flex shrink-0 items-center gap-0.5 pt-1">
+            <TooltipAnchor
+              description={localize('com_ui_edit_project')}
+              render={
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-8 shrink-0 text-text-secondary hover:text-text-primary"
+                  aria-label={localize('com_ui_edit_project')}
+                  onClick={() => setIsEditOpen(true)}
+                >
+                  <Pencil className="h-4 w-4" aria-hidden="true" />
+                </Button>
+              }
+            />
+            <TooltipAnchor
+              description={localize('com_ui_delete_project_action')}
+              render={
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-8 shrink-0 text-text-secondary hover:text-text-destructive"
+                  aria-label={localize('com_ui_delete_project_action')}
+                  onClick={() => setIsDeleteOpen(true)}
+                >
+                  <Trash2 className="h-4 w-4" aria-hidden="true" />
+                </Button>
+              }
+            />
+          </div>
         </div>
 
         <ProjectEditDialog open={isEditOpen} onOpenChange={setIsEditOpen} project={project} />
@@ -217,17 +217,16 @@ export default function ProjectWorkspace() {
           type="button"
           onClick={startProjectChat}
           className={cn(
-            'mt-7 flex w-full items-center gap-3 rounded-2xl bg-surface-secondary px-3.5 py-3 text-left',
+            'mt-7 flex w-full items-center gap-3 rounded-2xl border border-border-light bg-surface-secondary px-3.5 py-3 text-left',
             'transition-colors duration-150 hover:bg-surface-hover',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-text-primary',
-            'active:scale-[0.99]',
           )}
           aria-label={localize('com_ui_new_chat_in_project', { name: project.name })}
         >
           <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-surface-tertiary text-text-primary">
             <Plus className="h-4 w-4" aria-hidden="true" />
           </span>
-          <span className="min-w-0 flex-1 truncate text-sm text-text-secondary">
+          <span className="min-w-0 flex-1 truncate text-sm text-text-primary">
             {localize('com_ui_new_chat_in_project', { name: project.name })}
           </span>
         </button>
diff --git a/client/src/components/Projects/ProjectsNavBar.tsx b/client/src/components/Projects/ProjectsNavBar.tsx
index d16cc67b83a..54d6f224eaf 100644
--- a/client/src/components/Projects/ProjectsNavBar.tsx
+++ b/client/src/components/Projects/ProjectsNavBar.tsx
@@ -12,21 +12,15 @@ export default function ProjectsNavBar({ onCreate }: ProjectsNavBarProps) {
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
 
   return (
-    <header className="sticky top-0 z-10 border-b border-border-light bg-surface-primary/80 backdrop-blur-xl">
-      <div className="mx-auto flex h-14 w-full max-w-5xl items-center justify-between gap-3 px-4 md:h-16 md:px-6">
+    <header className="sticky top-0 z-10 border-b border-border-light bg-presentation">
+      <div className="mx-auto flex h-14 w-full max-w-6xl items-center justify-between gap-3 px-4 md:h-16 md:px-6">
         <div className="flex min-w-0 items-center gap-2.5">
           {isSmallScreen ? <OpenSidebar className="size-9 shrink-0" /> : null}
           <h1 className="truncate text-balance text-lg font-semibold tracking-tight text-text-primary md:text-xl">
             {localize('com_ui_projects')}
           </h1>
         </div>
-        <Button
-          type="button"
-          variant="default"
-          size="sm"
-          onClick={onCreate}
-          className="shrink-0 active:scale-[0.96]"
-        >
+        <Button type="button" variant="default" size="sm" onClick={onCreate} className="shrink-0">
           <Plus className="h-4 w-4" aria-hidden="true" />
           {localize('com_ui_new_project')}
         </Button>
diff --git a/client/src/components/Projects/ProjectsView.tsx b/client/src/components/Projects/ProjectsView.tsx
index c08cd352cad..6be8ba7df27 100644
--- a/client/src/components/Projects/ProjectsView.tsx
+++ b/client/src/components/Projects/ProjectsView.tsx
@@ -1,6 +1,7 @@
 import { useDeferredValue, useEffect, useId, useMemo, useState } from 'react';
 import * as Ariakit from '@ariakit/react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Input, Button, Skeleton, DropdownPopup } from '@librechat/client';
 import {
   ArrowUpDown,
   Check,
@@ -11,7 +12,6 @@ import {
   Search,
   Trash2,
 } from 'lucide-react';
-import { Input, Button, Skeleton, DropdownPopup } from '@librechat/client';
 import type { TChatProject } from 'librechat-data-provider';
 import type { MenuItemProps, RenderProp } from '~/common';
 import { useProjectsInfiniteQuery } from '~/data-provider';
@@ -87,7 +87,7 @@ function ProjectCard({
   return (
     <article
       className={cn(
-        'group/project relative flex min-h-[9.5rem] flex-col rounded-2xl bg-surface-secondary',
+        'group/project relative flex min-h-[9.5rem] flex-col rounded-2xl border border-border-light bg-surface-secondary',
         'transition-colors duration-150 ease-out hover:bg-surface-hover',
         'motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-1 motion-safe:fill-mode-both',
       )}
@@ -243,10 +243,10 @@ export default function ProjectsView() {
   };
 
   return (
-    <main className="flex h-full min-h-0 flex-col overflow-auto bg-surface-primary text-text-primary">
+    <main className="flex h-full min-h-0 flex-col overflow-auto bg-presentation text-text-primary">
       <ProjectsNavBar onCreate={() => setIsCreating(true)} />
 
-      <div className="mx-auto flex w-full max-w-5xl flex-1 flex-col px-4 pb-10 pt-6 md:px-6 md:pt-8">
+      <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col px-4 pb-10 pt-6 md:px-6 md:pt-8">
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
           <label className="relative min-w-0 flex-1">
             <span className="sr-only">{localize('com_ui_search_projects')}</span>
@@ -333,7 +333,7 @@ export default function ProjectsView() {
                     type="button"
                     variant="default"
                     size="sm"
-                    className="mt-5 active:scale-[0.96]"
+                    className="mt-5"
                     onClick={() => setIsCreating(true)}
                   >
                     <FolderPlus className="h-4 w-4" aria-hidden="true" />

From d88215888d6fa8b4381a978f99bf207d14f861cf Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 08:11:12 +0200
Subject: [PATCH 14/21] fix: Reopen the Change Project Dialog From the
 Conversation Menu

Closing the Ariakit menu in the same handler that opens the dialog made
the menu's own dismissal land on the freshly mounted Radix dialog, which
closed it again before paint, so Change project did nothing.

Leave the menu close to the dialog, which already receives setMenuOpen
and closes it once the assignment succeeds, matching the share and
delete handlers beside it.
---
 .../src/components/Conversations/ConvoOptions/ConvoOptions.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx b/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
index 1c53e7a88e2..7781367d205 100644
--- a/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
+++ b/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
@@ -146,9 +146,8 @@ function ConvoOptions({
   }, []);
 
   const projectHandler = useCallback(() => {
-    setIsPopoverActive(false);
     setShowProjectDialog(true);
-  }, [setIsPopoverActive]);
+  }, []);
 
   const removeProjectHandler = useCallback(() => {
     const convoId = conversationId ?? '';

From 1a1ddb7de14a1c7f0e1a7b5f9da4c3d0290dbc46 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 16:30:13 +0200
Subject: [PATCH 15/21] fix: Keep the Project Chat Menu Mounted While its
 Dialogs Open

Hiding the Ariakit menu in the same handler that opens Change project or
Delete restores focus to the menu trigger, which the dialog mounting
alongside it reads as an outside interaction and closes on, so the
action could do nothing.

Both dialogs already receive setIsMenuOpen and close the menu once they
finish, so leave the close to them, as the conversation menu does.
---
 .../components/Projects/ProjectChatOptions.tsx  | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Projects/ProjectChatOptions.tsx b/client/src/components/Projects/ProjectChatOptions.tsx
index 085bc46543a..cbbdf3529fa 100644
--- a/client/src/components/Projects/ProjectChatOptions.tsx
+++ b/client/src/components/Projects/ProjectChatOptions.tsx
@@ -39,12 +39,12 @@ function ProjectChatOptions({ conversation, isMenuOpen, setIsMenuOpen }: Project
     return [
       {
         label: localize('com_ui_change_project'),
-        onClick: () => {
-          setIsMenuOpen(false);
-          setShowProjectDialog(true);
-        },
+        onClick: () => setShowProjectDialog(true),
         icon: <FolderInput className="size-4 text-text-secondary" aria-hidden="true" />,
-        hideOnClick: true,
+        /** Hiding the menu here restores focus to the trigger, which the dialog
+         *  mounting alongside it reads as an outside interaction and closes on.
+         *  Both dialogs receive setIsMenuOpen and close the menu themselves. */
+        hideOnClick: false,
         render: (props) => <button {...props} />,
       },
       {
@@ -81,11 +81,8 @@ function ProjectChatOptions({ conversation, isMenuOpen, setIsMenuOpen }: Project
       },
       {
         label: localize('com_ui_delete'),
-        onClick: () => {
-          setIsMenuOpen(false);
-          setShowDeleteDialog(true);
-        },
-        hideOnClick: true,
+        onClick: () => setShowDeleteDialog(true),
+        hideOnClick: false,
         render: (props) => <button {...props} />,
         icon: <Trash2 className="size-4 text-text-secondary" aria-hidden="true" />,
       },

From 1488f536ff2dfe2780024a6c3e7cde4f550a78fc Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 16:30:35 +0200
Subject: [PATCH 16/21] perf: Fetch a Project's Chats Only Once its Row is
 Expanded

Collapse hides its children with CSS and inert rather than unmounting
them, so every project row's chat query ran on sidebar load, up to one
request per project, even with the whole section collapsed.

Gate the query on the row's expanded state. React Query keeps what it
already fetched, so reopening a row is still instant.
---
 client/src/components/Conversations/ProjectsSection.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Conversations/ProjectsSection.tsx b/client/src/components/Conversations/ProjectsSection.tsx
index bab1272996f..4e9e915ad4e 100644
--- a/client/src/components/Conversations/ProjectsSection.tsx
+++ b/client/src/components/Conversations/ProjectsSection.tsx
@@ -51,12 +51,14 @@ const noop = () => {};
 
 type ProjectChatsInlineProps = {
   projectId: string;
+  expanded: boolean;
   toggleNav: () => void;
   onShowAll: () => void;
 };
 
 const ProjectChatsInline = memo(function ProjectChatsInline({
   projectId,
+  expanded,
   toggleNav,
   onShowAll,
 }: ProjectChatsInlineProps) {
@@ -66,9 +68,11 @@ const ProjectChatsInline = memo(function ProjectChatsInline({
     () => new Set(activeJobsData?.activeJobIds ?? []),
     [activeJobsData?.activeJobIds],
   );
+  /** Collapse keeps its children mounted, so without this every project row in
+   *  the sidebar would fetch its chats on load whether or not it is open. */
   const { data, isLoading } = useConversationsInfiniteQuery(
     { projectId, sortBy: 'updatedAt', sortDirection: 'desc' },
-    { staleTime: 30000, cacheTime: 300000 },
+    { staleTime: 30000, cacheTime: 300000, enabled: expanded },
   );
 
   const conversations = useMemo<TConversation[]>(
@@ -288,6 +292,7 @@ const ProjectItem = memo(
         <Collapse open={expanded} className="pl-2">
           <ProjectChatsInline
             projectId={project._id}
+            expanded={expanded}
             toggleNav={toggleNav}
             onShowAll={openProject}
           />

From fe48a62547f7006ca2892c92a3a80139cb6979c9 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 16:30:56 +0200
Subject: [PATCH 17/21] refactor: Move the Bottom Popover Animation Into the
 Shared Primitive

ControlCombobox owns its popover animations in AnimatePopover.css, so
the upward variant it needs belongs there rather than in the
application stylesheet, where the control's appearance would diverge
from the package that ships it.

The app already loads the package stylesheet, so the animation resolves
the same way the existing variants do.
---
 client/src/style.css                          | 19 ----------------
 .../client/src/components/AnimatePopover.css  | 22 +++++++++++++++++++
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/client/src/style.css b/client/src/style.css
index bc03c372a91..842d7952431 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -2339,25 +2339,6 @@ html[data-input-modality='keyboard']
   transform: scale(1) translateY(0);
 }
 
-.animate-popover-bottom {
-  transform-origin: bottom left;
-  opacity: 0;
-  transition:
-    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
-    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
-  transform: translateY(0.5rem) scale(0.96);
-}
-.animate-popover-bottom[data-enter] {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-}
-@media (prefers-reduced-motion: reduce) {
-  .animate-popover-bottom {
-    transition: none !important;
-    transform: none;
-  }
-}
-
 /* Left (existing) */
 .animate-popover-left {
   transform-origin: left;
diff --git a/packages/client/src/components/AnimatePopover.css b/packages/client/src/components/AnimatePopover.css
index 5a83bfa64f0..809e895bd1a 100644
--- a/packages/client/src/components/AnimatePopover.css
+++ b/packages/client/src/components/AnimatePopover.css
@@ -25,3 +25,25 @@
   opacity: 1;
   transform: scale(1) translateX(0);
 }
+
+/* For a popover placed above its trigger, so it grows out of the trigger edge. */
+.animate-popover-bottom {
+  transform-origin: bottom left;
+  opacity: 0;
+  transition:
+    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+  transform: translateY(0.5rem) scale(0.96);
+}
+
+.animate-popover-bottom[data-enter] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-popover-bottom {
+    transition: none;
+    transform: none;
+  }
+}

From a8a97dbe896dbc64b80b2c3e7bf18910160c05cd Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 16:31:06 +0200
Subject: [PATCH 18/21] fix: Stop Project Names and Descriptions Being Silently
 Truncated

The dialogs accepted any length and reported success, while the
persistence layer trimmed names to 100 and descriptions to 1000
characters, so reopening a project revealed text had been dropped with
no warning.

Share both limits from data-provider and cap the inputs at them, so the
fields stop where the server would have cut them and the rule has one
definition instead of the three it had.
---
 .../src/components/Projects/ProjectCreateDialog.tsx |  6 ++++++
 .../src/components/Projects/ProjectEditDialog.tsx   |  8 +++++++-
 packages/data-provider/src/config.ts                |  6 +++++-
 packages/data-provider/src/limits.ts                |  5 +++++
 packages/data-schemas/src/methods/chatProject.ts    | 13 +++++++++----
 5 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Projects/ProjectCreateDialog.tsx b/client/src/components/Projects/ProjectCreateDialog.tsx
index 78f1aac6060..9c60fb04032 100644
--- a/client/src/components/Projects/ProjectCreateDialog.tsx
+++ b/client/src/components/Projects/ProjectCreateDialog.tsx
@@ -7,6 +7,10 @@ import {
   type MutableRefObject,
   type ReactNode,
 } from 'react';
+import {
+  MAX_CHAT_PROJECT_NAME_LENGTH,
+  MAX_CHAT_PROJECT_DESCRIPTION_LENGTH,
+} from 'librechat-data-provider';
 import {
   Button,
   Input,
@@ -107,6 +111,7 @@ export default function ProjectCreateDialog({
                 value={name}
                 onChange={(event) => setName(event.target.value)}
                 placeholder={localize('com_ui_project_name_placeholder')}
+                maxLength={MAX_CHAT_PROJECT_NAME_LENGTH}
                 className="w-full"
               />
             </div>
@@ -125,6 +130,7 @@ export default function ProjectCreateDialog({
                 value={description}
                 onChange={(event) => setDescription(event.target.value)}
                 rows={3}
+                maxLength={MAX_CHAT_PROJECT_DESCRIPTION_LENGTH}
                 className="min-h-[4.5rem] bg-transparent"
               />
             </div>
diff --git a/client/src/components/Projects/ProjectEditDialog.tsx b/client/src/components/Projects/ProjectEditDialog.tsx
index 67f53b54b12..829749fcdd8 100644
--- a/client/src/components/Projects/ProjectEditDialog.tsx
+++ b/client/src/components/Projects/ProjectEditDialog.tsx
@@ -1,4 +1,8 @@
 import { useEffect, useId, useRef, useState, type FormEvent } from 'react';
+import {
+  MAX_CHAT_PROJECT_NAME_LENGTH,
+  MAX_CHAT_PROJECT_DESCRIPTION_LENGTH,
+} from 'librechat-data-provider';
 import {
   Button,
   Input,
@@ -11,8 +15,8 @@ import {
 } from '@librechat/client';
 import type { TChatProject } from 'librechat-data-provider';
 import { useUpdateProjectMutation } from '~/data-provider';
-import { useLocalize } from '~/hooks';
 import { NotificationSeverity } from '~/common';
+import { useLocalize } from '~/hooks';
 
 type ProjectEditDialogProps = {
   open: boolean;
@@ -92,6 +96,7 @@ export default function ProjectEditDialog({ open, onOpenChange, project }: Proje
                 ref={inputRef}
                 value={name}
                 onChange={(event) => setName(event.target.value)}
+                maxLength={MAX_CHAT_PROJECT_NAME_LENGTH}
                 className="w-full"
               />
             </div>
@@ -110,6 +115,7 @@ export default function ProjectEditDialog({ open, onOpenChange, project }: Proje
                 value={description}
                 onChange={(event) => setDescription(event.target.value)}
                 rows={3}
+                maxLength={MAX_CHAT_PROJECT_DESCRIPTION_LENGTH}
                 className="min-h-[4.5rem] bg-transparent"
               />
             </div>
diff --git a/packages/data-provider/src/config.ts b/packages/data-provider/src/config.ts
index 03e9c433e8f..7b848d4fe8e 100644
--- a/packages/data-provider/src/config.ts
+++ b/packages/data-provider/src/config.ts
@@ -15,7 +15,11 @@ import { fileConfigSchema } from './file-config';
 import { apiBaseUrl } from './api-endpoints';
 import { FileSources } from './types/files';
 import { MCPServersSchema } from './mcp';
-export { MAX_SUBAGENTS } from './limits';
+export {
+  MAX_SUBAGENTS,
+  MAX_CHAT_PROJECT_NAME_LENGTH,
+  MAX_CHAT_PROJECT_DESCRIPTION_LENGTH,
+} from './limits';
 
 export const defaultSocialLogins = ['google', 'facebook', 'openid', 'github', 'discord', 'saml'];
 
diff --git a/packages/data-provider/src/limits.ts b/packages/data-provider/src/limits.ts
index 7dbabf6d2ce..db29ddac86a 100644
--- a/packages/data-provider/src/limits.ts
+++ b/packages/data-provider/src/limits.ts
@@ -1,2 +1,7 @@
 /** Maximum number of explicit subagents per parent agent. UI + Zod schema share this. */
 export const MAX_SUBAGENTS = 10;
+
+/** Chat project field limits. The dialogs and the persistence layer share these,
+ *  so the inputs stop at the same point the server would otherwise truncate. */
+export const MAX_CHAT_PROJECT_NAME_LENGTH = 100;
+export const MAX_CHAT_PROJECT_DESCRIPTION_LENGTH = 1000;
diff --git a/packages/data-schemas/src/methods/chatProject.ts b/packages/data-schemas/src/methods/chatProject.ts
index 1569a416719..2ebe09a9b3d 100644
--- a/packages/data-schemas/src/methods/chatProject.ts
+++ b/packages/data-schemas/src/methods/chatProject.ts
@@ -1,3 +1,7 @@
+import {
+  MAX_CHAT_PROJECT_NAME_LENGTH,
+  MAX_CHAT_PROJECT_DESCRIPTION_LENGTH,
+} from 'librechat-data-provider';
 import type { FilterQuery, Model, SortOrder, Types } from 'mongoose';
 import type { IChatProject, IChatProjectDocument, IConversation } from '~/types';
 import { buildRetentionVisibilityFilter } from '~/utils/retention';
@@ -88,8 +92,8 @@ function normalizeLimit(limit?: number): number {
 
 function sanitizeProjectInput(input: CreateChatProjectInput): CreateChatProjectInput {
   return {
-    name: input.name.trim().slice(0, 100),
-    description: input.description?.trim().slice(0, 1000) ?? '',
+    name: input.name.trim().slice(0, MAX_CHAT_PROJECT_NAME_LENGTH),
+    description: input.description?.trim().slice(0, MAX_CHAT_PROJECT_DESCRIPTION_LENGTH) ?? '',
   };
 }
 
@@ -341,14 +345,15 @@ export function createChatProjectMethods(mongoose: typeof import('mongoose')): C
     const ChatProject = mongoose.models.ChatProject as Model<IChatProjectDocument>;
     const update: Partial<Pick<IChatProject, 'name' | 'description'>> = {};
     if (typeof input.name === 'string') {
-      const name = input.name.trim().slice(0, 100);
+      const name = input.name.trim().slice(0, MAX_CHAT_PROJECT_NAME_LENGTH);
       if (!name) {
         throw new Error('Project name is required');
       }
       update.name = name;
     }
     if (input.description !== undefined) {
-      update.description = input.description?.trim().slice(0, 1000) ?? '';
+      update.description =
+        input.description?.trim().slice(0, MAX_CHAT_PROJECT_DESCRIPTION_LENGTH) ?? '';
     }
 
     return await ChatProject.findOneAndUpdate(

From 84851374518c281d58f6a7c5af908ed0eae2704e Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 16:31:36 +0200
Subject: [PATCH 19/21] fix: Do Not Report the Loaded Page Size as the Project
 Total

The dashboard counted the projects fetched so far, so an account with
more than one page read as exactly one page's worth and the supposed
total grew with each Load more.

Show the loaded count as a lower bound while another page exists.
---
 .../src/components/Projects/ProjectsView.tsx  | 19 ++++++++++++++-----
 client/src/locales/en/translation.json        |  1 +
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Projects/ProjectsView.tsx b/client/src/components/Projects/ProjectsView.tsx
index 6be8ba7df27..68942e9bc81 100644
--- a/client/src/components/Projects/ProjectsView.tsx
+++ b/client/src/components/Projects/ProjectsView.tsx
@@ -13,7 +13,7 @@ import {
   Trash2,
 } from 'lucide-react';
 import type { TChatProject } from 'librechat-data-provider';
-import type { MenuItemProps, RenderProp } from '~/common';
+import type { LocalizeFunction, MenuItemProps, RenderProp } from '~/common';
 import { useProjectsInfiniteQuery } from '~/data-provider';
 import ProjectCreateDialog from './ProjectCreateDialog';
 import ProjectDeleteDialog from './ProjectDeleteDialog';
@@ -39,6 +39,16 @@ function renderSortMenuItem(label: string, isSelected: boolean): RenderProp {
   };
 }
 
+function getProjectCountLabel(count: number, hasMore: boolean, localize: LocalizeFunction) {
+  if (hasMore) {
+    return localize('com_ui_project_count_partial', { count });
+  }
+  if (count === 1) {
+    return localize('com_ui_project_count_single');
+  }
+  return localize('com_ui_project_count', { count });
+}
+
 function formatActivity(project: TChatProject) {
   const value = project.lastConversationAt ?? project.updatedAt ?? project.createdAt;
   if (!value) {
@@ -222,10 +232,9 @@ export default function ProjectsView() {
     [sortBy, sortOptions],
   );
 
-  const projectCountLabel =
-    projects.length === 1
-      ? localize('com_ui_project_count_single')
-      : localize('com_ui_project_count', { count: projects.length });
+  /** `projects` only holds the pages fetched so far, so while another page
+   *  exists this is a lower bound rather than the total. */
+  const projectCountLabel = getProjectCountLabel(projects.length, hasNextPage, localize);
 
   useEffect(() => {
     if (searchParams.get('new') === '1') {
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 75c21045bb2..4e64083e735 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -1679,6 +1679,7 @@
   "com_ui_project_chat_count": "{{count}} chats",
   "com_ui_project_chat_count_single": "1 chat",
   "com_ui_project_count": "{{count}} projects",
+  "com_ui_project_count_partial": "{{count}}+ projects",
   "com_ui_project_count_single": "1 project",
   "com_ui_project_create_error": "Failed to create project",
   "com_ui_project_delete_error": "Failed to delete project",

From 8e966c172808b2881b45e460061530618c5637dc Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 15 Aug 2026 17:26:39 +0200
Subject: [PATCH 20/21] chore: Satisfy the Static Checks for the Projects
 Rework

Sort the delete dialog's imports to the repository order, and drop the
three English keys this branch orphaned: the sidebar menu now says Edit
project, the dashboard labels its own sort control, and the change
project dialog no longer offers an Unassigned option now that removal
lives on the menu.
---
 client/src/components/Projects/ProjectDeleteDialog.tsx | 4 ++--
 client/src/locales/en/translation.json                 | 3 ---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Projects/ProjectDeleteDialog.tsx b/client/src/components/Projects/ProjectDeleteDialog.tsx
index 18b3808d135..9c8ee49aa02 100644
--- a/client/src/components/Projects/ProjectDeleteDialog.tsx
+++ b/client/src/components/Projects/ProjectDeleteDialog.tsx
@@ -1,3 +1,4 @@
+import { useNavigate, useLocation } from 'react-router-dom';
 import {
   Button,
   Spinner,
@@ -9,10 +10,9 @@ import {
   useToastContext,
 } from '@librechat/client';
 import type { TChatProject } from 'librechat-data-provider';
-import { useNavigate, useLocation } from 'react-router-dom';
 import { useDeleteProjectMutation } from '~/data-provider';
-import { useLocalize } from '~/hooks';
 import { NotificationSeverity } from '~/common';
+import { useLocalize } from '~/hooks';
 
 type ProjectDeleteDialogProps = {
   open: boolean;
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 4e64083e735..7c00e96c86e 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -1773,7 +1773,6 @@
   "com_ui_rename": "Rename",
   "com_ui_rename_conversation": "Rename Conversation",
   "com_ui_rename_failed": "Failed to rename conversation",
-  "com_ui_rename_project": "Rename project",
   "com_ui_requires_auth": "Requires Authentication",
   "com_ui_reset": "Reset",
   "com_ui_reset_adjustments": "Reset adjustments",
@@ -2016,7 +2015,6 @@
   "com_ui_skills_use_all_hint": "The agent can use every skill available to you, including skills added in the future.",
   "com_ui_skip": "Skip",
   "com_ui_something_else": "Something else...",
-  "com_ui_sort_by": "Sort by",
   "com_ui_sort_chats_by": "Sort chats by",
   "com_ui_sort_created": "Created",
   "com_ui_sort_projects_by": "Sort projects by",
@@ -2170,7 +2168,6 @@
   "com_ui_unarchive": "Unarchive",
   "com_ui_unarchive_conversation": "Unarchive conversation",
   "com_ui_unarchive_error": "Failed to unarchive conversation",
-  "com_ui_unassigned": "Unassigned",
   "com_ui_unfavorite": "Remove from favorites",
   "com_ui_unknown": "Unknown",
   "com_ui_unknown_file_type": "Unknown file type",

From 9e0d00b82ed919d40a3364b49b20e49dff80d345 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sun, 16 Aug 2026 14:55:12 +0200
Subject: [PATCH 21/21] fix: Highlight Only the Route Project in the Sidebar

A leftover conversation project was still lighting a second row after
opening another project's workspace. Prefer the workspace route, and
only fall back to the conversation project outside that view.
---
 .../src/components/Conversations/ProjectsSection.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Conversations/ProjectsSection.tsx b/client/src/components/Conversations/ProjectsSection.tsx
index 4e9e915ad4e..ac804205352 100644
--- a/client/src/components/Conversations/ProjectsSection.tsx
+++ b/client/src/components/Conversations/ProjectsSection.tsx
@@ -331,7 +331,11 @@ const ProjectsSection = ({ toggleNav, isAuthenticated }: ProjectsSectionProps) =
   );
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const conversation = useRecoilValue(store.conversationByIndex(0));
-  const activeProjectId = conversation?.chatProjectId ?? null;
+  const conversationProjectId = conversation?.chatProjectId ?? null;
+  /** A project workspace route wins so a leftover conversation scope cannot
+   *  highlight a second row at the same time. */
+  const routeProjectId = /^\/projects\/([^/]+)$/.exec(location.pathname)?.[1] ?? null;
+  const highlightedProjectId = routeProjectId ?? conversationProjectId;
 
   const { data, isLoading } = useProjectsInfiniteQuery(
     { sortBy: 'lastConversationAt', sortDirection: 'desc', limit: 25 },
@@ -384,10 +388,8 @@ const ProjectsSection = ({ toggleNav, isAuthenticated }: ProjectsSectionProps) =
             key={project._id}
             project={project}
             toggleNav={toggleNav}
-            defaultExpanded={project._id === activeProjectId}
-            isActive={
-              project._id === activeProjectId || location.pathname === `/projects/${project._id}`
-            }
+            defaultExpanded={project._id === highlightedProjectId}
+            isActive={project._id === highlightedProjectId}
           />
         ))}
         {hasMore && (