Fix: QOL Animation on Extensions

src/features/extensions/components/ExtensionCard.svelte

@@ -9,11 +9,12 @@
     variants: Extension[];
     expanded: boolean;
     working:  Set<string>;
+    anims:    boolean;
     onToggle: (base: string) => void;
     onMutate: (pkgName: string, op: "install" | "update" | "uninstall") => void;
   }
 
-  let { base, primary, variants, expanded, working, onToggle, onMutate }: Props = $props();
+  let { base, primary, variants, expanded, working, anims, onToggle, onMutate }: Props = $props();
 
   const hasVariants = $derived(variants.length > 0);
 </script>
@@ -56,7 +57,7 @@
   </div>
 
   {#if expanded && hasVariants}
-    <div class="variants">
+    <div class="variants" class:variants-anim={anims}>
       {#each variants as v}
         <div class="variant-row">
           <span class="lang-tag">{v.lang.toUpperCase()}</span>
@@ -98,7 +99,9 @@
   .expand-btn { display: flex; align-items: center; gap: 3px; padding: 4px 6px; border-radius: var(--radius-sm); color: var(--text-faint); flex-shrink: 0; transition: color var(--t-base), background var(--t-base); }
   .expand-btn:hover { color: var(--text-muted); background: var(--bg-overlay); }
   .expand-count { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); }
-  .variants { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 2px calc(32px + var(--sp-3) + var(--sp-3)); padding-left: var(--sp-3); border-left: 1px solid var(--border-dim); animation: fadeIn 0.1s ease both; }
+  .variants { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 2px calc(32px + var(--sp-3) + var(--sp-3)); padding-left: var(--sp-3); border-left: 1px solid var(--border-dim); }
+  .variants-anim { animation: slideDown 0.18s cubic-bezier(0.16,1,0.3,1) both; }
+  @keyframes slideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
   .variant-row { display: flex; align-items: center; gap: var(--sp-2); padding: 5px var(--sp-2); border-radius: var(--radius-md); transition: background var(--t-fast); }
   .variant-row:hover { background: var(--bg-raised); }
   .variant-name { flex: 1; font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

src/features/extensions/components/Extensions.svelte

@@ -61,7 +61,10 @@
     const d = await gql<{ fetchExtensions: { extensions: Extension[] } }>(FETCH_EXTENSIONS)
       .catch(console.error)
       .finally(() => refreshing = false);
-    if (d) extensions = d.fetchExtensions.extensions;
+    if (d) {
+      extensions = d.fetchExtensions.extensions;
+      addToast({ kind: "success", title: "Extensions refreshed", body: "Extension list is up to date" });
+    }
   }
 
   async function loadRepos() {
@@ -73,11 +76,15 @@
     finally { reposLoading = false; }
   }
 
-  async function saveRepos(updated: string[]) {
+  async function saveRepos(updated: string[], intent: "add" | "remove") {
     savingRepos = true;
     try {
       const d = await gql<{ setSettings: { settings: { extensionRepos: string[] } } }>(SET_EXTENSION_REPOS, { repos: updated });
       repos = d.setSettings.settings.extensionRepos;
+      addToast(intent === "add"
+        ? { kind: "success", title: "Repo added",   body: updated[updated.length - 1] }
+        : { kind: "info",    title: "Repo removed", body: repos.find(r => !updated.includes(r)) ?? "" }
+      );
     } catch (e: any) {
       repoError = e instanceof Error ? e.message : "Failed to save";
     } finally { savingRepos = false; }
@@ -89,10 +96,10 @@
     if (err) { repoError = err; return; }
     if (repos.includes(url)) { repoError = "Repo already added"; return; }
     repoError = null; newRepoUrl = "";
-    saveRepos([...repos, url]);
+    saveRepos([...repos, url], "add");
   }
 
-  function removeRepo(url: string) { saveRepos(repos.filter((r) => r !== url)); }
+  function removeRepo(url: string) { saveRepos(repos.filter((r) => r !== url), "remove"); }
 
   async function mutate(pkgName: string, op: "install" | "update" | "uninstall") {
     working = new Set(working).add(pkgName);
@@ -176,7 +183,23 @@
 
   const updateCount = $derived(extensions.filter((e) => e.hasUpdate).length);
 
-  $effect(() => { untrack(() => { loadLocalManga(); fetchFromRepo().finally(() => { loading = false; }); }); });
+  $effect(() => {
+    untrack(async () => {
+      loadLocalManga();
+      await load();
+      loading = false;
+      fetchFromRepo();
+    });
+  });
+
+  $effect(() => {
+    if (!panel) return;
+    function onMouseDown(e: MouseEvent) {
+      if (!(e.target as HTMLElement).closest(".ext-panel, .icon-btn")) panel = null;
+    }
+    document.addEventListener("mousedown", onMouseDown, true);
+    return () => document.removeEventListener("mousedown", onMouseDown, true);
+  });
 
   function focusOnMount(node: HTMLElement) { node.focus(); }
 </script>
@@ -194,10 +217,9 @@
   />
 
   {#if panel === "apk"}
-    <div class="ext-panel anim-fade-in">
+    <div class="ext-panel" class:ext-panel-anim={anims}>
       <div class="panel-header">
-        <span class="panel-title">Install from APK URL</span>
+        <span class="panel-title-wrap"><span class="panel-title">Install from APK URL</span></span>
-        <button class="icon-btn" onclick={() => panel = null}><X size={14} weight="light" /></button>
       </div>
       <div class="ext-row">
         <input
@@ -220,10 +242,9 @@
   {/if}
 
   {#if panel === "repos"}
-    <div class="ext-panel anim-fade-in">
+    <div class="ext-panel" class:ext-panel-anim={anims}>
       <div class="panel-header">
-        <span class="panel-title">Extension Repositories</span>
+        <span class="panel-title-wrap"><span class="panel-title">Extension Repositories</span></span>
-        <button class="icon-btn" onclick={() => panel = null}><X size={14} weight="light" /></button>
       </div>
       {#if reposLoading}
         <div class="repo-loading"><CircleNotch size={14} weight="light" class="anim-spin" style="color:var(--text-faint)" /></div>
@@ -242,7 +263,7 @@
             {/each}
           </div>
         {/if}
-        <div class="ext-row" style="margin-top:var(--sp-2)">
+        <div class="ext-row">
           <input
             class="ext-input" class:error={repoError}
             placeholder="https://example.com/index.min.json"
@@ -275,7 +296,7 @@
       {/if}
       {#each groups as { base, primary, variants }}
         <ExtensionCard
-          {base} {primary} {variants} {working}
+          {base} {primary} {variants} {working} {anims}
           expanded={expanded.has(base)}
           onToggle={toggleExpand}
           onMutate={mutate}
@@ -294,26 +315,29 @@
   .empty { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
   .icon-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--text-muted); transition: color var(--t-base), background var(--t-base); }
   .icon-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); }
-  .ext-panel { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-6) var(--sp-3); flex-shrink: 0; }
+  .ext-panel { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); flex-shrink: 0; border-bottom: 1px solid var(--border-dim); background: var(--bg-raised); opacity: 1; }
-  .panel-header { display: flex; align-items: center; justify-content: space-between; }
+  .ext-panel-anim { animation: panelSlide 0.18s cubic-bezier(0.16,1,0.3,1) both; }
-  .panel-title { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); }
+  .panel-header { display: flex; align-items: center; padding-bottom: var(--sp-1); }
+  .panel-title-wrap { display: inline-flex; align-items: center; background: var(--bg-overlay); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); padding: 2px 8px; }
+  .panel-title { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-muted); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
   .panel-error { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-error); letter-spacing: var(--tracking-wide); padding: 0 2px; }
   .ext-row { display: flex; gap: var(--sp-2); }
