add nearest neighbor option to splash customisation

src/main/splash.ts

@@ -24,7 +24,7 @@ export function createSplashWindow(startMinimized = false) {
 
     loadView(splash, "splash.html");
 
-    const { splashBackground, splashColor, splashTheming } = Settings.store;
+    const { splashBackground, splashColor, splashTheming, splashPixelated } = Settings.store;
 
     if (splashTheming !== false) {
         if (splashColor) {
@@ -39,6 +39,10 @@ export function createSplashWindow(startMinimized = false) {
         }
     }
 
+    if (splashPixelated) {
+        splash.webContents.insertCSS(`img { image-rendering: pixelated; }`);
+    }
+
     return splash;
 }
 

src/renderer/components/settings/UserAssets.css

@@ -13,8 +13,14 @@
 }
 
 .vcd-user-assets-actions {
+    display: grid;
+    width: 100%;
+    gap: 0.5em;
+    margin-bottom: auto;
+}
+
+.vcd-user-assets-buttons {
     display: flex;
-    flex-direction: column;
     gap: 0.5em;
 }
 

src/renderer/components/settings/UserAssets.tsx

@@ -6,7 +6,9 @@
 
 import "./UserAssets.css";
 
+import { FormSwitch } from "@vencord/types/components";
 import {
+    Margins,
     ModalCloseButton,
     ModalContent,
     ModalHeader,
@@ -18,6 +20,7 @@ import {
 } from "@vencord/types/utils";
 import { Button, showToast, Text, useState } from "@vencord/types/webpack/common";
 import { UserAssetType } from "main/userAssets";
+import { useSettings } from "renderer/settings";
 
 import { SettingsComponent } from "./Settings";
 
@@ -51,11 +54,18 @@ function openAssetsModal() {
 function Asset({ asset }: { asset: UserAssetType }) {
     // cache busting
     const [version, setVersion] = useState(Date.now());
+    const settings = useSettings();
+
+    const isSplash = asset === "splash";
+    const imageRendering = isSplash && settings.splashPixelated ? "pixelated" : "auto";
 
     const onChooseAsset = (value?: null) => async () => {
         const res = await VesktopNative.fileManager.chooseUserAsset(asset, value);
         if (res === "ok") {
             setVersion(Date.now());
+            if (isSplash && value === null) {
+                settings.splashPixelated = false;
+            }
         } else if (res === "failed") {
             showToast("Something went wrong. Please try again");
         }
@@ -67,12 +77,28 @@ function Asset({ asset }: { asset: UserAssetType }) {
                 {wordsToTitle(wordsFromCamel(asset))}
             </Text>
             <div className="vcd-user-assets-asset">
-                <img className="vcd-user-assets-image" src={`vesktop://assets/${asset}?v=${version}`} alt="" />
+                <img
+                    className="vcd-user-assets-image"
+                    src={`vesktop://assets/${asset}?v=${version}`}
+                    alt=""
+                    style={{ imageRendering }}
+                />
                 <div className="vcd-user-assets-actions">
-                    <Button onClick={onChooseAsset()}>Customize</Button>
-                    <Button color={Button.Colors.PRIMARY} onClick={onChooseAsset(null)}>
-                        Reset to default
-                    </Button>
+                    <div className="vcd-user-assets-buttons">
+                        <Button onClick={onChooseAsset()}>Customize</Button>
+                        <Button color={Button.Colors.PRIMARY} onClick={onChooseAsset(null)}>
+                            Reset to default
+                        </Button>
+                    </div>
+                    {isSplash && (
+                        <FormSwitch
+                            title="Nearest-Neighbor Scaling (for pixel art)"
+                            value={settings.splashPixelated ?? false}
+                            onChange={val => (settings.splashPixelated = val)}
+                            className={Margins.top16}
+                            hideBorder
+                        />
+                    )}
                 </div>
             </div>
         </section>

src/shared/settings.d.ts

@@ -28,6 +28,7 @@ export interface Settings {
     splashTheming?: boolean;
     splashColor?: string;
     splashBackground?: string;
+    splashPixelated?: boolean;
 
     spellCheckLanguages?: string[];