Add AutoStart to first launch tour

src/main/firstLaunch.ts

@@ -11,16 +11,24 @@ import { join } from "path";
 import { SplashProps } from "shared/browserWinProperties";
 import { STATIC_DIR } from "shared/paths";
 
+import { autoStart } from "./autoStart";
 import { DATA_DIR } from "./constants";
 import { createWindows } from "./mainWindow";
 import { Settings } from "./settings";
 
+interface Data {
+    minimizeToTray: boolean;
+    discordBranch: "stable" | "canary" | "ptb";
+    autoStart: boolean;
+    importSettings: boolean;
+}
+
 export function createFirstLaunchTour() {
     const win = new BrowserWindow({
         ...SplashProps,
         frame: true,
         autoHideMenuBar: true,
-        height: 320,
+        height: 420,
         width: 550
     });
 
@@ -29,12 +37,14 @@ export function createFirstLaunchTour() {
         if (msg === "cancel") return app.exit();
 
         if (!msg.startsWith("form:")) return;
-        const data = JSON.parse(msg.slice(5));
+        const data = JSON.parse(msg.slice(5)) as Data;
 
         Settings.store.minimizeToTray = data.minimizeToTray;
         Settings.store.discordBranch = data.discordBranch;
         Settings.store.firstLaunch = false;
 
+        if (data.autoStart) autoStart.enable();
+
         if (data.importSettings) {
             const from = join(app.getPath("userData"), "..", "Vencord", "settings");
             const to = join(DATA_DIR, "settings");

src/main/index.ts

@@ -72,7 +72,7 @@ if (!app.requestSingleInstanceLock({ IS_DEV })) {
 }
 
 async function bootstrap() {
-    if (!Object.hasOwn(Settings.store, "firstLaunch")) {
+    if (!Object.hasOwn(Settings.store, "firstLaunch") || true) {
         createFirstLaunchTour();
     } else {
         createWindows();

static/first-launch.html

@@ -3,6 +3,7 @@
         :root {
             --bg: white;
             --fg: black;
+            --fg-secondary: #313338;
             --fg-semi-trans: rgb(0 0 0 / 0.2);
         }
 
@@ -10,6 +11,7 @@
             :root {
                 --bg: hsl(223 6.7% 20.6%);
                 --fg: white;
+                --fg-secondary: #b5bac1;
                 --fg-semi-trans: rgb(255 255 255 / 0.2);
             }
         }
@@ -52,15 +54,49 @@
 
         form {
             display: grid;
-            gap: 0.5em;
+            gap: 1em;
             margin: 0;
         }
 
         label {
+            position: relative;
             display: flex;
             justify-content: space-between;
         }
 
+        label:has(input[type="checkbox"]),
+        select {
+            cursor: pointer;
+        }
+
+        label:not(:last-child)::after {
+            content: "";
+            position: absolute;
+            bottom: -10px;
+            width: 100%;
+            height: 1px;
+            background-color: var(--fg-secondary);
+            opacity: 0.5;
+        }
+
+        label div {
+            display: grid;
+            gap: 0.2em;
+        }
+
+        label h2 {
+            margin: 0;
+            font-weight: normal;
+            font-size: 1.1rem;
+            line-height: 1rem;
+        }
+
+        label span {
+            font-size: 0.9rem;
+            font-weight: 400;
+            color: var(--fg-secondary);
+        }
+
         #buttons {
             display: flex;
             justify-content: end;
@@ -75,6 +111,11 @@
             border-radius: 6px;
             border: none;
             cursor: pointer;
+            transition: 200ms filter;
+        }
+
+        button:hover {
+            filter: brightness(0.8);
         }
 
         #submit {
@@ -89,7 +130,7 @@
 
     <form>
         <label>
-            Discord Branch
+            <h2>Discord Branch</h2>
             <select name="discordBranch">
                 <option value="stable">stable</option>
                 <option value="canary">canary</option>
@@ -98,12 +139,26 @@
         </label>
 
         <label>
-            Import Settings from existing Vencord install (if found)
+            <div>
+                <h2>Start with System</h2>
+                <span>Automatically open Vencord Desktop when your computer starts</span>
+            </div>
+            <input type="checkbox" name="autoStart" checked />
+        </label>
+
+        <label>
+            <div>
+                <h2>Import Settings</h2>
+                <span>Import Settings from existing Vencord install (if found)</span>
+            </div>
             <input type="checkbox" name="importSettings" checked />
         </label>
 
         <label>
-            Minimise to Tray when closing
+            <div>
+                <h2>Minimise to Tray</h2>
+                <span>Minimise to Tray when closing</span>
+            </div>
             <input type="checkbox" name="minimizeToTray" checked />
         </label>
     </form>