feat(deeplink): confirm routes for invite, plugin-install and snippet-install

src/app/App.tsx

@@ -33,7 +33,7 @@ import { TrialExpiredModal } from "@/components/shared/TrialExpiredModal";
 import CloudAuthModal from "@/components/layout/CloudAuthModal";
 import WhatsNewModal from "@/components/changelog/WhatsNewModal";
 import { EmailVerificationRequiredModal } from "@/components/notifications/EmailVerificationRequiredModal";
-import { DeepLinkJoinModal } from "@/components/terminal/DeepLinkJoinModal";
+import { DeepLinkConfirmModal } from "@/components/terminal/DeepLinkConfirmModal";
 import { useDeepLinkStore } from "@/stores/deepLinkStore";
 import { GlobalTransferQueue } from "@/components/filetransfer/GlobalTransferQueue";
 
@@ -85,7 +85,7 @@ function App() {
       <CloudAuthModal />
       <WhatsNewModal />
       <EmailVerificationRequiredModal />
-      <DeepLinkJoinModal />
+      <DeepLinkConfirmModal />
       <GlobalTransferQueue />
 
       {/* Global snippet variable modal — triggered from OmniSearch, the

src/components/settings/sections/PluginPermissionList.tsx

@@ -0,0 +1,104 @@
+import { Icon } from "@iconify/react";
+import { useTranslation } from "react-i18next";
+import { describePermissions, type PermissionDescriptor } from "@/plugins/gatedPermissions";
+
+interface Props {
+  /** All permissions the plugin will hold after this action. */
+  permissions: string[];
+  /** For updates: permissions newly requested by this version (subset of `permissions`). */
+  addedPermissions?: string[];
+  /** Labels the block as "new permissions" — an update gate, not a first install. */
+  showNewHeading?: boolean;
+}
+
+/**
+ * Discloses what a plugin's code will be allowed to do. Shared by the settings
+ * install/update gate and the deep-link install sheet, so a link-driven install
+ * cannot end up disclosing less than a click-driven one.
+ */
+export function PluginPermissionList({ permissions, addedPermissions = [], showNewHeading = false }: Props) {
+  const { t } = useTranslation();
+  const added = new Set(addedPermissions);
+
+  const descriptors = describePermissions(permissions);
+  const ordinary = descriptors.filter((d) => !d.gated);
+  const readOnly = descriptors.filter((d) => d.gated && !d.danger);
+  const danger = descriptors.filter((d) => d.danger);
+
+  const renderRow = (d: PermissionDescriptor) => {
+    const isNew = added.has(d.perm);
+    // Three tones, not two: a gated read-only perm is neither ordinary (it still
+    // needs consent) nor destructive. Accent-tinted, no warning triangle.
+    const elevated = d.gated && !d.danger;
+    return (
+      <div
+        key={d.perm}
+        className="flex flex-col gap-0.5 px-2.5 py-2 rounded-md"
+        style={
+          d.danger
+            ? { background: "color-mix(in srgb, var(--t-error, #ef4444) 12%, transparent)", border: "1px solid color-mix(in srgb, var(--t-error, #ef4444) 35%, transparent)" }
+            : elevated
+              ? { background: "color-mix(in srgb, var(--t-accent) 10%, transparent)", border: "1px solid color-mix(in srgb, var(--t-accent) 30%, transparent)" }
+              : { background: "var(--t-bg-base)" }
+        }
+      >
+        <div className="flex items-center gap-1.5 text-xs font-medium" style={{ color: d.danger ? "var(--t-error, #ef4444)" : elevated ? "var(--t-accent)" : "var(--t-text-bright)" }}>
+          {d.danger && <Icon icon="lucide:alert-triangle" width={12} />}
+          {elevated && <Icon icon="lucide:eye" width={12} />}
+          {isNew && <Icon icon="lucide:plus" width={11} />}
+          <span>{d.known ? t(d.labelKey) : d.perm}</span>
+        </div>
+        {d.known && (
+          <p className="text-xs" style={{ color: d.danger ? "color-mix(in srgb, var(--t-error, #ef4444) 85%, var(--t-text-secondary))" : elevated ? "color-mix(in srgb, var(--t-accent) 70%, var(--t-text-secondary))" : "var(--t-text-dim)" }}>
+            {t(d.descriptionKey)}
+          </p>
+        )}
+      </div>
+    );
+  };
+
+  if (descriptors.length === 0) {
+    return (
+      <p className="text-xs text-(--t-text-dim)">
+        {t("settings.plugins.permissionModal.noPermissions")}
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3 max-h-[22rem] overflow-y-auto">
+      {showNewHeading && (
+        <p className="text-xs font-medium text-(--t-text-dim)">
+          {t("settings.plugins.permissionModal.newPermissions")}
+        </p>
+      )}
+      {ordinary.length > 0 && (
+        <div className="flex flex-col gap-1.5">{ordinary.map(renderRow)}</div>
+      )}
+      {readOnly.length > 0 && (
+        <div className="flex flex-col gap-1.5">
+          <div className="flex items-center gap-1.5 text-xs font-semibold" style={{ color: "var(--t-accent)" }}>
+            <Icon icon="lucide:eye" width={13} />
+            {t("settings.plugins.permissionModal.permissions.readOnlyHeading")}
+          </div>
+          <p className="text-xs text-(--t-text-secondary)">
+            {t("settings.plugins.permissionModal.permissions.readOnlyWarning")}
+          </p>
+          {readOnly.map(renderRow)}
+        </div>
+      )}
+      {danger.length > 0 && (
+        <div className="flex flex-col gap-1.5">
+          <div className="flex items-center gap-1.5 text-xs font-semibold" style={{ color: "var(--t-error, #ef4444)" }}>
+            <Icon icon="lucide:alert-triangle" width={13} />
+            {t("settings.plugins.permissionModal.permissions.dangerHeading")}
+          </div>
+          <p className="text-xs text-(--t-text-secondary)">
+            {t("settings.plugins.permissionModal.permissions.dangerWarning")}
+          </p>
+          {danger.map(renderRow)}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/settings/sections/PluginPermissionModal.tsx

@@ -1,7 +1,7 @@
 import { Icon } from "@iconify/react";
 import { useTranslation } from "react-i18next";
 import { Modal, ModalCard } from "@/components/shared/Modal";
-import { describePermissions, type PermissionDescriptor } from "@/plugins/gatedPermissions";
+import { PluginPermissionList } from "@/components/settings/sections/PluginPermissionList";
 
 interface Props {
   mode: "install" | "update";
@@ -29,46 +29,8 @@ export function PluginPermissionModal({
   onCancel,
 }: Props) {
   const { t } = useTranslation();
-  const added = new Set(addedPermissions);
   const isUpdate = mode === "update";
 
-  const descriptors = describePermissions(permissions);
-  const ordinary = descriptors.filter((d) => !d.gated);
-  const readOnly = descriptors.filter((d) => d.gated && !d.danger);
-  const danger = descriptors.filter((d) => d.danger);
-
-  const renderRow = (d: PermissionDescriptor) => {
-    const isNew = added.has(d.perm);
-    // Three tones, not two: a gated read-only perm is neither ordinary (it still
-    // needs consent) nor destructive. Accent-tinted, no warning triangle.
-    const elevated = d.gated && !d.danger;
-    return (
-      <div
-        key={d.perm}
-        className="flex flex-col gap-0.5 px-2.5 py-2 rounded-md"
-        style={
-          d.danger
-            ? { background: "color-mix(in srgb, var(--t-error, #ef4444) 12%, transparent)", border: "1px solid color-mix(in srgb, var(--t-error, #ef4444) 35%, transparent)" }
-            : elevated
-              ? { background: "color-mix(in srgb, var(--t-accent) 10%, transparent)", border: "1px solid color-mix(in srgb, var(--t-accent) 30%, transparent)" }
-              : { background: "var(--t-bg-base)" }
-        }
-      >
-        <div className="flex items-center gap-1.5 text-xs font-medium" style={{ color: d.danger ? "var(--t-error, #ef4444)" : elevated ? "var(--t-accent)" : "var(--t-text-bright)" }}>
-          {d.danger && <Icon icon="lucide:alert-triangle" width={12} />}
-          {elevated && <Icon icon="lucide:eye" width={12} />}
-          {isNew && <Icon icon="lucide:plus" width={11} />}
-          <span>{d.known ? t(d.labelKey) : d.perm}</span>
-        </div>
-        {d.known && (
-          <p className="text-xs" style={{ color: d.danger ? "color-mix(in srgb, var(--t-error, #ef4444) 85%, var(--t-text-secondary))" : elevated ? "color-mix(in srgb, var(--t-accent) 70%, var(--t-text-secondary))" : "var(--t-text-dim)" }}>
-            {t(d.descriptionKey)}
-          </p>
-        )}
-      </div>
-    );
-  };
-
   return (
     <Modal onClose={onCancel} onEnter={onConfirm}>
       <ModalCard className="p-6 flex flex-col gap-4 min-w-[21.333rem] max-w-[26.667rem]">
@@ -92,46 +54,11 @@ export function PluginPermissionModal({
             : t("settings.plugins.permissionModal.installBody")}
         </p>
 
-        {descriptors.length === 0 ? (
-          <p className="text-xs text-(--t-text-dim)">
-            {t("settings.plugins.permissionModal.noPermissions")}
-          </p>
-        ) : (
-          <div className="flex flex-col gap-3 max-h-[22rem] overflow-y-auto">
-            {isUpdate && (
-              <p className="text-xs font-medium text-(--t-text-dim)">
-                {t("settings.plugins.permissionModal.newPermissions")}
-              </p>
-            )}
-            {ordinary.length > 0 && (
-              <div className="flex flex-col gap-1.5">{ordinary.map(renderRow)}</div>
-            )}
-            {readOnly.length > 0 && (
-              <div className="flex flex-col gap-1.5">
-                <div className="flex items-center gap-1.5 text-xs font-semibold" style={{ color: "var(--t-accent)" }}>
-                  <Icon icon="lucide:eye" width={13} />
-                  {t("settings.plugins.permissionModal.permissions.readOnlyHeading")}
-                </div>
-                <p className="text-xs text-(--t-text-secondary)">
-                  {t("settings.plugins.permissionModal.permissions.readOnlyWarning")}
-                </p>
-                {readOnly.map(renderRow)}
-              </div>
-            )}
-            {danger.length > 0 && (
-              <div className="flex flex-col gap-1.5">
-                <div className="flex items-center gap-1.5 text-xs font-semibold" style={{ color: "var(--t-error, #ef4444)" }}>
-                  <Icon icon="lucide:alert-triangle" width={13} />
-                  {t("settings.plugins.permissionModal.permissions.dangerHeading")}
-                </div>
-                <p className="text-xs text-(--t-text-secondary)">
-                  {t("settings.plugins.permissionModal.permissions.dangerWarning")}
-                </p>
-                {danger.map(renderRow)}
-              </div>
-            )}
-          </div>
-        )}
+        <PluginPermissionList
+          permissions={permissions}
+          addedPermissions={addedPermissions}
+          showNewHeading={isUpdate}
+        />
 
         <div className="flex gap-2 justify-end">
           <button onClick={onCancel} className="btn btn-secondary px-4 py-2 rounded-lg text-sm font-medium">

src/components/snippets/community/useCommunityInstall.ts

@@ -1,42 +1,23 @@
 import { useState } from "react";
-import { useImportStores, useReloadFns } from "@/components/import-export/useStores";
-import { useAllSnippets } from "@/hooks/useAllSnippets";
 import { useVaultStore } from "@/stores/vaultStore";
-import { runImport, reloadAll } from "@/services/import-export/registry";
-import { bundleFromEntries, type EntrySelection } from "@/services/snippetCatalogInstall";
+import { installCatalogEntries, type EntrySelection } from "@/services/snippetCatalogInstall";
+import { resolveInstallVault } from "@/services/import-export/storeAccess";
 
 export function useInstallTargetVault() {
   const selectedVaultIds = useVaultStore(s => s.selectedVaultIds);
   const vaults = useVaultStore(s => s.vaults);
-  const id = selectedVaultIds[0] ?? "personal";
-  return { id, name: vaults.find(v => v.id === id)?.name ?? id };
+  return resolveInstallVault({ selectedVaultIds, vaults });
 }
 
 export function useCommunityInstall() {
-  const stores = useImportStores();
-  const reloaders = useReloadFns();
-  const existingSnippets = useAllSnippets();
   const vault = useInstallTargetVault();
   const [installing, setInstalling] = useState(false);
 
   async function install(selections: EntrySelection[]) {
     setInstalling(true);
     try {
-      // The folder a pack lands in is created by runImport, before the snippets
-      // that reference it — calling the handler directly would drop folder_id.
-      return await runImport(bundleFromEntries(selections), {
-        vault_id: vault.id,
-        tag: "",
-        skipDupes: true,
-        existingConnections: [], existingKeys: [], existingIdentities: [],
-        existingSnippets,
-        existingPfRules: [],
-        folderEidMap: new Map(), snippetFolderEidMap: new Map(), keyEidMap: new Map(),
-        identityEidMap: new Map(), connectionEidMap: new Map(),
-        stores,
-      });
+      return await installCatalogEntries(selections, vault.id);
     } finally {
-      await reloadAll(reloaders);
       setInstalling(false);
     }
   }