feat: inherit model-picker reorder/accordion persistence and shift-delete from otto-ui (#1833)

* feat(model-picker): drag-to-reorder providers and persist accordion state Ports two model/provider picker QoL features from otto-ui: - Persist collapsed state of picker sections (favorites, recent, each provider) via a new persisted zustand store so collapse survives remounts and reloads, shared across every picker surface. - Desktop drag-to-reorder of provider sections (whole header as the mouse activator, 8px threshold so a plain click still toggles collapse), with the order persisted in useUIStore.providerOrder and applied across ModelControls, ModelMultiSelect and ModelSelector. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * feat(sessions): shift-click quick action hard-deletes thread without prompt Ports the shift-quick-delete feature from otto-ui. The sidebar quick action (normally archive) becomes a no-prompt hard delete while Shift is held: the icon switches to a trash bin, the affordance turns destructive, and the click bypasses the confirmation dialog via a new skipConfirm source flag. A shared useShiftKeyHeld hook (single window listener set, useSyncExternalStore) keeps only the small action button re-rendering on Shift state changes, and resets on window blur so the affordance can't get stuck after alt-tab. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> --------- Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>
2026-06-26 19:36:47 +03:00
parent e7b952cbcb
commit 3e3cd82a47
19 changed files with 377 additions and 45 deletions
@@ -366,6 +366,8 @@ export const ModelControls: React.FC<ModelControlsProps> = ({

    const toggleFavoriteModel = useUIStore((state) => state.toggleFavoriteModel);
    const reorderFavoriteModel = useUIStore((state) => state.reorderFavoriteModel);
+    const providerOrder = useUIStore((state) => state.providerOrder);
+    const setProviderOrder = useUIStore((state) => state.setProviderOrder);
    const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
    const addRecentModel = useUIStore((state) => state.addRecentModel);
    const addRecentAgent = useUIStore((state) => state.addRecentAgent);
@@ -2368,6 +2370,9 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                )}
                                reorderFavoriteAriaLabel={t('chat.modelControls.reorderFavoriteAria')}
                                reorderFavoriteTitle={t('chat.modelControls.reorderFavoriteTitle')}
+                                providerOrder={providerOrder}
+                                onReorderProvider={setProviderOrder}
+                                reorderProviderTitle={t('chat.modelControls.reorderProviderTitle')}
                                footerContent={(activeEntry) => {
                                    const activeHasThinkingVariants = activeEntry
                                        ? getModelVariantOptions(activeEntry.providerID, activeEntry.modelID).length > 0
@@ -1,13 +1,14 @@
 import React from 'react';
 import {
  DndContext,
+  MouseSensor,
  PointerSensor,
  closestCenter,
  useSensor,
  useSensors,
  type DragEndEvent,
 } from '@dnd-kit/core';
-import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS as DndCSS } from '@dnd-kit/utilities';
 import { Icon } from '@/components/icon/Icon';
 import { Input } from '@/components/ui/input';
@@ -18,6 +19,7 @@ import { getCurrentIntlLocale } from '@/lib/i18n';
 import { mergeModelMetadataWithLiveModel } from '@/lib/modelMetadata';
 import { getModelDisplayName as getSharedModelDisplayName } from '@/lib/modelDisplay';
 import { cn } from '@/lib/utils';
+import { useModelPickerSectionsStore } from '@/stores/useModelPickerSectionsStore';
 import type { ModelMetadata } from '@/types';

 type ProviderModel = Record<string, unknown> & { id?: string; name?: string };
@@ -256,6 +258,35 @@ const SortableFavoriteModelRow: React.FC<{
  );
 };

+const SortableProviderSection: React.FC<{
+  id: string;
+  disabled?: boolean;
+  children: (dragHandleProps: SortableFavoriteHandleProps) => React.ReactNode;
+}> = ({ id, disabled = false, children }) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id, disabled });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: DndCSS.Translate.toString(transform),
+        transition,
+      }}
+      className={cn(isDragging && 'opacity-60')}
+    >
+      {children({ attributes, listeners, setActivatorNodeRef, isDragging })}
+    </div>
+  );
+};
+
 const STICKY_HEADER_OFFSET = 32;

 const scrollIntoView = (container: HTMLElement | null, node: HTMLElement | null) => {
@@ -328,6 +359,9 @@ interface ModelPickerListProps {
  onReorderFavorite?: (active: ModelPickerEntry, over: ModelPickerEntry) => void;
  reorderFavoriteAriaLabel?: string;
  reorderFavoriteTitle?: string;
+  providerOrder?: string[];
+  onReorderProvider?: (orderedProviderIDs: string[]) => void;
+  reorderProviderTitle?: string;
  footerContent?: React.ReactNode | ((activeEntry: ModelPickerEntry | undefined) => React.ReactNode);
  renderVersion?: number;
  tooltipsEnabled?: boolean;
@@ -365,6 +399,9 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
  onReorderFavorite,
  reorderFavoriteAriaLabel,
  reorderFavoriteTitle,
+  providerOrder,
+  onReorderProvider,
+  reorderProviderTitle,
  footerContent,
  renderVersion,
  tooltipsEnabled = true,
@@ -376,10 +413,21 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
  const scrollRef = React.useRef<HTMLElement | null>(null);
  const keyboardOwnsSelectionRef = React.useRef(false);
  const lastMousePositionRef = React.useRef<{ x: number; y: number } | null>(null);
-  const [collapsedSections, setCollapsedSections] = React.useState<Set<string>>(() => new Set());
+  const collapsedRecord = useModelPickerSectionsStore((state) => state.collapsedSections);
+  const toggleSection = useModelPickerSectionsStore((state) => state.toggleSection);
+  const collapsedSections = React.useMemo(
+    () => new Set(Object.keys(collapsedRecord).filter((key) => collapsedRecord[key])),
+    [collapsedRecord],
+  );
  const favoriteRowSensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
  );
+  // Desktop-only provider reordering: a MouseSensor (no TouchSensor) keeps the
+  // section headers tappable/scrollable on touch devices while enabling
+  // click-and-drag with a mouse.
+  const providerSectionSensors = useSensors(
+    useSensor(MouseSensor, { activationConstraint: { distance: 8 } }),
+  );

  const allowedProviderSet = React.useMemo(() => {
    if (!allowedProviderIds || allowedProviderIds.length === 0) return null;
@@ -412,7 +460,17 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
    return matchesQuery(getModelDisplayName(model), providerName);
  }), [allowedProviderSet, isHidden, matchesQuery, providerById, recentModels]);

