@myrialabs/clopen 0.0.1

package/frontend/lib/components/settings/SettingsView.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import PageTemplate from '../common/PageTemplate.svelte';
+
+	// Import modular components
+	import ModelSettings from './model/ModelSettings.svelte';
+	import AppearanceSettings from './appearance/AppearanceSettings.svelte';
+	import UserSettings from './user/UserSettings.svelte';
+	import NotificationSettings from './notifications/NotificationSettings.svelte';
+	import GeneralSettings from './general/GeneralSettings.svelte';
+</script>
+
+<PageTemplate
+	title="Settings"
+	description="Application settings"
+>
+	<div class="flex-1 overflow-auto">
+		<div class="space-y-6">
+
+			<!-- Model Configuration -->
+			<ModelSettings />
+
+			<!-- Appearance Configuration -->
+			<AppearanceSettings />
+
+			<!-- User Settings -->
+			<UserSettings />
+
+			<!-- Notification Settings -->
+			<NotificationSettings />
+
+			<!-- General Settings -->
+			<GeneralSettings />
+
+		</div>
+	</div>
+</PageTemplate>

package/frontend/lib/components/settings/appearance/AppearanceSettings.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { themeStore, toggleDarkMode } from '$frontend/lib/stores/ui/theme.svelte';
+	import Icon from '../../common/Icon.svelte';
+	import LayoutPresetSettings from './LayoutPresetSettings.svelte';
+</script>
+
+<div class="py-1">
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Theme</h3>
+	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">
+		Customize the look and feel of the application
+	</p>
+
+	<div class="flex flex-col gap-4">
+		<!-- Theme Toggle -->
+		<div
+			class="flex items-center justify-between p-4 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl transition-all duration-150 hover:border-violet-500/20"
+		>
+			<div class="flex items-center gap-3.5">
+				<div
+					class="flex items-center justify-center w-10 h-10 bg-violet-500/10 dark:bg-violet-500/15 rounded-lg text-violet-600 dark:text-violet-400"
+				>
+					<Icon name={themeStore.isDark ? 'lucide:moon' : 'lucide:sun'} class="w-5 h-5" />
+				</div>
+				<div class="flex flex-col gap-0.5">
+					<div class="text-sm font-semibold text-slate-900 dark:text-slate-100">Dark Mode</div>
+					<div class="text-xs text-slate-600 dark:text-slate-500">Toggle between dark and light themes</div>
+				</div>
+			</div>
+			<label class="relative inline-block w-12 h-6.5 shrink-0">
+				<input
+					type="checkbox"
+					checked={themeStore.isDark}
+					onchange={toggleDarkMode}
+					class="opacity-0 w-0 h-0"
+				/>
+				<span
+					class="absolute cursor-pointer inset-0 bg-slate-600/40 rounded-3xl transition-all duration-200
+					before:absolute before:content-[''] before:h-5 before:w-5 before:left-0.75 before:bottom-0.75 before:bg-white before:rounded-full before:transition-all before:duration-200
+					{themeStore.isDark
+						? 'bg-gradient-to-br from-violet-600 to-purple-600 before:translate-x-5.5'
+						: ''}"
+				></span>
+			</label>
+		</div>
+	</div>
+</div>
+
+<!-- Layout Presets -->
+<div class="mt-6">
+	<LayoutPresetSettings />
+</div>

