implement dropdowns

Legcord · Jul 14, 2024 · 5fbce8b · 5fbce8b
1 parent cb70209
commit 5fbce8b
Show file tree

Hide file tree

Showing 13 changed files with 299 additions and 36 deletions.
diff --git a/lune.config.js b/lune.config.js
@@ -5,5 +5,5 @@
 import { defineConfig } from "@uwu/lune";
 
 export default defineConfig({
-  // configure lune here
+  cssModules: true
 });
diff --git a/package.json b/package.json
@@ -1,8 +1,11 @@
 {
   "devDependencies": {
     "@uwu/lune": "^1.4.1",
-    "@uwu/shelter-defs": "^1.1.0"
+    "@uwu/shelter-defs": "^1.1.0",
+    "prettier": "^3.3.3"
   },
   "type": "module",
-  "workspaces": ["plugins/*"]
+  "workspaces": [
+    "plugins/*"
+  ]
 }
diff --git a/plugins/armcordSettings/components/Dropdown.css b/plugins/armcordSettings/components/Dropdown.css
@@ -0,0 +1,27 @@
+.acDropdown option {
+  color: #fff;
+  font-weight: 400;
+  font-style: normal;
+}
+.acDropdown {
+  margin-top: 10px;
+  margin-bottom: 20px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  width: 100%;
+  font-size: 25px;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  background-color: var(--background-secondary-alt);
+  background-position: center right;
+  background-repeat: no-repeat;
+  border: 1px solid var(--background-floating);
+  border-radius: 2px;
+  color: #fff;
+  font-size: 1.2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  outline: none !important;
+}
diff --git a/plugins/armcordSettings/components/Dropdown.jsx b/plugins/armcordSettings/components/Dropdown.jsx
@@ -0,0 +1,5 @@
+import classes from "./Dropdown.css";
+
+export const Dropdown = (props) => {
+  return <select value={props.value} onChange={props.onChange} class={classes.acDropdown}>{props.children}</select>;
+};
diff --git a/plugins/armcordSettings/components/DropdownItem.css b/plugins/armcordSettings/components/DropdownItem.css
@@ -0,0 +1,22 @@
+.note {
+    margin-top: 8px;
+    color: var(--header-secondary);
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+    cursor: default;
+}
+.title {
+    flex: 1;
+    display: block;
+    overflow: hidden;
+    margin: 0;
+    color: var(--header-primary);
+    line-height: 24px;
+    font-weight: 500;
+    word-wrap: break-word;
+    cursor: pointer;
+}
+.item {
+    margin-bottom: 20px
+}
diff --git a/plugins/armcordSettings/components/DropdownItem.jsx b/plugins/armcordSettings/components/DropdownItem.jsx
@@ -0,0 +1,18 @@
+import { Dropdown } from "./Dropdown";
+import classes from "./DropdownItem.css";
+const {
+    plugin: { store },
+    ui: { Divider, Header, LinkButton, HeaderTags },
+  } = shelter;
+
+export const DropdownItem = (props) => {
+  return <div class={classes.item}>
+    <Header class={classes.title} tag={HeaderTags.H3}>{props.title}</Header>
+    <div class={classes.note}>{props.note}</div>
+    <Show when={props.link} keyed>
+        <LinkButton href={props.link}>Learn more here.</LinkButton>
+    </Show>
+    <Dropdown value={props.value} onChange={props.onChange}>{props.children}</Dropdown>
+    <Divider/>
+  </div>;
+};
diff --git a/plugins/armcordSettings/index.js b/plugins/armcordSettings/index.js
@@ -7,6 +7,8 @@ const {
   plugin: {store},
   settings: {registerSection},
   util: { log },
+  ui: {openConfirmationModal},
+  flux: {dispatcher}
 } = shelter;
 
 let settingsPages = [
@@ -18,12 +20,31 @@ let settingsPages = [
   registerSection('section', "armcord-updater", "Updater", UpdaterPage),
 ]
 
+function restartRequired(payload) {
+  if (payload.event === "settings_pane_viewed" && typeof payload.properties.origin_pane != "undefined") {
+    if (payload.properties.origin_pane == "armcord-settings") {
+      openConfirmationModal({
+        header: () => "Restart required",
+        body: () => "You need to restart to apply these changes.",
+        type: "danger",
+        confirmText: "Restart",
+        cancelText: "I'll do it later"
+      }).then(
+        () => armcord.restart(),
+        () => console.log("restart skipped")
+      );
+    }
+  }
+}
+
 export function onLoad() {
   refreshSettings()
   store.i18n = window.armcord.translations
   log("ArmCord Settings")
   settingsPages
+  dispatcher.subscribe("TRACK", restartRequired)
 }
 export function onUnload() {
   settingsPages.forEach((e) => e())
+  dispatcher.unsubscribe("TRACK", restartRequired)
 }
diff --git a/plugins/armcordSettings/pages/SettingsPage.css b/plugins/armcordSettings/pages/SettingsPage.css
@@ -0,0 +1,3 @@
+.category {
+    margin-bottom: 8px;
+}
diff --git a/plugins/armcordSettings/pages/SettingsPage.jsx b/plugins/armcordSettings/pages/SettingsPage.jsx
@@ -1,33 +1,171 @@
-
-import { set } from "../settings";
+import {DropdownItem} from "../components/DropdownItem";
+import classes from "./SettingsPage.css";
+import {set} from "../settings";
 const {
-    plugin: { store },
-    ui: { SwitchItem, Header, Divider, HeaderTags },
-  } = shelter;
-
-
+    plugin: {store},
+    ui: {SwitchItem, Header, Divider, HeaderTags}
+} = shelter;
+
 export function SettingsPage() {
-    return(
+    return (
         <>
-      <Header tag={HeaderTags.H1}>Settings</Header>
-      <Divider mt mb/>
-      <Header tag={HeaderTags.H5}>Mods</Header>
-      <SwitchItem note={store.i18n["settings-csp-desc"]} value={store.settings.armcordCSP} onChange={(e) => set("armcordCSP", e)}>ArmCord CSP</SwitchItem>
-      <SwitchItem note={store.i18n["settings-mod-vencord"]} value={store.settings.autoScroll}>Vencord</SwitchItem>
-      <SwitchItem note={store.i18n["settings-invitewebsocket-desc"]} value={store.settings.inviteWebsocket} onChange={(e) => set("inviteWebsocket", e)}>Rich Presence</SwitchItem>
-      <Header tag={HeaderTags.H5}>Look and feel</Header>
-      <SwitchItem note={store.i18n["settings-skipSplash-desc"]} value={store.settings.skipSplash} onChange={(e) => set("skipSplash", e)}>Skip splash screen</SwitchItem>
-      <SwitchItem note={store.i18n["settings-dynamicIcon-desc"]} value={store.settings.dynamicIcon} onChange={(e) => set("dynamicIcon", e)}>Dynamic icon</SwitchItem> 
-      <SwitchItem note={store.i18n["settings-mobileMode-desc"]} value={store.settings.mobileMode} onChange={(e) => set("mobileMode", e)}>Mobile Mode</SwitchItem>
-      <Header tag={HeaderTags.H5}>Behaviour</Header>
-      <SwitchItem note={store.i18n["settings-MultiInstance-desc"]} value={store.settings.multiInstance} onChange={(e) => set("multiInstance", e)}>Multi Instance</SwitchItem>
-      <SwitchItem note={store.i18n["settings-mintoTray-desc"]} value={store.settings.minimizeToTray} onChange={(e) => set("minimizeToTray", e)}>Work in background</SwitchItem>
-      <SwitchItem note={store.i18n["settings-tray-desc"]} value={store.settings.tray} onChange={(e) => set("tray", e)}>Tray</SwitchItem>
-      <SwitchItem note={store.i18n["settings-startMinimized-desc"]} value={store.settings.startMinimized} onChange={(e) => set("startMinimized", e)}>Start minimized</SwitchItem>
-      <SwitchItem note={store.i18n["settings-smoothScroll-desc"]} value={store.settings.smoothScroll} onChange={(e) => set("smoothScroll", e)}>Smooth scrolling</SwitchItem>
-      <SwitchItem note={store.i18n["settings-autoScroll-desc"]} value={store.settings.autoScroll} onChange={(e) => set("autoScroll", e)}>Allow auto-scroll</SwitchItem>
-      <SwitchItem note={store.i18n["settings-spellcheck-desc"]} value={store.settings.spellcheck} onChange={(e) => set("spellcheck", e)}>Spellcheck</SwitchItem>
-      <Header tag={HeaderTags.H5}>Legacy features</Header>
-      <SwitchItem note={store.i18n["settings-useLegacyCapturer-desc"]} value={store.settings.useLegacyCapturer} onChange={(e) => set("useLegacyCapturer", e)}>Use legacy capturer</SwitchItem>
-    </>
-    )}
+            <Header tag={HeaderTags.H1}>Settings</Header>
+            <Divider mt mb />
+            <Header class={classes.category} tag={HeaderTags.H5}>
+                Mods
+            </Header>
+            <SwitchItem
+                note={store.i18n["settings-csp-desc"]}
+                value={store.settings.armcordCSP}
+                onChange={(e) => set("armcordCSP", e)}
+            >
+                ArmCord CSP
+            </SwitchItem>
+            <SwitchItem note={store.i18n["settings-mod-vencord"]} value={store.settings.autoScroll}>
+                Vencord
+            </SwitchItem>
+            <SwitchItem
+                note={store.i18n["settings-invitewebsocket-desc"]}
+                value={store.settings.inviteWebsocket}
+                onChange={(e) => set("inviteWebsocket", e)}
+            >
+                Rich Presence
+            </SwitchItem>
+            <Header class={classes.category} tag={HeaderTags.H5}>
+                Look and feel
+            </Header>
+            <DropdownItem
+                value={store.settings.windowStyle}
+                onChange={(e) => set("windowStyle", e.target.value)}
+                title="Window style"
+                note={store.i18n["settings-invitewebsocket-desc"]}
+                link="https://github.com/ArmCord/ArmCord/wiki/Settings-%5Bwip%5D#armcord-theme"
+            >
+                <option value="default">Default (Custom)</option>
+                <option value="native">Native</option>
+                <option value="transparent">Transparent</option>
+            </DropdownItem>
+            <DropdownItem
+                value={store.settings.trayIcon}
+                onChange={(e) => set("trayIcon", e.target.value)}
+                title="Tray icon"
+                note={store.i18n["settings-trayIcon-desc"]}
+            >
+                    <option value="default">{store.i18n["settings-trayIcon-dynamic"]}</option>
+                    <option value="dsc-tray">{store.i18n["settings-trayIcon-normal"]}</option>
+                    <option value="clsc-dsc-tray">{store.i18n["settings-trayIcon-classic"]}</option>
+                    <option value="ac_plug_colored">{store.i18n["settings-trayIcon-colored-plug"]}</option>
+                    <option value="ac_white_plug">{store.i18n["settings-trayIcon-white-plug"]}</option>
+                    <option value="ac_white_plug_hollow">{store.i18n["settings-trayIcon-white-plug-alt"]}</option>
+                    <option value="ac_black_plug">{store.i18n["settings-trayIcon-black-plug"]}</option>
+                    <option value="ac_black_plug_hollow">{store.i18n["settings-trayIcon-black-plug-alt"]}</option>
+            </DropdownItem>
+            <SwitchItem
+                note={store.i18n["settings-skipSplash-desc"]}
+                value={store.settings.skipSplash}
+                onChange={(e) => set("skipSplash", e)}
+            >
+                Skip splash screen
+            </SwitchItem>
+            <SwitchItem
+                note={store.i18n["settings-dynamicIcon-desc"]}
+                value={store.settings.dynamicIcon}
+                onChange={(e) => set("dynamicIcon", e)}
+            >
+                Dynamic icon
+            </SwitchItem>
+            <SwitchItem
+                note={store.i18n["settings-mobileMode-desc"]}
+                value={store.settings.mobileMode}
+                onChange={(e) => set("mobileMode", e)}
+            >
+                Mobile Mode
+            </SwitchItem>
+            <Header class={classes.category} tag={HeaderTags.H5}>
+                Behaviour
+            </Header>
+            <DropdownItem
+                value={store.settings.channel}
+                onChange={(e) => set("channel", e.target.value)}
+                title="Discord channel"
+                note={store.i18n["settings-channel-desc"]}
+                link="https://support.discord.com/hc/en-us/articles/360035675191-Discord-Testing-Clients"
+            >
+                <option value="stable">Stable</option>
+                <option value="canary">Canary</option>
+                <option value="ptb">PTB</option>
+            </DropdownItem>
+            <DropdownItem
+                value={store.settings.performanceMode}
+                onChange={(e) => set("performanceMode", e.target.value)}
+                title="Performance mode"
+                note={store.i18n["settings-prfmMode-desc"]}
+                link="https://github.com/ArmCord/ArmCord/blob/dev/src/common/flags.ts"
+            >
+                <option value="performance">Performance</option>
+                <option value="battery">Battery</option>
+                <option value="vaapi">VAAPI</option>
+                <option value="none">None</option>
+            </DropdownItem>
+            <SwitchItem
+                note={store.i18n["settings-MultiInstance-desc"]}
+                value={store.settings.multiInstance}
+                onChange={(e) => set("multiInstance", e)}
+            >
+                Multi Instance
+            </SwitchItem>
+            <SwitchItem
+                note={store.i18n["settings-mintoTray-desc"]}
+                value={store.settings.minimizeToTray}
+                onChange={(e) => set("minimizeToTray", e)}
+            >
+                Work in background
+            </SwitchItem>
+            <SwitchItem
+                note={store.i18n["settings-tray-desc"]}
+                value={store.settings.tray}
+                onChange={(e) => set("tray", e)}
+            >
+                Tray
+            </SwitchItem>
+            <SwitchItem
+                note={store.i18n["settings-startMinimized-desc"]}
+                value={store.settings.startMinimized}
+                onChange={(e) => set("startMinimized", e)}
+            >
+                Start minimized
+            </SwitchItem>
+            <SwitchItem
+                note={store.i18n["settings-smoothScroll-desc"]}
+                value={store.settings.smoothScroll}
+                onChange={(e) => set("smoothScroll", e)}
+            >
+                Smooth scrolling
+            </SwitchItem>
+            <SwitchItem
+                note={store.i18n["settings-autoScroll-desc"]}
+                value={store.settings.autoScroll}
+                onChange={(e) => set("autoScroll", e)}
+            >
+                Allow auto-scroll
+            </SwitchItem>
+            <SwitchItem
+                note={store.i18n["settings-spellcheck-desc"]}
+                value={store.settings.spellcheck}
+                onChange={(e) => set("spellcheck", e)}
+            >
+                Spellcheck
+            </SwitchItem>
+            <Header class={classes.category} tag={HeaderTags.H5}>
+                Legacy features
+            </Header>
+            <SwitchItem
+                note={store.i18n["settings-useLegacyCapturer-desc"]}
+                value={store.settings.useLegacyCapturer}
+                onChange={(e) => set("useLegacyCapturer", e)}
+            >
+                Use legacy capturer
+            </SwitchItem>
+        </>
+    );
+}
diff --git a/plugins/armcordSettings/settings.js b/plugins/armcordSettings/settings.js
@@ -5,6 +5,6 @@ export function refreshSettings() {
 }
 export function set(key, value) {
     store.settings[key] = value;
-    console.log(store.settings[key])
+    console.log(key + ": " + store.settings[key])
     armcord.settings.setConfig(key, value)
 }
diff --git a/plugins/screenshareQualityFix/index.js b/plugins/screenshareQualityFix/index.js
@@ -1,11 +1,10 @@
 const {
   util: { log },
-	flux: { stores: {UserStore, MediaEngineStore}, dispatcher, intercept },
+	flux: { stores: {UserStore, MediaEngineStore}, dispatcher },
   plugin: { store }
 } = shelter;
 store.fps ??= 30; // set default
 store.resolution ??= 720; // set default
-let unintercept;
 function onStreamQualityChange() {
   const mediaConnections = [...MediaEngineStore.getMediaEngine().connections];
   const currentUserId = UserStore.getCurrentUser().id;

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml