feat: begin dorion settings

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.pnpm-debug.log
+.idea

README.md

@@ -1 +1,3 @@
-# shelter-plugins
+# SpikeHD's shelter plugins
+
+Dorion stuff, now written for Shelter.

components/Dropdown.tsx

@@ -0,0 +1,47 @@
+import { css, classes } from "./Dropdown.tsx.scss";
+import { SelectArrow } from "./SelectArrow";
+
+const {
+  ui: { injectCss },
+} = shelter;
+
+let injectedCss = false;
+
+export const Dropdown: Component<{
+  value?: string;
+  placeholder?: string;
+  id?: string;
+  "aria-label"?: string;
+  onInput?(v: string): void;
+  options?: {
+    label: string;
+    value: string;
+  }[];
+  selected?: string;
+}> = (props) => {
+  if (!injectedCss) {
+    injectedCss = true;
+    injectCss(css);
+  }
+
+  return (
+    <div class={classes.dcontainer}>
+      <select
+        class={classes.ddown}
+        value={props.value}
+        placeholder={props.placeholder}
+        id={props.id}
+        aria-label={props["aria-label"]}
+        onInput={props.onInput}
+      >
+        {props.options?.map((o) => (
+          <option value={o.value} selected={props?.selected}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+
+      <SelectArrow class={classes.dsarrow} />
+    </div>
+  );
+};

components/Dropdown.tsx.scss

@@ -0,0 +1,33 @@
+.ddown {
+  box-sizing: border-box;
+
+  font-size: 16px;
+  width: 100%;
+  border-radius: 3px;
+  color: var(--text-normal);
+  background-color: var(--input-background);
+  border: none;
+  transition: border-color 0.2s ease-in-out;
+  padding: 10px;
+
+  appearance: none;
+
+  cursor: pointer;
+}
+
+.dcontainer {
+  position: relative;
+  width: 100%;
+}
+
+.dsarrow {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.dsarrow path {
+  fill: var(--text-secondary)
+}

components/SelectArrow.tsx

@@ -0,0 +1,9 @@
+interface Props {
+  class?: string;
+}
+
+export const SelectArrow = (props: Props) => (
+  <svg class={props.class} aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M16.59 8.59003L12 13.17L7.41 8.59003L6 10L12 16L18 10L16.59 8.59003Z" />
+  </svg>
+);

css.d.ts

@@ -0,0 +1,14 @@
+declare module "*.css" {
+  export const css: string;
+  export const classes: Record<string, string>;
+}
+
+declare module "*.scss" {
+  export const css: string;
+  export const classes: Record<string, string>;
+}
+
+declare module "*.sass" {
+  export const css: string;
+  export const classes: Record<string, string>;
+}

lune.config.js

@@ -0,0 +1,17 @@
+// Welcome to your Lune config file!
+// You can view documentation on Lune here:
+// https://github.com/uwu/shelter/tree/main/packages/lune
+// uncomment lines below to enable options, and feel free to delete this header.
+import { defineConfig } from "@uwu/lune";
+
+export default defineConfig({
+  // this is the directory that your plugins live in.
+  // repoSubDir: "plugins-live-in-here",
+
+  // this enables CSS Module support - see docs for info
+  cssModules: true,
+
+  // these add extra esbuild plugins into the pipeline.
+  // prePlugins: [],
+  // postPlugins: [],
+});

package.json

@@ -0,0 +1,14 @@
+{
+  "devDependencies": {
+    "@tauri-apps/api": "^1.5.1",
+    "@uwu/lune": "^1.2.1",
+    "@uwu/shelter-defs": "^1.1.0"
+  },
+  "type": "module",
+  "workspaces": [
+    "plugins/*"
+  ],
+  "dependencies": {
+    "spitroast": "^1.4.3"
+  }
+}

plugins/dorion-settings/components/SettingsPage.tsx

@@ -0,0 +1,135 @@
+import { Dropdown } from "../../../components/Dropdown";
+
+import { css, classes } from "./SettingsPage.tsx.scss"; 
+
+const {
+  ui: { Switch, SwitchItem, Button, Text, Header, HeaderTags, Divider },
+  solid: {
+    createSignal,
+  }
+} = shelter;
+
+const { invoke, process } = (window as any).__TAURI__;
+
+const getThemes = async () => {
+  const themes: string[] = await invoke("get_theme_names");
+  return themes.map((t: string) => ({
+    label: t.replace(/"/g, "").replace(".css", "").replace(".theme", ""),
+    value: t.replace(/"/g, ""),
+  }));
+};
+
+const getPlugins = async () => {
+  const plugins: DorionPlugin[] = await invoke("get_plugin_list");
+  return plugins;
+};
+
+const openPluginsFolder = () => {
+  invoke("open_plugins");
+};
+
+const openThemesFolder = () => {
+  invoke("open_themes");
+};
+
+export function SettingsPage() {
+  let [settings, setSettings] = createSignal<DorionSettings>({
+    zoom: "1.0",
+    client_type: "default",
+    sys_tray: false,
+    push_to_talk: false,
+    push_to_talk_keys: [],
+    theme: "none",
+    use_native_titlebar: false,
+    start_maximized: false,
+    open_on_startup: false,
+    startup_minimized: false,
+    autoupdate: false,
+    update_notify: true,
+  });
+  let [themes, setThemes] = createSignal<DorionTheme[]>([]);
+  let [plugins, setPlugins] = createSignal<DorionPlugin[]>([]);
+
+  (async () => {
+    setSettings(JSON.parse(await invoke("read_config_file")));
+    setThemes(await getThemes());
+    setPlugins(await getPlugins());
+
+    console.log("Got settings!");
+  })();
+
+  const saveSettings = async () => {
+    await invoke("write_config_file", {
+      contents: JSON.stringify(settings),
+    });
+
+    process.relaunch();
+  };
+
+  return (
+    <>
+      <Header tag={HeaderTags.H1}>Dorion Settings</Header>
+      <Dropdown
+        value={settings().theme}
+        onInput={(v: string) => {
+          setSettings({
+            ...settings(),
+            theme: v,
+          });
+        }}
+        options={themes()}
+      />
+
+      <Header class={classes.shead}>Client Type</Header>
+      <Dropdown
+        options={[
+          {
+            label: "Default",
+            value: "default",
+          },
+          {
+            label: "Canary",
+            value: "canary",
+          },
+          {
+            label: "PTB",
+            value: "ptb",
+          },
+        ]}
+        placeholder={"Select a client type..."}
+        maxVisibleItems={5}
+        closeOnSelect={true}
+        onInput={(v: string) => {
+          setSettings({
+            ...settings(),
+            client_type: v,
+          });
+        }}
+        selected={settings().client_type}
+      />
+
+      <Header class={classes.shead}>Window</Header>
+      {/* TODO: SLIDER FOR ZOOM LEVEL */}
+      <SwitchItem
+        value={settings().sys_tray}
+        onChange={(v) => setSettings({
+          ...settings(),
+          sys_tray: v,
+        })}
+        note="Instead of closing, Dorion will run in the background and will be accessible via the system tray."
+      >
+        Minimize to System Tray
+      </SwitchItem>
+
+      <SwitchItem
+        value={settings().start_maximized}
+        onChange={(v) => setSettings({
+          ...settings(),
+          start_maximized: v,
+        })}
+      >
+        Start Maximized
+      </SwitchItem>
+    </>
+  );
+}

plugins/dorion-settings/components/SettingsPage.tsx.scss

@@ -0,0 +1,4 @@
+.shead {
+  margin-top: 16px;
+  margin-bottom: 8px;
+}

plugins/dorion-settings/index.tsx

@@ -0,0 +1,17 @@
+import { SettingsPage } from "./components/SettingsPage"
+
+const {
+  settings: {
+    registerSection,
+  }
+} = shelter
+
+let settingsUninjects = [
+  registerSection("divider"),
+  registerSection("header", "Dorion"),
+  registerSection("section", "dorion-settings", "Dorion Settings", SettingsPage)
+]
+
+export const onUnload = () => {
+  settingsUninjects.forEach((u) => u())
+}

plugins/dorion-settings/plugin.json

@@ -0,0 +1,5 @@
+{
+  "name": "Dorion Settings",
+  "author": "SpikeHD",
+  "description": "Settings page for the Dorion client."
+}