Please address the comments from this code review:

## Overall Comments
- The async wrappers around `encodeShareCode`, `decodeShareCode`, and `parseShareCodeRepos` don’t perform any asynchronous work and could be simplified to synchronous functions to reduce unnecessary `await`s and make the call chain easier to follow.
- In share mode, the global `user-select: none` rules (e.g. `.share-mode-card * { user-select: none; }` and the table share-mode selectors) may unintentionally prevent copying text such as plugin names or URLs; consider scoping these styles more narrowly to avoid blocking normal text selection where it’s still useful.
- The sequential `for...of` loop in `installFromShareCode` can make importing many repos slow; consider switching to a `Promise.allSettled` pattern to perform installs in parallel while still collecting per-repo failures for the summary.

## Individual Comments

### Comment 1
<location path="dashboard/src/views/extension/useExtensionPage.js" line_range="149" />
<code_context>
+    isShareMode.value = true;
+    selectedSharePluginNames.value = new Set();
+  };
+  const encodeShareCode = async (payload) => {
+    const rawJson = JSON.stringify(payload);
+    const compressed = compressToEncodedURIComponent(rawJson);
</code_context>
<issue_to_address>
**issue (complexity):** Consider simplifying the new share-code feature by making its helpers synchronous, centralizing Set manipulation, and extracting the batch install loop into a small helper for clearer flow.

You can keep the new feature as-is functionally while reducing complexity in a few tight spots.

### 1. Remove unnecessary `async` from pure helpers

`encodeShareCode`, `decodeShareCode`, and `parseShareCodeRepos` are synchronous. Making them sync reduces mental overhead and simplifies call sites.

```js
// keep at top-level in this file or move to a separate util later
const encodeShareCode = (payload) => {
  const rawJson = JSON.stringify(payload);
  const compressed = compressToEncodedURIComponent(rawJson);
  if (!compressed) return rawJson;
  return `${SHARE_CODE_LZ_PREFIX}${compressed}`;
};

const decodeShareCode = (rawCode) => {
  if (rawCode.startsWith(SHARE_CODE_LZ_PREFIX)) {
    const encodedPart = rawCode.slice(SHARE_CODE_LZ_PREFIX.length);
    const decompressed = decompressFromEncodedURIComponent(encodedPart);
    if (!decompressed) {
      throw new Error("Invalid lz share code");
    }
    return decompressed;
  }
  return rawCode;
};

const parseShareCodeRepos = (rawCode) => {
  const decodedContent = decodeShareCode(rawCode);
  const parsed = JSON.parse(decodedContent);
  const repos = Array.isArray(parsed?.repos) ? parsed.repos : [];
  return repos
    .filter((repo) => typeof repo === "string")
    .map((repo) => repo.trim())
    .filter((repo) => repo.length > 0);
};
```

Then call them synchronously:

```js
const confirmShareSelection = async () => {
  // ...
  const shareCode = encodeShareCode({ repos: uniqueRepos });
  // ...
};

const installFromShareCode = async (ignoreVersionCheck = false) => {
  // ...
  let repos = [];
  try {
    repos = parseShareCodeRepos(rawCode);
  } catch (error) {
    toast(tm("messages.invalidShareCode"), "error");
    return;
  }
  // ...
};
```

### 2. DRY up `Set` mutation / guard logic for share selection

The `selectedSharePluginNames` manipulation and guard checks are repeated across multiple functions. A tiny helper keeps those patterns in one place and shrinks the toggles.

```js
const selectedSharePluginNames = ref(new Set());

const updateSelectedSharePlugins = (updater) => {
  const next = new Set(selectedSharePluginNames.value);
  updater(next);
  selectedSharePluginNames.value = next;
};

const normalizePluginNames = (pluginNames = []) =>
  pluginNames.filter((name) => typeof name === "string" && name.length > 0);

const toggleSharePluginSelection = (pluginName) => {
  if (!isShareMode.value || !pluginName) return;

  updateSelectedSharePlugins((set) => {
    if (set.has(pluginName)) set.delete(pluginName);
    else set.add(pluginName);
  });
};

const toggleShareSelectAll = (pluginNames = []) => {
  if (!isShareMode.value) return;

  const names = normalizePluginNames(pluginNames);
  if (names.length === 0) return;

  const allSelected = names.every((name) =>
    selectedSharePluginNames.value.has(name),
  );

  updateSelectedSharePlugins((set) => {
    if (allSelected) {
      names.forEach((name) => set.delete(name));
    } else {
      names.forEach((name) => set.add(name));
    }
  });
};

const areAllSharePluginsSelected = (pluginNames = []) => {
  const names = normalizePluginNames(pluginNames);
  if (names.length === 0) return false;
  return names.every((name) => selectedSharePluginNames.value.has(name));
};

const isSharePluginSelected = (pluginName) =>
  !!pluginName && selectedSharePluginNames.value.has(pluginName);
```

This keeps all the cloning/assignment logic in one place and centralizes name validation.

### 3. Extract the core install loop from `installFromShareCode`

`installFromShareCode` currently mixes parsing, state management, and the install loop. Pulling the loop into a small helper makes the top-level flow easier to scan without changing behavior.

```js
const installReposBatch = async (repos, { ignoreVersionCheck }) => {
  const failedItems = [];
  let successCount = 0;
  const previousExtensionUrl = extension_url.value;

  try {
    for (const repoUrl of repos) {
      extension_url.value = repoUrl;
      const res = await performInstallRequest({
        source: "url",
        ignoreVersionCheck,
      });
      const resData = res.data || {};
      if (resData.status === "ok") {
        successCount += 1;
      } else {
        failedItems.push({
          url: repoUrl,
          message: resData.message || tm("messages.installFailed"),
        });
      }
    }
  } catch (err) {
    failedItems.push({
      url: extension_url.value || tm("status.unknown"),
      message: resolveErrorMessage(err, tm("messages.installFailed")),
    });
  } finally {
    extension_url.value = previousExtensionUrl;
  }

  return { successCount, failedItems };
};

const installFromShareCode = async (ignoreVersionCheck = false) => {
  const rawCode = (shareCodeInput.value ?? "").trim();
  if (!rawCode) {
    toast(tm("messages.fillShareCode"), "error");
    return;
  }

  let repos = [];
  try {
    repos = parseShareCodeRepos(rawCode);
  } catch {
    toast(tm("messages.invalidShareCode"), "error");
    return;
  }

  const uniqueRepos = [...new Set(repos)];
  if (uniqueRepos.length === 0) {
    toast(tm("messages.noRepoInShareCode"), "error");
    return;
  }

  loading_.value = true;
  loadingDialog.title = tm("status.loading");
  loadingDialog.show = true;

  const { successCount, failedItems } = await installReposBatch(uniqueRepos, {
    ignoreVersionCheck,
  });

  loading_.value = false;

  // rest of the success/partial/failure UI handling stays the same
};
```

These changes keep all existing functionality but make the share-code logic more focused and easier to maintain.
</issue_to_address>

Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="dashboard/src/views/extension/useExtensionPage.js" line_range="135" />
<code_context>
     return false;
   };
   const showReserved = ref(getInitialShowReserved());
