Added a value field to FFlags and changed how the saved

frontend/src/lib/components/ui/progress/index.ts

@@ -0,0 +1,7 @@
+import Root from "./progress.svelte";
+
+export {
+	Root,
+	//
+	Root as Progress,
+};

frontend/src/lib/components/ui/progress/progress.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Progress as ProgressPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ProgressPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let max: $$Props["max"] = 100;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+</script>
+
+<ProgressPrimitive.Root
+	class={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
+	{...$$restProps}
+>
+	<div
+		class="h-full w-full flex-1 bg-primary transition-all"
+		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
+	/>
+</ProgressPrimitive.Root>

frontend/src/types/settings.ts

@@ -5,6 +5,7 @@ export type InteractableOptions = {
 export interface FFlag {
 	flag: string;
 	enabled: boolean;
+	value: string
 }
 
 export interface SettingsPanel {

frontend/src/windows/main/App.svelte

@@ -4,33 +4,70 @@ import {Skeleton} from '$lib/components/ui/skeleton/index.js';
 import Integrations from './pages/Integrations.svelte';
 import {fly} from 'svelte/transition';
 import FastFlags from './pages/FastFlags.svelte';
-import { ModeWatcher } from 'mode-watcher';
-import { Toaster } from "$lib/components/ui/sonner";
+import {ModeWatcher} from 'mode-watcher';
+import {Toaster} from '$lib/components/ui/sonner';
+import {Progress} from '$lib/components/ui/progress';
+import {debug, os} from '@neutralinojs/lib';
+import {onMount} from 'svelte';
+import {hasRoblox} from './ts/roblox';
+
 let currentPage: string;
+let launchingRoblox = false;
+let launchProgess = 1;
+let ltext = 'Launching...';
+
+async function launchRoblox() {
+	launchingRoblox = true;
+	if (!await hasRoblox()) {
+		os.execCommand(`osascript <<'END'
+    set theAlertText to "Roblox is not installed"
+    set theAlertMessage to "To use AppleBlox, you first need to install Roblox. Would you like to open the download page?"
+    display alert theAlertText message theAlertMessage as critical buttons {"Cancel", "Open link"} default button "Open link" cancel button "Cancel" giving up after 60
+    set the button_pressed to the button returned of the result
+    if the button_pressed is "Open link" then
+        open location "https://roblox.com/download"
+    end if
+END`);
+		launchingRoblox = false;
+	}
+	
+}
 </script>
 
 <main>
-	<Toaster richColors/>
-	<ModeWatcher defaultMode="dark"/>
-	<Sidebar bind:currentPage />
+	<Toaster richColors />
+	<ModeWatcher defaultMode="dark" />
 	<!-- Content div -->
-	<div class="fixed overflow-y-scroll max-h-full top-0 left-36 w-[85%]">
-		{#if currentPage == 'integrations'}
-			<div in:fly={{ y: -750, duration: 1000 }} out:fly={{ y: 400, duration: 400 }}>
-				<Integrations />
-			</div>
-		{:else if currentPage === 'fastflags'}
-			<div in:fly={{ y: -750, duration: 1000 }} out:fly={{ y: 400, duration: 400 }}>
-				<FastFlags />
-			</div>
-		{:else}
-			<div class="flex items-center m-32 space-x-4 opacity-30">
-				<Skeleton class="h-12 w-12 rounded-full" />
-				<div class="space-y-2">
-					<Skeleton class="h-4 w-[250px]" />
-					<Skeleton class="h-4 w-[200px]" />
+	{#if launchingRoblox}
+		<div class="h-full w-full flex justify-center items-center fixed top-0 left-0 flex-col">
+			<p class="font-bold text-2xl">{ltext}</p>
+			<Progress max={100} value={launchProgess} class="w-[60%] bg-neutral-700" />
+		</div>
+	{:else}
+		<Sidebar
+			bind:currentPage
+			on:launchRoblox={() => {
+				launchRoblox();
+			}}
+			id="sidebar" />
+		<div class="fixed overflow-y-scroll max-h-full top-0 left-36 w-[85%]">
+			{#if currentPage == 'integrations'}
+				<div in:fly={{y: -750, duration: 1000}} out:fly={{y: 400, duration: 400}}>
+					<Integrations />
+				</div>
+			{:else if currentPage === 'fastflags'}
+				<div in:fly={{y: -750, duration: 1000}} out:fly={{y: 400, duration: 400}}>
+					<FastFlags />
+				</div>
+			{:else}
+				<div class="flex items-center m-32 space-x-4 opacity-30">
+					<Skeleton class="h-12 w-12 rounded-full" />
+					<div class="space-y-2">
+						<Skeleton class="h-4 w-[250px]" />
+						<Skeleton class="h-4 w-[200px]" />
+					</div>
 				</div>
-			</div>
-		{/if}
-	</div>
-</main>
+			{/if}
+		</div>
+	{/if}
+</main>

frontend/src/windows/main/Sidebar/Sidebar.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
 import {Separator} from '$lib/components/ui/separator/index.js';
+import {createEventDispatcher} from 'svelte';
 import logo from '@/assets/favicon.png';
 import {os} from '@neutralinojs/lib';
 
 import IntegrationsIcon from '@/assets/sidebar/integrations.png';
 import FastFlagsIcon from '@/assets/sidebar/fastflags.png';
-import CommingSoonIcon from "@/assets/sidebar/comingsoon.png"
+import CommingSoonIcon from '@/assets/sidebar/comingsoon.png';
+import RobloxIcon from '@/assets/sidebar/roblox.png';
 
 import SidebarBtn from './SidebarBtn.svelte';
+import Button from '$lib/components/ui/button/button.svelte';
 
 interface SidebarItem {
 	label: string;
@@ -21,14 +24,17 @@ const sidebarBtns: SidebarItem[] = [
 ];
 
 export let currentPage: string = 'integrations';
+export let id: string;
 
 function sidebarItemClicked(e: CustomEvent) {
-	if (e.detail === "none") return;
+	if (e.detail === 'none') return;
 	currentPage = e.detail;
 }
+
+const dispatch = createEventDispatcher<{launchRoblox: boolean}>();
 </script>
 
-<div class="h-full bg-[#1B1B1B] w-36 fixed top-0 left-0 overflow-x-hidden">
+<div class="h-full bg-[#1B1B1B] w-36 fixed top-0 left-0 overflow-x-hidden select-none" {id}>
 	<a
 		href="https://github.com/OrigamingWasTaken/appleblox"
 		class="flex justify-center"
@@ -50,6 +56,14 @@ function sidebarItemClicked(e: CustomEvent) {
 			<SidebarBtn bind:currentPage {label} {id} {icon} on:sidebarClick={sidebarItemClicked} />
 		{/each}
 	</div>
+	<Button
+		class="flex bg-green-600 hover:bg-green-800 fixed bottom-4 left-5 font-mono"
+		on:click={() => {
+			dispatch('launchRoblox', true);
+		}}>
+		Launch
+		<img src={RobloxIcon} alt="Roblox Icon" class="ml-1 mt-[1px] w-5 h-5 towhite" />
+	</Button>
 </div>
 
 <style>

frontend/src/windows/main/pages/Settings/FFButtonsCustom.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import {debug, os, storage, window as w} from '@neutralinojs/lib';
+import {debug, os, window as w} from '@neutralinojs/lib';
 import Button from '$lib/components/ui/button/button.svelte';
 import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
 import * as Table from '$lib/components/ui/table/index.js';
@@ -8,46 +8,47 @@ import Help from '@/assets/panel/help.png';
 import Checkbox from '$lib/components/ui/checkbox/checkbox.svelte';
 import More from '@/assets/panel/more.png';
 import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-import {addFlag, getFlags, removeFlag, setFlag} from '../../ts/fflags';
+import {addFlag, getFlags, removeFlag, setFlags} from '../../ts/fflags';
 import type {FFlag} from '@/types/settings';
 import Input from '$lib/components/ui/input/input.svelte';
-import {ScrollArea} from '$lib/components/ui/scroll-area/index.js';
 import {toast} from 'svelte-sonner';
 
-let fflags: FFlag[] = [
-	{
-		enabled: true,
-		flag: 'Loading...',
-	},
-];
+let fflags: FFlag[] = [];
 
-function setTableFlags() {
+function updateTable() {
 	getFlags()
-		.then((flags) => {
-			debug.log('Flags: ' + JSON.stringify(flags));
-			if (flags) {
-				fflags = flags;
-			}
-		})
-		.catch(console.error);
+	.then((flags) => {
+		if (flags) {
+			fflags = flags;
+		}
+	})
+	.catch(console.error);
 }
 
-setTableFlags();
+updateTable()
+
+$: {
+	setFlags(fflags)
+}
 
 let addedFlag: string;
 async function btnAddFlag() {
-	const add = await addFlag(addedFlag);
-	if (!add) {
-		toast.error('This flag already exists!');
+	if (!addedFlag) {
+		toast.error("You cannot add an empty flag!")
+		return
+	}
+	if (/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(addedFlag)) {
+		toast.error("A flag cannot contain special characters")
+		return
+	}
+	const add = await addFlag(addedFlag, '');
+	if (add) {
+		fflags.push({enabled: true, flag: addedFlag, value: "null"})
+		updateTable()
 	} else {
-		setTableFlags();
+		toast.error('This flag already exists!');
 	}
 }
-
-function updateEnable(f: FFlag, checked: boolean) {
-	setFlag(f.flag, checked);
-	fflags[fflags.findIndex((flag) => flag.flag === f.flag)].enabled = checked;
-}
 </script>
 
 <div class="flex gap-3 mt-3">
@@ -90,12 +91,12 @@ function updateEnable(f: FFlag, checked: boolean) {
 						<Table.Row class="w-full">
 							<Table.Cell role="checkbox" class="font-medium"
 								><Checkbox
-									checked={ff.enabled}
-									onCheckedChange={(checked) => {
-										updateEnable(ff, Boolean(checked));
-									}}
+									bind:checked={ff.enabled}
 									class="rounded-md mr-5" /></Table.Cell>
-							<Table.Cell class="w-full">{ff.flag}</Table.Cell>
+							<Table.Cell class="w-2xl">{ff.flag}</Table.Cell>
+							<Table.Cell class="w-full">
+								<Input placeholder="null" bind:value={ff.value} />
+							</Table.Cell>
 							<Table.Cell>
 								<DropdownMenu.Root>
 									<DropdownMenu.Trigger asChild let:builder>

frontend/src/windows/main/pages/Settings/Panel.svelte

@@ -12,6 +12,7 @@ import {loadSettings} from '../../ts/settings';
 import Button from '$lib/components/ui/button/button.svelte';
 import { debug, os } from '@neutralinojs/lib';
 import FfButtonsCustom from './FFButtonsCustom.svelte';
+import { setFlags } from '../../ts/fflags';
 
 export let panel: SettingsPanel;
 
@@ -54,7 +55,6 @@ $: {
 		dispatch('settingsChanged', sections);
 	}
 }
-
 </script>
 
 {#if settingsLoaded}
@@ -81,7 +81,7 @@ $: {
 						{#if inter.options.type == 'button'}
 							<Button variant={inter.options.style || 'default'}>{inter.label}</Button>
 						{:else if inter.options.type == 'ff_buttons_custom'}
-							<FfButtonsCustom />
+							<FfButtonsCustom/>
 						{:else if inter.options.type === 'boolean'}
 							<Switch class="ml-auto mr-4" bind:checked={sections[section.id][inter.id]} />
 						{:else if inter.options.type === 'string'}

frontend/src/windows/main/ts/fflags.ts

@@ -38,7 +38,7 @@ export async function setFlags(flags: FFlag[]) {
 }
 
 /** Sets a fflag to true or false */
-export async function setFlag(flag: string, enabled: boolean) {
+export async function setFlag(flag: string, enabled: boolean, value: string) {
 	// os.getPath("data") = ~/Library/Application Support
 	const dataPath = path.join(await os.getPath('data'), 'AppleBlox/.storage');
 	const filePath = path.join(dataPath, 'fflags.neustorage');
@@ -48,24 +48,24 @@ export async function setFlag(flag: string, enabled: boolean) {
 	}
 
 	// Load the fflags from the saved file || empty array
-	let fflags: {enabled: boolean; flag: string}[] = JSON.parse(await filesystem.readFile(filePath)) || [];
+	let fflags: FFlag[] = JSON.parse(await filesystem.readFile(filePath)) || [];
 	// Modify the flag if it exists or create a new one
 	if (fflags.find((f) => f.flag === flag)) {
-		fflags[fflags.findIndex((f) => f.flag === flag)].enabled = enabled;
+		fflags[fflags.findIndex((f) => f.flag === flag)] = {flag,enabled,value}
 	} else {
-		fflags.push({flag, enabled});
+		fflags.push({flag, enabled, value});
 	}
 	await setFlags(fflags)
 }
 
 /** Append a flag to the config file. If the one provided already exists, then this will return false */
-export async function addFlag(flag: string): Promise<boolean> {
+export async function addFlag(flag: string, value: string): Promise<boolean> {
     let flags: FFlag[] = await getFlags() || []
     if (flags.find(f => f.flag === flag)) {
         // The flag already exists
         return false
     } else {
-        flags.push({flag, enabled: true})
+        flags.push({flag, enabled: true, value})
         await setFlags(flags)
         return true
     }

frontend/src/windows/main/ts/roblox.ts

@@ -0,0 +1,9 @@
+import { pathExists } from "./utils";
+
+export async function hasRoblox(): Promise<boolean> {
+    if (await pathExists("/Applications/Roblox.app/Contents/MacOS/RobloxPlayer")) {
+        return true
+    } else {
+        return false
+    }
+}