Move to lucide icons

src/api/api.ts

@@ -1,5 +1,5 @@
 import {getEnv} from "~/utils/env";
-import {loginStore, type LoginStore} from "~/stores/login";
+import {loginStore} from "~/stores/login";
 import {get} from "svelte/store";
 
 export function URL() {
@@ -15,6 +15,7 @@ export async function sendSessionRequest(path: string, opt: RequestInit) {
   let headers = new Headers(opt.headers);
   setLoginHeaders(headers);
   opt.headers = headers;
+  console.log(path);
   let z = await sendApiRequest(path, opt);
 
   // Auth error
@@ -30,7 +31,7 @@ export async function sendSessionRequest(path: string, opt: RequestInit) {
       headers = new Headers(opt.headers);
       setLoginHeaders(headers);
       opt.headers = headers;
-      z = await fetch(URL() + path, opt);
+      z = await sendApiRequest(path, opt);
     }
   }
   return z;

src/components/oauth/Authorize.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {CheckCircle, ExternalLink, Link2, Lock, Slash, XCircle} from "lucide-svelte";
   import {onMount} from "svelte";
   import {navigate, useLocation} from "svelte-navigator";
   import {getUser} from "~/api/login";
@@ -92,29 +93,32 @@
         <ul>
           {#if scopes}
             {#each scopes as scope}
-              <li>{scope.desc}</li>
+              <li><CheckCircle size={24} />{scope.desc}</li>
             {/each}
           {/if}
-          <li data-fake>{fakeScope[Math.floor(Math.random() * fakeScope.length)]}</li>
+          <li data-fake><XCircle size={24} />{fakeScope[Math.floor(Math.random() * fakeScope.length)]}</li>
         </ul>
       </div>
       <div class="oauth-details">
         <ul>
-          <li data-icon="link">Authorization will redirect to: <span class="oauth-domain">{app_domain}</span></li>
-          <li data-icon="lock">
-            The
-            {#if app.privacy}
-              <a href={app.privacy} target="_blank" rel="noreferrer noopener nofollow">Privacy Policy</a>
-            {:else}
-              Privacy Policy
-            {/if}
-            and
-            {#if app.terms}
-              <a href={app.terms} target="_blank" rel="noreferrer noopener nofollow">Terms of Service</a>
-            {:else}
-              Terms of Service
-            {/if}
-            of {app.app_name}'s developer will apply
+          <li><Link2 size={16} /> Authorization will redirect to: <span class="oauth-domain">{app_domain}</span></li>
+          <li>
+            <Lock size={16} />
+            <div>
+              The
+              {#if app.privacy}
+                <a href={app.privacy} target="_blank" rel="noreferrer noopener nofollow">Privacy Policy</a>
+              {:else}
+                Privacy Policy
+              {/if}
+              and
+              {#if app.terms}
+                <a href={app.terms} target="_blank" rel="noreferrer noopener nofollow">Terms of Service</a>
+              {:else}
+                Terms of Service
+              {/if}
+              of {app.app_name}'s developer will apply.
+            </div>
           </li>
         </ul>
       </div>
@@ -129,7 +133,6 @@
 {/if}
 
 <style lang="scss">
-  @import "../../assets/material-symbols.scss";
   @import "../../assets/panel.scss";
 
   .oauth-widget {
@@ -160,30 +163,24 @@
 
         > ul {
           margin: 0;
+          padding-left: 24px;
 
           > li {
             margin-top: 8px;
             position: relative;
+            display: flex;
 
             &::marker {
               content: "";
             }
 
-            &::before {
-              @include mso;
-              font-size: 24px;
-              line-height: 24px;
-              white-space: pre;
-              content: "check_circle";
-              position: absolute;
-              left: -32px;
-              top: -2px;
-              color: var(--primary-link);
+            > :global(svg) {
+              color: #66cc66;
+              margin-right: 16px;
             }
 
-            &[data-fake]::before {
-              content: "cancel";
-              color: #dd5555;
+            &[data-fake] > :global(svg) {
+              color: #cc6666;
             }
           }
         }
@@ -202,20 +199,14 @@
           > li {
             margin-top: 8px;
             position: relative;
+            display: flex;
 
             &::marker {
               content: "";
             }
 
-            &::before {
-              @include mso;
-              font-size: 16px;
-              line-height: 16px;
-              white-space: pre;
-              content: attr(data-icon);
-              position: absolute;
-              left: -24px;
-              top: -2px;
+            > :global(svg) {
+              margin-right: 16px;
             }
 
             > .oauth-domain {

src/lib/HeaderDropdown.svelte

@@ -96,6 +96,7 @@
       user-select: none;
       height: 100%;
       padding: 0 16px;
+      z-index: 9999;
 
       > .dropdown-title {
         display: flex;
@@ -113,11 +114,11 @@
     > .dropdown-floating {
       z-index: 9998;
       position: absolute;
-      top: 100%;
+      top: -25px;
       right: 0;
-      background: var(--bg-panel-action);
       width: 100%;
       border-radius: 0 0 8px 8px;
+      padding-top: 75px;
 
       -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
@@ -130,6 +131,7 @@
         display: flex;
         flex-direction: column;
         text-align: center;
+        background: var(--bg-panel-action);
 
         > a {
           display: flex;