add Settings page

src/App.svelte

@@ -23,6 +23,7 @@
   import Launch from "./pages/Launch.svelte";
   import { Toaster } from "svelte-french-toast";
   import type { User } from "./types/user";
+  import Settings from "./pages/Settings.svelte";
 
   let user: User | undefined = undefined;
   let loggedIn = false;
@@ -48,7 +49,7 @@
       >EZPPLauncher</span
     >
   </div>
-  {#if $currentPage != Page.Login}
+  {#if $currentPage == Page.Launch}
     <div class="flex flex-row gap-2 w-fill cursor-pointer md:order-2">
       <Avatar
         class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
@@ -75,13 +76,14 @@
           Profile
         </DropdownItem> -->
       {/if}
-      <!-- <DropdownItem
+      <DropdownItem
         class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+        on:click={() => currentPage.set(Page.Settings)}
       >
         <UserSettingsSolid class="select-none outline-none border-none" />
         Settings
-      </DropdownItem> 
-      <DropdownDivider />-->
+      </DropdownItem>
+      <DropdownDivider />
       {#if loggedIn}
         <DropdownItem
           class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
@@ -115,6 +117,8 @@
 
 {#if $currentPage == Page.Login}
   <Login />
+{:else if $currentPage == Page.Settings}
+  <Settings />
 {:else}
   <Launch />
 {/if}

src/consts/pages.ts

@@ -1,4 +1,5 @@
 export enum Page {
   Login = 0,
   Launch = 1,
+  Settings = 2,
 }

src/pages/Settings.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Button, ButtonGroup, Input } from "flowbite-svelte";
+  import { FolderSolid } from "flowbite-svelte-icons";
+  import { currentPage } from "../storage/localStore";
+  import { Page } from "../consts/pages";
+</script>
+
+<main
+  class="h-[265px] my-auto flex flex-col justify-center items-center p-5 animate-fadeIn opacity-0"
+>
+  <div
+    class="container flex flex-col items-center justify-center gap-5 rounded-lg p-3"
+  >
+    <ButtonGroup class="w-full">
+      <Input type="text" placeholder="Path to your osu! installation" />
+      <Button color="light" class="dark:active:!bg-gray-900"
+        ><FolderSolid
+          size="sm"
+          class="dark:text-gray-300 text-gray-500 outline-none border-none select-none pointer-events-none"
+        /></Button
+      >
+    </ButtonGroup>
+    <div class="flex flex-row justify-center items-center gap-5">
+      <Button color="light" class="dark:active:!bg-gray-900">Save</Button>
+      <Button
+        color="red"
+        class="dark:active:!bg-red-900 border-red-400"
+        on:click={() => currentPage.set(Page.Launch)}>Cancel</Button
+      >
+    </div>
+  </div>
+</main>