Settings window

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"
   ]
 }

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>

src/components/settings/Graphics.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+
+</script>
+
+<h1>Graphics</h1>

src/components/settings/Logging.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+
+</script>
+
+<h1>Logging</h1>

src/components/settings/System.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+
+</script>
+
+<h1>System</h1>

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>
+<main class="flex flex-col h-full max-h-full" id="content">
+    <slot />
+</main>

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>

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>