From 1830409b204b22225b54da02e43a4dc6c52377f2 Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Sat, 11 Mar 2023 03:48:01 +0800
Subject: [PATCH 01/12] chore: fix dev compatibility

---
 src/page/main.js  | 3 +--
 src/popup/main.js | 5 ++---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/page/main.js b/src/page/main.js
index 0c38b58f..66ad9d11 100644
--- a/src/page/main.js
+++ b/src/page/main.js
@@ -6,8 +6,7 @@ import "./cm.css";
 
 if (import.meta.env.DEV) { // vite feat that only import in dev mode
     const modules = import.meta.glob("../shared/dev.js", {eager: true});
-    // eslint-disable-next-line no-global-assign
-    browser = modules["../shared/dev.js"].browser;
+    window.browser = modules["../shared/dev.js"].browser;
     console.info("DEV-ENV", import.meta.env, modules, browser);
 }
 
diff --git a/src/popup/main.js b/src/popup/main.js
index 23e0ab93..03752163 100644
--- a/src/popup/main.js
+++ b/src/popup/main.js
@@ -5,10 +5,9 @@ import App from "./App.svelte";
 
 if (import.meta.env.DEV) { // vite feat that only import in dev mode
     const modules = import.meta.glob("../shared/dev.js", {eager: true});
-    // eslint-disable-next-line no-global-assign
-    browser = modules["../shared/dev.js"].browser;
+    window.browser = modules["../shared/dev.js"].browser;
     console.info("DEV-ENV", import.meta.env, modules, browser);
-    // macos popup style
+    // macos popup simulation
     const style = document.createElement("style");
     style.textContent = `
 body {

From 2d37a89f51a9915d2dde84b600579b0a6344e927 Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Sat, 11 Mar 2023 03:05:32 +0800
Subject: [PATCH 02/12] feat: add detail button for items in popup

---
 src/popup/App.svelte                  |  7 +++++-
 src/popup/Components/PopupItem.svelte | 35 ++++++++++++++++++++++-----
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index ca30f696..1e2fedb2 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -123,6 +123,10 @@
         });
     }
 
+    function detailItem(item) {
+
+    }
+
     function checkForUpdates() {
         disabled = true;
         initError = false;
@@ -562,7 +566,8 @@
                         subframe={item.subframe}
                         type={item.type}
                         request={!!item.request}
-                        on:click={() => toggleItem(item)}
+                        toggleItem={() => toggleItem(item)}
+                        detailItem={() => detailItem(item)}
                     />
                 {/each}
             </div>
diff --git a/src/popup/Components/PopupItem.svelte b/src/popup/Components/PopupItem.svelte
index 2a3e64a3..5f3584a3 100644
--- a/src/popup/Components/PopupItem.svelte
+++ b/src/popup/Components/PopupItem.svelte
@@ -7,16 +7,21 @@
     export let type;
     export let subframe;
     export let request = false;
+    export let toggleItem;
+    export let detailItem;
 </script>
 
 <div
     class="item {enabled ? "enabled" : "disabled"} {background ?? ""}"
     on:click
 >
-    <span></span>
-    <div class="truncate">{name}</div>
-    {#if subframe}<div class="subframe">SUB</div>{/if}
-    <Tag type={request ? "request" : type}/>
+    <div class="base" on:click={toggleItem}>
+        <Tag type={request ? "request" : type}/>
+        <span></span>
+        <div class="truncate">{name}</div>
+        {#if subframe}<div class="subframe">SUB</div>{/if}
+    </div>
+    <div class="more" on:click={detailItem}>ⓘ</div>
 </div>
 
 <style>
@@ -24,7 +29,6 @@
         align-items: center;
         cursor: pointer;
         display: flex;
-        padding: 0.5rem 1rem;
         position: relative;
         -webkit-user-select: none;
         user-select: none;
@@ -35,7 +39,9 @@
     }
 
     @media (hover: hover) {
-        .item:hover {
+        .item:hover,
+        .item .base:hover,
+        .item .more:hover {
             background-color: rgb(255 255 255 / 0.075);
         }
     }
@@ -44,6 +50,23 @@
         background-color: rgb(255 255 255 / 0.15);
     }
 
+    .item .base {
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+        flex-grow: 1;
+        overflow: hidden;
+        padding: .5rem 0 .5rem .75rem;
+        position: relative;
+        -webkit-user-select: none;
+        user-select: none;
+    }
+
+    .item .more {
+        padding: .5rem 1rem;
+        font-weight: bold;
+    }
+
     span {
         align-items: center;
         background-color: var(--color-red);

From 9f0a19f8eef05f59df9d16b0d0ec01c9dce7979f Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Sat, 11 Mar 2023 04:36:44 +0800
Subject: [PATCH 03/12] refactor: use `:active` only when hover available

---
 src/popup/Components/PopupItem.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/popup/Components/PopupItem.svelte b/src/popup/Components/PopupItem.svelte
index 5f3584a3..c18dcade 100644
--- a/src/popup/Components/PopupItem.svelte
+++ b/src/popup/Components/PopupItem.svelte
@@ -44,10 +44,10 @@
         .item .more:hover {
             background-color: rgb(255 255 255 / 0.075);
         }
-    }
-
-    .item:active {
-        background-color: rgb(255 255 255 / 0.15);
+        
+        .item:active {
+            background-color: rgb(255 255 255 / 0.15);
+        }
     }
 
     .item .base {

From 86e1d5c00c1308bb44f3def4cf95ed1376d370b7 Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Sat, 11 Mar 2023 04:38:29 +0800
Subject: [PATCH 04/12] feat: add left border when use touch device

---
 src/popup/Components/PopupItem.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/popup/Components/PopupItem.svelte b/src/popup/Components/PopupItem.svelte
index c18dcade..dc942f0c 100644
--- a/src/popup/Components/PopupItem.svelte
+++ b/src/popup/Components/PopupItem.svelte
@@ -50,6 +50,12 @@
         }
     }
 
+    @media not (hover: hover) {
+        .item .more {
+            border-left: .1rem solid rgb(255 255 255 / 0.075);
+        }
+    }
+
     .item .base {
         align-items: center;
         cursor: pointer;

From 7375d5aefd0c9807aa0a3dd287af9cb7637fdb41 Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Sat, 11 Mar 2023 10:36:20 +0800
Subject: [PATCH 05/12] feat: add `DetailView` for popup

---
 src/popup/App.svelte                         |  31 ++-
 src/popup/Components/Views/DetailView.svelte | 219 +++++++++++++++++++
 2 files changed, 249 insertions(+), 1 deletion(-)
 create mode 100644 src/popup/Components/Views/DetailView.svelte

diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index 1e2fedb2..133688d9 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -7,6 +7,7 @@
     import View from "./Components/View.svelte";
     import UpdateView from "./Components/Views/UpdateView.svelte";
     import InstallView from "./Components/Views/InstallView.svelte";
+    import DetailView from "./Components/Views/DetailView.svelte";
     import AllItemsView from "./Components/Views/AllItemsView.svelte";
     import iconOpen from "../shared/img/icon-open.svg?raw";
     import iconUpdate from "../shared/img/icon-update.svg?raw";
@@ -38,6 +39,9 @@
     let installUserscript; // url, content
     let installViewUserscript; // metadata
     let installViewUserscriptError;
+    let showDetail;
+    let showDetailTitle;
+    let detailViewItem;
     let showAll;
     let allItems = [];
     let resizeTimer;
@@ -124,7 +128,9 @@
     }
 
     function detailItem(item) {
-
+        detailViewItem = item;
+        showDetailTitle = "Userscript Detail";
+        showDetail = true;
     }
 
     function checkForUpdates() {
@@ -470,6 +476,14 @@
         refreshView();
     }
 
+    async function updateConfirm() {
+        console.log("updateConfirm");
+    }
+
+    async function deleteConfirm() {
+        console.log("deleteConfirm");
+    }
+
     onMount(async () => {
         await initialize();
         // run resize again for good measure
@@ -611,6 +625,21 @@
             installConfirmClick={installConfirm}
         />
     </View>
+{:else if showDetail}
+    <View
+        headerTitle={showDetailTitle}
+        loading={disabled}
+        closeClick={() => showDetail = false}
+        showLoaderOnDisabled={true}
+    >
+        <DetailView
+            itemdata={detailViewItem}
+            cancelClick={() => showDetail = false}
+            installConfirmClick={installConfirm}
+            updateConfirmClick={updateConfirm}
+            deleteConfirmClick={deleteConfirm}
+        />
+    </View>
 {:else if showAll}
     <View
         headerTitle={"All Userscripts"}
diff --git a/src/popup/Components/Views/DetailView.svelte b/src/popup/Components/Views/DetailView.svelte
new file mode 100644
index 00000000..e61fbfe4
--- /dev/null
+++ b/src/popup/Components/Views/DetailView.svelte
@@ -0,0 +1,219 @@
+<script>
+    import iconWarn from "../../../shared/img/icon-warn.svg?raw";
+    import iconError from "../../../shared/img/icon-error.svg?raw";
+    import {parse} from "../../../shared/utils";
+    
+    export let itemdata;
+    export let cancelClick;
+    export let installConfirmClick;
+    export let updateConfirmClick;
+    export let deleteConfirmClick;
+
+    const showItems = [
+        "version",
+        "match",
+        "include",
+        "require",
+        "grant"
+    ];
+    let errormsg = itemdata.error;
+    let metadata = itemdata.metadata;
+    let variableButton;
+    let variableButtonClick;
+
+    function metadataInit() {
+        if (metadata) return;
+        const parsed = parse(itemdata.content);
+        if (!parsed) {
+            errormsg = "Userscript parsing failed";
+            return;
+        }
+        if (!parsed.metadata) {
+            errormsg = "Userscript metadata missing";
+            return;
+        }
+        metadata = parsed.metadata;
+    }
+    
+    if (!errormsg) {
+        if (!metadata) {
+            metadataInit();
+        }
+        if (itemdata.update) {
+            variableButton = "Update";
+            variableButtonClick = updateConfirmClick;
+        }
+        if (itemdata.filename) {
+            variableButton = "Delete";
+            variableButtonClick = deleteConfirmClick;
+        }
+        if (itemdata.url) {
+            variableButton = "Install";
+            variableButtonClick = installConfirmClick;
+        }
+    }
+</script>
+
+<div class="view--install">
+    {#if errormsg}
+        <div class="show--error">
+            {@html iconError}
+            <div>Userscript Invaild</div>
+            <p>{errormsg}</p>
+        </div>
+    {:else if metadata}
+        <ul>
+            <li class="item--name">{metadata.name}</li>
+            {#if itemdata.filename}
+                <li class="item--filename">{itemdata.filename}</li>
+            {/if}
+            {#if metadata.description}
+                <li class="item--description">{metadata.description}</li>
+            {/if}
+            {#each showItems as key}
+                {#if metadata[key]}
+                    <li class="item--field">
+                        <div>@{key}</div>
+                        {#each metadata[key] as val}
+                            <div class="truncate">{val}</div>
+                        {/each}
+                    </li>
+                {/if}
+            {/each}
+        </ul>
+        {#if !itemdata.filename}
+        <div class="badge">
+            <div class="badge--icon">{@html iconWarn}</div>
+            <div class="badge--text">Be sure you trust the author before installing. Nefarious code can exploit your security and privacy.</div>
+        </div>
+        {/if}
+        <div class="buttons">
+            <button class="cancel" on:click={cancelClick}>
+                Cancel
+            </button>
+            <button class={variableButton} on:click={variableButtonClick}>
+                {variableButton}
+            </button>
+        </div>
+    {/if}
+</div>
+
+<style>
+    .view--install {
+        color: var(--text-color-secondary);
+        padding: 0 1rem;
+    }
+
+    :global(body.ios) .view--install,
+    :global(body.ipados) .view--install {
+        padding-bottom: calc(39px + 1rem);
+    }
+
+    .show--error {
+        color: var(--text-color-disabled);
+        font-weight: 600;
+    }
+
+    .show--error :global(svg) {
+        fill: var(--text-color-disabled);
+        height: 4rem;
+        margin: 2rem auto 0.5rem;
+        width: 4rem;
+    }
+
+    .show--error p {
+        color: var(--text-color-primary);
+        font: var(--text-small);
+        font-family: var(--editor-font);
+        letter-spacing: var(--letter-spacing-small);
+        margin-top: 1rem;
+    }
+
+    ul {
+        padding: 1rem 0;
+        text-align: left;
+    }
+
+    .item--filename {
+        font: var(--text-small);
+        color: var(--text-color-disabled);
+    }
+
+    .item--name {
+        color: var(--text-color-primary);
+        font: var(--text-default);
+        font-weight: bold;
+        letter-spacing: var(--letter-spacing-default);
+    }
+
+    .item--description {
+        font: var(--text-small);
+        letter-spacing: var(--letter-spacing-small);
+    }
+
+    .item--field {
+        font: var(--text-small);
+        letter-spacing: var(--letter-spacing-small);
+        margin-top: 1rem;
+    }
+
+    .item--field > div:nth-child(1) {
+        color: var(--text-color-disabled);
+    }
+
+    .item--field > div:nth-child(n + 2) {
+        color: var(--text-color-secondary);
+        font-family: var(--editor-font);
+    }
+
+    .badge {
+        background-color: var(--color-black);
+        border-radius: var(--border-radius);
+        display: flex;
+        font: var(--text-small);
+        margin: 1rem 0;
+        padding: 0.5rem;
+    }
+
+    .badge--icon {
+        align-self: center;
+        flex-shrink: 0;
+        width: 32px;
+    }
+
+    .badge--icon :global(svg) {
+        fill: var(--color-blue);
+    }
+
+    .badge--text {
+        padding: 0 0.5rem;
+        text-align: left;
+    }
+
+    .buttons {
+        display: flex;
+        justify-content: space-between;
+        gap: 1rem;
+        padding-bottom: 1rem;
+    }
+
+    button {
+        background-color: #ffffffa6; /* -text-color-secondary */
+        border-radius: var(--border-radius);
+        color: var(--color-bg-primary);
+        flex-grow: 1;
+        height: 2rem;
+    }
+
+    button.Install {
+        background-color: var(--color-blue);
+    }
+
+    button.Update {
+        background-color: var(--color-yellow);
+    }
+
+    button.Delete {
+        background-color: var(--color-red);
+    }
+</style>
\ No newline at end of file

From 9bdbc2c99580f918d2e1129915bf571d39a1dbca Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Sat, 11 Mar 2023 10:51:38 +0800
Subject: [PATCH 06/12] refactor: migrating `InstallView` to `DetailView`

---
 src/popup/App.svelte                          |  60 +++---
 src/popup/Components/Views/InstallView.svelte | 180 ------------------
 2 files changed, 22 insertions(+), 218 deletions(-)
 delete mode 100644 src/popup/Components/Views/InstallView.svelte

diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index 133688d9..4a7ea9c2 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -6,7 +6,6 @@
     import PopupItem from "./Components/PopupItem.svelte";
     import View from "./Components/View.svelte";
     import UpdateView from "./Components/Views/UpdateView.svelte";
-    import InstallView from "./Components/Views/InstallView.svelte";
     import DetailView from "./Components/Views/DetailView.svelte";
     import AllItemsView from "./Components/Views/AllItemsView.svelte";
     import iconOpen from "../shared/img/icon-open.svg?raw";
@@ -32,15 +31,12 @@
     let header;
     let warn;
     let err;
+    let currentTabItem;
     let scriptChecking;
     let scriptInstalled;
     let showInstallPrompt;
-    let showInstall;
-    let installUserscript; // url, content
-    let installViewUserscript; // metadata
-    let installViewUserscriptError;
-    let showDetail;
-    let showDetailTitle;
+    let showDetailView;
+    let detailViewTitle;
     let detailViewItem;
     let showAll;
     let allItems = [];
@@ -129,8 +125,8 @@
 
     function detailItem(item) {
         detailViewItem = item;
-        showDetailTitle = "Userscript Detail";
-        showDetail = true;
+        detailViewTitle = "Userscript Detail";
+        showDetailView = true;
     }
 
     function checkForUpdates() {
@@ -413,18 +409,18 @@
         }
         const content = await res.text();
         // caching script data
-        installUserscript = {url: currentTab.url, content};
+        currentTabItem = {url: currentTab.url, content};
         // send native swift a message, parse metadata and check if installed
         const response = await browser.runtime.sendNativeMessage({name: "POPUP_INSTALL_CHECK", content});
         console.info("POPUP_INSTALL_CHECK:", response);
         if (response.error) {
             console.error(`Error checking .user.js url: ${response.error}`);
             // errorNotification = response.error;
-            installViewUserscriptError = response.error;
+            currentTabItem.error = response.error;
         } else {
             scriptInstalled = response.installed;
-            // caching script metadata
-            installViewUserscript = response.metadata;
+            currentTabItem.installed = response.installed;
+            currentTabItem.metadata = response.metadata;
             // the response will contain the string to display
             // ex: {success: "Click to install"}
             showInstallPrompt = response.success;
@@ -432,9 +428,11 @@
         scriptChecking = false;
     }
 
-    async function showInstallView() {
+    async function installItem() {
+        detailViewItem = currentTabItem;
+        detailViewTitle = "Install Userscript";
         // show the install view
-        showInstall = true;
+        showDetailView = true;
     }
 
     async function installConfirm() {
@@ -446,13 +444,13 @@
         // show loading element
         loading = true;
         // go back to main view
-        showInstall = false;
+        showDetailView = false;
         // double check before send install message
-        if (!installUserscript || !installUserscript.content) {
+        if (!currentTabItem) {
             errorNotification = "Install failed: userscript missing";
         }
         const currentTab = await browser.tabs.getCurrent();
-        if (currentTab.url !== installUserscript.url) {
+        if (currentTab.url !== currentTabItem.url) {
             errorNotification = "Install failed: tab changed unexpectedly";
         }
         if (errorNotification) {
@@ -463,7 +461,7 @@
         // send native swift a message, which will start the install process
         const response = await browser.runtime.sendNativeMessage({
             name: "POPUP_INSTALL_SCRIPT",
-            content: installUserscript.content
+            content: currentTabItem.content
         });
         if (response.error) {
             errorNotification = response.error;
@@ -538,7 +536,7 @@
             {showInstallPrompt}
         {:else}
             {scriptInstalled ? "Installed" : "Detected"}:
-            <span on:click={showInstallView}>{showInstallPrompt}</span>
+            <span on:click={installItem}>{showInstallPrompt}</span>
         {/if}
     </div>
 {/if}
@@ -611,30 +609,16 @@
             {updates}
         />
     </View>
-{:else if showInstall}
+{:else if showDetailView}
     <View
-        headerTitle={"Install Userscript"}
+        headerTitle={detailViewTitle}
         loading={disabled}
-        closeClick={() => showInstall = false}
-        showLoaderOnDisabled={true}
-    >
-        <InstallView
-            userscript={installViewUserscript}
-            installError={installViewUserscriptError}
-            installCancelClick={() => showInstall = false}
-            installConfirmClick={installConfirm}
-        />
-    </View>
-{:else if showDetail}
-    <View
-        headerTitle={showDetailTitle}
-        loading={disabled}
-        closeClick={() => showDetail = false}
+        closeClick={() => showDetailView = false}
         showLoaderOnDisabled={true}
     >
         <DetailView
             itemdata={detailViewItem}
-            cancelClick={() => showDetail = false}
+            cancelClick={() => showDetailView = false}
             installConfirmClick={installConfirm}
             updateConfirmClick={updateConfirm}
             deleteConfirmClick={deleteConfirm}
diff --git a/src/popup/Components/Views/InstallView.svelte b/src/popup/Components/Views/InstallView.svelte
deleted file mode 100644
index e1dca2cb..00000000
--- a/src/popup/Components/Views/InstallView.svelte
+++ /dev/null
@@ -1,180 +0,0 @@
-<script>
-    import iconWarn from "../../../shared/img/icon-warn.svg?raw";
-    import iconError from "../../../shared/img/icon-error.svg?raw";
-    
-    export let userscript;
-    export let installError;
-    export let installCancelClick;
-    export let installConfirmClick;
-</script>
-
-<div class="view--install">
-    {#if installError}
-        <div class="install__error">
-            {@html iconError}
-            <div>Couldn't install userscript</div>
-            <p>{installError}</p>
-        </div>
-    {:else if userscript}
-        <ul>
-            <li class="userscript--name">{userscript.name}</li>
-            {#if userscript.description}
-                <li class="userscript--description">{userscript.description}</li>
-            {/if}
-            {#if userscript.match}
-                <li class="userscript--field">
-                    <div>@match</div>
-                    {#each userscript.match as match}
-                        <div class="truncate">{match}</div>
-                    {/each}
-                </li>
-            {/if}
-            {#if userscript.include}
-                <li class="userscript--field">
-                    <div>@include</div>
-                    {#each userscript.include as include}
-                        <div class="truncate">{include}</div>
-                    {/each}
-                </li>
-            {/if}
-            {#if userscript.require}
-                <li class="userscript--field">
-                    <div>@require</div>
-                    {#each userscript.require as require}
-                        <div class="truncate">{require}</div>
-                    {/each}
-                </li>
-            {/if}
-            {#if userscript.grant}
-                <li class="userscript--field">
-                    <div>@grant</div>
-                    {#each userscript.grant as grant}
-                        <div>{grant}</div>
-                    {/each}
-                </li>
-            {/if}
-        </ul>
-        <div class="badge">
-            <div class="badge--icon">{@html iconWarn}</div>
-            <div class="badge--text">Be sure you trust the author before installing. Nefarious code can exploit your security and privacy.</div>
-        </div>
-        <div class="buttons">
-            <button class="cancel" on:click={installCancelClick}>
-                Cancel
-            </button>
-            <button class="install" on:click={installConfirmClick}>
-                Install
-            </button>
-        </div>
-    {/if}
-</div>
-
-<style>
-    .view--install {
-        color: var(--text-color-secondary);
-        padding: 0 1rem;
-    }
-
-    :global(body.ios) .view--install,
-    :global(body.ipados) .view--install {
-        padding-bottom: calc(39px + 1rem);
-    }
-
-    .install__error {
-        color: var(--text-color-disabled);
-        font-weight: 600;
-    }
-
-    .install__error :global(svg) {
-        fill: var(--text-color-disabled);
-        height: 4rem;
-        margin: 2rem auto 0.5rem;
-        width: 4rem;
-    }
-
-    .install__error p {
-        color: var(--text-color-primary);
-        font: var(--text-small);
-        font-family: var(--editor-font);
-        letter-spacing: var(--letter-spacing-small);
-        margin-top: 1rem;
-    }
-
-    ul {
-        padding: 1rem 0;
-        text-align: left;
-    }
-
-    .userscript--name {
-        color: var(--text-color-primary);
-        font: var(--text-default);
-        font-weight: bold;
-        letter-spacing: var(--letter-spacing-default);
-    }
-
-    .userscript--description {
-        font: var(--text-small);
-        letter-spacing: var(--letter-spacing-small);
-    }
-
-    .userscript--field {
-        font: var(--text-small);
-        letter-spacing: var(--letter-spacing-small);
-        margin-top: 1rem;
-    }
-
-    .userscript--field > div:nth-child(1) {
-        color: var(--text-color-disabled);
-    }
-
-    .userscript--field > div:nth-child(n + 2) {
-        color: var(--text-color-secondary);
-        font-family: var(--editor-font);
-    }
-
-    .badge {
-        background-color: var(--color-black);
-        border-radius: var(--border-radius);
-        display: flex;
-        font: var(--text-small);
-        margin: 1rem 0;
-        padding: 0.5rem;
-    }
-
-    .badge--icon {
-        align-self: center;
-        flex-shrink: 0;
-        width: 32px;
-    }
-
-    .badge--icon :global(svg) {
-        fill: var(--color-blue);
-    }
-
-    .badge--text {
-        padding: 0 0.5rem;
-        text-align: left;
-    }
-
-    .buttons {
-        display: flex;
-        padding-bottom: 1rem;
-    }
-
-    button {
-        background-color: #ffffffa6; /* -text-color-secondary */
-        border-radius: var(--border-radius);
-        color: var(--color-bg-primary);
-        flex-grow: 1;
-        height: 2rem;
-    }
-
-    button:nth-child(1) {
-        margin-right: 0.5rem;
-    }
-
-    button:nth-child(2) {
-        background-color: var(--color-blue);
-        margin-left: 0.5rem;
-    }
-</style>

From fc9c7e63d856e413718a454c14d64bcc769d4866 Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Sat, 11 Mar 2023 12:16:06 +0800
Subject: [PATCH 07/12] style: adjust buttons

---
 src/popup/Components/Views/DetailView.svelte | 41 ++++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/popup/Components/Views/DetailView.svelte b/src/popup/Components/Views/DetailView.svelte
index e61fbfe4..1c24bb46 100644
--- a/src/popup/Components/Views/DetailView.svelte
+++ b/src/popup/Components/Views/DetailView.svelte
@@ -18,8 +18,6 @@
     ];
     let errormsg = itemdata.error;
     let metadata = itemdata.metadata;
-    let variableButton;
-    let variableButtonClick;
 
     function metadataInit() {
         if (metadata) return;
@@ -39,18 +37,6 @@
         if (!metadata) {
             metadataInit();
         }
-        if (itemdata.update) {
-            variableButton = "Update";
-            variableButtonClick = updateConfirmClick;
-        }
-        if (itemdata.filename) {
-            variableButton = "Delete";
-            variableButtonClick = deleteConfirmClick;
-        }
-        if (itemdata.url) {
-            variableButton = "Install";
-            variableButtonClick = installConfirmClick;
-        }
     }
 </script>
 
@@ -81,7 +67,7 @@
                 {/if}
             {/each}
         </ul>
-        {#if !itemdata.filename}
+        {#if itemdata.url}
         <div class="badge">
             <div class="badge--icon">{@html iconWarn}</div>
             <div class="badge--text">Be sure you trust the author before installing. Nefarious code can exploit your security and privacy.</div>
@@ -91,9 +77,21 @@
             <button class="cancel" on:click={cancelClick}>
                 Cancel
             </button>
-            <button class={variableButton} on:click={variableButtonClick}>
-                {variableButton}
-            </button>
+            {#if itemdata.url}
+                <button class="install" on:click={installConfirmClick}>
+                    {itemdata.installed ? "Reinstall" : "Install"}
+                </button>
+            {/if}
+            {#if itemdata.filename}
+                <button class="delete" on:click={deleteConfirmClick}>
+                    Delete
+                </button>
+            {/if}
+            {#if itemdata.update}
+                <button class="update" on:click={updateConfirmClick}>
+                    Update
+                </button>
+            {/if}
         </div>
     {/if}
 </div>
@@ -201,19 +199,20 @@
         background-color: #ffffffa6; /* -text-color-secondary */
         border-radius: var(--border-radius);
         color: var(--color-bg-primary);
+        font-weight: 600;
         flex-grow: 1;
         height: 2rem;
     }
 
-    button.Install {
+    button.install {
         background-color: var(--color-blue);
     }
 
-    button.Update {
+    button.update {
         background-color: var(--color-yellow);
     }
 
-    button.Delete {
+    button.delete {
         background-color: var(--color-red);
     }
 </style>
\ No newline at end of file

From 1167f5d272a49beb054ef0b3ef40f990922e8f75 Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Sat, 11 Mar 2023 13:07:08 +0800
Subject: [PATCH 08/12] style: adjust media query

---
 src/popup/Components/PopupItem.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/popup/Components/PopupItem.svelte b/src/popup/Components/PopupItem.svelte
index dc942f0c..df2b1175 100644
--- a/src/popup/Components/PopupItem.svelte
+++ b/src/popup/Components/PopupItem.svelte
@@ -50,7 +50,7 @@
         }
     }
 
-    @media not (hover: hover) {
+    @media (hover: none) {
         .item .more {
             border-left: .1rem solid rgb(255 255 255 / 0.075);
         }

From aceee2812fbf55617bff2170bf5c315345ef57db Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Sat, 11 Mar 2023 22:31:49 +0800
Subject: [PATCH 09/12] feat: add `DetailView` for `AllItemsView`

---
 src/popup/App.svelte                           | 3 ++-
 src/popup/Components/Views/AllItemsView.svelte | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index 4a7ea9c2..c1903c00 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -636,7 +636,8 @@
     >
         <AllItemsView
             allItems={allItems}
-            allItemsToggleItem={toggleItem}
+            toggleItem={toggleItem}
+            detailItem={detailItem}
         />
     </View>
 {/if}
diff --git a/src/popup/Components/Views/AllItemsView.svelte b/src/popup/Components/Views/AllItemsView.svelte
index 6906c6d0..ca784fce 100644
--- a/src/popup/Components/Views/AllItemsView.svelte
+++ b/src/popup/Components/Views/AllItemsView.svelte
@@ -2,7 +2,8 @@
     import PopupItem from "../PopupItem.svelte";
 
     export let allItems = [];
-    export let allItemsToggleItem;
+    export let toggleItem;
+    export let detailItem;
 
     let disabled;
     let rowColorsAll;
@@ -27,7 +28,8 @@
                 subframe={item.subframe}
                 type={item.type}
                 request={!!item.request}
-                on:click={() => allItemsToggleItem(item)}
+                toggleItem={() => toggleItem(item)}
+                detailItem={() => detailItem(item)}
             />
         {/each}
     </div>

From 357dc87cc1fc61338ca45609f9d8cfc6f2f0d72c Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Sat, 11 Mar 2023 22:42:05 +0800
Subject: [PATCH 10/12] chore(dev.js): reuse metadata

---
 src/shared/dev.js | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/shared/dev.js b/src/shared/dev.js
index 5bf75d5d..4a052791 100644
--- a/src/shared/dev.js
+++ b/src/shared/dev.js
@@ -55,6 +55,25 @@ function generateFile(type, updates = false, longName = false, request = false)
     };
 }
 
+function generateMetadata(type, updates = false, longName = false) {
+    const metadata = {
+        description: "This userscript re-implements the \"View Image\" and \"Search by image\" buttons into google images.",
+        grant: ["GM.getValue", "GM.setValue", "GM.xmlHttpRequest"],
+        match: ["https://www.example.com/*", "https://www.example.com/somethingReallylong/goesRightHere"],
+        name: "Test Install Userscript",
+        require: ["https://code.jquery.com/jquery-3.5.1.min.js", "https://code.jquery.com/jquery-1.7.1.min.js"],
+        source: "https://greasyforx.org/scripts/00000-something-something-long-name/code/Something%20something%20long20name.user.js"
+    };
+    if (updates) {
+        metadata.updateURL = ["https://www.k21p.com/example.user.js"];
+        metadata.downloadURL = ["https://www.k21p.com/example.user.js"];
+    }
+    if (longName) {
+        metadata.name = "Test Install Userscript with loooooooooooooooooooooooooooooooooooooooooong name";
+    }
+    return metadata;
+}
+
 const files = [
     generateFile("js", true, true),
     generateFile("css"),
@@ -341,7 +360,7 @@ const _browser = {
                                 filename: "Google Images Restored.js",
                                 disabled: false,
                                 type: "js",
-                                metadata: []
+                                metadata: generateMetadata()
                             },
                             {
                                 name: "Subframe Script Managerial Staffing Company",
@@ -365,14 +384,7 @@ const _browser = {
                     {success: "Click to install", installed: false},
                     {success: "Click to re-install", installed: true}
                 ]);
-                response.metadata = {
-                    description: "This userscript re-implements the \"View Image\" and \"Search by image\" buttons into google images.",
-                    grant: ["GM.getValue", "GM.setValue", "GM.xmlHttpRequest"],
-                    match: ["https://www.example.com/*", "https://www.example.com/somethingReallylong/goesRightHere"],
-                    name: "Test Install Userscript",
-                    require: ["https://code.jquery.com/jquery-3.5.1.min.js", "https://code.jquery.com/jquery-1.7.1.min.js"],
-                    source: "https://greasyforx.org/scripts/00000-something-something-long-name/code/Something%20something%20long20name.user.js"
-                };
+                response.metadata = generateMetadata();
                 // response.error = "something went wrong (dev)";
             }
             if (!responseCallback) {

From f82ce6bba3f04de0f26adbc591eeebde675d12af Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Tue, 14 Mar 2023 05:07:27 +0800
Subject: [PATCH 11/12] feat: trash file and confirmation

---
 src/popup/App.svelte                          | 23 +++++--
 src/popup/Components/Views/DetailView.svelte  | 67 +++++++++++++------
 .../SafariWebExtensionHandler.swift           | 18 +++--
 3 files changed, 74 insertions(+), 34 deletions(-)

diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index c1903c00..eca6127a 100644
--- a/src/popup/App.svelte
+++ b/src/popup/App.svelte
@@ -476,10 +476,25 @@
 
     async function updateConfirm() {
         console.log("updateConfirm");
+        // TODO
+        // will be implement after the new async update check is implemented
     }
 
-    async function deleteConfirm() {
-        console.log("deleteConfirm");
+    async function trashConfirm() {
+        disabled = true;
+        const message = {name: "POPUP_TRASH", item: detailViewItem};
+        const response = await browser.runtime.sendNativeMessage(message);
+        if (response.error) {
+            errorNotification = response.error;
+        } else {
+            // delete the item in the cache array after success
+            allItems = allItems.filter(obj => obj.filename !== detailViewItem.filename);
+            // refresh main view
+            refreshView();
+        }
+        disabled = false;
+        // exit detail view
+        showDetailView = undefined;
     }
 
     onMount(async () => {
@@ -618,10 +633,10 @@
     >
         <DetailView
             itemdata={detailViewItem}
-            cancelClick={() => showDetailView = false}
+            goBackClick={() => showDetailView = false}
             installConfirmClick={installConfirm}
             updateConfirmClick={updateConfirm}
-            deleteConfirmClick={deleteConfirm}
+            trashConfirmClick={trashConfirm}
         />
     </View>
 {:else if showAll}
diff --git a/src/popup/Components/Views/DetailView.svelte b/src/popup/Components/Views/DetailView.svelte
index 1c24bb46..292229b4 100644
--- a/src/popup/Components/Views/DetailView.svelte
+++ b/src/popup/Components/Views/DetailView.svelte
@@ -4,10 +4,10 @@
     import {parse} from "../../../shared/utils";
     
     export let itemdata;
-    export let cancelClick;
+    export let goBackClick;
     export let installConfirmClick;
     export let updateConfirmClick;
-    export let deleteConfirmClick;
+    export let trashConfirmClick;
 
     const showItems = [
         "version",
@@ -18,6 +18,18 @@
     ];
     let errormsg = itemdata.error;
     let metadata = itemdata.metadata;
+    let checking;
+    let trashing;
+    let updating; // TODO
+
+    $: checking = trashing || updating;
+
+    function cancelClick() {
+        if (trashing) {
+            return trashing = undefined;
+        }
+        goBackClick();
+    }
 
     function metadataInit() {
         if (metadata) return;
@@ -53,19 +65,21 @@
             {#if itemdata.filename}
                 <li class="item--filename">{itemdata.filename}</li>
             {/if}
-            {#if metadata.description}
-                <li class="item--description">{metadata.description}</li>
-            {/if}
-            {#each showItems as key}
-                {#if metadata[key]}
-                    <li class="item--field">
-                        <div>@{key}</div>
-                        {#each metadata[key] as val}
-                            <div class="truncate">{val}</div>
-                        {/each}
-                    </li>
+            {#if !checking}
+                {#if metadata.description}
+                    <li class="item--description">{metadata.description}</li>
                 {/if}
-            {/each}
+                {#each showItems as key}
+                    {#if metadata[key]}
+                        <li class="item--field">
+                            <div>@{key}</div>
+                            {#each metadata[key] as val}
+                                <div class="truncate">{val}</div>
+                            {/each}
+                        </li>
+                    {/if}
+                {/each}
+            {/if}
         </ul>
         {#if itemdata.url}
         <div class="badge">
@@ -73,7 +87,18 @@
             <div class="badge--text">Be sure you trust the author before installing. Nefarious code can exploit your security and privacy.</div>
         </div>
         {/if}
+        {#if trashing}
+        <div class="badge">
+            <div class="badge--icon">{@html iconWarn}</div>
+            <div class="badge--text">Are you sure you want to trash this file?</div>
+        </div>
+        {/if}
         <div class="buttons">
+            {#if trashing}
+                <button class="trash" on:click={trashConfirmClick}>
+                    Confirm
+                </button>
+            {/if}
             <button class="cancel" on:click={cancelClick}>
                 Cancel
             </button>
@@ -82,12 +107,12 @@
                     {itemdata.installed ? "Reinstall" : "Install"}
                 </button>
             {/if}
-            {#if itemdata.filename}
-                <button class="delete" on:click={deleteConfirmClick}>
-                    Delete
+            {#if itemdata.filename && !checking}
+                <button class="trash" on:click={() => trashing = true}>
+                    Trash
                 </button>
             {/if}
-            {#if itemdata.update}
+            {#if itemdata.update && !checking}
                 <button class="update" on:click={updateConfirmClick}>
                     Update
                 </button>
@@ -190,6 +215,7 @@
 
     .buttons {
         display: flex;
+        flex-wrap: wrap;
         justify-content: space-between;
         gap: 1rem;
         padding-bottom: 1rem;
@@ -200,7 +226,7 @@
         border-radius: var(--border-radius);
         color: var(--color-bg-primary);
         font-weight: 600;
-        flex-grow: 1;
+        flex: 1 0 calc(33.333% - 1rem);
         height: 2rem;
     }
 
@@ -212,7 +238,8 @@
         background-color: var(--color-yellow);
     }
 
-    button.delete {
+    button.trash {
+        color: var(--text-color-primary);
         background-color: var(--color-red);
     }
 </style>
\ No newline at end of file
diff --git a/xcode/Safari-Extension/SafariWebExtensionHandler.swift b/xcode/Safari-Extension/SafariWebExtensionHandler.swift
index 4805adf0..65a95a91 100644
--- a/xcode/Safari-Extension/SafariWebExtensionHandler.swift
+++ b/xcode/Safari-Extension/SafariWebExtensionHandler.swift
@@ -233,18 +233,16 @@ class SafariWebExtensionHandler: NSObject, NSExtensionRequestHandling {
                 }
             #endif
         }
-        else if name == "PAGE_TRASH" {
-            #if os(macOS)
-                if let item = message?["item"] as? [String: Any] {
-                    if trashFile(item) {
-                        response.userInfo = [SFExtensionMessageKey: ["success": true]]
-                    } else {
-                        response.userInfo = [SFExtensionMessageKey: ["error": "failed to trash file"]]
-                    }
+        else if name == "PAGE_TRASH" || name == "POPUP_TRASH"  {
+            if let item = message?["item"] as? [String: Any] {
+                if trashFile(item) {
+                    response.userInfo = [SFExtensionMessageKey: ["success": true]]
                 } else {
-                    inBoundError = true
+                    response.userInfo = [SFExtensionMessageKey: ["error": "failed to trash file"]]
                 }
-            #endif
+            } else {
+                inBoundError = true
+            }
         }
         else if name == "PAGE_UPDATE" {
             #if os(macOS)

From 8cf0deb2dddc83126f3ab3cfab0c7d37111a20d7 Mon Sep 17 00:00:00 2001
From: quoid <7660254+quoid@users.noreply.github.com>
Date: Tue, 14 Mar 2023 21:37:05 -0400
Subject: [PATCH 12/12] chore: update `i` button styles

---
 src/popup/Components/PopupItem.svelte | 38 ++++++++++++++++++---------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/popup/Components/PopupItem.svelte b/src/popup/Components/PopupItem.svelte
index df2b1175..14a2919e 100644
--- a/src/popup/Components/PopupItem.svelte
+++ b/src/popup/Components/PopupItem.svelte
@@ -1,5 +1,7 @@
 <script>
+    import IconButton from "../../shared/Components/IconButton.svelte";
     import Tag from "../../shared/Components/Tag.svelte";
+    import iconInfo from "../../shared/img/icon-info.svg?raw";
 
     export let background;
     export let enabled = false;
@@ -21,7 +23,12 @@
         <div class="truncate">{name}</div>
         {#if subframe}<div class="subframe">SUB</div>{/if}
     </div>
-    <div class="more" on:click={detailItem}>ⓘ</div>
+    <div class="more" on:click={detailItem}>
+        <IconButton
+            icon={iconInfo}
+            title="Show user script details"
+        />
+    </div>
 </div>
 
 <style>
@@ -39,23 +46,15 @@
     }
 
     @media (hover: hover) {
-        .item:hover,
-        .item .base:hover,
-        .item .more:hover {
+        .item:hover {
             background-color: rgb(255 255 255 / 0.075);
         }
-        
+
         .item:active {
             background-color: rgb(255 255 255 / 0.15);
         }
     }
 
-    @media (hover: none) {
-        .item .more {
-            border-left: .1rem solid rgb(255 255 255 / 0.075);
-        }
-    }
-
     .item .base {
         align-items: center;
         cursor: pointer;
@@ -69,10 +68,25 @@
     }
 
     .item .more {
-        padding: .5rem 1rem;
+        padding: .5rem;
         font-weight: bold;
     }
 
+    .more :global(button svg) {
+        opacity: 1;
+        transform: scale(0.75);
+    }
+
+    @media (hover: hover) {
+        .more :global(button svg:not(:hover)) {
+            opacity: 0.25;
+        }
+
+        .more:hover :global(button svg) {
+            opacity: 1;
+        }
+    }
+
     span {
         align-items: center;
         background-color: var(--color-red);