feat(frontend): a finished action answers on the button that was pressed instead of a toast

frontend/src/lib/components/shares/ShareDialog.svelte

@@ -19,6 +19,7 @@
   import { formatShareLimits } from "#lib/format/shares.js";
   import { t } from "#lib/i18n/locale.svelte.js";
   import type { MessageKey } from "#lib/i18n/messages.js";
+  import { createFlash } from "#lib/stores/flash.svelte.js";
   import { toasts } from "#lib/stores/toasts.svelte.js";
 
   interface Props {
@@ -72,6 +73,8 @@
   let maxDownloads = $state<number | null>(null);
   let showQr = $state(false);
   let token = 0;
+  const saved = createFlash<number>();
+  const revoked = createFlash<ShareSubject>();
 
   const settings = $derived<ShareSettings>({
     expiresInSeconds: expiresIn === KEEP ? null : expiresIn,
@@ -125,7 +128,6 @@
     busy = true;
     try {
       adopt(await createShare(subject, settings));
-      toasts.success(t("shares.opened"));
     } catch (error) {
       fail(error, "shares.openFailed");
     } finally {
@@ -139,8 +141,9 @@
     }
     busy = true;
     try {
-      adopt(await updateShare(share.id, settings));
-      toasts.success(t("shares.updated"));
+      const next = await updateShare(share.id, settings);
+      adopt(next);
+      saved.show(next.id);
     } catch (error) {
       fail(error, "shares.updateFailed");
     } finally {
@@ -149,15 +152,15 @@
   }
 
   async function revoke() {
-    if (!share || busy) {
+    if (!(share && subject) || busy) {
       return;
     }
+    const target = subject;
     busy = true;
     try {
       await revokeShare(share.id);
       adopt(null);
-      toasts.success(t("shares.revokedToast"));
-      open = false;
+      revoked.show(target);
     } catch (error) {
       fail(error, "shares.revokeFailed");
     } finally {
@@ -314,12 +317,22 @@
 
       {#if !loading}
         <div class="dialog-actions">
-          {#if share}
+          {#if subject && revoked.current === subject}
+            <p class="done">
+              <Icon name="check" size="1.25rem" />
+              {t("shares.accessRevoked")}
+            </p>
+          {:else if share}
             <Button loading={busy} onclick={revoke} pill variant="danger">
               {t("shares.revoke")}
             </Button>
             <Button loading={busy} onclick={applyLimits} pill>
-              {t("common.save")}
+              {#if saved.current === share.id}
+                <Icon name="check" />
+                {t("shares.saved")}
+              {:else}
+                {t("common.save")}
+              {/if}
             </Button>
           {:else}
             <Button fluid loading={busy} onclick={publish} pill>
@@ -333,6 +346,20 @@
 </Dialog.Root>
 
 <style lang="scss">
+  .done {
+    display: flex;
+    flex: 1;
+    gap: 0.375rem;
+    align-items: center;
+    justify-content: center;
+
+    height: 3rem;
+    margin: 0;
+
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-green);
+  }
+
   .center {
     display: flex;
     justify-content: center;

frontend/src/lib/components/shares/SharesPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { SvelteSet } from "svelte/reactivity";
   import {
     deleteShare,
     listShares,
@@ -11,6 +12,7 @@
   import ShareLinkField from "#lib/components/shares/ShareLinkField.svelte";
   import ContextMenu from "#lib/components/ui/ContextMenu.svelte";
   import ContextMenuItem from "#lib/components/ui/ContextMenuItem.svelte";
+  import CopyItem from "#lib/components/ui/CopyItem.svelte";
   import EmptyState from "#lib/components/ui/EmptyState.svelte";
   import Icon from "#lib/components/ui/Icon.svelte";
   import Spinner from "#lib/components/ui/Spinner.svelte";
@@ -19,6 +21,7 @@
   import { formatDownloads, formatExpiry } from "#lib/format/shares.js";
   import { t } from "#lib/i18n/locale.svelte.js";
   import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { createFlash } from "#lib/stores/flash.svelte.js";
   import { shareUi } from "#lib/stores/shares.svelte.js";
   import { toasts } from "#lib/stores/toasts.svelte.js";
   import { ui } from "#lib/stores/ui.svelte.js";
@@ -31,10 +34,14 @@
   let filter = $state<Filter>("active");
   let expanded = $state<number | null>(null);
   let token = 0;
+  const kept = new SvelteSet<number>();
+  const done = createFlash<number>();
 
   const visible = $derived(
     filter === "active"
-      ? items.filter((item) => shareState(item) === "active")
+      ? items.filter(
+          (item) => kept.has(item.id) || shareState(item) === "active"
+        )
       : items
   );
   const activeCount = $derived(
@@ -50,6 +57,7 @@
       const rows = await listShares(activeOnly);
       if (current === token) {
         items = rows;
+        kept.clear();
       }
     } catch {
       if (current === token) {
@@ -79,15 +87,11 @@
     ui.closePanel();
   }
 
-  async function copy(share: FileShare) {
-    await navigator.clipboard.writeText(shareUrl(share));
-    toasts.success(t("shares.copied"));
-  }
-
   async function revoke(share: FileShare) {
     try {
       replace(await revokeShare(share.id));
-      toasts.success(t("shares.revokedToast"));
+      kept.add(share.id);
+      done.show(share.id);
     } catch {
       toasts.error(t("shares.revokeFailed"));
     }
@@ -96,7 +100,7 @@
   async function reissue(share: FileShare) {
     try {
       replace(await reissueShare(share.id));
-      toasts.success(t("shares.reissued"));
+      done.show(share.id);
     } catch {
       toasts.error(t("shares.reissueFailed"));
     }
@@ -205,9 +209,12 @@
             </button>
           {/snippet}
           {#snippet menu()}
-            <ContextMenuItem icon="copy" onselect={() => copy(share)}>
-              {t("shares.copy")}
-            </ContextMenuItem>
+            <CopyItem
+              done={t("shares.copied")}
+              icon="copy"
+              label={t("shares.copy")}
+              text={() => shareUrl(share)}
+            />
             {#if share.message_id !== null || share.peer_id !== null}
               <ContextMenuItem icon="reply" onselect={() => jump(share)}>
                 {t("ui.jumpToMessage")}
@@ -247,7 +254,14 @@
                   <Icon name="reply" size="1rem" />{t("shares.toMessage")}
                 </button>
               {/if}
-              {#if state === "active"}
+              {#if done.current === share.id}
+                <span class="done">
+                  <Icon name="check" size="1rem" />
+                  {state === "active"
+                    ? t("shares.reissued")
+                    : t("shares.accessRevoked")}
+                </span>
+              {:else if state === "active"}
                 <button
                   class="pill danger"
                   onclick={() => revoke(share)}
@@ -461,6 +475,18 @@
     }
   }
 
+  .done {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+
+    padding: 0.3125rem 0;
+    border: 1px solid transparent;
+
+    font-size: 0.8125rem;
+    color: var(--color-text-green);
+  }
+
   .footnote {
     margin: 0;
     padding: 0 1rem 1rem;