Add splash/tray image customisation & change default splash (#1179)

src/renderer/components/settings/Settings.tsx

@@ -16,6 +16,7 @@ import { AutoStartToggle } from "./AutoStartToggle";
 import { DeveloperOptionsButton } from "./DeveloperOptions";
 import { DiscordBranchPicker } from "./DiscordBranchPicker";
 import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
+import { UserAssetsButton } from "./UserAssets";
 import { VesktopSettingsSwitch } from "./VesktopSettingsSwitch";
 import { WindowsTransparencyControls } from "./WindowsTransparencyControls";
 
@@ -82,7 +83,8 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
             description: "Adapt the splash window colors to your custom theme",
             defaultValue: true
         },
-        WindowsTransparencyControls
+        WindowsTransparencyControls,
+        UserAssetsButton
     ],
     Behaviour: [
         {

src/renderer/components/settings/UserAssets.css

@@ -0,0 +1,25 @@
+.vcd-user-assets {
+    display: flex;
+    margin-block: 1em 2em;
+    flex-direction: column;
+    gap: 1em;
+}
+
+.vcd-user-assets-asset {
+    display: flex;
+    margin-top: 0.5em;
+    align-items: center;
+    gap: 1em;
+}
+
+.vcd-user-assets-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+}
+
+.vcd-user-assets-image {
+    height: 7.5em;
+    width: 7.5em;
+    object-fit: contain;
+}

src/renderer/components/settings/UserAssets.tsx

@@ -0,0 +1,80 @@
+/*
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2025 Vendicated and Vencord contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./UserAssets.css";
+
+import {
+    ModalCloseButton,
+    ModalContent,
+    ModalHeader,
+    ModalRoot,
+    ModalSize,
+    openModal,
+    wordsFromCamel,
+    wordsToTitle
+} from "@vencord/types/utils";
+import { Button, showToast, Text, useState } from "@vencord/types/webpack/common";
+import { UserAssetType } from "main/userAssets";
+
+import { SettingsComponent } from "./Settings";
+
+const CUSTOMIZABLE_ASSETS: UserAssetType[] = ["splash", "tray", "trayUnread"];
+
+export const UserAssetsButton: SettingsComponent = () => {
+    return <Button onClick={() => openAssetsModal()}>Customize App Assets</Button>;
+};
+
+function openAssetsModal() {
+    openModal(props => (
+        <ModalRoot {...props} size={ModalSize.MEDIUM}>
+            <ModalHeader>
+                <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>
+                    User Assets
+                </Text>
+                <ModalCloseButton onClick={props.onClose} />
+            </ModalHeader>
+
+            <ModalContent>
+                <div className="vcd-user-assets">
+                    {CUSTOMIZABLE_ASSETS.map(asset => (
+                        <Asset key={asset} asset={asset} />
+                    ))}
+                </div>
+            </ModalContent>
+        </ModalRoot>
+    ));
+}
+
+function Asset({ asset }: { asset: UserAssetType }) {
+    // cache busting
+    const [version, setVersion] = useState(Date.now());
+
+    const onChooseAsset = (value?: null) => async () => {
+        const res = await VesktopNative.fileManager.chooseUserAsset(asset, value);
+        if (res === "ok") {
+            setVersion(Date.now());
+        } else if (res === "failed") {
+            showToast("Something went wrong. Please try again");
+        }
+    };
+
+    return (
+        <section>
+            <Text tag="h3" variant="text-md/semibold">
+                {wordsToTitle(wordsFromCamel(asset))}
+            </Text>
+            <div className="vcd-user-assets-asset">
+                <img className="vcd-user-assets-image" src={`vesktop://assets/${asset}?v=${version}`} alt="" />
+                <div className="vcd-user-assets-actions">
+                    <Button onClick={onChooseAsset()}>Customize</Button>
+                    <Button color={Button.Colors.PRIMARY} onClick={onChooseAsset(null)}>
+                        Reset to default
+                    </Button>
+                </div>
+            </div>
+        </section>
+    );
+}