fix screenshare picker ui

src/renderer/components/ScreenSharePicker.tsx

@@ -7,8 +7,8 @@
 import "./screenSharePicker.css";
 
 import { classNameFactory } from "@vencord/types/api/Styles";
-import { FormSwitch } from "@vencord/types/components";
+import { CogWheel, FormSwitch, RestartIcon } from "@vencord/types/components";
-import { closeModal, Logger, Modals, ModalSize, openModal, useAwaiter } from "@vencord/types/utils";
+import { closeModal, Logger, Modals, ModalSize, openModal, useAwaiter, useForceUpdater } from "@vencord/types/utils";
 import { onceReady } from "@vencord/types/webpack";
 import { Button, Card, FluxDispatcher, Forms, Select, Text, UserStore, useState } from "@vencord/types/webpack/common";
 import { Node } from "@vencord/venmic";
@@ -188,12 +188,11 @@ function AudioSettingsModal({
     return (
         <Modals.ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
             <Modals.ModalHeader className={cl("header")}>
-                <Forms.FormTitle tag="h2" className={cl("header-title")}>
+                <Forms.FormTitle tag="h2">Venmic Settings</Forms.FormTitle>
-                    Venmic Settings
+                <Modals.ModalCloseButton onClick={close} className={cl("header-close-button")} />
-                </Forms.FormTitle>
-                <Modals.ModalCloseButton onClick={close} />
             </Modals.ModalHeader>
-            <Modals.ModalContent className={cl("modal")}>
+
+            <Modals.ModalContent className={cl("modal", "venmic-settings")}>
                 <FormSwitch
                     title="Microphone Workaround"
                     description={
@@ -349,7 +348,7 @@ function StreamSettingsUi({
     );
 
     const openSettings = () => {
-        const key = openModal(props => (
+        openModal(props => (
             <AudioSettingsModal
                 modalProps={props}
                 close={() => props.onClose()}
@@ -568,8 +567,10 @@ function AudioSourcePickerLinux({
     setIncludeSources: (s: AudioSources) => void;
     setExcludeSources: (s: AudioSources) => void;
 }) {
+    const [audioSourcesSignal, refreshAudioSources] = useForceUpdater(true);
     const [sources, _, loading] = useAwaiter(() => VesktopNative.virtmic.list(), {
-        fallbackValue: { ok: true, targets: [], hasPipewirePulse: true }
+        fallbackValue: { ok: true, targets: [], hasPipewirePulse: true },
+        deps: [audioSourcesSignal]
     });
 
     const hasPipewirePulse = sources.ok ? sources.hasPipewirePulse : true;
@@ -620,7 +621,7 @@ function AudioSourcePickerLinux({
 
     return (
         <>
-            <div className={cl({ quality: includeSources === "Entire System" })}>
+            <div className={cl("audio-sources")}>
                 <section>
                     <Forms.FormTitle>{loading ? "Loading Sources..." : "Audio Sources"}</Forms.FormTitle>
                     <Select
@@ -656,9 +657,20 @@ function AudioSourcePickerLinux({
                     </section>
                 )}
             </div>
-            <Button color={Button.Colors.TRANSPARENT} onClick={openSettings} className={cl("settings-button")}>
+            <div className={cl("settings-buttons")}>
-                Open Audio Settings
+                <Button
-            </Button>
+                    color={Button.Colors.TRANSPARENT}
+                    onClick={refreshAudioSources}
+                    className={cl("settings-button")}
+                >
+                    <RestartIcon className={cl("settings-button-icon")} />
+                    Refresh Audio Sources
+                </Button>
+                <Button color={Button.Colors.TRANSPARENT} onClick={openSettings} className={cl("settings-button")}>
+                    <CogWheel className={cl("settings-button-icon")} />
+                    Open Audio Settings
+                </Button>
+            </div>
         </>
     );
 }

src/renderer/components/screenSharePicker.css

@@ -2,8 +2,13 @@
     padding: 1em;
 }
 
-.vcd-screen-picker-header-title {
+.vcd-screen-picker-header-close-button {
-    margin: 0;
+    margin-left: auto;
+}
+
+.vcd-screen-picker-venmic-settings {
+    display: grid;
+    gap: 8px;
 }
 
 .vcd-screen-picker-footer {
@@ -117,19 +122,40 @@
     flex: 1 1 auto;
 }
 
-.vcd-screen-picker-settings-button {
+.vcd-screen-picker-settings-buttons {
-    margin-left: auto;
+    display: flex;
-    margin-top: 0.3rem;
+    justify-content: end;
+    gap: 0.5em;
+
+    margin-top: 0.75em;
 }
 
+.vcd-screen-picker-settings-button {
+    display: flex;
+    gap: 0.25em;
+    padding-inline: 0.5em 1em;
+}
+
+.vcd-screen-picker-settings-button-icon {
+    height: 1em;
+}
 
 .vcd-screen-picker-audio {
     margin-bottom: 0;
 }
 
+.vcd-screen-picker-audio-sources {
+    display: flex;
+    gap: 1em;
+
+    >section {
+        flex: 1;
+    }
+}
+
 .vcd-screen-picker-hint-description {
     color: var(--header-secondary);
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
-}
+}