feat(sidebar): add conversation sort mode toggle with created-time default

src/components/conversations/sidebar-conversation-list.tsx

@@ -42,6 +42,7 @@ import type { ConversationStatus, DbConversationSummary } from "@/lib/types"
 import {
   loadFolderExpanded,
   saveFolderExpanded,
+  type SidebarSortMode,
 } from "@/lib/sidebar-view-mode-storage"
 import { SidebarConversationCard } from "./sidebar-conversation-card"
 import { ConversationManageDialog } from "./conversation-manage-dialog"
@@ -89,6 +90,21 @@ function compareByUpdatedAtDesc(
   return right.id - left.id
 }
 
+function compareByCreatedAtDesc(
+  left: DbConversationSummary,
+  right: DbConversationSummary
+): number {
+  const createdDiff =
+    parseTimestamp(right.created_at) - parseTimestamp(left.created_at)
+  if (createdDiff !== 0) return createdDiff
+
+  const updatedDiff =
+    parseTimestamp(right.updated_at) - parseTimestamp(left.updated_at)
+  if (updatedDiff !== 0) return updatedDiff
+
+  return right.id - left.id
+}
+
 function formatRelative(iso: string): string {
   const ts = parseTimestamp(iso)
   if (!ts) return ""
@@ -259,11 +275,13 @@ export interface SidebarConversationListHandle {
 
 export interface SidebarConversationListProps {
   showCompleted?: boolean
+  sortMode?: SidebarSortMode
 }
 
 export function SidebarConversationList({
   ref,
   showCompleted = true,
+  sortMode = "created",
 }: SidebarConversationListProps & {
   ref?: Ref<SidebarConversationListHandle>
 }) {
@@ -368,9 +386,11 @@ export function SidebarConversationList({
       if (list) list.push(conv)
       else map.set(conv.folder_id, [conv])
     }
-    for (const list of map.values()) list.sort(compareByUpdatedAtDesc)
+    const comparator =
+      sortMode === "updated" ? compareByUpdatedAtDesc : compareByCreatedAtDesc
+    for (const list of map.values()) list.sort(comparator)
     return map
-  }, [filteredConversations])
+  }, [filteredConversations, sortMode])
 
   const orderedFolderIds = useMemo(() => {
     const seen = new Set<number>()
@@ -821,7 +841,11 @@ export function SidebarConversationList({
                         isOpenInTab={openTabConversationKeys.has(
                           `${conv.agent_type}:${conv.id}`
                         )}
-                        timeLabel={formatRelative(conv.updated_at)}
+                        timeLabel={formatRelative(
+                          sortMode === "updated"
+                            ? conv.updated_at
+                            : conv.created_at
+                        )}
                         onSelect={handleSelect}
                         onDoubleClick={handleDoubleClick}
                         onRename={handleRename}

src/components/layout/sidebar.tsx

@@ -18,6 +18,10 @@ import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import {
@@ -29,7 +33,10 @@ import {
 import { useIsMobile } from "@/hooks/use-mobile"
 import {
   loadShowCompleted,
+  loadSortMode,
   saveShowCompleted,
+  saveSortMode,
+  type SidebarSortMode,
 } from "@/lib/sidebar-view-mode-storage"
 
 export function Sidebar() {
@@ -39,12 +46,14 @@ export function Sidebar() {
   const listRef = useRef<SidebarConversationListHandle>(null)
 
   const [showCompleted, setShowCompleted] = useState(false)
+  const [sortMode, setSortMode] = useState<SidebarSortMode>("created")
   const [allExpanded, setAllExpanded] = useState(true)
 
   useEffect(() => {
     // Hydrate from localStorage after mount to keep SSR/CSR markup consistent.
     // eslint-disable-next-line react-hooks/set-state-in-effect
     setShowCompleted(loadShowCompleted())
+    setSortMode(loadSortMode())
   }, [])
 
   const handleSetShowCompleted = useCallback((value: boolean) => {
@@ -52,6 +61,12 @@ export function Sidebar() {
     saveShowCompleted(value)
   }, [])
 
+  const handleSetSortMode = useCallback((value: string) => {
+    const mode: SidebarSortMode = value === "updated" ? "updated" : "created"
+    setSortMode(mode)
+    saveSortMode(mode)
+  }, [])
+
   const handleToggleExpandAll = useCallback(() => {
     if (allExpanded) {
       listRef.current?.collapseAll()
@@ -122,6 +137,19 @@ export function Sidebar() {
                 >
                   {t("showCompleted")}
                 </DropdownMenuCheckboxItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuLabel>{t("sortBy")}</DropdownMenuLabel>
+                <DropdownMenuRadioGroup
+                  value={sortMode}
+                  onValueChange={handleSetSortMode}
+                >
+                  <DropdownMenuRadioItem value="created">
+                    {t("sortByCreatedAt")}
+                  </DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem value="updated">
+                    {t("sortByUpdatedAt")}
+                  </DropdownMenuRadioItem>
+                </DropdownMenuRadioGroup>
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
@@ -142,7 +170,11 @@ export function Sidebar() {
             : undefined
         }
       >
-        <SidebarConversationList ref={listRef} showCompleted={showCompleted} />
+        <SidebarConversationList
+          ref={listRef}
+          showCompleted={showCompleted}
+          sortMode={sortMode}
+        />
       </div>
     </aside>
   )