Polished the app

README.md

@@ -8,6 +8,7 @@
 ![GitHub License](https://img.shields.io/github/license/OrigamingWasTaken/appleblox?color=%23F43F5E)
 ![GitHub package.json version](https://img.shields.io/github/package-json/v/OrigamingWasTaken/appleblox?color=%23F43F5E)
 ![Static Badge](https://img.shields.io/badge/built_with_apples-%23F43F5E)
+[![Discord](https://img.shields.io/discord/1263512148450082837?logo=discord&logoColor=white&label=discord&color=4d3dff)](https://discord.gg/MWHgn8VNZT)
 
 # AppleBlox
 

frontend/src/lib/components/ui/select/select-trigger.svelte

@@ -22,6 +22,6 @@
 >
 	<slot {builder} />
 	<div>
-		<ChevronDown class="h-4 w-4 opacity-50" />
+		<ChevronDown class="h-4 w-4 opacity-50 text-black dark:text-white" />
 	</div>
 </SelectPrimitive.Trigger>

frontend/src/types/settings.ts

@@ -1,5 +1,7 @@
+import * as icons from 'lucide-svelte';
+
 export type InteractableOptions = {
-	type: "boolean";
+	type: 'boolean';
 };
 
 export interface FFlag {
@@ -8,6 +10,12 @@ export interface FFlag {
 	value: string;
 }
 
+export interface Icon {
+	name?: keyof typeof icons;
+	props?: string;
+	src?: string;
+}
+
 export interface SettingsPanel {
 	name: string;
 	description: string;
@@ -22,21 +30,21 @@ export interface SettingsPanel {
 			id: string;
 			hideTitle?: boolean;
 			options:
-				| { type: "boolean"; state: boolean }
-				| { type: "none" }
-				| { type: "string"; default: string }
-				| { type: "dropdown"; list: { label: string; value: string }[]; default: { label: string; value: string } }
-				| { type: "number"; default: number; max: number; min: number; step: number }
+				| { type: 'boolean'; state: boolean }
+				| { type: 'none' }
+				| { type: 'string'; default: string }
+				| { type: 'dropdown'; list: { label: string; value: string }[]; default: { label: string; value: string } }
+				| { type: 'number'; default: number; max: number; min: number; step: number }
 				| {
-						type: "button";
-						style: "secondary" | "destructive" | "outline" | "ghost" | "link" | "default";
-						icon?: string;
+						type: 'button';
+						style: 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'default';
+						icon?: Icon;
 				  }
 				| {
-						type: "ff_buttons_custom";
+						type: 'ff_buttons_custom';
 				  }
 				| {
-						type: "mods_ui";
+						type: 'mods_ui';
 				  };
 		}[];
 	}[];

frontend/src/windows/main/App.svelte

@@ -9,7 +9,7 @@
 	import Misc from './pages/Misc.svelte';
 	import { app, os, window as w } from '@neutralinojs/lib';
 	import { ModeWatcher, setMode } from 'mode-watcher';
-	import Informations from './pages/Informations.svelte';
+	import Support from './pages/Support.svelte';
 	import { launchRoblox } from './ts/roblox/launch';
 	import { loadSettings } from './ts/settings';
 	import Updater from './util/Updater.svelte';
@@ -102,9 +102,9 @@
 				<div in:fly={{ y: -750, duration: 1000 }} out:fly={{ y: 400, duration: 400 }}>
 					<Misc />
 				</div>
-			{:else if currentPage === 'informations'}
+			{:else if currentPage === 'support'}
 				<div in:fly={{ y: -750, duration: 1000 }} out:fly={{ y: 400, duration: 400 }}>
-					<Informations />
+					<Support />
 				</div>
 			{:else if currentPage === 'mods'}
 				<div in:fly={{ y: -750, duration: 1000 }} out:fly={{ y: 400, duration: 400 }}>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { os } from "@neutralinojs/lib";
+
+	export let label: string;
+	export let icon: string;
+	export let url: string;
+	</script>
+
+	<button
+		class="flex items-center justify-center mb-2"
+		on:click={() => {
+			os.open(url)
+		}}>
+		<img src={icon} alt="Linkicon icon" class="w-[15px] towhite mr-1" />
+		<p class={'text-black hover:opacity-50 dark:text-gray-300 dark:hover:text-gray-50 transition duration-100 font-mono text-[14px]'}>{label}</p>
+	</button>

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

@@ -1,21 +1,25 @@
 <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 { version } from "../../../../../package.json";
+	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 { version } from '../../../../../package.json';
 
-	import IntegrationsIcon from "@/assets/sidebar/integrations.png";
-	import FastFlagsIcon from "@/assets/sidebar/fastflags.png";
-	import RobloxIcon from "@/assets/sidebar/roblox.png";
-	import PlayIcon from "@/assets/sidebar/play.png";
-	import ModsIcon from "@/assets/sidebar/mods.png";
+	import IntegrationsIcon from '@/assets/sidebar/integrations.png';
+	import FastFlagsIcon from '@/assets/sidebar/fastflags.png';
+	import RobloxIcon from '@/assets/sidebar/roblox.png';
+	import PlayIcon from '@/assets/sidebar/play.png';
+	import ModsIcon from '@/assets/sidebar/mods.png';
+	import DiscordIcon from "@/assets/panel/discord.png"
+	import GithubIcon from "@/assets/panel/github.png"
+	import BugsIcon from "@/assets/sidebar/bugs.png"
 
-	import MiscIcon from "@/assets/sidebar/misc.png";
-	import CreditsIcon from "@/assets/sidebar/credits.png";
+	import MiscIcon from '@/assets/sidebar/misc.png';
+	import CreditsIcon from '@/assets/sidebar/credits.png';
 
-	import SidebarBtn from "./SidebarBtn.svelte";
-	import Button from "$lib/components/ui/button/button.svelte";
+	import SidebarBtn from './SidebarBtn.svelte';
+	import Button from '$lib/components/ui/button/button.svelte';
+	import LinkBtn from './LinkBtn.svelte';
 
 	export let isLaunched = false;
 
@@ -25,18 +29,30 @@
 		icon: string;
 	}
 	const sidebarBtns: SidebarItem[] = [
-		{ label: "Integrations", id: "integrations", icon: IntegrationsIcon },
-		{ label: "Fast Flags", id: "fastflags", icon: FastFlagsIcon },
-		{ label: "Mods", id: "mods", icon: ModsIcon },
-		{ label: "Misc", id: "misc", icon: MiscIcon },
-		{ label: "Info", id: "informations", icon: CreditsIcon },
+		{ label: 'Integrations', id: 'integrations', icon: IntegrationsIcon },
+		{ label: 'Fast Flags', id: 'fastflags', icon: FastFlagsIcon },
+		{ label: 'Mods', id: 'mods', icon: ModsIcon },
+		{ label: 'Misc', id: 'misc', icon: MiscIcon },
+		{ label: 'Support', id: 'support', icon: CreditsIcon },
 	];
 
-	export let currentPage: string = "integrations";
+	interface SidebarLink {
+		label: string;
+		icon: string;
+		url: string;
+	}
+
+	const linksBtns: SidebarLink[] = [
+		{label: "Discord", icon: DiscordIcon, url: "https://appleblox.com/discord"},
+		{label: "GitHub", icon: GithubIcon, url: "https://github.com/OrigamingWasTaken/appleblox"},
+		{label: "Issues", icon: BugsIcon, url: "https://github.com/OrigamingWasTaken/appleblox/issues"}
+	];
+
+	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;
 	}
 
@@ -51,7 +67,7 @@
 			target="_blank"
 			rel="noreferrer"
 			on:click={() => {
-				os.open("https://github.com/OrigamingWasTaken/appleblox").catch(console.error);
+				os.open('https://github.com/OrigamingWasTaken/appleblox').catch(console.error);
 			}}
 		>
 			<div class="mt-3 flex">
@@ -67,15 +83,23 @@
 				<SidebarBtn bind:currentPage {label} {id} {icon} on:sidebarClick={sidebarItemClicked} />
 			{/each}
 		</div>
+		<div class="m-4">
+			<Separator class="my-1 bg-gray-500" />
+		</div>
+		<div class="mt-3 grid grid-cols-1">
+			{#each linksBtns as { label, url, icon }}
+				<LinkBtn {label} {url} {icon}/>
+			{/each}
+		</div>
 	</div>
 	<div class="flex flex-col items-center mb-4">
 		<p class="text-sm text-gray-500 mb-2">v{version}</p>
-		
+
 		<Button
-			class={`${isLaunched ? "bg-blue-400 hover:bg-blue-400 cursor-not-allowed" : "bg-green-600 hover:bg-green-800"} font-mono`}
+			class={`${isLaunched ? 'bg-blue-400 hover:bg-blue-400 cursor-not-allowed' : 'bg-green-600 hover:bg-green-800'} font-mono`}
 			on:click={() => {
 				if (isLaunched) return;
-				dispatch("launchRoblox", true);
+				dispatch('launchRoblox', true);
 			}}
 		>
 			{#if isLaunched}

frontend/src/windows/main/pages/Misc.svelte

@@ -154,6 +154,9 @@
 						options: {
 							type: "button",
 							style: "default",
+							icon: {
+								name: "PanelsTopLeft"
+							}
 						},
 					},
 					{
@@ -163,6 +166,9 @@
 						options: {
 							type: "button",
 							style: "secondary",
+							icon: {
+								name: "PictureInPicture"
+							}
 						},
 					},
 					{
@@ -173,6 +179,9 @@
 						options: {
 							type: "button",
 							style: "destructive",
+							icon: {
+								name: "BugOff"
+							}
 						},
 					},
 				],
@@ -190,6 +199,9 @@
 						options: {
 							type: "button",
 							style: "default",
+							icon: {
+								name: "Play"
+							}
 						},
 					},
 					{
@@ -200,6 +212,9 @@
 						options: {
 							type: "button",
 							style: "outline",
+							icon: {
+								name: "Braces"
+							}
 						},
 					},
 				],
@@ -227,6 +242,9 @@
 						options: {
 							type: "button",
 							style: "outline",
+							icon: {
+								name: "List"
+							}
 						},
 					},
 					{
@@ -236,6 +254,9 @@
 						options: {
 							type: "button",
 							style: "destructive",
+							icon: {
+								name: "Trash2"
+							}
 						},
 					}
 				],