+  const isShareMode = ref(false);
+  const selectedSharePluginNames = ref(new Set());
+  const cancelShareMode = () => {
</code_context>
<issue_to_address>
**issue (complexity):** Consider extracting the new share-selection, share-code, and batch-install logic into dedicated composables/helpers so `useExtensionPage` only coordinates high-level behavior instead of managing low-level details.

The added share + batch-install logic significantly increases `useExtensionPage`’s responsibilities. You can keep all behavior while reducing complexity by extracting a few focused helpers/composables and hiding low-level details.

### 1. Extract share-selection into a small helper

All the `Set`-management logic can be encapsulated so the page just uses a small API:

```ts
// useSelectionSet.ts
import { ref, computed } from "vue";

export const useSelectionSet = () => {
  const selected = ref(new Set<string>());

  const clear = () => { selected.value = new Set(); };

  const toggle = (name?: string) => {
    if (!name) return;
    const next = new Set(selected.value);
    if (next.has(name)) next.delete(name);
    else next.add(name);
    selected.value = next;
  };

  const toggleAll = (items: string[]) => {
    const names = items.filter(Boolean);
    if (!names.length) return;
    const allSelected = names.every((n) => selected.value.has(n));
    const next = new Set(selected.value);
    if (allSelected) names.forEach((n) => next.delete(n));
    else names.forEach((n) => next.add(n));
    selected.value = next;
  };

  const areAllSelected = (items: string[]) =>
    items.length > 0 && items.every((n) => selected.value.has(n));

  const isSelected = (name?: string) =>
    !!name && selected.value.has(name);

  const count = computed(() => selected.value.size);

  return {
    selected,
    clear,
    toggle,
    toggleAll,
    areAllSelected,
    isSelected,
    count,
  };
};
```

Then in `useExtensionPage` you can thin the share-related surface:

```ts
const isShareMode = ref(false);
const {
  selected: selectedSharePluginNames,
  clear: clearShareSelection,
  toggle: toggleSharePluginSelection,
  toggleAll: toggleShareSelectAll,
  areAllSelected: areAllSharePluginsSelected,
  isSelected: isSharePluginSelected,
  count: selectedSharePluginCount,
} = useSelectionSet();

const cancelShareMode = () => {
  isShareMode.value = false;
  clearShareSelection();
};

const toggleShareMode = () => {
  if (isShareMode.value) {
    cancelShareMode();
  } else {
    isShareMode.value = true;
    clearShareSelection();
  }
};
```

You can now drop `normalizePluginNames`, `updateSelectedSharePlugins`, and reduce the number of share-selection helpers.

### 2. Consolidate share-code encode/decode/parse

Instead of `encodeShareCode`, `decodeShareCode`, and `parseShareCodeRepos` spread across the composable, you can centralize them:

```ts
// useExtensionShareCode.ts
import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from "lz-string";

const SHARE_CODE_LZ_PREFIX = "astrbot-share:";

export const useExtensionShareCode = () => {
  const encode = (repos: string[]) => {
    const normalized = [...new Set(
      (repos || [])
        .filter((r) => typeof r === "string")
        .map((r) => r.trim())
        .filter(Boolean),
    )].sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }));

    const rawJson = JSON.stringify({ repos: normalized });
    const compressed = compressToEncodedURIComponent(rawJson);
    if (!compressed) return rawJson;
    return `${SHARE_CODE_LZ_PREFIX}${compressed}`;
  };

  const decode = (code: string): string[] => {
    const raw = code.startsWith(SHARE_CODE_LZ_PREFIX)
      ? (() => {
          const encoded = code.slice(SHARE_CODE_LZ_PREFIX.length);
          const decompressed = decompressFromEncodedURIComponent(encoded);
          if (!decompressed) throw new Error("Invalid lz share code");
          return decompressed;
        })()
      : code;

    const parsed = JSON.parse(raw);
    const repos = Array.isArray(parsed?.repos) ? parsed.repos : [];
    return repos
      .filter((r) => typeof r === "string")
      .map((r) => r.trim())
      .filter(Boolean);
  };

  return { encode, decode };
};
```

Usage in `useExtensionPage` becomes simpler and keeps JSON/compression details out of the main composable:

```ts
const { encode: encodeShareCode, decode: decodeShareCode } = useExtensionShareCode();

const confirmShareSelection = async () => {
  const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
  const selectedNames = selectedSharePluginNames.value;
  const repos = data
    .filter((ext) => selectedNames.has(ext.name))
    .map((ext) => (ext.repo ?? "").trim());

  const shareCode = encodeShareCode(repos);
  // clipboard + toast logic unchanged
};

const installFromShareCode = async (ignoreVersionCheck = false) => {
  const rawCode = (shareCodeInput.value ?? "").trim();
  if (!rawCode) {
    toast(tm("messages.fillShareCode"), "error");
    return;
  }

  let repos: string[];
  try {
    repos = decodeShareCode(rawCode);
  } catch {
    toast(tm("messages.invalidShareCode"), "error");
    return;
  }

  // continue with batch install using the repos
};
```

This eliminates `parseShareCodeRepos` entirely and removes duplicated repo normalization.

### 3. Decouple batch install logic from UI/progress

You can keep `installReposBatch` pure and move `tm`, `resolveErrorMessage`, and progress dialog concerns into the caller:

```ts
// batchInstall.ts
export type BatchResult = {
  successCount: number;
  failedItems: { url: string; message: string }[];
};

export const installReposBatch = async (
  repos: string[],
  {
    ignoreVersionCheck,
    performInstall,
    onProgress,
  }: {
    ignoreVersionCheck: boolean;
    performInstall: (url: string) => Promise<{ ok: boolean; message?: string }>;
    onProgress?: (info: { current: number; total: number; repoUrl: string }) => void;
  },
): Promise<BatchResult> => {
  let completedCount = 0;
  const tasks = repos.map(async (repoUrl) => {
    try {
      const res = await performInstall(repoUrl);
      return { success: res.ok, url: repoUrl, message: res.message };
    } finally {
      completedCount += 1;
      onProgress?.({ current: completedCount, total: repos.length, repoUrl });
    }
  });

  const settled = await Promise.allSettled(tasks);
  let successCount = 0;
  const failedItems: { url: string; message: string }[] = [];

  settled.forEach((r) => {
    if (r.status === "fulfilled") {
      if (r.value.success) successCount += 1;
      else failedItems.push({ url: r.value.url, message: r.value.message ?? "" });
    } else {
      failedItems.push({ url: "", message: "" }); // caller can decorate errors
    }
  });

  return { successCount, failedItems };
};
```

Then, in `useExtensionPage`, you adapt to your existing `performInstallRequest`, `tm`, and dialog state in a small wrapper, instead of embedding everything inside `installReposBatch`:

```ts
const performInstallUrl = async (repoUrl: string) => {
  try {
    const res = await performInstallRequest({
      source: "url",
      ignoreVersionCheck,
      url: repoUrl,
    });
    const resData = res.data || {};
    return {
      ok: resData.status === "ok",
      message: resData.message || tm("messages.installFailed"),
    };
  } catch (err) {
    return {
      ok: false,
      message: resolveErrorMessage(err, tm("messages.installFailed")),
    };
  }
};

const { successCount, failedItems } = await installReposBatch(uniqueRepos, {
  ignoreVersionCheck,
  performInstall: performInstallUrl,
  onProgress: ({ current, total, repoUrl }) => {
    loadingDialog.progressCurrent = current;
    loadingDialog.progressTotal = total;
    loadingDialog.progressLabel = repoUrl;
  },
});
```

This keeps `installReposBatch` reusable and testable, and `installFromShareCode` expresses only the high-level flow (prepare repos → show dialog → call batch helper → update UI), not the internal HTTP/error details.

These extractions preserve all behavior while making `useExtensionPage` less monolithic and easier to maintain.
</issue_to_address>

Please address the comments from this code review:

## Overall Comments
- The share-code logic (SHARE_CODE_LZ_PREFIX, encode/decode, parseShareCodeRepos) is fairly substantial inside useExtensionPage; consider extracting it into a small utility module and adding a version field to the payload to make future format changes easier and keep the composable focused on UI/state.
- The guard that skips selection toggling when there is highlighted text (window.getSelection()?.toString()) is duplicated in both card and table row handlers; you could extract this into a shared helper to avoid subtle behavior drift between views.
- installReposBatch currently fires all install requests in parallel, which could stress the backend for large share codes; consider adding a simple concurrency limit or sequential execution to better control load and progress reporting.

## Individual Comments

### Comment 1
<location path="dashboard/src/views/extension/useExtensionPage.js" line_range="135" />
<code_context>
     return false;
   };
   const showReserved = ref(getInitialShowReserved());
+  const isShareMode = ref(false);
+  const selectedSharePluginNames = ref(new Set());
+  const cancelShareMode = () => {
</code_context>
<issue_to_address>
**issue (complexity):** Consider refactoring the new share-selection, share-code, and loading-dialog progress logic into focused helpers/utilities to keep `useExtensionPage` smaller and easier to scan while preserving behavior.

You can keep all the new behavior but reduce complexity a bit by grouping tightly-related state and logic and simplifying a couple of helpers.

### 1. Group share-selection state into a small helper

Right now `isShareMode`, `selectedSharePluginNames`, `toggleShareMode`, `cancelShareMode`, `toggleSharePluginSelection`, `toggleShareSelectAll`, `areAllSharePluginsSelected`, `isSharePluginSelected`, `selectedSharePluginCount` and `normalizePluginNames` are all top-level in `useExtensionPage`.

You can move them into a small internal helper/composable to reduce the surface area of the main function, without changing behavior:

```js
// inside useExtensionPage.js
const useShareSelection = (toast, tm, extension_data) => {
  const isShareMode = ref(false);
  const selectedNames = ref(new Set());

  const reset = () => {
    isShareMode.value = false;
    selectedNames.value = new Set();
  };

  const toggleMode = () => {
    if (isShareMode.value) {
      reset();
    } else {
      isShareMode.value = true;
      selectedNames.value = new Set();
    }
  };

  const normalizeNames = (names = []) =>
    names.filter((name) => typeof name === "string" && name.length > 0);

  const togglePlugin = (pluginName) => {
    if (!isShareMode.value || !pluginName) return;
    const next = new Set(selectedNames.value);
    next.has(pluginName) ? next.delete(pluginName) : next.add(pluginName);
    selectedNames.value = next;
  };

  const toggleAll = (pluginNames = []) => {
    if (!isShareMode.value) return;
    const names = normalizeNames(pluginNames);
    if (names.length === 0) return;

    const allSelected = names.every((name) => selectedNames.value.has(name));
    const next = new Set(selectedNames.value);
    if (allSelected) {
      names.forEach((name) => next.delete(name));
    } else {
      names.forEach((name) => next.add(name));
    }
    selectedNames.value = next;
  };

  const allSelected = (pluginNames = []) => {
    const names = normalizeNames(pluginNames);
    if (names.length === 0) return false;
    return names.every((name) => selectedNames.value.has(name));
  };

  const isSelected = (pluginName) =>
    !!pluginName && selectedNames.value.has(pluginName);

  const selectedCount = computed(() => selectedNames.value.size);

  const confirmShareSelection = async () => {
    const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
    const repos = data
      .filter((ext) => selectedNames.value.has(ext.name))
      .map((ext) => (ext.repo ?? "").trim())
      .filter((r) => r.length > 0);
    const uniqueRepos = [...new Set(repos)].sort((a, b) =>
      a.localeCompare(b, undefined, { sensitivity: "base" }),
    );

    if (uniqueRepos.length === 0) {
      toast(tm("messages.noShareableRepos"), "warning");
      reset();
      return;
    }

    // reuse your existing encodeShareCode here
    const shareCode = encodeShareCode({ repos: uniqueRepos });
    try {
      if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
        throw new Error("Clipboard API unavailable");
      }
      await navigator.clipboard.writeText(shareCode);
      toast(tm("messages.shareCodeCopied"), "success");
    } catch (error) {
      toast(`${tm("messages.shareCodeCopyFailed")} ${shareCode}`, "warning");
      console.error("Failed to copy share code:", error);
    } finally {
      reset();
    }
  };

  return {
    isShareMode,
    selectedNames,
    selectedCount,
    toggleMode,
    reset,
    togglePlugin,
    toggleAll,
    allSelected,
    isSelected,
    confirmShareSelection,
  };
};
```

Then in `useExtensionPage` you only expose a small, coherent block:

```js
const {
  isShareMode,
  selectedNames: selectedSharePluginNames,
  selectedCount: selectedSharePluginCount,
  toggleMode: toggleShareMode,
  reset: cancelShareMode,
  togglePlugin: toggleSharePluginSelection,
  toggleAll: toggleShareSelectAll,
  allSelected: areAllSharePluginsSelected,
  isSelected: isSharePluginSelected,
  confirmShareSelection,
} = useShareSelection(toast, tm, extension_data);
```

This also makes `updateSelectedSharePlugins` unnecessary, since the `Set` cloning logic is localised and explicit in `togglePlugin` / `toggleAll`.

### 2. Extract share-code protocol into a utility

`encodeShareCode`, `decodeShareCode`, `parseShareCodeRepos` together define your “share code format”. Keeping that logic in the view composable makes `useExtensionPage` longer and harder to scan.

You can move the protocol into a small utility while preserving all behavior:

```js
// src/utils/shareCode.js
import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from "lz-string";

const SHARE_CODE_LZ_PREFIX = "astrbot-share:";

export const encodeShareCode = (payload) => {
  const rawJson = JSON.stringify(payload);
  const compressed = compressToEncodedURIComponent(rawJson);
  if (!compressed) return rawJson;
  return `${SHARE_CODE_LZ_PREFIX}${compressed}`;
};

export const decodeShareCode = (rawCode) => {
  if (rawCode.startsWith(SHARE_CODE_LZ_PREFIX)) {
    const encodedPart = rawCode.slice(SHARE_CODE_LZ_PREFIX.length);
    const decompressed = decompressFromEncodedURIComponent(encodedPart);
    if (!decompressed) throw new Error("Invalid lz share code");
    return decompressed;
  }
  return rawCode;
};

export const parseShareCodeRepos = (rawCode) => {
  const decodedContent = decodeShareCode(rawCode);
  const parsed = JSON.parse(decodedContent);
  const repos = Array.isArray(parsed?.repos) ? parsed.repos : [];
  return repos
    .filter((repo) => typeof repo === "string")
    .map((repo) => repo.trim())
    .filter((repo) => repo.length > 0);
};
```

Then `useExtensionPage` just does:

```js
import { encodeShareCode, parseShareCodeRepos } from "@/utils/shareCode";

// ... use encodeShareCode in confirmShareSelection
// ... use parseShareCodeRepos in installFromShareCode
```

This shrinks `useExtensionPage` and isolates protocol changes to one place.

### 3. Structure loading dialog progress as a nested object

The four progress fields on `loadingDialog` and their reset paths add more scattered mutable state. You can keep the UI exactly the same with a nested `progress` object and a factory:

```js
const defaultProgress = () => ({
  enabled: false,
  current: 0,
  total: 0,
  label: "",
});

const loadingDialog = reactive({
  show: false,
  title: "",
  statusCode: 0,
  result: "",
  progress: defaultProgress(),
});

const resetLoadingDialog = () => {
  Object.assign(loadingDialog, {
    show: false,
    title: tm("dialogs.loading.title"),
    statusCode: 0,
    result: "",
    progress: defaultProgress(),
  });
};

const onLoadingDialogResult = (statusCode, result, timeToClose = 2000) => {
  loadingDialog.statusCode = statusCode;
  loadingDialog.result = result;
  loadingDialog.progress.enabled = false;
  if (timeToClose === -1) return;
  setTimeout(resetLoadingDialog, timeToClose);
};
```

And update the batch install usage:

```js
loadingDialog.progress.enabled = true;
loadingDialog.progress.current = 0;
loadingDialog.progress.total = uniqueRepos.length;
loadingDialog.progress.label = "";

onProgress: ({ current, total, repoUrl }) => {
  loadingDialog.progress.current = current;
  loadingDialog.progress.total = total;
  loadingDialog.progress.label = repoUrl;
},
```

This keeps the behavior but makes the reactive surface smaller, and the reset logic centralized.
</issue_to_address>