-  .ext-input { flex: 1; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 6px var(--sp-3); color: var(--text-primary); font-size: var(--text-sm); outline: none; transition: border-color var(--t-base); }
+  .ext-input { flex: 1; background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 6px var(--sp-3); color: var(--text-primary); font-size: var(--text-sm); outline: none; transition: border-color var(--t-base); }
   .ext-input:focus { border-color: var(--border-focus); }
   .ext-input:disabled { opacity: 0.5; }
   .ext-input.error { border-color: var(--color-error) !important; }
   .install-btn { display: flex; align-items: center; gap: var(--sp-1); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 6px 14px; border-radius: var(--radius-md); background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); cursor: pointer; flex-shrink: 0; transition: filter var(--t-base), opacity var(--t-base); white-space: nowrap; }
-  .install-btn:hover:not(:disabled) { filter: brightness(1.1); }
+  .install-btn:hover:not(:disabled) { filter: brightness(1.15); }
   .install-btn:disabled { opacity: 0.5; cursor: default; }
   .install-btn.success { background: rgba(107,143,107,0.2); border-color: var(--accent-fg); color: var(--accent-fg); }
-  .repo-loading { display: flex; align-items: center; justify-content: center; padding: var(--sp-3); }
+  .repo-loading { display: flex; align-items: center; justify-content: center; padding: var(--sp-2); }
   .repo-empty { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); padding: var(--sp-1) 2px; }
-  .repo-list { display: flex; flex-direction: column; gap: 2px; }
+  .repo-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-2); }
-  .repo-row { display: flex; align-items: center; gap: var(--sp-2); padding: 5px var(--sp-2); border-radius: var(--radius-md); background: var(--bg-raised); border: 1px solid var(--border-dim); }
+  .repo-row { display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); border-radius: var(--radius-md); background: var(--bg-base); border: 1px solid var(--border-dim); }
-  .repo-url { flex: 1; font-size: var(--text-2xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .repo-url { flex: 1; font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: var(--tracking-wide); }
   .repo-remove { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-sm); color: var(--text-faint); flex-shrink: 0; transition: color var(--t-base), background var(--t-base); }
   .repo-remove:hover:not(:disabled) { color: var(--color-error); background: var(--bg-overlay); }
+  @keyframes panelSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
   .local-row { display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-3); border-radius: var(--radius-md); border: 1px solid transparent; transition: background var(--t-fast), border-color var(--t-fast); margin-bottom: 1px; }
   .local-row:hover { background: var(--bg-raised); border-color: var(--border-dim); }
   .local-icon { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--accent-muted); border: 1px solid var(--accent-dim); display: flex; align-items: center; justify-content: center; color: var(--accent-fg); flex-shrink: 0; }

src/shared/chrome/Toaster.svelte

@@ -102,7 +102,7 @@
   .toast-info     .icon { color: var(--text-muted); }
   .toast-download .icon { color: var(--accent-fg); }
 
-  .body  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+  .body  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
   .title { font-size: var(--text-xs); font-family: var(--font-ui); color: var(--text-secondary); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .sub   { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-</style>
+</style>