From f5c2dc747d34839e1347a3e6bbe360ca47c73c1a Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Thu, 22 Feb 2024 18:31:59 -0500
Subject: [PATCH] [+] Unlink frontend

---
 AquaNet/src/app.sass                   |  6 ++++++
 AquaNet/src/libs/sdk.ts                |  2 ++
 AquaNet/src/pages/Home/LinkCard.svelte | 17 ++++++++++++++++-
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/AquaNet/src/app.sass b/AquaNet/src/app.sass
index 66c297a7..622f93b8 100644
--- a/AquaNet/src/app.sass
+++ b/AquaNet/src/app.sass
@@ -82,6 +82,12 @@ button.error
     background: $c-error
     border-color: transparent
 
+button.icon
+  padding: 0.6em
+  font-size: 1.2em
+  border-radius: 50px
+  @extend .flex-center
+
 .level-0
   --lv-color: $c-lv0
 
diff --git a/AquaNet/src/libs/sdk.ts b/AquaNet/src/libs/sdk.ts
index f7ae7271..29be4d1e 100644
--- a/AquaNet/src/libs/sdk.ts
+++ b/AquaNet/src/libs/sdk.ts
@@ -96,4 +96,6 @@ export const CARD = {
     post('/api/v2/card/summary', { cardId }),
   link: (props: { cardId: string, migrate: string }) =>
     post('/api/v2/card/link', props),
+  unlink: (cardId: string) =>
+    post('/api/v2/card/unlink', { cardId }),
 }
\ No newline at end of file
diff --git a/AquaNet/src/pages/Home/LinkCard.svelte b/AquaNet/src/pages/Home/LinkCard.svelte
index ca77afa4..a050ed4a 100644
--- a/AquaNet/src/pages/Home/LinkCard.svelte
+++ b/AquaNet/src/pages/Home/LinkCard.svelte
@@ -3,9 +3,10 @@
 <script lang="ts">
   import { slide, fade } from "svelte/transition"
   import { clz } from "../../libs/ui";
-  import type { CardSummary, CardSummaryGame, UserMe } from "../../libs/generalTypes";
+  import type { Card, CardSummary, CardSummaryGame, UserMe } from "../../libs/generalTypes";
   import { CARD, USER } from "../../libs/sdk";
   import moment from "moment"
+  import Icon from "@iconify/svelte";
 
   // State
   let state: 'ready' | 'linking-AC' | 'linking-SN' = "ready"
@@ -141,6 +142,11 @@
     conflictToMigrate = []
   }
 
+  async function unlink(card: Card) {
+    await CARD.unlink(card.luid)
+    await updateMe()
+  }
+
   // Access code input
   const inputACRegex = /^(\d{4} ){0,4}\d{0,4}$/
   let inputAC = ""
@@ -209,6 +215,9 @@
           <span class="last">Last used: {moment(card.accessTime).format("YYYY MMM DD")}</span>
           <div/>
           <span class="id">{formatLUID(card.luid, card.ghost)}</span>
+          {#if !card.ghost}
+            <button class="icon error" on:click={() => unlink(card)}><Icon icon="tabler:trash-x-filled"/></button>
+          {/if}
         </div>
       {/each}
     </div>
@@ -313,6 +322,7 @@
 
       .existing.card
         min-height: 90px
+        position: relative
 
         &.ghost
           background: rgba($c-darker, 0.8)
@@ -326,6 +336,11 @@
         > div
           flex: 1
 
+        button
+          position: absolute
+          right: 10px
+          bottom: 10px
+
     .conflict-cards
       .card
         transition: $transition