@myrialabs/clopen 0.0.1

package/frontend/lib/stores/ui/notification.svelte.ts

@@ -0,0 +1,166 @@
+import type { ToastNotification } from '$shared/types/ui/notifications';
+
+// Notification store using Svelte 5 runes
+export const notificationStore = $state({
+	notifications: [] as ToastNotification[],
+	maxNotifications: 5
+});
+
+// Derived values as functions (cannot export derived state from modules)
+export function hasNotifications() {
+	return notificationStore.notifications.length > 0;
+}
+
+export function notificationCount() {
+	return notificationStore.notifications.length;
+}
+
+// Notification management functions
+export function addNotification(notification: Omit<ToastNotification, 'id'>) {
+	const newNotification: ToastNotification = {
+		id: Date.now().toString(),
+		...notification,
+		duration: notification.duration || 5000 // Default 5 seconds
+	};
+
+	notificationStore.notifications.push(newNotification);
+
+	// Remove oldest notification if we exceed max
+	if (notificationStore.notifications.length > notificationStore.maxNotifications) {
+		notificationStore.notifications.shift();
+	}
+
+	return newNotification;
+}
+
+export function removeNotification(id: string) {
+	notificationStore.notifications = notificationStore.notifications.filter((n) => n.id !== id);
+}
+
+export function clearNotifications() {
+	notificationStore.notifications = [];
+}
+
+export function updateNotification(id: string, updates: Partial<ToastNotification>) {
+	const index = notificationStore.notifications.findIndex((n) => n.id === id);
+	if (index !== -1) {
+		notificationStore.notifications[index] = {
+			...notificationStore.notifications[index],
+			...updates
+		};
+	}
+}
+
+// Convenience functions for different notification types
+export function showSuccess(title: string, message: string, duration?: number) {
+	return addNotification({
+		type: 'success',
+		title,
+		message,
+		duration
+	});
+}
+
+export function showError(title: string, message: string, duration?: number) {
+	return addNotification({
+		type: 'error',
+		title,
+		message,
+		duration: duration || 8000 // Errors should stay longer
+	});
+}
+
+export function showWarning(title: string, message: string, duration?: number) {
+	return addNotification({
+		type: 'warning',
+		title,
+		message,
+		duration: duration || 6000
+	});
+}
+
+export function showInfo(title: string, message: string, duration?: number) {
+	return addNotification({
+		type: 'info',
+		title,
+		message,
+		duration
+	});
+}
+
+// Show notification with actions
+export function showNotificationWithActions(
+	type: ToastNotification['type'],
+	title: string,
+	message: string,
+	actions: Array<{ label: string; action: () => void }>,
+	duration?: number
+) {
+	return addNotification({
+		type,
+		title,
+		message,
+		actions,
+		duration: duration || 10000 // Notifications with actions should stay longer
+	});
+}
+
+// Show progress notification
+export function showProgressNotification(title: string, message: string) {
+	return addNotification({
+		type: 'info',
+		title,
+		message,
+		duration: 0 // Don't auto-dismiss progress notifications
+	});
+}
+
+// Auto-dismiss notification after delay
+export function autoRemoveNotification(id: string, delay: number) {
+	setTimeout(() => {
+		removeNotification(id);
+	}, delay);
+}
+
+// Initialize notifications
+export function initializeNotifications() {
+	// Clear any existing notifications on initialization
+	clearNotifications();
+}
+
+// Handle global error notifications
+export function showGlobalError(error: Error | string) {
+	const message = typeof error === 'string' ? error : error.message;
+	return showError('Error', message);
+}
+
+// Handle API error notifications
+export function showApiError(error: any) {
+	const message =
+		error?.response?.data?.message || error?.message || 'An unexpected error occurred';
+	return showError('API Error', message);
+}
+
+// Handle network error notifications
+export function showNetworkError() {
+	return showError('Network Error', 'Please check your internet connection and try again');
+}
+
+// Handle validation error notifications
+export function showValidationError(message: string) {
+	return showWarning('Validation Error', message);
+}
+
+// Handle success operations
+export function showOperationSuccess(operation: string) {
+	return showSuccess('Success', `${operation} completed successfully`);
+}
+
+// Handle file operation notifications
+export function showFileOperationSuccess(operation: string, fileName: string) {
+	return showSuccess('File Operation', `${operation} "${fileName}" successfully`);
+}
+
+export function showFileOperationError(operation: string, fileName: string, error: string) {
+	return showError('File Operation Failed', `Failed to ${operation} "${fileName}": ${error}`);
+}

