From fe91736da7f07ed9a1dfdd70ec7a11234cf8b02f Mon Sep 17 00:00:00 2001
From: Isaac Marovitz <isaacryu@icloud.com>
Date: Sat, 12 Oct 2024 15:02:52 +0200
Subject: [PATCH] Settings window

---
 src-tauri/capabilities/default.json     |  3 +-
 src/components/Header.svelte            | 24 +++++++++-
 src/components/settings/Graphics.svelte |  5 ++
 src/components/settings/Logging.svelte  |  5 ++
 src/components/settings/System.svelte   |  5 ++
 src/routes/+layout.svelte               | 33 ++-----------
 src/routes/+page.svelte                 | 35 +++++++++++---
 src/routes/settings/+page.svelte        | 63 +++++++++++++++++++++++++
 8 files changed, 134 insertions(+), 39 deletions(-)
 create mode 100644 src/components/settings/Graphics.svelte
 create mode 100644 src/components/settings/Logging.svelte
 create mode 100644 src/components/settings/System.svelte
 create mode 100644 src/routes/settings/+page.svelte

diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 3bb4cc4..0e62a8a 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -5,6 +5,7 @@
   "windows": ["main"],
   "permissions": [
     "core:default",
-    "shell:allow-open"
+    "shell:allow-open",
+    "core:webview:allow-create-webview-window"
   ]
 }
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 3dd7ec4..19d0058 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-    import { Icon, Squares2x2, ListBullet } from "svelte-hero-icons";
+    import { Icon, Squares2x2, ListBullet, Cog6Tooth } from "svelte-hero-icons";
     import { gridLayout } from "../stores";
+    import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
 
     export let searchTerm: string;
 
@@ -11,6 +12,23 @@
     function switchGrid() {
         $gridLayout = true;
     }
+
+    function createSettings() {
+        console.log("Making settings widow");
+
+        const settingsWindow = new WebviewWindow("settings", {
+            url: "/settings",
+            title: "Settings"
+        });
+
+        settingsWindow.once("tauri://created", () => {
+            console.log("Window created");
+        });
+
+        settingsWindow.once("tauri://error", (err) => {
+            console.log(err)
+        })
+    }
 </script>
 
 <div class="sticky top-0 flex flex-row p-2 gap-2 bg-neutral-900">
@@ -24,6 +42,10 @@
         </button>
     </div>
 
+    <button type="button" on:click={createSettings} class="border border-neutral-600 text-white disabled:text-neutral-400 h-10 w-10 p-1 rounded-lg bg-neutral-700 hover:bg-neutral-600 active:bg-neutral-700 shadow-sm">
+        <Icon src="{Cog6Tooth}" solid />
+    </button>
+
     <div class="flex-grow" />
 
     <div>
diff --git a/src/components/settings/Graphics.svelte b/src/components/settings/Graphics.svelte
new file mode 100644
index 0000000..032aade
--- /dev/null
+++ b/src/components/settings/Graphics.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+
+</script>
+
+<h1>Graphics</h1>
\ No newline at end of file
diff --git a/src/components/settings/Logging.svelte b/src/components/settings/Logging.svelte
new file mode 100644
index 0000000..96bbedd
--- /dev/null
+++ b/src/components/settings/Logging.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+
+</script>
+
+<h1>Logging</h1>
\ No newline at end of file
diff --git a/src/components/settings/System.svelte b/src/components/settings/System.svelte
new file mode 100644
index 0000000..a37c9f3
--- /dev/null
+++ b/src/components/settings/System.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+
+</script>
+
+<h1>System</h1>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5a8352e..4c933c9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,34 +1,7 @@
 <script lang="ts">
-    import Header from "$components/Header.svelte";
-    import Footer from "$components/Footer.svelte";
-    import { Game } from "$models/Game";
-    import GameLibrary from "$components/GameLibrary.svelte";
 
-    let sonicGame = new Game("Sonic Mania", "./icon0.png", "SEGA", "1.03", "CUSA07023", 197927919);
-    let weAreDoomedGame = new Game("WE ARE DOOMED", "./icon1.png", "Vertex Pop Inc.", "1.00", "CUSA02394", 197927919);
-    let games = [sonicGame, weAreDoomedGame, sonicGame, sonicGame, sonicGame, sonicGame, sonicGame, sonicGame, sonicGame];
-    let filteredGames: Game[] = [];
-
-    let searchTerm = "";
-    let gameCount = 0;
-
-    const searchGames = () => {
-        filteredGames = games.filter(game => {
-            let gameTitle = game.name.toLowerCase();
-            return gameTitle.includes(searchTerm.toLowerCase())
-        });
-
-        gameCount = filteredGames.length;
-    }
-
-    searchGames()
 </script>
 
