@myrialabs/clopen 0.0.1

package/frontend/lib/components/common/NotificationToast.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { removeNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import type { ToastNotification } from '$shared/types/ui/notifications';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import type { IconName } from '$shared/types/ui/icons';
+
+	const { notification }: { notification: ToastNotification } = $props();
+
+	let isVisible = $state(false);
+
+	onMount(() => {
+		// Animate in
+		requestAnimationFrame(() => {
+			isVisible = true;
+		});
+
+		// Auto-dismiss after duration
+		if (notification.duration && notification.duration > 0) {
+			setTimeout(() => {
+				handleDismiss();
+			}, notification.duration);
+		}
+	});
+
+	function handleDismiss() {
+		isVisible = false;
+		setTimeout(() => {
+			removeNotification(notification.id);
+		}, 300); // Wait for animation to complete
+	}
+
+	function getIcon(type: string): IconName {
+		switch (type) {
+			case 'success':
+				return 'lucide:circle-check';
+			case 'error':
+				return 'lucide:circle-x';
+			case 'warning':
+				return 'lucide:triangle-alert';
+			case 'info':
+				return 'lucide:info';
+			default:
+				return 'lucide:info';
+		}
+	}
+
+	function getColorClasses(type: string) {
+		switch (type) {
+			case 'success':
+				return 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900 dark:border-green-800 dark:text-green-200';
+			case 'error':
+				return 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900 dark:border-red-800 dark:text-red-200';
+			case 'warning':
+				return 'bg-amber-50 border-amber-200 text-amber-800 dark:bg-amber-900 dark:border-amber-800 dark:text-amber-200';
+			case 'info':
+				return 'bg-slate-50 border-slate-200 text-slate-800 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-200';
+			default:
+				return 'bg-slate-50 border-slate-200 text-slate-800 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-200';
+		}
+	}
+</script>
+
+<div
+	class="transform transition-all duration-300 ease-out will-change-transform max-w-sm {isVisible
+		? 'translate-x-0 opacity-100 scale-100'
+		: 'translate-x-full opacity-0 scale-95'}"
+	role="alert"
+	aria-live="polite"
+>
+	<div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg p-4 {getColorClasses(notification.type)}">
+		<div class="flex items-start space-x-3">
+			<div class="flex-shrink-0">
+				<Icon name={getIcon(notification.type)} class="w-5 h-5" />
+			</div>
+
+			<div class="flex-1 min-w-0">
+				<div class="flex items-center justify-between">
+					<h4 class="font-medium text-sm">
+						{notification.title}
+					</h4>
+					<button
+						onclick={handleDismiss}
+						class="flex-shrink-0 ml-2 p-1 hover:bg-slate-100 dark:hover:bg-slate-700 rounded transition-colors"
+						aria-label="Dismiss notification"
+					>
+						<Icon name="lucide:x" class="w-4 h-4" />
+					</button>
+				</div>
+
+				<p class="text-sm opacity-90 mt-1">
+					{notification.message}
+				</p>
+
+				{#if notification.actions && notification.actions.length > 0}
+					<div class="flex space-x-2 mt-3">
+						{#each notification.actions as action (action.label)}
+							<button
+								onclick={() => {
+									action.action();
+									handleDismiss();
+								}}
+								class="text-xs font-medium px-3 py-1 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-md transition-colors"
+							>
+								{action.label}
+							</button>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>

package/frontend/lib/components/common/PageTemplate.svelte

@@ -0,0 +1,76 @@
+<!--
+  Standard Page Template Component
+  
+  Provides consistent layout structure for all pages:
+  - Standardized header with title and description
+  - Optional actions slot
+  - Consistent container width (max-w-7xl)
+  - Responsive design
+  - Modern AI-first flat design styling
+-->
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { setPageInfo } from '$frontend/lib/stores/core/app.svelte';
+
+	interface Props {
+		title: string;
+		description?: string;
+		class?: string;
+		children?: import('svelte').Snippet;
+		actions?: import('svelte').Snippet;
+		scrollContainer?: HTMLElement | undefined;
+	}
+
+	let { title, description, class: className = '', children, actions, scrollContainer = $bindable() }: Props = $props();
+	
+	let scrollElement: HTMLElement;
+
+	// Update page info when component mounts or title/description changes
+	onMount(() => {
+		setPageInfo(title, description, actions);
+	});
+
+	// Update page info when props change
+	$effect(() => {
+		setPageInfo(title, description, actions);
+	});
+
+	// Update scroll container binding
+	$effect(() => {
+		scrollContainer = scrollElement;
+	});
+</script>
+
+<div class="h-full flex flex-col {className} relative">
+	<!-- Header - Floating with blur effect -->
+	<div class="hidden lg:block absolute top-0 left-0 right-0 z-10 backdrop-blur-md border-b border-slate-200 dark:border-slate-700">
+		<div class="max-w-7xl mx-auto py-4 px-6">
+			<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-x-6 gap-y-3">
+				<div class="min-w-0">
+					<h1 class="text-lg lg:text-xl font-bold text-slate-900 dark:text-slate-100 truncate">
+						{title}
+					</h1>
+					<!-- {#if description}
+						<p class="text-sm text-slate-600 dark:text-slate-400 font-medium truncate">{description}</p>
+					{/if} -->
+				</div>
+
+				{#if actions}
+					<div class="flex items-center gap-2 shrink-0 h-0">
+						{@render actions()}
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+
+	<!-- Content -->
+	<div bind:this={scrollElement} class="grid h-full overflow-auto">
+		<div class="w-full h-full max-w-7xl mx-auto p-6 lg:pt-20">
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	</div>
+</div>

package/frontend/lib/components/common/ProjectUserAvatars.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import AvatarBubble from './AvatarBubble.svelte';
+	import type { ProjectStatus } from '$frontend/lib/services/project';
+
+	interface UserData {
+		userId: string;
+		userName: string;
+	}
+
+	interface Props {
+		projectStatus: ProjectStatus | undefined;
+		maxVisible?: number;
+	}
+
+	const { projectStatus, maxVisible = 3 }: Props = $props();
+
+	let showAllUsers = $state(false);
+	let containerEl = $state<HTMLDivElement | null>(null);
+
+	const activeUsers = $derived((projectStatus?.activeUsers || []) as UserData[]);
+	const visibleUsers = $derived(activeUsers.slice(0, maxVisible));
+	const overflowCount = $derived(Math.max(0, activeUsers.length - maxVisible));
+
+	const tooltipText = $derived(activeUsers.length > 0
+		? `Active: ${activeUsers.map((u: UserData) => u.userName).join(', ')}`
+		: 'No active users');
+
+	function toggleShowAll(e: MouseEvent) {
+		e.stopPropagation();
+		showAllUsers = !showAllUsers;
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		if (containerEl && !containerEl.contains(e.target as Node)) {
+			showAllUsers = false;
+		}
+	}
+
+	$effect(() => {
+		if (showAllUsers) {
+			document.addEventListener('click', handleClickOutside, true);
+			return () => document.removeEventListener('click', handleClickOutside, true);
+		}
+	});
+</script>
+
+{#if activeUsers.length > 0}
+	<div class="relative" bind:this={containerEl}>
+		<button onclick={toggleShowAll} class="flex items-center -space-x-1.5 min-w-0 -my-1" title={tooltipText}>
+			{#each visibleUsers as user}
+				<AvatarBubble {user} size="sm" />
+			{/each}
+
+			{#if overflowCount > 0}
+				<span
+					class="w-6 h-6 rounded-full bg-gradient-to-br from-slate-500 to-slate-600 dark:from-slate-600 dark:to-slate-700 flex items-center justify-center text-xs font-bold text-white border-2 border-white dark:border-slate-800 shadow-sm z-10 cursor-pointer hover:from-slate-400 hover:to-slate-500 transition-all"
+				>
+					+{overflowCount}
+				</span>
+			{/if}
+		</button>
+
+		<!-- All users popover -->
+		{#if showAllUsers}
+			<div
+				class="absolute top-full right-0 mt-2 py-2 px-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-lg z-50 min-w-[160px]"
+			>
+				<div class="px-2 pb-1.5 text-left text-xs font-semibold text-slate-500 dark:text-slate-400">
+					Active users ({activeUsers.length})
+				</div>
+				{#each activeUsers as user}
+					<div class="flex items-center gap-2 px-2 py-1.5 rounded-md">
+						<AvatarBubble {user} size="sm" showName={true} />
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}

package/frontend/lib/components/common/Select.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import type { SelectProps } from '$shared/types/ui/components';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Select an option...',
+		disabled = false,
+		error = '',
+		label = '',
+		required = false,
+		options = [],
+		onchange,
+		class: className = '',
+		...props
+	}: SelectProps & { class?: string } = $props();
+
+	// Generate unique ID for select
+	const selectId = `select-${Math.random().toString(36).substr(2, 9)}`;
+
+	// Generate modern AI select classes
+	const baseClasses =
+		'block w-full px-3 py-3 pr-10 border border-slate-300 dark:border-slate-600 rounded-lg transition-colors duration-200 focus:outline-none text-sm font-medium appearance-none cursor-pointer';
+
+	const stateClasses = error
+		? 'border-red-400 focus:border-red-500 focus:ring-2 focus:ring-red-200 dark:focus:ring-red-900/20'
+		: 'focus:border-violet-500 focus:ring-2 focus:ring-violet-200 dark:focus:ring-violet-900/20';
+
+	const backgroundClasses =
+		'bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100';
+
+	const disabledClasses = disabled 
+		? 'cursor-not-allowed opacity-60' 
+		: '';
+
+	const selectClasses = `${baseClasses} ${stateClasses} ${backgroundClasses} ${disabledClasses} ${className}`;
+
+	function handleChange(event: Event) {
+		const target = event.target as HTMLSelectElement;
+		value = target.value;
+		if (onchange) {
+			onchange(value);
+		}
+	}
+</script>
+
+<div class="space-y-1">
+	{#if label}
+		<label for={selectId} class="block text-sm font-semibold text-slate-700 dark:text-slate-300">
+			{label}
+			{#if required}
+				<span class="text-red-500 ml-1">*</span>
+			{/if}
+		</label>
+	{/if}
+
+	<div class="relative">
+		<select
+			id={selectId}
+			{value}
+			{disabled}
+			{required}
+			class={selectClasses}
+			onchange={handleChange}
+			{...props}
+		>
+			{#if placeholder && !value}
+				<option value="" disabled class="text-slate-400 dark:text-slate-500">
+					{placeholder}
+				</option>
+			{/if}
+			{#each options as option}
+				<option 
+					value={option.value} 
+					disabled={option.disabled}
+					class="text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-900"
+				>
+					{option.label}
+				</option>
+			{/each}
+		</select>
+		
+		<!-- Custom dropdown arrow -->
+		<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+			<Icon 
+				name="lucide:chevron-down" 
+				class="w-5 h-5 text-slate-400 dark:text-slate-500" 
+			/>
+		</div>
+	</div>
+
+	{#if error}
+		<p class="text-sm text-red-600 dark:text-red-400 flex items-center mt-1 font-medium">
+			<Icon name="lucide:circle-alert" class="w-4 h-4 mr-1" />
+			{error}
+		</p>
+	{/if}
+</div>

package/frontend/lib/components/common/Textarea.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import type { TextareaProps } from '$shared/types/ui/components';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+
+	let {
+		value = $bindable(''),
+		placeholder = '',
+		disabled = false,
+		error = '',
+		label = '',
+		required = false,
+		rows = 4,
+		resize = 'vertical',
+		onchange,
+		class: className = '',
+		...props
+	}: TextareaProps & { class?: string } = $props();
+
+	// Generate unique ID for textarea
+	const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
+
+	// Generate modern AI textarea classes
+	const baseClasses =
+		'block w-full px-3 py-3 border border-slate-300 dark:border-slate-600 rounded-lg transition-colors duration-200 focus:outline-none text-sm font-medium';
+
+	const stateClasses = error
+		? 'border-red-400 focus:border-red-500 focus:ring-2 focus:ring-red-200 dark:focus:ring-red-900/20'
+		: 'focus:border-violet-500 focus:ring-2 focus:ring-violet-200 dark:focus:ring-violet-900/20';
+
+	const backgroundClasses =
+		'bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500';
+
+	const resizeClasses = {
+		none: 'resize-none',
+		both: 'resize',
+		horizontal: 'resize-x',
+		vertical: 'resize-y'
+	};
+
+	const textareaClasses = `${baseClasses} ${stateClasses} ${backgroundClasses} ${resizeClasses[resize]} ${className}`;
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLTextAreaElement;
+		value = target.value;
+		if (onchange) {
+			onchange(value);
+		}
+	}
+</script>
+
+<div class="space-y-1">
+	{#if label}
+		<label for={textareaId} class="block text-sm font-semibold text-slate-700 dark:text-slate-300">
+			{label}
+			{#if required}
+				<span class="text-red-500 ml-1">*</span>
+			{/if}
+		</label>
+	{/if}
+
+	<textarea
+		id={textareaId}
+		{value}
+		{placeholder}
+		{disabled}
+		{required}
+		{rows}
+		class={textareaClasses}
+		oninput={handleInput}
+		autocomplete="off"
+		{...props}
+	></textarea>
+
+	{#if error}
+		<p class="text-sm text-red-600 dark:text-red-400 flex items-center mt-1 font-medium">
+			<Icon name="lucide:circle-alert" class="w-4 h-4 mr-1" />
+			{error}
+		</p>
+	{/if}
+</div>

package/frontend/lib/components/common/ThemeToggle.svelte

@@ -0,0 +1,44 @@
+<!--
+  ThemeToggle.svelte
+  
+  Theme toggle component for switching between light/dark/system modes
+-->
+
+<script lang="ts">
+	import Icon from './Icon.svelte';
+	import { themeStore, setTheme as setStoreTheme, themes } from '$frontend/lib/stores/ui/theme.svelte';
+
+	let isOpen = $state(false);
+	
+	// Get current theme mode
+	const currentMode = $derived(themeStore.current.mode);
+
+	function toggleTheme() {
+		// Simple toggle between light and dark
+		const newTheme = themeStore.current.mode === 'light' ? themes[1] : themes[0];
+		setStoreTheme(newTheme);
+		isOpen = false;
+	}
+
+	function getThemeIcon(mode: string) {
+		switch (mode) {
+			case 'light':
+				return 'lucide:sun';
+			case 'dark':
+				return 'lucide:moon';
+			default:
+				return 'lucide:monitor';
+		}
+	}
+</script>
+
+<div class="relative">
+	<button
+		class="p-2 rounded-lg text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+		onclick={toggleTheme}
+		aria-label="Toggle theme"
+	>
+		<Icon name={getThemeIcon(currentMode)} class="w-5 h-5" />
+	</button>
+</div>
+