Remove external lucide svelte library and fix multiple calls to /user/@me on the profile page

package.json

@@ -20,7 +20,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.2",
     "@tsconfig/svelte": "^3.0.0",
-    "lucide-svelte": "^0.102.0",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.8.0",
     "sass": "^1.55.0",

src/App.svelte

@@ -6,12 +6,13 @@
   import {loginStore, profileStore, type LoginStore, type ProfileData} from "./stores/login";
 
   loginStore.subscribe((value: LoginStore) => {
+    console.error("Change login", value);
     getMe();
   });
 
   async function getMe() {
     try {
-      let p = <ProfileData>await getUser("@me?from=app");
+      let p = <ProfileData>await getUser("@me");
       profileStore.set(p);
     } catch (_) {
       profileStore.set(undefined);

src/api/api.ts

@@ -1,12 +1,10 @@
 import {loginStore} from "~/stores/login";
 import {get} from "svelte/store";
 
-export function URL() {
-  return import.meta.env.VITE_API_URL;
-}
+export const URL = import.meta.env.VITE_API_URL;
 
 export async function sendApiRequest(path: string, opt: RequestInit) {
-  return fetch(URL() + path, opt);
+  return fetch(URL + path, opt);
 }
 
 export async function sendSessionRequest(path: string, opt: RequestInit) {

src/app.scss

@@ -70,3 +70,8 @@ button {
     }
   }
 }
+
+// useful utility styles
+.flex-gap {
+  flex-grow: 1;
+}

src/components/login/EmailCodeForm.svelte

@@ -24,6 +24,7 @@
     </section>
   </div>
   <div class="email-code-action">
+    <div class="flex-gap" />
     <button type="submit">Submit</button>
   </div>
 </form>
@@ -80,6 +81,7 @@
       background: var(--bg-panel-action);
       padding: 24px;
       border-radius: 0 0 var(--large-curve) var(--large-curve);
+      display: flex;
     }
   }
 </style>

src/components/login/LoginForm.svelte

@@ -2,13 +2,13 @@
   import {createEventDispatcher} from "svelte";
   import {navigate} from "svelte-navigator";
 
-  let inputEmail: string = "";
+  let inputUsername: string = "";
   let inputPassword: string = "";
 
   const dispatch = createEventDispatcher();
 
   function submitLogin() {
-    dispatch("submit", {email: inputEmail, password: inputPassword});
+    dispatch("submit", {email: inputUsername, password: inputPassword});
   }
 </script>
 
@@ -17,8 +17,8 @@
     <h1>Sign In</h1>
 
     <section>
-      <label for="email">Email</label>
-      <input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputEmail} />
+      <label for="username">Username</label>
+      <input id="username" type="text" name="username" placeholder=" " autocomplete="username" required bind:value={inputUsername} />
 
       <label for="current-password">Password</label>
       <input id="current-password" name="current-password" type="password" autocomplete="current-password" required bind:value={inputPassword} />
@@ -27,10 +27,10 @@
 
   <div class="login-action">
     <section>
-      <button type="submit">Login</button>
+      <button on:click={() => navigate("/register")} class="grey-btn">Register</button>
       <div class="flex-gap" />
       <!-- <button on:click={() => navigate("/forgot-password")} class="grey-btn">Forgot My Password</button> -->
-      <button on:click={() => navigate("/register")} class="grey-btn">Register</button>
+      <button type="submit">Login</button>
     </section>
   </div>
 </form>
@@ -92,12 +92,14 @@
         display: flex;
 
         > .grey-btn {
+          color: var(--primary-hover);
           margin-left: 8px;
-          background-color: #616161;
-        }
+          background-color: transparent;
 
-        > .flex-gap {
-          flex-grow: 1;
+          &:hover {
+            color: var(--primary-text);
+            background-color: #616161;
+          }
         }
       }
     }

src/components/oauth/Authorize.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
-  import {CheckCircle, Link2, Lock, XCircle} from "lucide-svelte";
+  import CheckCircle from "~/icons/CheckCircle.svelte";
+  import Link2 from "~/icons/Link2.svelte";
+  import Lock from "~/icons/Lock.svelte";
+  import XCircle from "~/icons/XCircle.svelte";
   import {onMount} from "svelte";
   import {navigate, useLocation} from "svelte-navigator";
   import {get} from "svelte/store";

src/components/profile/Profile.svelte

@@ -2,24 +2,26 @@
   import {onMount} from "svelte";
   import {getUser} from "~/api/login";
   import LazyDelay from "~/lib/LazyDelay.svelte";
-  import type {ProfileData} from "~/stores/login";
+  import {profileStore, type ProfileData} from "~/stores/login";
 
   export let id: "@me" | number;
   let user: ProfileData;
