Add "copy account title" functionality

frontend/src/sidebar/PageTitle.svelte

@@ -1,17 +1,49 @@
 <script lang="ts">
+  import { log_error } from "../log.ts";
   import AccountPageTitle from "./AccountPageTitle.svelte";
   import { page_title } from "./page-title.ts";
 
   let { title, type } = $derived($page_title);
 
   let is_account = $derived(type === "account");
+  let copied = $state(false);
+  let copied_timeout: ReturnType<typeof setTimeout> | undefined;
+
+  async function copyAccountTitle(event: MouseEvent): Promise<void> {
+    event.stopPropagation();
+
+    try {
+      await navigator.clipboard.writeText(title);
+      copied = true;
+
+      clearTimeout(copied_timeout);
+      copied_timeout = setTimeout(() => {
+        copied = false;
+      }, 1500);
+    } catch (error) {
+      log_error(error);
+    }
+  }
 </script>
 
 <strong>
   {#if !is_account}
     {title}
   {:else}
     <AccountPageTitle account={title} />
+    <button
+      type="button"
+      class="copy-account-title"
+      title={copied ? "Copied" : "Copy account title"}
+      aria-label={copied ? "Copied" : "Copy account title"}
+      onclick={copyAccountTitle}
+    >
+      {#if copied}
+        Copied
+      {:else}
+        ⧉
+      {/if}
+    </button>
   {/if}
 </strong>
 
@@ -22,4 +54,17 @@
     content: "›";
     opacity: 0.5;
   }
+
+  .copy-account-title {
+    padding: 0 0.25rem;
+    margin-left: 0.25rem;
+    color: inherit;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+  }
+
+  .copy-account-title:hover {
+    color: var(--link-color);
+  }
 </style>

frontend/src/tree-table/AccountCell.svelte

@@ -6,6 +6,7 @@
   import type { AccountTreeNode } from "../charts/hierarchy.ts";
   import { urlForAccount } from "../helpers.ts";
   import { leaf } from "../lib/account.ts";
+  import { log_error } from "../log.ts";
   import AccountIndicator from "../sidebar/AccountIndicator.svelte";
   import { toggle_account, toggled_accounts } from "../stores/accounts.ts";
 
@@ -18,6 +19,24 @@
 
   let { account, children } = $derived(node);
   let is_toggled = $derived($toggled_accounts.has(account));
+  let copied = $state(false);
+  let copied_timeout: ReturnType<typeof setTimeout> | undefined;
+
+  async function copyAccount(event: MouseEvent): Promise<void> {
+    event.stopPropagation();
+
+    try {
+      await navigator.clipboard.writeText(account);
+      copied = true;
+
+      clearTimeout(copied_timeout);
+      copied_timeout = setTimeout(() => {
+        copied = false;
+      }, 1500);
+    } catch (error) {
+      log_error(error);
+    }
+  }
 </script>
 
 <span class="droptarget" data-account-name={account}>
@@ -35,6 +54,19 @@
   <a href={$urlForAccount(account)} class="account">
     {leaf(account)}
   </a>
+  <button
+    type="button"
+    class="copy-account"
+    title={copied ? "Copied" : "Copy account"}
+    aria-label={copied ? "Copied" : "Copy account"}
+    onclick={copyAccount}
+  >
+    {#if copied}
+      Copied
+    {:else}
+      ⧉
+    {/if}
+  </button>
   <AccountIndicator {account} small />
 </span>
 
@@ -49,6 +81,20 @@
     margin-left: 1em;
   }
 
+  .copy-account {
+    position: static;
+    padding: 0 0.25rem;
+    margin-left: 0.25rem;
+    color: inherit;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+  }
+
+  .copy-account:hover {
+    color: var(--link-color);
+  }
+
   span {
     display: flex;
     flex: 1;