[O] Show confirm dialog when unlinking a card

AquaNet/src/app.sass

@@ -79,8 +79,10 @@ button:focus, button:focus-visible
 button.error
   color: unset
   &:hover
-    background: $c-error
+    border-color: $c-error
-    border-color: transparent
+    color: $c-error
+    //background: $c-error
+    //border-color: transparent
 
 button.icon
   padding: 0.6em

AquaNet/src/components/Confirm.svelte

@@ -2,13 +2,8 @@
 
 <script lang="ts">
   import { fade } from 'svelte/transition'
-
+  import { clz } from "../libs/ui";
-  interface ConfirmProps {
+  import type { ConfirmProps } from "../libs/generalTypes";
-    title: string
-    message: string
-    confirm: () => void
-    cancel?: () => void
-  }
 
   // Props
   export let show: ConfirmProps
@@ -16,19 +11,26 @@
 
 {#if show}
   <div class="overlay" transition:fade>
-    <h1>{show.title}</h1>
+    <div>
-    <span>{show.message}</span>
+      <h2>{show.title}</h2>
+      <span>{show.message}</span>
 
-    <div class="actions">
+      <div class="actions">
-      {#if show.cancel}
+        {#if show.cancel}
-        <!-- Svelte LSP is very annoying here -->
+          <!-- Svelte LSP is very annoying here -->
-        <button on:click={() => show.cancel && show.cancel()}>Cancel</button>
+          <button on:click={() => show.cancel && show.cancel()}>Cancel</button>
-      {/if}
+        {/if}
-      <button on:click={() => show.confirm()}>Confirm</button>
+        <button on:click={() => show.confirm()} class={clz({error: show.dangerous})}>Confirm</button>
+      </div>
     </div>
   </div>
 {/if}
 
 <style lang="sass">
+  .actions
+    display: flex
+    gap: 16px
 
+    button
+      width: 100%
 </style>

AquaNet/src/libs/generalTypes.ts

@@ -41,3 +41,12 @@ export interface CardSummary {
   ongeki: CardSummaryGame | null
   diva: CardSummaryGame | null
 }
+
+
+export interface ConfirmProps {
+  title: string
+  message: string
+  confirm: () => void
+  cancel?: () => void
+  dangerous?: boolean
+}

AquaNet/src/pages/Home/LinkCard.svelte

@@ -3,13 +3,15 @@
 <script lang="ts">
   import { slide, fade } from "svelte/transition"
   import { clz } from "../../libs/ui";
-  import type { Card, CardSummary, CardSummaryGame, UserMe } from "../../libs/generalTypes";
+  import type { Card, CardSummary, CardSummaryGame, ConfirmProps, UserMe } from "../../libs/generalTypes";
   import { CARD, USER } from "../../libs/sdk";
   import moment from "moment"
   import Icon from "@iconify/svelte";
+  import Confirm from "../../components/Confirm.svelte";
 
   // State
   let state: 'ready' | 'linking-AC' | 'linking-SN' | 'loading' = "loading"
+  let showConfirm: ConfirmProps | null = null
 
   let error: string = ""
   let me: UserMe | null = null
@@ -141,8 +143,17 @@
   }
 
   async function unlink(card: Card) {
-    await CARD.unlink(card.luid)
+    showConfirm = {
-    await updateMe()
+      title: "Unlink Card",
+      message: "Are you sure you want to unlink this card?",
+      confirm: async () => {
+        await CARD.unlink(card.luid)
+        await updateMe()
+        showConfirm = null
+      },
+      cancel: () => showConfirm = null,
+      dangerous: true
+    }
   }
 
   // Access code input
@@ -298,6 +309,8 @@
       </div>
     </div>
   {/if}
+
+  <Confirm show={showConfirm} />
 </div>
 
 <style lang="sass">