diff --git a/lune.config.js b/lune.config.js index 105b199..0f6822d 100644 --- 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 index b51b855..b748a0c 100644 --- 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 new file mode 100644 index 0000000..053bda4 --- /dev/null +++ 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 new file mode 100644 index 0000000..3648b82 --- /dev/null +++ b/plugins/armcordSettings/components/Dropdown.jsx @@ -0,0 +1,5 @@ +import classes from "./Dropdown.css"; + +export const Dropdown = (props) => { + return ; +}; diff --git a/plugins/armcordSettings/components/DropdownItem.css b/plugins/armcordSettings/components/DropdownItem.css new file mode 100644 index 0000000..32d6bc7 --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/plugins/armcordSettings/components/DropdownItem.jsx b/plugins/armcordSettings/components/DropdownItem.jsx new file mode 100644 index 0000000..8e6525e --- /dev/null +++ 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
+
{props.title}
+
{props.note}
+ + Learn more here. + + {props.children} + +
; +}; diff --git a/plugins/armcordSettings/index.js b/plugins/armcordSettings/index.js index ce3bfd6..67a8147 100644 --- 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 new file mode 100644 index 0000000..0e42978 --- /dev/null +++ b/plugins/armcordSettings/pages/SettingsPage.css @@ -0,0 +1,3 @@ +.category { + margin-bottom: 8px; +} \ No newline at end of file diff --git a/plugins/armcordSettings/pages/SettingsPage.jsx b/plugins/armcordSettings/pages/SettingsPage.jsx index 9ff2715..ac62805 100644 --- 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 ( <> -
Settings
- -
Mods
- set("armcordCSP", e)}>ArmCord CSP - Vencord - set("inviteWebsocket", e)}>Rich Presence -
Look and feel
- set("skipSplash", e)}>Skip splash screen - set("dynamicIcon", e)}>Dynamic icon - set("mobileMode", e)}>Mobile Mode -
Behaviour
- set("multiInstance", e)}>Multi Instance - set("minimizeToTray", e)}>Work in background - set("tray", e)}>Tray - set("startMinimized", e)}>Start minimized - set("smoothScroll", e)}>Smooth scrolling - set("autoScroll", e)}>Allow auto-scroll - set("spellcheck", e)}>Spellcheck -
Legacy features
- set("useLegacyCapturer", e)}>Use legacy capturer - - )} +
Settings
+ +
+ Mods +
+ set("armcordCSP", e)} + > + ArmCord CSP + + + Vencord + + set("inviteWebsocket", e)} + > + Rich Presence + +
+ Look and feel +
+ 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" + > + + + + + set("trayIcon", e.target.value)} + title="Tray icon" + note={store.i18n["settings-trayIcon-desc"]} + > + + + + + + + + + + set("skipSplash", e)} + > + Skip splash screen + + set("dynamicIcon", e)} + > + Dynamic icon + + set("mobileMode", e)} + > + Mobile Mode + +
+ Behaviour +
+ 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" + > + + + + + 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" + > + + + + + + set("multiInstance", e)} + > + Multi Instance + + set("minimizeToTray", e)} + > + Work in background + + set("tray", e)} + > + Tray + + set("startMinimized", e)} + > + Start minimized + + set("smoothScroll", e)} + > + Smooth scrolling + + set("autoScroll", e)} + > + Allow auto-scroll + + set("spellcheck", e)} + > + Spellcheck + +
+ Legacy features +
+ set("useLegacyCapturer", e)} + > + Use legacy capturer + + + ); +} diff --git a/plugins/armcordSettings/settings.js b/plugins/armcordSettings/settings.js index b8c181e..9c65d6d 100644 --- 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) } \ No newline at end of file diff --git a/plugins/screenshareQualityFix/index.js b/plugins/screenshareQualityFix/index.js index 89b7da5..4a29919 100644 --- 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 index d4b3ce0..deb45fd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: '@uwu/shelter-defs': specifier: ^1.1.0 version: 1.4.0 + prettier: + specifier: ^3.3.3 + version: 3.3.3 packages: @@ -439,6 +442,11 @@ packages: resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==} engines: {node: ^10 || ^12 || >=14} + prettier@3.3.3: + resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==} + engines: {node: '>=14'} + hasBin: true + readdirp@3.6.0: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} @@ -825,6 +833,8 @@ snapshots: picocolors: 1.0.1 source-map-js: 1.2.0 + prettier@3.3.3: {} + readdirp@3.6.0: dependencies: picomatch: 2.3.1 diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 0000000..dfabec1 --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,17 @@ +/** @type {import("prettier").Config} */ +const config = { + printWidth: 120, + tabWidth: 4, + useTabs: false, + semi: true, + singleQuote: false, + quoteProps: "as-needed", + jsxSingleQuote: false, + trailingComma: "none", + bracketSpacing: false, + jsxBracketSameLine: false, + arrowParens: "always", + endOfLine: "auto" +}; + +export default config;