Added separator widget

AppleBlox · Oct 6, 2024 · 3479dbb · 3479dbb
1 parent ca3346a
commit 3479dbb
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/frontend/src/windows/main/components/settings/index.ts b/frontend/src/windows/main/components/settings/index.ts
@@ -99,6 +99,13 @@ type WidgetOptions =
 			type: 'custom';
 			/** Svelte component used to render the widget */
 			component: ComponentType<SvelteComponent>;
+	  }
+	| {
+			/** Custom Widget */
+			type: 'separator';
+			/** Svelte component used to render the widget */
+			orientation: 'vertical' | 'horizontal';
+			class?: string;
 	  };
 
 type ToggleableOption =
@@ -319,6 +326,18 @@ class CategoryBuilder {
 		return this;
 	}
 
+	addSeparator(params: { orientation: 'vertical' | 'horizontal'; class?: string; toggleable?: ToggleableOption }) {
+		const widget: PanelWidget = {
+			id: '',
+			label: '',
+			description: '',
+			toggleable: params.toggleable,
+			options: { type: 'separator', orientation: params.orientation, class: params.class },
+		};
+		this.category.widgets.push(widget);
+		return this;
+	}
+
 	addCustom(params: {
 		label: string;
 		description: string;

diff --git a/frontend/src/windows/main/components/settings/panel.svelte b/frontend/src/windows/main/components/settings/panel.svelte
@@ -4,7 +4,7 @@
 	import type { SelectElement, SettingsOutput } from './types';
 
 	import * as Card from '$lib/components/ui/card/index.js';
-	import Separator from '$lib/components/ui/separator/separator.svelte';
+	import { Separator } from '$lib/components/ui/separator/index.js';
 	import { createEventDispatcher } from 'svelte';
 	import LoadingSpinner from '../../components/LoadingSpinner.svelte';
 
@@ -18,6 +18,7 @@
 	import path from 'path-browserify';
 	import { fade } from 'svelte/transition';
 	import ShellFS from '../../ts/tools/shellfs';
+	import { cn } from '$lib/utils';
 
 	// Panel props
 	export let panel: SettingsPanel;
@@ -190,7 +191,7 @@
 							</p>
 							{#each category.widgets || [] as widget (widget.id)}
 								<!-- Separator for the widgets (except button) -->
-								{#if widget.options.type !== 'button'}
+								{#if widget.options.type !== 'button' && widget.options.type !== 'separator'}
 									<Separator class="my-3 bg-gray-300 opacity-25" el={undefined} decorative={true} />
 								{/if}
 								<!-- Disable the widget if the button it is linked to is disabled -->
@@ -231,6 +232,11 @@
 												updateSettings();
 											}}
 										/>
+									{:else if widget.options.type === 'separator'}
+										<Separator
+											orientation={widget.options.orientation}
+											class={cn('mt-3 mb-2 bg-gray-300 opacity-25', widget.options.class)}
+										/>
 										<!-- Input widget -->
 									{:else if widget.options.type === 'input'}
 										<div class="flex flex-1 justify-end">

diff --git a/frontend/src/windows/main/pages/FastFlags.svelte b/frontend/src/windows/main/pages/FastFlags.svelte
@@ -228,6 +228,7 @@
 					id: 'ignore_flags_warning',
 					default: false,
 				})
+				.addSeparator({ orientation: 'horizontal' })
 				.addButton({
 					label: 'Write ClientAppSettings.json',
 					description: