feat: ajouter une option de tri pour les commandes par date ou par nombre de copies

Author: serge-eric-kalaga

backend/api/routers/commands.py

@@ -1,5 +1,7 @@
 from __future__ import annotations
 
+from typing import Literal
+
 from fastapi import APIRouter, Depends, HTTPException, Query, status
 from sqlalchemy import func, or_, select
 from sqlalchemy.orm import Session, selectinload
@@ -76,6 +78,7 @@ def list_commands_paged(
     is_favorite: bool | None = Query(default=None),
     q: str | None = Query(default=None),
     tag: list[str] | None = Query(default=None),
+    sort: Literal["recent", "mostCopied"] = Query(default="recent"),
     limit: int = Query(default=20, ge=1, le=200),
     offset: int = Query(default=0, ge=0),
     db: Session = Depends(get_db),
@@ -107,10 +110,16 @@ def list_commands_paged(
         total_stmt = total_stmt.where(*where)
     total = int(db.scalar(total_stmt) or 0)
 
+    if sort == "mostCopied":
+        order_by = (Command.copy_count.desc(), Command.updated_at.desc(), Command.id.desc())
+    else:
+        # recent
+        order_by = (Command.updated_at.desc(), Command.id.desc())
+
     stmt = (
         select(Command)
         .options(selectinload(Command.tag_entities))
-        .order_by(Command.updated_at.desc())
+        .order_by(*order_by)
         .limit(limit)
         .offset(offset)
     )

backend/api/routers/search.py

@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 import re
+from typing import Literal
 
 from fastapi import APIRouter, Depends, Query
 from sqlalchemy import and_, case, func, literal, or_, select
@@ -22,6 +23,7 @@ def search_commands(
     group_id: int | None = Query(default=None),
     is_favorite: bool | None = Query(default=None),
     tag: list[str] | None = Query(default=None),
+    sort: Literal["recent", "mostCopied"] = Query(default="recent"),
     limit: int = Query(default=20, ge=1, le=200),
     db: Session = Depends(get_db),
 ) -> SearchResponse:
@@ -79,11 +81,17 @@ def token_any_match(token: str):
     for match_expr in token_matches:
         score = score + case((match_expr, 1), else_=0)
 
+    if sort == "mostCopied":
+        # Keep relevance first, then copies.
+        order_by = (score.desc(), Command.copy_count.desc(), Command.updated_at.desc(), Command.id.desc())
+    else:
+        order_by = (score.desc(), Command.updated_at.desc(), Command.id.desc())
+
     stmt = (
         select(Command, score.label("score"))
         .options(selectinload(Command.tag_entities))
         .where(where_clause)
-        .order_by(score.desc(), Command.updated_at.desc())
+        .order_by(*order_by)
         .limit(limit)
     )
 

frontend/src/hooks/useCommandVault.ts

@@ -71,6 +71,8 @@ type ApiCommandsPageResponse = {
   offset: number;
 };
 
+type SortMode = "recent" | "mostCopied";
+
 type ApiCommandStatsResponse = {
   total: number;
   favorites: number;
@@ -138,13 +140,20 @@ export function useCommandVault(token: string) {
 
   const [stats, setStats] = useState<CommandStats>({ total: 0, favorites: 0, byGroup: {} });
 
+  const [tags, setTags] = useState<string[]>([]);
+
   const [commandsLoading, setCommandsLoading] = useState(false);
   const [commandsLoadingMore, setCommandsLoadingMore] = useState(false);
   const [commandsHasMore, setCommandsHasMore] = useState(false);
   const [commandsTotal, setCommandsTotal] = useState(0);
   const [commandsOffset, setCommandsOffset] = useState(0);
   const commandsLimit = 30;
-  const [commandsView, setCommandsView] = useState<{ groupId?: number; favoritesOnly?: boolean }>({});
+  const [commandsView, setCommandsView] = useState<{ groupId?: number; favoritesOnly?: boolean; tags?: string[]; sort?: SortMode }>({ sort: "recent" });
+
+  const fetchTags = useCallback(async () => {
+    const res = await apiRequest<string[]>("/tags", { token });
+    setTags(Array.isArray(res) ? res : []);
+  }, [token]);
 
   const fetchStats = useCallback(async () => {
     const res = await apiRequest<ApiCommandStatsResponse>("/commands/stats", { token });
@@ -156,12 +165,14 @@ export function useCommandVault(token: string) {
     setStats({ total: res.total ?? 0, favorites: res.favorites ?? 0, byGroup });
   }, [token]);
 
-  const fetchCommandsPage = useCallback(async (opts: { groupId?: number; favoritesOnly?: boolean; limit: number; offset: number }) => {
+  const fetchCommandsPage = useCallback(async (opts: { groupId?: number; favoritesOnly?: boolean; tags?: string[]; sort?: SortMode; limit: number; offset: number }) => {
     const res = await apiRequest<ApiCommandsPageResponse>("/commands/paged", {
       token,
       query: {
         group_id: opts.groupId,
         is_favorite: opts.favoritesOnly ? true : undefined,
+        tag: opts.tags,
+        sort: opts.sort,
         limit: opts.limit,
         offset: opts.offset,
       },
@@ -175,7 +186,7 @@ export function useCommandVault(token: string) {
     };
   }, [token]);
 
-  const loadInitialCommands = useCallback(async (view: { groupId?: number; favoritesOnly?: boolean }) => {
+  const loadInitialCommands = useCallback(async (view: { groupId?: number; favoritesOnly?: boolean; tags?: string[]; sort?: SortMode }) => {
     setCommandsLoading(true);
     setCommandsView(view);
     try {
@@ -225,10 +236,11 @@ export function useCommandVault(token: string) {
     setData((prev) => ({ ...prev, groups: groups.map(mapGroup) }));
     await Promise.all([
       fetchStats(),
+      fetchTags(),
       loadInitialCommands(commandsView),
     ]);
     setLoading(false);
-  }, [commandsView, fetchStats, loadInitialCommands, token]);
+  }, [commandsView, fetchStats, fetchTags, loadInitialCommands, token]);
 
   useEffect(() => {
     let cancelled = false;
@@ -242,6 +254,7 @@ export function useCommandVault(token: string) {
 
         await Promise.all([
           fetchStats(),
+          fetchTags(),
           loadInitialCommands({}),
         ]);
 
@@ -257,14 +270,14 @@ export function useCommandVault(token: string) {
     return () => {
       cancelled = true;
     };
-  }, [fetchStats, loadInitialCommands, token]);
+  }, [fetchStats, fetchTags, loadInitialCommands, token]);
 
   const persist = useCallback((next: VaultData) => {
     // Backend is the source of truth; keep this for compatibility.
     setData(next);
   }, []);
 
-  const setCommandsViewAndReload = useCallback(async (view: { groupId?: number; favoritesOnly?: boolean }) => {
+  const setCommandsViewAndReload = useCallback(async (view: { groupId?: number; favoritesOnly?: boolean; tags?: string[]; sort?: SortMode }) => {
     await loadInitialCommands(view);
   }, [loadInitialCommands]);
 
@@ -286,7 +299,8 @@ export function useCommandVault(token: string) {
       groups: [...prev.groups, mapped].sort((a, b) => a.name.localeCompare(b.name)),
     }));
     await fetchStats();
-  }, [fetchStats, token]);
+    await fetchTags();
+  }, [fetchStats, fetchTags, token]);
 
   const updateGroup = useCallback(async (id: number, updates: Partial<Group>) => {
     const updated = await apiRequest<ApiGroup>(`/groups/${id}`, {
@@ -313,7 +327,8 @@ export function useCommandVault(token: string) {
       commands: prev.commands.filter((c) => c.groupId !== id),
     }));
     await fetchStats();
-  }, [fetchStats, token]);
+    await fetchTags();
+  }, [fetchStats, fetchTags, token]);
 
   // Commands
   const addCommand = useCallback(async (c: Omit<Command, "id" | "createdAt" | "updatedAt">) => {
@@ -339,7 +354,8 @@ export function useCommandVault(token: string) {
       return { ...prev, commands: [mapped, ...prev.commands] };
     });
     await fetchStats();
-  }, [commandsView.favoritesOnly, commandsView.groupId, fetchStats, token]);
+    await fetchTags();
+  }, [commandsView.favoritesOnly, commandsView.groupId, fetchStats, fetchTags, token]);
 
   const updateCommand = useCallback(async (id: number, updates: Partial<Command>) => {
     const updated = await apiRequest<ApiCommand>(`/commands/${id}`, {
@@ -376,13 +392,15 @@ export function useCommandVault(token: string) {
       return { ...prev, commands: prev.commands.map((c) => (c.id === id ? mapped : c)) };
     });
     await fetchStats();
-  }, [commandsView.favoritesOnly, commandsView.groupId, fetchStats, token]);
+    await fetchTags();
+  }, [commandsView.favoritesOnly, commandsView.groupId, fetchStats, fetchTags, token]);
 
   const deleteCommand = useCallback(async (id: number) => {
     await apiRequest(`/commands/${id}`, { method: "DELETE", token });
     setData((prev) => ({ ...prev, commands: prev.commands.filter((c) => c.id !== id) }));
     await fetchStats();
-  }, [fetchStats, token]);
+    await fetchTags();
+  }, [fetchStats, fetchTags, token]);
 
   const toggleFavorite = useCallback(async (id: number) => {
     const current = data.commands.find((c) => c.id === id);
@@ -462,7 +480,7 @@ export function useCommandVault(token: string) {
 
   const searchCommands = useCallback(async (
     q: string,
-    options?: { groupId?: number; limit?: number; tags?: string[]; isFavorite?: boolean; signal?: AbortSignal }
+    options?: { groupId?: number; limit?: number; tags?: string[]; isFavorite?: boolean; sort?: SortMode; signal?: AbortSignal }
   ) => {
     const res = await apiRequest<ApiSearchResponse>("/search", {
       token,
@@ -472,6 +490,7 @@ export function useCommandVault(token: string) {
         group_id: options?.groupId,
         is_favorite: options?.isFavorite,
         tag: options?.tags,
+        sort: options?.sort,
         limit: options?.limit ?? 200,
       },
     });
@@ -494,6 +513,7 @@ export function useCommandVault(token: string) {
     commandsLoadingMore,
     commandsHasMore,
     commandsTotal,
+    tags,
     stats,
     importing,
     error,

frontend/src/pages/Index.tsx

@@ -108,6 +108,8 @@ function VaultPage({ token, onLogout }: { token: string; onLogout: () => void })
   const [tagsExpanded, setTagsExpanded] = useState(false);
   const [tagsOverflow, setTagsOverflow] = useState(false);
   const tagsContainerRef = useRef<HTMLDivElement | null>(null);
+  const skipNextCommandsViewEffectRef = useRef(false);
+  const hasInitializedCommandsViewRef = useRef(false);
   const loadMoreRef = useRef<HTMLDivElement | null>(null);
   const [layout, setLayout] = useState<"vertical" | "horizontal">(() => {
     if (typeof window === "undefined") return "vertical";
@@ -230,10 +232,10 @@ function VaultPage({ token, onLogout }: { token: string; onLogout: () => void })
   // This is used to keep the tag list stable when selecting multiple tags.
   const baseCommands = useMemo(() => {
     const isServerSearch = search.trim().length > 0;
-    const cmds = isServerSearch ? [...(searchResults ?? [])] : [...vault.data.commands];
+    if (isServerSearch) return searchResults ?? [];
     // vault.data.commands is already loaded for the current view.
-    return cmds;
-  }, [vault.data.commands, activeView, search, searchResults]);
+    return vault.data.commands;
+  }, [vault.data.commands, search, searchResults]);
 
   const selectedCount = selectedIds.size;
   const selectedCommands = useMemo(() => {
@@ -252,27 +254,31 @@ function VaultPage({ token, onLogout }: { token: string; onLogout: () => void })
     });
   }, []);
 
-  // Filtered commands (applies tag filters + sorting)
-  const filteredCommands = useMemo(() => {
-    let cmds = [...baseCommands];
+  const toggleTagFilter = useCallback((tag: string) => {
+    setTagFilters((prev) => (prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]));
+  }, []);
 
-    if (tagFilters.length > 0) {
-      cmds = cmds.filter((c) => tagFilters.some((t) => c.tags.includes(t)));
+  // Server-side paging view: reload when sort/tags change (but not while searching).
+  useEffect(() => {
+    if (!hasInitializedCommandsViewRef.current) {
+      hasInitializedCommandsViewRef.current = true;
+      return;
     }
-
-    if (sortMode === "mostCopied") {
-      cmds.sort((a, b) => {
-        if (b.copyCount !== a.copyCount) return b.copyCount - a.copyCount;
-        return Date.parse(b.updatedAt) - Date.parse(a.updatedAt);
-      });
+    if (skipNextCommandsViewEffectRef.current) {
+      skipNextCommandsViewEffectRef.current = false;
+      return;
     }
+    if (activeView === "dashboard") return;
+    if (search.trim().length > 0) return;
 
-    return cmds;
-  }, [baseCommands, tagFilters, sortMode]);
-
-  const toggleTagFilter = useCallback((tag: string) => {
-    setTagFilters((prev) => (prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]));
-  }, []);
+    void setCommandsView({
+      ...viewToOptions(activeView),
+      tags: tagFilters,
+      sort: sortMode,
+    }).catch(() => {
+      // ignore
+    });
+  }, [activeView, search, setCommandsView, sortMode, tagFilters.join("|"), viewToOptions]);
 
   // Server-side search
   useEffect(() => {
@@ -310,14 +316,14 @@ function VaultPage({ token, onLogout }: { token: string; onLogout: () => void })
     }
 
     const isFavorite = parsed.isFavorite ?? defaultFavorite;
-    const tags = parsed.tags;
+    const tags = Array.from(new Set([...(parsed.tags ?? []), ...(tagFilters ?? [])]));
 
     setSearchLoading(true);
     setSearchResults(null);
 
     const timeoutId = window.setTimeout(() => {
       void vault
-        .searchCommands(parsed.text, { groupId, limit: 200, tags, isFavorite, signal: controller.signal })
+        .searchCommands(parsed.text, { groupId, limit: 200, tags, isFavorite, sort: sortMode, signal: controller.signal })
         .then((items) => {
           if (cancelled) return;
           setSearchResults(items);
@@ -338,7 +344,7 @@ function VaultPage({ token, onLogout }: { token: string; onLogout: () => void })
       controller.abort();
       window.clearTimeout(timeoutId);
     };
-  }, [search, activeView, vault.searchCommands, vault.data.groups]);
+  }, [search, activeView, sortMode, tagFilters.join("|"), vault.searchCommands, vault.data.groups]);
 
   // Current group
   const currentGroup = activeView.startsWith("group:")
@@ -403,12 +409,8 @@ function VaultPage({ token, onLogout }: { token: string; onLogout: () => void })
     return { groupId, favoritesOnly, tags, q };
   }, [activeView, search, tagFilters, viewToOptions, vault.data.groups]);
 
-  // All tags for filter (from baseCommands so tags don't disappear when filtering)
-  const allTags = useMemo(() => {
-    const tags = new Set<string>();
-    baseCommands.forEach((c) => c.tags.forEach((t) => tags.add(t)));
-    return [...tags].sort();
-  }, [baseCommands]);
+  // All tags for filter (global list, independent of paging)
+  const allTags = useMemo(() => vault.tags ?? [], [vault.tags]);
 
   useEffect(() => {
     const el = tagsContainerRef.current;
@@ -505,7 +507,12 @@ function VaultPage({ token, onLogout }: { token: string; onLogout: () => void })
           setSearchLoading(false);
           setTagFilters([]);
           setTagsExpanded(false);
-          void setCommandsView(viewToOptions(v)).catch(() => {
+          skipNextCommandsViewEffectRef.current = true;
+          void setCommandsView({
+            ...viewToOptions(v),
+            tags: [],
+            sort: sortMode,
+          }).catch(() => {
             // ignore
           });
         }}
@@ -814,9 +821,9 @@ function VaultPage({ token, onLogout }: { token: string; onLogout: () => void })
                 </div>
               ))}
             </div>
-          ) : filteredCommands.length > 0 ? (
+          ) : baseCommands.length > 0 ? (
             <div className={`grid gap-3 ${layout === "horizontal" ? "sm:grid-cols-2" : "grid-cols-1"}`}>
-              {filteredCommands.map((cmd) => (
+              {baseCommands.map((cmd) => (
                 <CommandCard
                   key={cmd.id}
                   cmd={cmd}