-  const filteredProviders = React.useMemo(() => providers
+  const orderedProviders = React.useMemo(() => {
+    if (!providerOrder || providerOrder.length === 0) return providers;
+    const rank = new Map(providerOrder.map((id, index) => [id, index] as const));
+    const ranked = providers
+      .filter((provider) => rank.has(provider.id))
+      .sort((a, b) => (rank.get(a.id) ?? 0) - (rank.get(b.id) ?? 0));
+    const unranked = providers.filter((provider) => !rank.has(provider.id));
+    return [...ranked, ...unranked];
+  }, [providerOrder, providers]);
+
+  const filteredProviders = React.useMemo(() => orderedProviders
    .filter((provider) => !allowedProviderSet || allowedProviderSet.has(provider.id))
    .map((provider) => {
      const models = Array.isArray(provider.models) ? provider.models : [];
@@ -423,7 +481,7 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
      });
      return { ...provider, models: filteredModels };
    })
-    .filter((provider) => provider.models.length > 0), [allowedProviderSet, isHidden, matchesQuery, providers]);
+    .filter((provider) => provider.models.length > 0), [allowedProviderSet, isHidden, matchesQuery, orderedProviders]);

  const flatModelList = React.useMemo(() => {
    const items: ModelPickerEntry[] = [];
@@ -438,6 +496,7 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({

  const hasResults = flatModelList.length > 0;
  const favoriteSortingEnabled = Boolean(onReorderFavorite) && searchQuery.trim().length === 0 && filteredFavorites.length > 1;
+  const providerSortingEnabled = Boolean(onReorderProvider) && searchQuery.trim().length === 0 && !allowedProviderSet && filteredProviders.length > 1;
  const favoriteLookup: Map<string, ModelPickerEntry> = React.useMemo(() => new Map(
    filteredFavorites.map((entry) => [`${entry.providerID}:${entry.modelID}`, entry] as const),
  ), [filteredFavorites]);
@@ -591,18 +650,61 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
    onReorderFavorite(activeFavorite, overFavorite);
  };

-  const isSectionCollapsed = (key: string) => collapsedSections.has(key);
-  const toggleSectionCollapsed = (key: string) => {
-    setCollapsedSections((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      return next;
-    });
+  const handleProviderDragEnd = (event: DragEndEvent) => {
+    if (!onReorderProvider) return;
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    const ids = orderedProviders.map((provider) => provider.id);
+    const from = ids.indexOf(String(active.id));
+    const to = ids.indexOf(String(over.id));
+    if (from === -1 || to === -1) return;
+
+    onReorderProvider(arrayMove(ids, from, to));
  };

-  const renderSectionHeader = (key: string, icon: React.ReactNode, label: React.ReactNode) => {
+  const isSectionCollapsed = (key: string) => collapsedSections.has(key);
+  const toggleSectionCollapsed = (key: string) => toggleSection(key);
+
+  const renderSectionHeader = (key: string, icon: React.ReactNode, label: React.ReactNode, headerDragProps?: SortableFavoriteHandleProps) => {
    const collapsed = isSectionCollapsed(key);
+    const toggleKeyDown = (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        toggleSectionCollapsed(key);
+      }
+    };
+
+    // When the section is reorderable, the whole header acts as the drag
+    // activator (desktop mouse, with an 8px threshold so a plain click still
+    // toggles collapse). A <button> cannot be the activator because dnd-kit's
+    // attributes/listeners turn it into a draggable widget, so render a div
+    // with button semantics. The drag listeners are spread first so our
+    // onClick/onKeyDown collapse handlers take precedence.
+    if (headerDragProps) {
+      return (
+        <div
+          ref={headerDragProps.setActivatorNodeRef}
+          {...headerDragProps.attributes}
+          {...headerDragProps.listeners}
+          role="button"
+          tabIndex={0}
+          aria-expanded={!collapsed}
+          title={reorderProviderTitle}
+          className={cn(headerClassName, 'w-full text-left cursor-grab select-none active:cursor-grabbing')}
+          onClick={() => toggleSectionCollapsed(key)}
+          onKeyDown={toggleKeyDown}
+        >
+          <Icon name="draggable" className="size-3.5 flex-shrink-0 text-muted-foreground/70" />
+          {icon}
+          <span className="min-w-0 truncate">{label}</span>
+          <span className="ml-auto flex size-4 flex-shrink-0 items-center justify-center text-muted-foreground">
+            <Icon name={collapsed ? 'arrow-right-s' : 'arrow-down-s'} className="size-4" />
+          </span>
+        </div>
+      );
+    }
+
    return (
      <button
        type="button"
@@ -619,6 +721,20 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
    );
  };

+  const renderProviderSection = (
+    provider: (typeof filteredProviders)[number],
+    providerIndex: number,
+    headerDragProps?: SortableFavoriteHandleProps,
+  ) => (
+    <>
+      {providerIndex > 0 ? <div className="h-px bg-border/40 my-1" /> : null}
+      {renderSectionHeader(`provider:${provider.id}`, <ProviderLogo providerId={provider.id} className="h-4 w-4 flex-shrink-0" />, provider.name || provider.id, headerDragProps)}
+      {!isSectionCollapsed(`provider:${provider.id}`)
+        ? provider.models.map((model) => renderRow({ model, providerID: provider.id, modelID: model.id as string }, 'provider', false, currentFlatIndex++))
+        : null}
+    </>
+  );
+
  return (
    <>
      <div className="px-2 py-1 border-b border-border/40">
@@ -687,15 +803,23 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({

          {(filteredFavorites.length > 0 || filteredRecents.length > 0) && filteredProviders.length > 0 ? <div className="h-px bg-border/40 my-1" /> : null}

-          {filteredProviders.map((provider, providerIndex) => (
-            <div key={provider.id}>
-              {providerIndex > 0 ? <div className="h-px bg-border/40 my-1" /> : null}
-              {renderSectionHeader(`provider:${provider.id}`, <ProviderLogo providerId={provider.id} className="h-4 w-4 flex-shrink-0" />, provider.name || provider.id)}
-              {!isSectionCollapsed(`provider:${provider.id}`)
-                ? provider.models.map((model) => renderRow({ model, providerID: provider.id, modelID: model.id as string }, 'provider', false, currentFlatIndex++))
-                : null}
-            </div>
-          ))}
+          {providerSortingEnabled ? (
+            <DndContext sensors={providerSectionSensors} collisionDetection={closestCenter} onDragEnd={handleProviderDragEnd}>
+              <SortableContext items={filteredProviders.map((provider) => provider.id)} strategy={verticalListSortingStrategy}>
+                {filteredProviders.map((provider, providerIndex) => (
+                  <SortableProviderSection key={provider.id} id={provider.id} disabled={disabled}>
+                    {(dragHandleProps) => renderProviderSection(provider, providerIndex, dragHandleProps)}
+                  </SortableProviderSection>
+                ))}
+              </SortableContext>
+            </DndContext>
+          ) : (
+            filteredProviders.map((provider, providerIndex) => (
+              <div key={provider.id}>
+                {renderProviderSection(provider, providerIndex)}
+              </div>
+            ))
+          )}
        </div>
      </ScrollableOverlay>

@@ -107,6 +107,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
  const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
  const { favoriteModelsList, recentModelsList } = useModelLists();
  const hiddenModels = useUIStore((state) => state.hiddenModels);
+  const providerOrder = useUIStore((state) => state.providerOrder);
  const [isOpen, setIsOpen] = React.useState(false);
  const [searchQuery, setSearchQuery] = React.useState('');
  const [availableHeight, setAvailableHeight] = React.useState<number | null>(null);
@@ -260,6 +261,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
            >
              <ModelPickerList
                providers={providers}
+                providerOrder={providerOrder}
                favoriteModels={favoriteModelsList}
                recentModels={recentModelsList}
                modelsMetadata={modelsMetadata}
@@ -46,6 +46,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
    const toggleFavoriteModel = useUIStore((state) => state.toggleFavoriteModel);
    const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
    const addRecentModel = useUIStore((state) => state.addRecentModel);
+    const providerOrder = useUIStore((state) => state.providerOrder);
    const { favoriteModelsList, recentModelsList } = useModelLists();
    const { isMobile: deviceIsMobile } = useDeviceInfo();
    const isActuallyMobile = isMobile || deviceIsMobile;
@@ -94,6 +95,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
    const picker = (
        <ModelPickerList
            providers={providers}
+            providerOrder={providerOrder}
            favoriteModels={favoriteModelsList}
            recentModels={recentModelsList}
            modelsMetadata={modelsMetadata}
@@ -33,6 +33,7 @@ import { useSessionDisplayStore } from '@/stores/useSessionDisplayStore';
 import { useSessionUnseenCount } from '@/sync/notification-store';
 import { useSessionMultiSelectStore } from '@/stores/useSessionMultiSelectStore';
 import { useI18n } from '@/lib/i18n';
+import { useShiftKeyHeld } from '@/hooks/useShiftKeyHeld';
 import { getRuntimeBearerTokenSync } from '@/lib/runtime-auth';
 import { getRuntimeApiBaseUrl } from '@/lib/runtime-switch';
 import { parseMultiRunSessionTitle } from '@/lib/multirun/title';
@@ -82,7 +83,7 @@ type Props = {
  addSessionToFolder: (scopeKey: string, folderId: string, sessionId: string) => void;
  createFolderAndStartRename: (scopeKey: string, parentId?: string | null) => { id: string } | null;
  openContextPanelTab: (directory: string, options: { mode: 'chat'; dedupeKey: string; label: string; readOnly?: boolean }) => void;
-  handleDeleteSession: (session: Session, source?: { archivedBucket?: boolean; hardDelete?: boolean }) => void;
+  handleDeleteSession: (session: Session, source?: { archivedBucket?: boolean; hardDelete?: boolean; skipConfirm?: boolean }) => void;
  mobileVariant: boolean;
  alwaysShowActions: boolean;
  renderSessionNode: (
@@ -139,6 +140,68 @@ type Props = {
  liveSessionById: Map<string, Session>;
 };

+type QuickSessionActionProps = {
+  archiveLabel: string;
+  deleteLabel: string;
+  buttonSizeClass: string;
+  iconSizeClass: string;
+  onPointerDown: (event: React.PointerEvent<HTMLButtonElement>) => void;
+  onMouseDown: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onArchive: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onDelete: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+// Extracted so only this small button re-renders when Shift is pressed/released,
+// instead of every mounted session row.
+const QuickSessionAction = React.memo(function QuickSessionAction({
+  archiveLabel,
+  deleteLabel,
+  buttonSizeClass,
+  iconSizeClass,
+  onPointerDown,
+  onMouseDown,
+  onArchive,
+  onDelete,
+}: QuickSessionActionProps): React.ReactNode {
+  const shiftHeld = useShiftKeyHeld();
+  const label = shiftHeld ? deleteLabel : archiveLabel;
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (shiftHeld || event.shiftKey) {
+      onDelete(event);
+      return;
+    }
+    onArchive(event);
+  };
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            'inline-flex items-center justify-center rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
+            shiftHeld
+              ? 'text-destructive hover:text-destructive'
+              : 'text-muted-foreground hover:text-foreground',
+            buttonSizeClass,
+          )}
+          aria-label={label}
+          onPointerDown={onPointerDown}
+          onMouseDown={onMouseDown}
+          onClick={handleClick}
+          onKeyDown={(event) => event.stopPropagation()}
+        >
+          <Icon name={shiftHeld ? 'delete-bin' : 'archive'} className={iconSizeClass} />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="left" sideOffset={8}>
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  );
+});
+
 function SessionNodeItemComponent(props: Props): React.ReactNode {
  const { t } = useI18n();
  const {
@@ -634,6 +697,13 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
    handleDeleteSession(session, { archivedBucket });
  };

+  const handleQuickDeleteClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setOpenSidebarMenuKey(null);
+    handleDeleteSession(session, { archivedBucket, hardDelete: true, skipConfirm: true });
+  };
+
  const handleOpenInEditorPointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {
    event.preventDefault();
    event.stopPropagation();
@@ -1046,27 +1116,16 @@ function SessionNodeItemComponent(props: Props): React.ReactNode {
                : cn('opacity-0', revealOnHoverClass),
          )}>
            {showQuickArchiveAction ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    className={cn(
-                      'inline-flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
-                      isMinimalMode && !alwaysShowActions ? 'h-4 w-4' : 'h-6 w-6',
-                    )}
-                    aria-label={t('sessions.sidebar.bulkActions.archive')}
-                    onPointerDown={handleQuickArchivePointerDown}
-                    onMouseDown={handleQuickArchiveMouseDown}
-                    onClick={handleQuickArchiveClick}
-                    onKeyDown={(event) => event.stopPropagation()}
-                  >
-                    <Icon name="archive" className={cn(isMinimalMode && !alwaysShowActions ? 'h-2.5 w-2.5' : 'h-3.5 w-3.5')} />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="left" sideOffset={8}>
-                  {t('sessions.sidebar.bulkActions.archive')}
-                </TooltipContent>
-              </Tooltip>
+              <QuickSessionAction
+                archiveLabel={t('sessions.sidebar.bulkActions.archive')}
+                deleteLabel={t('sessions.sidebar.bulkActions.delete')}
+                buttonSizeClass={isMinimalMode && !alwaysShowActions ? 'h-4 w-4' : 'h-6 w-6'}
+                iconSizeClass={isMinimalMode && !alwaysShowActions ? 'h-2.5 w-2.5' : 'h-3.5 w-3.5'}
+                onPointerDown={handleQuickArchivePointerDown}
+                onMouseDown={handleQuickArchiveMouseDown}
+                onArchive={handleQuickArchiveClick}
+                onDelete={handleQuickDeleteClick}
+              />
            ) : null}
            {showOpenInEditorAction ? (
              <Tooltip>
@@ -15,6 +15,8 @@ type DeleteSessionConfirmSetter = React.Dispatch<React.SetStateAction<{
 type DeleteSessionSource = {
  archivedBucket?: boolean;
  hardDelete?: boolean;
+  /** Bypass the confirmation dialog and delete/archive immediately. */
+  skipConfirm?: boolean;
 };

 type Args = {
@@ -253,7 +255,7 @@ export const useSessionActions = (args: Args) => {
        collectDescendants(session.id),
        shouldHardDelete,
      ).map((s) => s.id);
-      if (!args.showDeletionDialog) {
+      if (!args.showDeletionDialog || source?.skipConfirm === true) {
        void executeDeleteSession(session, source, { descendantIds: effectiveDescendantIds });
        return;
      }
@@ -34,6 +34,7 @@ export const ProviderLogo: React.FC<ProviderLogoProps> = ({
            loading="eager"
            decoding="async"
            fetchPriority="high"
+            draggable={false}
            onError={handleError}
        />
    );