frontend/src/windows/main/pages/Mods.svelte

@@ -7,6 +7,10 @@
 	import { toast } from 'svelte-sonner';
 	import { saveSettings } from '../ts/settings';
 
+	import ApplebloxIcon from '@/assets/panel/appleblox.png';
+	import BloxstrapIcon from '@/assets/panel/bloxstrap.png';
+	import { Folder } from 'lucide-svelte';
+
 	function settingsChanged(o: { [key: string]: any }) {
 		saveSettings('mods', o);
 	}
@@ -28,6 +32,9 @@
 			case 'join_bloxstrap':
 				os.open('https://discord.gg/nKjV3mGq6R');
 				break;
+			case 'join_appleblox':
+				os.open('https://appleblox.com/discord');
+				break;
 			case 'mods_help':
 				os.open('https://github.com/pizzaboxer/bloxstrap/wiki/Adding-custom-mods');
 				break;
@@ -52,6 +59,9 @@
 						options: {
 							type: 'button',
 							style: 'default',
+							icon: {
+								name: 'Folder',
+							},
 						},
 					},
 					{
@@ -61,6 +71,21 @@
 						options: {
 							type: 'button',
 							style: 'secondary',
+							icon: {
+								name: 'Book',
+							},
+						},
+					},
+					{
+						label: 'Join AppleBlox Discord server',
+						description: 'Opens the Discord server invitation link (go to the #mods channel)',
+						id: 'join_appleblox',
+						options: {
+							type: 'button',
+							style: 'outline',
+							icon: {
+								src: ApplebloxIcon,
+							},
 						},
 					},
 					{
@@ -70,6 +95,9 @@
 						options: {
 							type: 'button',
 							style: 'outline',
+							icon: {
+								src: BloxstrapIcon,
+							},
 						},
 					},
 					{

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

@@ -156,7 +156,7 @@
 		variant={"secondary"}
 		class="bg-slate-900 text-slate-300 font-semibod grayscale"
 	>
-		<img src={Help} alt="Two icon" class="towhite w-5 mr-2" />
+		<img src={Help} alt="Two icon" class="towhite-always w-5 mr-2" />
 		About Fast Flags
 	</Button>
 </div>

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

@@ -60,7 +60,7 @@
 					Roblox.Mods.loadMods().then((m) => (mods = m));
 				}}
 			>
-				<img src={RefreshIcon} alt="Refresh icon" class="towhite w-[50%]" />
+				<img src={RefreshIcon} alt="Refresh icon" class="towhite-always w-[50%]" />
 			</Button>
 		</div>