Add confirmations to Clear all notifications buttons

src/components/ConfirmClear.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { closeFocused } from "@app/components/Popover.svelte";
+
+  import Border from "./Border.svelte";
+  import Button from "./Button.svelte";
+  import Icon from "@app/components/Icon.svelte";
+  import NakedButton from "@app/components/NakedButton.svelte";
+  import OutlineButton from "./OutlineButton.svelte";
+  import Popover from "./Popover.svelte";
+
+  interface Props {
+    clear: () => void;
+    subject: string;
+  }
+
+  /* eslint-disable prefer-const */
+  let { clear, subject }: Props = $props();
+  /* eslint-enable prefer-const */
+</script>
+
+<Popover popoverPositionRight="0" popoverPositionTop="3rem">
+  {#snippet toggle(onclick)}
+    <NakedButton stylePadding="0 4px" variant="ghost" {onclick}>
+      <Icon name="broom-double" />
+    </NakedButton>
+  {/snippet}
+
+  {#snippet popover()}
+    <Border variant="ghost" stylePadding="1rem">
+      <div class="global-flex txt-small">
+        <div style:white-space="nowrap" style:margin-right="1rem">
+          Clear all {subject} notifications?
+        </div>
+        <div class="global-flex" style:justify-content="space-between">
+          <OutlineButton variant="ghost" onclick={closeFocused}>
+            Cancel
+          </OutlineButton>
+          <Button variant="ghost" onclick={clear}>Clear all</Button>
+        </div>
+      </div>
+    </Border>
+  {/snippet}
+</Popover>

src/components/NotificationTeaser.svelte

@@ -20,6 +20,7 @@
 
   import Icon from "./Icon.svelte";
   import InlineTitle from "./InlineTitle.svelte";
+  import NakedButton from "./NakedButton.svelte";
   import NodeId from "./NodeId.svelte";
 
   interface Props {
@@ -142,6 +143,12 @@
     font-size: var(--font-size-regular);
     word-break: break-word;
   }
+  .clear-icon {
+    display: none;
+  }
+  .notification-teaser:hover .clear-icon {
+    display: flex;
+  }
   .selected {
     background-color: var(--color-fill-float-hover);
   }
@@ -152,13 +159,6 @@
     padding: 0;
     margin-right: 1rem;
   }
-  .icon {
-    width: 2rem;
-    height: 2rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
   .notification-teaser:first-of-type {
     clip-path: var(--3px-top-corner-fill);
   }
@@ -210,18 +210,19 @@
         </div>
       </div>
     </div>
-    <div class="global-flex">
-      <div class="icon">
-        <Icon
-          onclick={e => {
-            e.stopPropagation();
-            void clearByIds(
-              rid,
-              notificationItems.map(n => n.rowId),
-            );
-          }}
-          name={clearIcon} />
-      </div>
+    <div class="clear-icon">
+      <NakedButton
+        stylePadding="0 4px"
+        variant="ghost"
+        onclick={e => {
+          e.stopPropagation();
+          void clearByIds(
+            rid,
+            notificationItems.map(n => n.rowId),
+          );
+        }}>
+        <Icon name={clearIcon} />
+      </NakedButton>
     </div>
   </div>
 </div>

src/components/RepoNotifications.svelte

@@ -3,9 +3,10 @@
   import type { NotificationItem } from "@bindings/cob/inbox/NotificationItem";
 
   import * as router from "@app/lib/router";
+
   import Button from "./Button.svelte";
+  import ConfirmClear from "./ConfirmClear.svelte";
   import NotificationTeaser from "./NotificationTeaser.svelte";
-  import Icon from "./Icon.svelte";
 
   interface Props {
     all?: boolean;
@@ -31,7 +32,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-right: 1.5rem;
+    padding-right: 1rem;
   }
   .container {
     display: flex;
@@ -48,7 +49,11 @@
       </span>
       {repo.count}
     </div>
-    <Icon onclick={() => clearByRepo(repo.rid)} name="broom-double" />
+    <ConfirmClear
+      subject={repo.name}
+      clear={() => {
+        void clearByRepo(repo.rid);
+      }} />
   </div>
 {/if}
 

src/views/home/Inbox.svelte

@@ -1,21 +1,22 @@
 <script lang="ts">
-  import type { HomeInboxTab } from "@app/lib/router/definitions";
   import type { Config } from "@bindings/config/Config";
+  import type { HomeInboxTab } from "@app/lib/router/definitions";
   import type { NotificationCount } from "@bindings/cob/inbox/NotificationCount";
   import type { NotificationItem } from "@bindings/cob/inbox/NotificationItem";
   import type { PaginatedQuery } from "@bindings/cob/PaginatedQuery";
   import type { RepoCount } from "@bindings/repo/RepoCount";
 
+  import * as router from "@app/lib/router";
   import { SvelteMap } from "svelte/reactivity";
   import { invoke } from "@app/lib/invoke";
-  import * as router from "@app/lib/router";
 
+  import Border from "@app/components/Border.svelte";
+  import ConfirmClear from "@app/components/ConfirmClear.svelte";
   import CopyableId from "@app/components/CopyableId.svelte";
   import HomeSidebar from "@app/components/HomeSidebar.svelte";
   import Icon from "@app/components/Icon.svelte";
   import Layout from "@app/views/repo/Layout.svelte";
   import RepoNotifications from "@app/components/RepoNotifications.svelte";
-  import Border from "@app/components/Border.svelte";
 
   interface Props {
     activeTab?: HomeInboxTab;
@@ -156,7 +157,7 @@
     font-size: var(--font-size-medium);
     display: flex;
     justify-content: space-between;
-    padding-right: 1.5rem;
+    padding-right: 1rem;
     align-items: center;
     min-height: 2.5rem;
   }
@@ -184,7 +185,7 @@
     <div class="header">
       <div>Inbox</div>
       {#if notifications.size > 0}
-        <Icon onclick={clearAll} name="broom-double" />
+        <ConfirmClear subject="inbox" clear={clearAll} />
       {/if}
     </div>
     {#each notifications.values() as { repo, pagination, items }}