package/frontend/lib/stores/ui/settings-modal.svelte.ts

@@ -0,0 +1,88 @@
+/**
+ * Settings Modal Store - Svelte 5 Runes
+ * Controls the visibility and active section of the settings modal
+ */
+
+import type { IconName } from '$shared/types/ui/icons';
+
+export type SettingsSection =
+	| 'model'
+	| 'engines'
+	| 'appearance'
+	| 'user'
+	| 'notifications'
+	| 'general';
+
+interface SettingsModalState {
+	isOpen: boolean;
+	activeSection: SettingsSection;
+}
+
+// Settings sections metadata
+export const settingsSections: Array<{
+	id: SettingsSection;
+	label: string;
+	icon: IconName;
+	description: string;
+}> = [
+	{
+		id: 'model',
+		label: 'Model',
+		icon: 'lucide:cpu',
+		description: 'Configure AI engine and model'
+	},
+	{
+		id: 'engines',
+		label: 'AI Engine',
+		icon: 'lucide:bot',
+		description: 'Installation and accounts'
+	},
+	{
+		id: 'appearance',
+		label: 'Appearance',
+		icon: 'lucide:palette',
+		description: 'Theme and layout customization'
+	},
+	{
+		id: 'user',
+		label: 'User',
+		icon: 'lucide:user',
+		description: 'User profile settings'
+	},
+	{
+		id: 'notifications',
+		label: 'Notifications',
+		icon: 'lucide:bell',
+		description: 'Sound and push notifications'
+	},
+	{
+		id: 'general',
+		label: 'General',
+		icon: 'lucide:settings-2',
+		description: 'Data management and security'
+	}
+];
+
+// Create the state using Svelte 5 runes
+export const settingsModalState = $state<SettingsModalState>({
+	isOpen: false,
+	activeSection: 'model'
+});
+
+// Helper functions
+export function openSettingsModal(section: SettingsSection = 'model') {
+	settingsModalState.isOpen = true;
+	settingsModalState.activeSection = section;
+}
+
+export function closeSettingsModal() {
+	settingsModalState.isOpen = false;
+}
+
+export function setActiveSection(section: SettingsSection) {
+	settingsModalState.activeSection = section;
+}
+
+export function toggleSettingsModal() {
+	settingsModalState.isOpen = !settingsModalState.isOpen;
+}

package/frontend/lib/stores/ui/theme.svelte.ts