package/frontend/lib/components/settings/appearance/LayoutPresetSettings.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import Icon from '../../common/Icon.svelte';
+	import LayoutPreview from './LayoutPreview.svelte';
+	import { builtInPresets } from '$frontend/lib/stores/ui/workspace.svelte';
+	import { settings, updateSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import type { IconName } from '$shared/types/ui/icons';
+
+	// Group presets by category
+	const presetCategories = [
+		{
+			name: 'Single Panel Focus',
+			description: 'Full screen layouts for maximum focus',
+			icon: 'lucide:maximize-2',
+			presets: builtInPresets.slice(0, 5)
+		},
+		{
+			name: 'Two Panel Layouts',
+			description: 'Dual focus workflows',
+			icon: 'lucide:columns-2',
+			presets: builtInPresets.slice(5, 13)
+		},
+		{
+			name: 'Three Panel Layouts',
+			description: 'Balanced multi-panel setups',
+			icon: 'lucide:columns-3',
+			presets: builtInPresets.slice(13, 22)
+		},
+		{
+			name: 'Four Panel Layouts',
+			description: 'All panels visible',
+			icon: 'lucide:layout-grid',
+			presets: builtInPresets.slice(22, 26)
+		},
+		{
+			name: 'Five Panel Layouts',
+			description: 'Full workspace with source control',
+			icon: 'lucide:layout-dashboard',
+			presets: builtInPresets.slice(26, 28)
+		}
+	];
+
+	function togglePresetVisibility(presetId: string) {
+		const newVisibility = {
+			...settings.layoutPresetVisibility,
+			[presetId]: !settings.layoutPresetVisibility[presetId]
+		};
+		updateSettings({ layoutPresetVisibility: newVisibility });
+	}
+
+	function toggleCategoryVisibility(categoryPresets: typeof builtInPresets) {
+		const allVisible = categoryPresets.every(
+			(preset) => settings.layoutPresetVisibility[preset.id]
+		);
+		const newVisibility = { ...settings.layoutPresetVisibility };
+		categoryPresets.forEach((preset) => {
+			newVisibility[preset.id] = !allVisible;
+		});
+		updateSettings({ layoutPresetVisibility: newVisibility });
+	}
+
+	function isVisible(presetId: string): boolean {
+		return settings.layoutPresetVisibility[presetId] ?? true;
+	}
+
+	function isCategoryAllVisible(categoryPresets: typeof builtInPresets): boolean {
+		return categoryPresets.every((preset) => isVisible(preset.id));
+	}
+
+	function isCategorySomeVisible(categoryPresets: typeof builtInPresets): boolean {
+		return (
+			categoryPresets.some((preset) => isVisible(preset.id)) &&
+			!isCategoryAllVisible(categoryPresets)
+		);
+	}
+</script>
+
+<div class="py-1">
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Layout Presets</h3>
+	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">
+		Customize which layout presets appear in the View menu
+	</p>
+
+	<div class="flex flex-col gap-4">
+		{#each presetCategories as category}
+			<div
+				class="bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl overflow-hidden transition-all duration-150 hover:border-violet-500/20"
+			>
+				<!-- Category Header -->
+				<div class="flex items-center justify-between w-full p-4 bg-transparent border-none text-left">
+					<div class="flex items-center gap-3.5">
+						<div
+							class="flex items-center justify-center w-10 h-10 bg-violet-500/10 dark:bg-violet-500/15 rounded-lg text-violet-600 dark:text-violet-400"
+						>
+							<Icon name={category.icon as IconName} class="w-5 h-5" />
+						</div>
+						<div class="flex flex-col gap-0.5">
+							<div class="text-sm font-semibold text-slate-900 dark:text-slate-100">{category.name}</div>
+							<div class="text-xs text-slate-600 dark:text-slate-500">{category.description}</div>
+						</div>
+					</div>
+					<label class="relative inline-block w-12 h-6.5 shrink-0">
+						<input
+							type="checkbox"
+							checked={isCategoryAllVisible(category.presets)}
+							indeterminate={isCategorySomeVisible(category.presets)}
+							onchange={(e) => {
+								e.stopPropagation();
+								toggleCategoryVisibility(category.presets);
+							}}
+							class="opacity-0 w-0 h-0"
+						/>
+						<span
+							class="absolute cursor-pointer inset-0 bg-slate-600/40 rounded-3xl transition-all duration-200
+							before:absolute before:content-[''] before:h-5 before:w-5 before:left-0.75 before:bottom-0.75 before:bg-white before:rounded-full before:transition-all before:duration-200
+							{isCategoryAllVisible(category.presets)
+								? 'bg-gradient-to-br from-violet-600 to-purple-600 before:translate-x-5.5'
+								: isCategorySomeVisible(category.presets)
+									? 'bg-violet-500/50 before:translate-x-2.75'
+									: ''}"
+						></span>
+					</label>
+				</div>
+
+				<!-- Individual Presets - 2 Column Grid -->
+				<div class="px-4 pb-3 grid grid-cols-2 gap-2">
+					{#each category.presets as preset}
+						<div
+							class="flex flex-col gap-2 py-2.5 px-3 bg-white/60 dark:bg-slate-900/40 rounded-lg border border-violet-500/5"
+						>
+							<div class="flex items-center justify-between gap-2">
+								<span class="text-sm font-medium text-slate-900 dark:text-slate-100"
+									>{preset.name}</span
+								>
+								<label class="relative inline-block w-10 h-5.5 shrink-0">
+									<input
+										type="checkbox"
+										checked={isVisible(preset.id)}
+										onchange={() => togglePresetVisibility(preset.id)}
+										class="opacity-0 w-0 h-0"
+									/>
+									<span
+										class="absolute cursor-pointer inset-0 bg-slate-600/40 rounded-3xl transition-all duration-200
+										before:absolute before:content-[''] before:h-4 before:w-4 before:left-0.5 before:bottom-0.75 before:bg-white before:rounded-full before:transition-all before:duration-200
+										{isVisible(preset.id)
+											? 'bg-gradient-to-br from-violet-600 to-purple-600 before:translate-x-4.5'
+											: ''}"
+									></span>
+								</label>
+							</div>
+							<!-- Visual Preview -->
+							<div class="w-full">
+								<LayoutPreview layout={preset.layout} size="small" />
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/each}
+	</div>
+</div>

package/frontend/lib/components/settings/appearance/LayoutPreview.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { SplitNode, PanelId } from '$frontend/lib/stores/ui/workspace.svelte';
+
+	interface Props {
+		layout: SplitNode;
+		size?: 'small' | 'medium';
+	}
+
+	const { layout, size = 'small' }: Props = $props();
+
+	const height = size === 'small' ? 'h-8' : 'h-12';
+
+	// Panel colors - softer colors that blend with theme
+	const panelColors: Record<PanelId, string> = {
+		chat: 'bg-violet-200/60 dark:bg-violet-700/40',
+		files: 'bg-blue-200/60 dark:bg-blue-700/40',
+		preview: 'bg-emerald-200/60 dark:bg-emerald-700/40',
+		terminal: 'bg-amber-200/60 dark:bg-amber-700/40',
+		git: 'bg-orange-200/60 dark:bg-orange-700/40'
+	};
+
+	// Panel labels (optional, for larger previews)
+	const panelLabels: Record<PanelId, string> = {
+		chat: 'C',
+		files: 'F',
+		preview: 'P',
+		terminal: 'T',
+		git: 'G'
+	};
+
+	function renderNode(node: SplitNode, depth: number = 0): any {
+		if (node.type === 'panel') {
+			const color = node.panelId ? panelColors[node.panelId] : 'bg-slate-300 dark:bg-slate-700';
+			const label = node.panelId ? panelLabels[node.panelId] : '';
+
+			return {
+				type: 'panel',
+				color,
+				label,
+				isEmpty: !node.panelId
+			};
+		}
+
+		return {
+			type: 'split',
+			direction: node.direction,
+			ratio: node.ratio,
+			children: [renderNode(node.children[0], depth + 1), renderNode(node.children[1], depth + 1)]
+		};
+	}
+
+	const previewData = $derived(renderNode(layout));
+</script>
+
+{#snippet renderPreview(data: any, isRoot = false)}
+	{#if data.type === 'panel'}
+		<div
+			class="rounded {data.color} {isRoot ? height : 'h-full'} transition-colors duration-150 {data.isEmpty ? 'opacity-30' : ''}"
+		></div>
+	{:else}
+		<div
+			class="flex gap-0.5 {isRoot ? height : 'h-full'} {data.direction === 'horizontal' ? 'flex-col' : 'flex-row'}"
+		>
+			<div style="flex: {data.ratio}">
+				{@render renderPreview(data.children[0])}
+			</div>
+			<div style="flex: {100 - data.ratio}">
+				{@render renderPreview(data.children[1])}
+			</div>
+		</div>
+	{/if}
+{/snippet}
+
+<div class="w-full">
+	{@render renderPreview(previewData, true)}
+</div>