fix: harden favorites drawer interactions

src/content/market/favorites-drawer.ts

@@ -22,6 +22,20 @@ export interface FavoritesDrawerController {
 const DRAWER_ID = "sces-favorites-drawer";
 const activeDrawers = new WeakMap<Document, FavoritesDrawerController>();
 
+type DrawerView =
+  | { kind: "all" }
+  | { folderId: string; kind: "folder" };
+
+type DrawerFocusDescriptor =
+  | {
+      end: number | null;
+      kind: "search";
+      start: number | null;
+    }
+  | { authorId: string; kind: "checkbox" }
+  | { folderId: string; kind: "folder" }
+  | { attribute: string; kind: "attribute"; value: string };
+
 export function createFavoritesDrawer(
   document: Document,
   handlers: FavoritesDrawerHandlers,
@@ -58,9 +72,10 @@ export function createFavoritesDrawer(
   let disposed = false;
   let errorMessage = "";
   let isOpen = false;
+  let pending = false;
   let searchQuery = "";
   let state = emptyState();
-  let view: "all" | string = "all";
+  let view: DrawerView = { kind: "all" };
   let selectedAuthorIds = new Set<string>();
 
   const controller: FavoritesDrawerController = {
@@ -100,6 +115,9 @@ export function createFavoritesDrawer(
     if (event.key !== "Escape" || !isOpen) {
       return;
     }
+    if (document.querySelector("[data-sces-favorite-folder-dialog]")) {
+      return;
+    }
     event.preventDefault();
     closeDrawer();
   };
@@ -120,18 +138,20 @@ export function createFavoritesDrawer(
       return;
     }
     if (button.dataset.scesFavoritesDrawer === "view-all") {
-      view = "all";
+      view = { kind: "all" };
       renderDrawer();
       return;
     }
 
-    const folderId = button.dataset.scesFavoritesFolderId;
-    if (folderId) {
-      view = folderId;
+    if (button.hasAttribute("data-sces-favorites-folder-id")) {
+      view = {
+        folderId: button.getAttribute("data-sces-favorites-folder-id") ?? "",
+        kind: "folder"
+      };
       renderDrawer();
       return;
     }
-    if (busy) {
+    if (isInteractionLocked()) {
       return;
     }
 
@@ -140,21 +160,30 @@ export function createFavoritesDrawer(
       return;
     }
 
-    const renameFolderId = button.dataset.scesFavoritesFolderRename;
-    if (renameFolderId) {
+    if (button.hasAttribute("data-sces-favorites-folder-rename")) {
+      const renameFolderId =
+        button.getAttribute("data-sces-favorites-folder-rename") ?? "";
       invokeHandler(() => handlers.onRenameFolder(renameFolderId));
       return;
     }
 
-    const deleteFolderId = button.dataset.scesFavoritesFolderDelete;
-    if (deleteFolderId) {
+    if (button.hasAttribute("data-sces-favorites-folder-delete")) {
+      const deleteFolderId =
+        button.getAttribute("data-sces-favorites-folder-delete") ?? "";
       invokeHandler(() => handlers.onDeleteFolder(deleteFolderId));
       return;
     }
 
-    const removeAuthorId = button.dataset.scesFavoritesRemoveAuthorId;
-    if (removeAuthorId && view !== "all") {
-      invokeHandler(() => handlers.onRemoveCreatorFromFolder(removeAuthorId, view));
+    if (
+      button.hasAttribute("data-sces-favorites-remove-author-id") &&
+      view.kind === "folder"
+    ) {
+      const removeAuthorId =
+        button.getAttribute("data-sces-favorites-remove-author-id") ?? "";
+      const folderId = view.folderId;
+      invokeHandler(() =>
+        handlers.onRemoveCreatorFromFolder(removeAuthorId, folderId)
+      );
       return;
     }
 
@@ -166,11 +195,15 @@ export function createFavoritesDrawer(
       return;
     }
 
-    if (button.dataset.scesFavoritesDrawer === "import-folder" && view !== "all") {
+    if (
+      button.dataset.scesFavoritesDrawer === "import-folder" &&
+      view.kind === "folder"
+    ) {
       const authorIds = creatorsInCurrentView().map((creator) => creator.authorId);
+      const folderId = view.folderId;
       const message = `将当前收藏夹的 ${authorIds.length} 位达人导入秒探吗？`;
       if (confirmImport(message)) {
-        invokeHandler(() => handlers.onImportFolder(view, authorIds));
+        invokeHandler(() => handlers.onImportFolder(folderId, authorIds));
       }
     }
   };
@@ -182,25 +215,15 @@ export function createFavoritesDrawer(
       target.dataset.scesFavoritesDrawer === "search"
     ) {
       searchQuery = target.value;
-      const selectionStart = target.selectionStart;
-      const selectionEnd = target.selectionEnd;
+      target.focus();
       renderDrawer();
-      const search = drawer.querySelector(
-        '[data-sces-favorites-drawer="search"]'
-      );
-      if (search instanceof HTMLInputElement) {
-        search.focus();
-        if (selectionStart !== null && selectionEnd !== null) {
-          search.setSelectionRange(selectionStart, selectionEnd);
-        }
-      }
     }
   };
 
   const onDrawerChange = (event: Event) => {
     const target = event.target;
     if (
-      busy ||
+      isInteractionLocked() ||
       !(target instanceof HTMLInputElement) ||
       target.type !== "checkbox"
     ) {
@@ -222,7 +245,7 @@ export function createFavoritesDrawer(
   drawer.addEventListener("click", onDrawerClick);
   drawer.addEventListener("input", onDrawerInput);
   drawer.addEventListener("change", onDrawerChange);
-  document.addEventListener("keydown", onDocumentKeydown);
+  document.addEventListener("keydown", onDocumentKeydown, true);
   renderDrawer();
   activeDrawers.set(document, controller);
 
@@ -261,8 +284,12 @@ export function createFavoritesDrawer(
   }
 
   function renderDrawer(): void {
-    if (view !== "all" && !state.folders.some((folder) => folder.id === view)) {
-      view = "all";
+    const focusDescriptor = captureFocusedControl();
+    if (view.kind === "folder") {
+      const folderId = view.folderId;
+      if (!state.folders.some((folder) => folder.id === folderId)) {
+        view = { kind: "all" };
+      }
     }
 
     const currentCreators = creatorsInCurrentView();
@@ -291,6 +318,7 @@ export function createFavoritesDrawer(
     fragment.append(createCreatorList(visibleCreators));
     fragment.append(createFooter(selectedCount));
     drawer.replaceChildren(fragment);
+    restoreFocusedControl(focusDescriptor);
   }
 
   function createHeader(): HTMLElement {
@@ -306,12 +334,13 @@ export function createFavoritesDrawer(
 
     const createFolder = createButton(document, "新建收藏夹");
     createFolder.dataset.scesFavoritesDrawer = "create-folder";
-    createFolder.disabled = busy;
+    createFolder.disabled = isInteractionLocked();
     applySecondaryButtonStyles(createFolder);
 
-    const close = createButton(document, "关闭收藏夹");
+    const close = createButton(document, "x");
     close.dataset.scesFavoritesDrawer = "close";
     close.setAttribute("aria-label", "关闭收藏夹");
+    close.title = "关闭收藏夹";
     applyIconButtonStyles(close);
 
     actions.append(createFolder, close);
@@ -326,8 +355,8 @@ export function createFavoritesDrawer(
 
     const allButton = createButton(document, "全部收藏");
     allButton.dataset.scesFavoritesDrawer = "view-all";
-    allButton.setAttribute("aria-current", String(view === "all"));
-    applyViewButtonStyles(allButton, view === "all");
+    allButton.setAttribute("aria-current", String(view.kind === "all"));
+    applyViewButtonStyles(allButton, view.kind === "all");
     navigation.append(allButton);
 
     state.folders.forEach((folder) => {
@@ -336,19 +365,21 @@ export function createFavoritesDrawer(
 
       const viewButton = createButton(document, folder.name);
       viewButton.dataset.scesFavoritesFolderId = folder.id;
-      viewButton.setAttribute("aria-current", String(view === folder.id));
-      applyViewButtonStyles(viewButton, view === folder.id);
+      const isCurrentFolder =
+        view.kind === "folder" && view.folderId === folder.id;
+      viewButton.setAttribute("aria-current", String(isCurrentFolder));
+      applyViewButtonStyles(viewButton, isCurrentFolder);
 
       const rename = createButton(document, "重命名");
       rename.dataset.scesFavoritesFolderRename = folder.id;
       rename.setAttribute("aria-label", `重命名收藏夹 ${folder.name}`);
-      rename.disabled = busy;
+      rename.disabled = isInteractionLocked();
       applyTextActionStyles(rename);
 
       const remove = createButton(document, "删除");
       remove.dataset.scesFavoritesFolderDelete = folder.id;
       remove.setAttribute("aria-label", `删除收藏夹 ${folder.name}`);
-      remove.disabled = busy;
+      remove.disabled = isInteractionLocked();
       applyDangerActionStyles(remove);
 
       row.append(viewButton, rename, remove);
@@ -393,7 +424,7 @@ export function createFavoritesDrawer(
       const checkbox = document.createElement("input");
       checkbox.type = "checkbox";
       checkbox.checked = selectedAuthorIds.has(creator.authorId);
-      checkbox.disabled = busy;
+      checkbox.disabled = isInteractionLocked();
       checkbox.dataset.scesFavoritesSelectAuthorId = creator.authorId;
       checkbox.setAttribute("aria-label", `选择达人 ${creator.authorName}`);
       selectLabel.append(checkbox);
@@ -406,7 +437,7 @@ export function createFavoritesDrawer(
       applyCreatorNameStyles(name);
       details.append(name);
 
-      if (view === "all") {
+      if (view.kind === "all") {
         const affiliation = document.createElement("p");
         affiliation.textContent = `所属：${folderNamesForCreator(creator.authorId).join("、") || "未分类"}`;
         applyAffiliationStyles(affiliation);
@@ -414,11 +445,11 @@ export function createFavoritesDrawer(
       }
 
       row.append(selectLabel, details);
-      if (view !== "all") {
+      if (view.kind === "folder") {
         const remove = createButton(document, "移出收藏夹");
         remove.dataset.scesFavoritesRemoveAuthorId = creator.authorId;
         remove.setAttribute("aria-label", `将 ${creator.authorName} 移出当前收藏夹`);
-        remove.disabled = busy;
+        remove.disabled = isInteractionLocked();
         applyDangerActionStyles(remove);
         row.append(remove);
       }
@@ -429,6 +460,7 @@ export function createFavoritesDrawer(
 
   function createFooter(selectedCount: number): HTMLElement {
     const footer = document.createElement("footer");
+    footer.dataset.scesFavoritesDrawer = "footer";
     applyFooterStyles(footer);
 
     const selected = document.createElement("span");
@@ -437,18 +469,20 @@ export function createFavoritesDrawer(
 
     const actions = document.createElement("div");
     applyFooterActionsStyles(actions);
-    if (view !== "all") {
+    if (view.kind === "folder") {
       const importFolder = createButton(document, "导入当前收藏夹全部达人");
       importFolder.dataset.scesFavoritesDrawer = "import-folder";
-      importFolder.disabled = busy;
+      importFolder.disabled = isInteractionLocked();
       applySecondaryButtonStyles(importFolder);
+      applyFooterActionStyles(importFolder);
       actions.append(importFolder);
     }
 
     const importSelected = createButton(document, `导入已选 ${selectedCount} 位达人`);
     importSelected.dataset.scesFavoritesDrawer = "import-selected";
-    importSelected.disabled = busy || selectedCount === 0;
+    importSelected.disabled = isInteractionLocked() || selectedCount === 0;
     applyPrimaryButtonStyles(importSelected);
+    applyFooterActionStyles(importSelected);
     actions.append(importSelected);
 
     footer.append(selected, actions);
@@ -457,7 +491,7 @@ export function createFavoritesDrawer(
 
   function creatorsInCurrentView(): FavoriteCreator[] {
     const uniqueCreators = new Map<string, FavoriteCreator>();
-    if (view === "all") {
+    if (view.kind === "all") {
       state.creators.forEach((creator) => {
         if (!uniqueCreators.has(creator.authorId)) {
           uniqueCreators.set(creator.authorId, creator);
@@ -472,8 +506,12 @@ export function createFavoritesDrawer(
         creatorsById.set(creator.authorId, creator);
       }
     });
+    const folderId = view.folderId;
     state.memberships.forEach((membership) => {
-      if (membership.folderId !== view || uniqueCreators.has(membership.authorId)) {
+      if (
+        membership.folderId !== folderId ||
+        uniqueCreators.has(membership.authorId)
+      ) {
         return;
       }
       const creator = creatorsById.get(membership.authorId);
@@ -503,14 +541,138 @@ export function createFavoritesDrawer(
     return Array.from(names);
   }
 
-  function invokeHandler(handler: () => Promise<void>): void {
-    if (busy || disposed) {
+  function captureFocusedControl(): DrawerFocusDescriptor | null {
+    const activeElement = document.activeElement;
+    if (!(activeElement instanceof HTMLElement) || !drawer.contains(activeElement)) {
+      return null;
+    }
+    if (
+      activeElement instanceof HTMLInputElement &&
+      activeElement.dataset.scesFavoritesDrawer === "search"
+    ) {
+      return {
+        end: activeElement.selectionEnd,
+        kind: "search",
+        start: activeElement.selectionStart
+      };
+    }
+    if (
+      activeElement instanceof HTMLInputElement &&
+      activeElement.type === "checkbox" &&
+      activeElement.hasAttribute("data-sces-favorites-select-author-id")
+    ) {
+      return {
+        authorId:
+          activeElement.getAttribute("data-sces-favorites-select-author-id") ?? "",
+        kind: "checkbox"
+      };
+    }
+    if (activeElement instanceof HTMLButtonElement) {
+      if (activeElement.hasAttribute("data-sces-favorites-folder-id")) {
+        return {
+          folderId:
+            activeElement.getAttribute("data-sces-favorites-folder-id") ?? "",
+          kind: "folder"
+        };
+      }
+      const actionAttribute = [
+        "data-sces-favorites-drawer",
+        "data-sces-favorites-folder-delete",
+        "data-sces-favorites-folder-rename",
+        "data-sces-favorites-remove-author-id"
+      ].find((attribute) => activeElement.hasAttribute(attribute));
+      if (actionAttribute) {
+        return {
+          attribute: actionAttribute,
+          kind: "attribute",
+          value: activeElement.getAttribute(actionAttribute) ?? ""
+        };
+      }
+    }
+    return null;
+  }
+
+  function restoreFocusedControl(descriptor: DrawerFocusDescriptor | null): void {
+    if (!descriptor) {
       return;
     }
-    void handler().catch((error: unknown) => {
-      errorMessage = error instanceof Error ? error.message : "操作失败";
-      renderDrawer();
-    });
+
+    let target: HTMLElement | undefined;
+    if (descriptor.kind === "search") {
+      const search = drawer.querySelector(
+        '[data-sces-favorites-drawer="search"]'
+      );
+      if (search instanceof HTMLInputElement) {
+        target = search;
+        const start = Math.min(
+          descriptor.start ?? search.value.length,
+          search.value.length
+        );
+        const end = Math.min(descriptor.end ?? start, search.value.length);
+        search.setSelectionRange(start, end);
+      }
+    } else if (descriptor.kind === "checkbox") {
+      target = findElementByAttribute(
+        "data-sces-favorites-select-author-id",
+        descriptor.authorId
+      );
+    } else if (descriptor.kind === "folder") {
+      target = findElementByAttribute(
+        "data-sces-favorites-folder-id",
+        descriptor.folderId
+      );
+    } else {
+      target = findElementByAttribute(descriptor.attribute, descriptor.value);
+    }
+
+    if (target && isFocusable(target)) {
+      target.focus();
+      return;
+    }
+
+    const fallbackSearch = drawer.querySelector(
+      '[data-sces-favorites-drawer="search"]'
+    );
+    if (fallbackSearch instanceof HTMLInputElement && !fallbackSearch.disabled) {
+      fallbackSearch.focus();
+    }
+  }
+
+  function findElementByAttribute(attribute: string, value: string): HTMLElement | undefined {
+    return Array.from(drawer.querySelectorAll<HTMLElement>(`[${attribute}]`)).find(
+      (element) => element.getAttribute(attribute) === value
+    );
+  }
+
+  function isFocusable(element: HTMLElement): boolean {
+    return !(
+      (element instanceof HTMLButtonElement || element instanceof HTMLInputElement) &&
+      element.disabled
+    );
+  }
+
+  function invokeHandler(handler: () => Promise<void>): void {
+    if (isInteractionLocked() || disposed) {
+      return;
+    }
+    pending = true;
+    renderDrawer();
+    void (async () => {
+      try {
+        await handler();
+      } catch (error: unknown) {
+        errorMessage = error instanceof Error ? error.message : "操作失败";
+      } finally {
+        pending = false;
+        if (!disposed) {
+          renderDrawer();
+        }
+      }
+    })();
+  }
+
+  function isInteractionLocked(): boolean {
+    return busy || pending;
   }
 
   function dispose(): void {
@@ -522,7 +684,7 @@ export function createFavoritesDrawer(
     drawer.removeEventListener("click", onDrawerClick);
     drawer.removeEventListener("input", onDrawerInput);
     drawer.removeEventListener("change", onDrawerChange);
-    document.removeEventListener("keydown", onDocumentKeydown);
+    document.removeEventListener("keydown", onDocumentKeydown, true);
     tab.remove();
     drawer.remove();
     if (activeDrawers.get(document) === controller) {
@@ -706,13 +868,19 @@ function applyFooterStyles(footer: HTMLElement): void {
   footer.style.display = "flex";
   footer.style.alignItems = "center";
   footer.style.justifyContent = "space-between";
+  footer.style.flexWrap = "wrap";
   footer.style.gap = "12px";
   footer.style.padding = "12px 16px";
+  footer.style.width = "100%";
+  footer.style.minWidth = "0";
+  footer.style.boxSizing = "border-box";
   footer.style.borderTop = "1px solid #e2e8f0";
 }
 
 function applySelectedCountStyles(selected: HTMLElement): void {
-  selected.style.flex = "0 0 auto";
+  selected.style.flex = "1 1 100%";
+  selected.style.minWidth = "0";
+  selected.style.boxSizing = "border-box";
   selected.style.color = "#475569";
   selected.style.fontSize = "12px";
 }
@@ -721,8 +889,19 @@ function applyFooterActionsStyles(actions: HTMLElement): void {
   actions.style.display = "flex";
   actions.style.alignItems = "center";
   actions.style.justifyContent = "flex-end";
+  actions.style.flexWrap = "wrap";
   actions.style.gap = "8px";
   actions.style.minWidth = "0";
+  actions.style.width = "100%";
+  actions.style.boxSizing = "border-box";
+}
+
+function applyFooterActionStyles(button: HTMLButtonElement): void {
+  button.style.flex = "1 1 100%";
+  button.style.width = "100%";
+  button.style.minWidth = "0";
+  button.style.maxWidth = "100%";
+  button.style.boxSizing = "border-box";
 }
 
 function applyErrorStyles(error: HTMLElement): void {
@@ -743,6 +922,8 @@ function applySecondaryButtonStyles(button: HTMLButtonElement): void {
   button.style.color = "#334155";
   button.style.cursor = "pointer";
   button.style.fontSize = "12px";
+  button.style.boxSizing = "border-box";
+  button.style.maxWidth = "100%";
 }
 
 function applyPrimaryButtonStyles(button: HTMLButtonElement): void {
@@ -754,6 +935,8 @@ function applyPrimaryButtonStyles(button: HTMLButtonElement): void {
   button.style.color = "#ffffff";
   button.style.cursor = "pointer";
   button.style.fontSize = "12px";
+  button.style.boxSizing = "border-box";
+  button.style.maxWidth = "100%";
 }
 
 function applyIconButtonStyles(button: HTMLButtonElement): void {