Settings App

src/components/Navbar.tsx

@@ -66,6 +66,7 @@ export default function Navbar() {
           })}
           {loadedPlugins.map((item, i) => {
             if (!item.page || !item.icon || item.disabled) return
+            if (item.id == "bunker.settings") return
             return (
               <Tooltip key={i} delayDuration={0}>
                 <TooltipTrigger asChild>
@@ -98,9 +99,14 @@ export default function Navbar() {
           </Tooltip> */}
           <Tooltip delayDuration={0}>
             <TooltipTrigger asChild>
-              <div className="font-bold hover:bg-zinc-700 transition-colors duration-150 aspect-square flex items-center justify-center cursor-pointer group">
+            <div
+                onClick={() => {
+                  navigate(`/settings`)
+                }}
+                className="font-bold hover:bg-zinc-700 transition-colors duration-150 aspect-square flex items-center justify-center cursor-pointer group"
+              >
                 <Settings className="group-active:scale-90 transition-all duration-300" />
-              </div>
+            </div>
             </TooltipTrigger>
             <TooltipContent side="right">
               <p>Settings</p>

src/internal/Settings.tsx

@@ -0,0 +1,41 @@
+import { Plugin } from "@/lib/types"
+import bunker from "@/lib/bunker"
+import { Settings2 } from "lucide-react"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+
+import { useEffect, useState } from "react"
+
+const Settings: Plugin = {
+  name: "Settings",
+  id: "bunker.settings",
+  description: "Modify Bunker & Other apps settings!",
+  icon: Settings2,
+
+  page({ sdk }) {
+    function setStorageLocation(checked: boolean) {
+      if (checked) {
+        sdk.config.set("pluginLocation", "internal")
+      } else {
+        sdk.config.set("pluginLocation", "external")
+      }
+    }
+    return (
+        <div className="flex flex-col items-center w-full pt-16">
+            <h1 className="font-bold text-5xl">Settings </h1>
+
+            <div className="flex flex-wrap justify-center gap-4 mt-8">
+                <Switch id="storage-location" onCheckedChange={(checked) => setStorageLocation(checked)} />
+                <Label className="text-md" htmlFor="storage-location">Store Plugins Internally</Label>
+            </div>
+        </div>
+    )
+  },
+
+
+  onReady() {
+    console.log("Status")
+  },
+}
+
+export default Settings

src/lib/plugins.ts

@@ -49,6 +49,7 @@ import Viewer from "@/internal/Viewer"
 import Status from "@/internal/Status"
 import gba from "@/internal/GBA"
 import Updater from "@/internal/Updater"
+import Settings from "@/internal/Settings"
 import bunker from "@/lib/bunker"
 import { IDB } from "@/lib/idb"
 
@@ -58,6 +59,7 @@ export function registerDefaultPlugins() {
   registerPlugin(Viewer)
   registerPlugin(gba)
   registerPlugin(Updater)
+  registerPlugin(Settings)
 }
 
 export function removePlugin(id: string) {

src/root.tsx

@@ -2,6 +2,7 @@ import Home from "./routes/home"
 import Navbar from "./components/Navbar"
 import Store from "./routes/store"
 import Info from "./routes/info"
+import Settings from "./routes/settings"
 import { Toaster } from "./components/ui/sonner"
 import { HashRouter, Routes, Route } from "react-router-dom"
 import Plugins from "./routes/plugins"
@@ -31,6 +32,7 @@ export default function App() {
             <Route element={<PluginRouter />} path="/plugin/:plugin" />
             <Route element={<Store />} path="/store" />
             <Route element={<Info />} path="/info" />
+            <Route element={<Settings />} path="/settings" />
           </Routes>
         </div>
       </HashRouter>

src/routes/settings.tsx

@@ -0,0 +1,25 @@
+import { $plugins } from "@/lib/plugins"
+import { SDK } from "@/lib/sdk"
+import { useStore } from "@nanostores/react"
+
+export default function Settings() {
+  const loadedPlugins = useStore($plugins)
+  const plugin = "bunker.settings"
+
+  const selectedPlugin = loadedPlugins.find((selected) => selected.id == plugin)
+  if (!selectedPlugin || !selectedPlugin.page)
+    return (
+      <div className="text-center absolute top-1/2 -translate-y-1/2 w-full text-2xl text-semibold">
+        Unable to locate plugin{" "}
+        <span className="bg-zinc-800 py-1 px-3 rounded-lg border border-white/25 font-mono text-xl">
+          {plugin}
+        </span>
+      </div>
+    )
+
+  return (
+    <div className="h-screen w-[calc(100vw-4rem)] overflow-auto">
+      <selectedPlugin.page sdk={new SDK(selectedPlugin.id)} />
+    </div>
+  )
+}