@@ -0,0 +1,179 @@
+import type { Theme } from '$shared/types/ui';
+
+// Theme store using Svelte 5 runes
+export const themeStore = $state({
+	current: {
+		name: 'claude-modern',
+		primary: '#D97757',
+		secondary: '#4F46E5',
+		background: '#F9FAFB',
+		text: '#111827',
+		mode: 'light' as const
+	} as Theme,
+	isDark: false,
+	isSystemDark: false
+});
+
+// Derived values as functions (cannot export derived state from modules)
+export function currentTheme() {
+	return themeStore.current;
+}
+
+export function isDarkMode() {
+	return themeStore.isDark;
+}
+
+// Theme presets
+export const themes: Theme[] = [
+	{
+		name: 'claude-modern',
+		primary: '#D97757',
+		secondary: '#4F46E5',
+		background: '#F9FAFB',
+		text: '#111827',
+		mode: 'light'
+	},
+	{
+		name: 'claude-dark',
+		primary: '#D97757',
+		secondary: '#4F46E5',
+		background: '#111827',
+		text: '#F9FAFB',
+		mode: 'dark'
+	}
+];
+
+// Theme functions using Tailwind CSS v4 approach with optimized transitions
+export function setTheme(theme: Theme) {
+	themeStore.current = theme;
+	themeStore.isDark = theme.mode === 'dark';
+
+	// Apply theme to document using Tailwind v4 class-based dark mode
+	if (typeof window !== 'undefined') {
+		const htmlElement = document.documentElement;
+		
+		// Disable transitions during theme switch for performance
+		htmlElement.classList.add('no-transitions');
+		
+		// Force a reflow to ensure the no-transitions class is applied
+		htmlElement.offsetHeight;
+		
+		// Tailwind v4 class-based approach: only add 'dark' class when in dark mode
+		// Light mode is the default state (no class needed)
+		if (theme.mode === 'dark') {
+			htmlElement.classList.add('dark');
+		} else {
+			htmlElement.classList.remove('dark');
+		}
+		
+		// Set CSS custom properties for dynamic accent colors
+		htmlElement.style.setProperty('--color-primary', theme.primary);
+		htmlElement.style.setProperty('--color-secondary', theme.secondary);
+		
+		// Set color scheme for browser integration (important for form controls, scrollbars, etc.)
+		htmlElement.style.colorScheme = theme.mode === 'dark' ? 'dark' : 'light';
+		
+		// Update meta theme-color for mobile browsers  
+		updateThemeColor(theme.mode);
+		
+		// Re-enable transitions after a short delay to allow theme to settle
+		setTimeout(() => {
+			htmlElement.classList.remove('no-transitions');
+		}, 50);
+	}
+
+	// Save to localStorage
+	localStorage.setItem('claude-theme', JSON.stringify(theme));
+}
+
+// Helper function to update theme color meta tag
+function updateThemeColor(mode: 'light' | 'dark') {
+	let metaThemeColor = document.querySelector('meta[name="theme-color"]');
+	if (!metaThemeColor) {
+		metaThemeColor = document.createElement('meta');
+		metaThemeColor.setAttribute('name', 'theme-color');
+		document.head.appendChild(metaThemeColor);
+	}
+	
+	// Set appropriate theme color
+	const themeColor = mode === 'dark' ? '#0a0a0a' : '#ffffff';
+	metaThemeColor.setAttribute('content', themeColor);
+}
+
+export function toggleDarkMode() {
+	// Toggle to opposite mode
+	const newMode: 'light' | 'dark' = themeStore.isDark ? 'light' : 'dark';
+
+	// Use predefined themes for consistency
+	const newTheme = newMode === 'dark' ? themes[1] : themes[0]; // claude-dark or claude-modern
+	
+	setTheme(newTheme);
+	
+	// Mark as manual theme choice
+	localStorage.setItem('claude-theme-manual', 'true');
+}
+
+export function initializeTheme() {
+	if (typeof window === 'undefined') return;
+	
+	// Check system preference
+	const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+	themeStore.isSystemDark = isSystemDark;
+	
+	// Check for saved theme preference
+	const savedTheme = localStorage.getItem('claude-theme');
+	const isManualTheme = localStorage.getItem('claude-theme-manual') === 'true';
+	
+	let initialTheme: Theme;
+	
+	if (savedTheme && isManualTheme) {
+		// Use saved manual theme preference
+		try {
+			initialTheme = JSON.parse(savedTheme);
+		} catch {
+			// Fallback to system preference if parsing fails
+			initialTheme = isSystemDark ? themes[1] : themes[0];
+		}
+	} else {
+		// Follow system preference
+		initialTheme = isSystemDark ? themes[1] : themes[0];
+	}
+	
+	// Sync store state with what was already applied by inline script
+	themeStore.current = initialTheme;
+	themeStore.isDark = initialTheme.mode === 'dark';
+	
+	// Only apply theme if it differs from current DOM state to avoid redundant operations
+	const htmlElement = document.documentElement;
+	const isDarkCurrentlyApplied = htmlElement.classList.contains('dark');
+	
+	if ((initialTheme.mode === 'dark') !== isDarkCurrentlyApplied) {
+		setTheme(initialTheme);
+	} else {
+		// Just set CSS custom properties since theme class is already correct
+		htmlElement.style.setProperty('--color-primary', initialTheme.primary);
+		htmlElement.style.setProperty('--color-secondary', initialTheme.secondary);
+	}
+
+	// Listen for system theme changes
+	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+		themeStore.isSystemDark = e.matches;
+		
+		// Only follow system if no manual theme was set
+		if (!localStorage.getItem('claude-theme-manual')) {
+			const newTheme = e.matches ? themes[1] : themes[0];
+			setTheme(newTheme);
+		}
+	});
+}
+
+export function setManualTheme(theme: Theme) {
+	setTheme(theme);
+	localStorage.setItem('claude-theme-manual', 'true');
+}
+
+export function useSystemTheme() {
+	localStorage.removeItem('claude-theme-manual');
+	const defaultTheme = themeStore.isSystemDark ? themes[1] : themes[0];
+	setTheme(defaultTheme);
+}