-<div class="min-h-full h-full flex flex-col">
-    <Header bind:searchTerm on:input={searchGames} />
-    <main class="flex-grow overflow-y-scroll" id="content">
-        <GameLibrary games={filteredGames} />
-        <slot />
-    </main>
-    <Footer bind:gameCount />
-</div>
\ No newline at end of file
+<main class="flex flex-col h-full max-h-full" id="content">
+    <slot />
+</main>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fc90db7..84fb079 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1,33 @@
 <script lang="ts">
-  import { invoke } from "@tauri-apps/api/core";
+    import Header from "$components/Header.svelte";
+    import Footer from "$components/Footer.svelte";
+    import { Game } from "$models/Game";
+    import GameLibrary from "$components/GameLibrary.svelte";
 
-  let name = "";
-  let greetMsg = "";
+    let sonicGame = new Game("Sonic Mania", "./icon0.png", "SEGA", "1.03", "CUSA07023", 197927919);
+    let weAreDoomedGame = new Game("WE ARE DOOMED", "./icon1.png", "Vertex Pop Inc.", "1.00", "CUSA02394", 197927919);
+    let games = [sonicGame, weAreDoomedGame, sonicGame, sonicGame, sonicGame, sonicGame, sonicGame, sonicGame, sonicGame];
+    let filteredGames: Game[] = [];
 
-  async function greet() {
-    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    greetMsg = await invoke("greet", { name });
-  }
+    let searchTerm = "";
+    let gameCount = 0;
+
+    const searchGames = () => {
+        filteredGames = games.filter(game => {
+            let gameTitle = game.name.toLowerCase();
+            return gameTitle.includes(searchTerm.toLowerCase())
+        });
+
+        gameCount = filteredGames.length;
+    }
+
+    searchGames()
 </script>
 
+<div class="min-h-full h-full flex flex-col">
+  <Header bind:searchTerm on:input={searchGames} />
+  <div class="flex-grow overflow-y-scroll">
+      <GameLibrary games={filteredGames} />
+  </div>
+  <Footer bind:gameCount />
+</div>
\ No newline at end of file
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
new file mode 100644
index 0000000..1a299f6
--- /dev/null
+++ b/src/routes/settings/+page.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+    import type { IconSource } from "@steeze-ui/heroicons";
+    import type { ComponentType } from "svelte";
+    import { Icon, CpuChip, Sparkles, DocumentText } from "svelte-hero-icons";
+    import System from "$components/settings/System.svelte";
+    import Graphics from "$components/settings/Graphics.svelte";
+    import Logging from "$components/settings/Logging.svelte";
+
+    class Tab {
+        icon: IconSource;
+        label: string;
+        content: ComponentType;
+
+        constructor(icon: IconSource, label: string, content: ComponentType)
+        {
+            this.icon = icon;
+            this.label = label;
+            this.content = content;
+        }
+    }
+
+    let tabs: Tab[] = [
+        {
+            icon: CpuChip,
+            label: "System",
+            content: System
+        },
+        {
+            icon: Sparkles,
+            label: "Graphics",
+            content: Graphics
+        },
+        {
+            icon: DocumentText,
+            label: "Logging",
+            content: Logging
+        },
+    ];
+
+    let activeTab = tabs[0];
+
+    function setActiveTab(tab: Tab) {
+        activeTab = tab;
+    }
+</script>
+
+<div class="bg-neutral-900 flex h-full p-2 space-x-2">
+    <ul class="flex-col space-y-2">
+        {#each tabs as tab}
+        <li>
+            <button on:click={() => {setActiveTab(tab)}} class="{activeTab == tab ? "ring-1" : ""} inline-flex items-center p-2 w-full rounded-lg border border-neutral-600 bg-neutral-700 hover:bg-neutral-600 active:bg-neutral-700 shadow-sm">
+                <div class="w-5 h-5 me-2 text-white">
+                    <Icon src="{tab.icon}" solid />
+                </div>
+                {tab.label}
+            </button>
+        </li>
+        {/each}
+    </ul>
+    <div class="border border-neutral-600 bg-neutral-800 rounded-lg p-2 h-full w-full">
+        <svelte:component this={activeTab.content} />
+    </div>
+</div>
\ No newline at end of file