-  let userIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==";
+  const defaultIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==";
 
   onMount(async () => {
-    try {
-      user = await getUser(id);
-      userIcon = user.icon;
-    } catch (_) {}
+    if (id == "@me") user = $profileStore;
+    else {
+      try {
+        user = await getUser(id);
+      } catch (_) {}
+    }
   });
 </script>
 
 <div class="profile-widget">
   <div class="profile-content">
     {#if user}
-      <img class="icon" src={userIcon} alt="Profile Icon" />
+      <img class="icon" src={user.icon || defaultIcon} alt="Profile Icon" />
       <h1 class="displayName">{user.display_name}</h1>
       <h2 class="username">{user.username}</h2>
       <h3 class="email">{user.email}</h3>

src/components/register/RegisterForm.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {ExternalLink} from "lucide-svelte";
+  import ExternalLink from "~/icons/ExternalLink.svelte";
   import {createEventDispatcher} from "svelte";
   import {navigate} from "svelte-navigator";
   import PasswordConstraints from "~/lib/PasswordConstraints.svelte";
@@ -116,9 +116,9 @@
       </section>
     {/if}
     <section>
-      <button type="submit">Register</button>
-      <div class="flex-gap" />
       <button on:click={() => navigate("/login")} class="grey-btn">Login</button>
+      <div class="flex-gap" />
+      <button type="submit">Register</button>
     </section>
   </div>
 </form>
@@ -150,12 +150,14 @@
         display: flex;
 
         > .grey-btn {
+          color: var(--primary-hover);
           margin-left: 0 8px;
-          background-color: #616161;
-        }
+          background-color: transparent;
 
-        > .flex-gap {
-          flex-grow: 1;
+          &:hover {
+            color: var(--primary-text);
+            background-color: #616161;
+          }
         }
       }
     }

src/icons/CheckCircle.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let size = 24;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+  <polyline points="22 4 12 14.01 9 11.01" />
+</svg>

src/icons/ChevronDown.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  export let size = 24;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="6 9 12 15 18 9" />
+</svg>

src/icons/ChevronUp.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  export let size = 24;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="18 15 12 9 6 15" />
+</svg>

src/icons/ExternalLink.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let size = 24;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+  <polyline points="15 3 21 3 21 9" />
+  <line x1="10" y1="14" x2="21" y2="3" />
+</svg>

src/icons/Link2.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let size = 24;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M9 17H7A5 5 0 0 1 7 7h2" />
+  <path d="M15 7h2a5 5 0 1 1 0 10h-2" />
+  <line x1="8" y1="12" x2="16" y2="12" />
+</svg>

src/icons/Lock.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let size = 24;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+  <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+</svg>

src/icons/LogOut.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let size = 24;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+  <polyline points="16 17 21 12 16 7" />
+  <line x1="21" y1="12" x2="9" y2="12" />
+</svg>

src/icons/Settings.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let size = 24;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path
+    d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
+  />
+  <circle cx="12" cy="12" r="3" />
+</svg>

src/icons/User.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let size = 24;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+  <circle cx="12" cy="7" r="4" />
+</svg>

src/icons/XCircle.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let size = 24;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <line x1="15" y1="9" x2="9" y2="15" />
+  <line x1="9" y1="9" x2="15" y2="15" />
+</svg>

src/lib/HeaderDropdown.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import {loginStore, type ProfileData} from "~/stores/login";
-  import {User, Settings, LogOut, ChevronUp, ChevronDown} from "lucide-svelte";
+  import User from "~/icons/User.svelte";
+  import Settings from "~/icons/Settings.svelte";
+  import LogOut from "~/icons/LogOut.svelte";
+  import ChevronUp from "~/icons/ChevronUp.svelte";
+  import ChevronDown from "~/icons/ChevronDown.svelte";
   import {link, navigate} from "svelte-navigator";
 
   export let profile: ProfileData;

src/routes/login/LoginRoute.svelte

@@ -26,6 +26,9 @@
       if (params.has("back")) navigate(params.get("back"));
       else navigate("/profile");
     }
+    if (z.hasOwnProperty("log_id")) {
+      updatePage(postLogin({}, ""));
+    }
     loading = false;
   }
 
@@ -51,5 +54,7 @@
     <EmailCodeForm on:submit={submitLogin} />
   {:else if step == "mfa"}
     <!-- add mfa step -->
+  {:else}
+    <div>Something broke...</div>
   {/if}
 </Page>

src/routes/profile/ProfileRoute.svelte

@@ -3,11 +3,10 @@
   import {navigate} from "svelte-navigator";
   import Page from "~/lib/Page.svelte";
   import Profile from "~/components/profile/Profile.svelte";
-  import {get} from "svelte/store";
   import {profileStore} from "~/stores/login";
 
   onMount(async () => {
-    if (get(profileStore) === undefined) navigate("/login?back=/profile");
+    if ($profileStore === undefined) navigate("/login?back=/profile");
   });
 </script>
 

yarn.lock

@@ -442,11 +442,6 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
-lucide-svelte@^0.102.0:
-  version "0.102.0"
-  resolved "https://registry.yarnpkg.com/lucide-svelte/-/lucide-svelte-0.102.0.tgz#4a8bca665e6f01d21d60bb057996c35a6e878eb5"
-  integrity sha512-r8Nmz3XnRiesT3BxTaQvJnkbvutJMDv7HHADfDVZ1VLo3tWInfSBzWQya1V12dFfdBoz/bMwBX0abpccw77v4A==
-
 magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"