VoiceButtons change position of buttons (#838)

* VoiceButtons: add button position setting

* VoiceButtons: fix select setting defaults

* Update settings.ts

* bleh

* Update settings.ts

---------

Co-authored-by: thororen1234 <78185467+thororen1234@users.noreply.github.com>

browser/VencordNativeStub.ts

@@ -139,6 +139,5 @@ window.VencordNative = {
         setUpdateState: NOOP,
         onCheckUpdates: NOOP,
         onRepair: NOOP,
-        onAbout: NOOP,
     },
 };

src/VencordNative.ts

@@ -102,7 +102,6 @@ export default {
         setUpdateState: (available: boolean) => ipcRenderer.send(IpcEvents.SET_TRAY_UPDATE_STATE, available),
         onCheckUpdates: (cb: () => void) => { ipcRenderer.on(IpcEvents.TRAY_CHECK_UPDATES, cb); },
         onRepair: (cb: () => void) => { ipcRenderer.on(IpcEvents.TRAY_REPAIR, cb); },
-        onAbout: (cb: () => void) => { ipcRenderer.on(IpcEvents.TRAY_ABOUT, cb); },
     },
 
     pluginHelpers: PluginHelpers

src/equicordplugins/voiceButtons/index.tsx

@@ -31,8 +31,12 @@ export default definePlugin({
     ],
     renderButtons(user: User) {
         if (!user) return null;
+        const positionClass = settings.store.buttonPosition === "right"
+            ? "voice-user-buttons-right"
+            : "voice-user-buttons-left";
+
         return (
-            <Flex flexDirection="row" className="voice-user-buttons">
+            <Flex flexDirection="row" className={`voice-user-buttons ${positionClass}`}>
                 {settings.store.showChatButton && <UserChatButton user={user} />}
                 {settings.store.showMuteButton && <UserMuteButton user={user} />}
                 {settings.store.showDeafenButton && <UserDeafenButton user={user} />}

src/equicordplugins/voiceButtons/settings.ts

@@ -30,46 +30,47 @@ export const settings = definePluginSettings({
         type: OptionType.BOOLEAN,
         default: true,
         description: "Toggles their soundboard upon clicking deafen button.",
-        restartNeeded: false,
     },
     disableVideo: {
         type: OptionType.BOOLEAN,
         default: true,
         description: "Toggles their video upon clicking deafen button.",
-        restartNeeded: false,
     },
     useServer: {
         type: OptionType.BOOLEAN,
         description: "Use server mute/deafen instead of local when you have permission.",
         default: false,
-        restartNeeded: false,
     },
     serverSelf: {
         type: OptionType.BOOLEAN,
         description: "Deafen / Mute yourself on the server when using mute/deafen.",
         default: false,
-        restartNeeded: false,
     },
     showButtonsSelf: {
         type: OptionType.SELECT,
-        default: "display",
         description: "Whether you want to display buttons for your own user. Same functionality as other button(s) except it'll open DMs panel and mute/deafen for yourself upon clicking button(s).",
         restartNeeded: true,
         options: [
-            { label: "Display", value: "display" },
+            { label: "Display", value: "display", default: true },
             { label: "Hide", value: "hide" },
             { label: "Disable", value: "disable" },
         ],
     },
     whichNameToShow: {
         type: OptionType.SELECT,
-        default: "both",
         description: "Choose whether to show nickname or username in tooltip.",
-        restartNeeded: false,
         options: [
+            { label: "Both", value: "both", default: true },
             { label: "Global Name", value: "global" },
-            { label: "Default Username", value: "username" },
+            { label: "Username", value: "username" },
-            { label: "Both", value: "both" },
+        ],
+    },
+    buttonPosition: {
+        type: OptionType.SELECT,
+        description: "Choose where to place voice buttons in the voice user row.",
+        options: [
+            { label: "Left", value: "left", default: true },
+            { label: "Right", value: "right" },
         ],
     }
 }, {

src/equicordplugins/voiceButtons/styles.css

@@ -2,10 +2,19 @@
     flex: none !important;
 }
 
+.voice-user-buttons-left {
+    order: -1;
+}
+
+.voice-user-buttons-right {
+    order: 1;
+    margin-left: 4px;
+}
+
 .voice-user-button-container {
     padding-right: 4px;
 }
 
 div[class*='list'][class*='collapsed'] .voice-user-buttons {
     display: none;
-}
+}