refac

src/lib/components/calendar/CalendarEventModal.svelte

@@ -4,7 +4,6 @@
 
 	import Modal from '$lib/components/common/Modal.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
-	import XMark from '$lib/components/icons/XMark.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 
 	import type { CalendarModel, CalendarEventModel, CalendarEventForm } from '$lib/apis/calendar';
@@ -188,25 +187,16 @@
 
 <Modal size="md" bind:show>
 	<div>
-		<!-- Header -->
+		<div class="dark:text-gray-100 px-4 pt-3 pb-1">
-		<div class="flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
 			<input
-				class="w-full text-lg bg-transparent outline-hidden  placeholder:text-gray-300 dark:placeholder:text-gray-700"
+				class="w-full text-base bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
 				type="text"
 				bind:value={title}
 				placeholder={$i18n.t('Event title')}
 			/>
-			<button
-				class="self-center shrink-0 ml-2"
-				aria-label={$i18n.t('Close')}
-				on:click={() => (show = false)}
-			>
-				<XMark className="size-5" />
-			</button>
 		</div>
 
-		<!-- Details -->
+		<div class="px-4 pb-2 flex flex-col gap-2.5">
-		<div class="px-5 pb-2 flex flex-col gap-3">
 			<!-- Calendar -->
 			<div>
 				<div class="mb-1 text-xs text-gray-500">{$i18n.t('Calendar')}</div>
@@ -292,8 +282,7 @@
 			</div>
 		</div>
 
-		<!-- Bottom toolbar -->
+		<div class="flex items-center justify-between px-4 pb-3 pt-1 gap-2">
-		<div class="flex items-center justify-between px-4 pb-3.5 pt-1 gap-2">
 			<div class="flex items-center gap-0.5 flex-1 min-w-0">
 				{#if event && !event.meta?.automation_id}
 					<button

src/lib/components/common/SplitCreateButton.svelte

@@ -48,7 +48,17 @@
 	};
 </script>
 
-{#if visibleActions.length}
+{#if visibleActions.length === 1}
+	<button
+		class="ml-1 rounded-lg bg-gray-50 px-2.5 py-1 text-xs text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800"
+		type="button"
+		on:click={() => {
+			runAction(primaryAction);
+		}}
+	>
+		{$i18n.t(label)}
+	</button>
+{:else if visibleActions.length > 1}
 	<div
 		class="ml-1 flex overflow-hidden rounded-lg bg-gray-50 text-xs text-gray-900 transition ring-1 ring-gray-200 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800"
 	>

src/lib/components/common/Valves.svelte

@@ -28,7 +28,7 @@
 				</div>
 
 				<button
-					class="p-1 px-3 text-xs flex rounded-sm transition"
+					class="px-2 py-1 text-xs flex rounded-lg transition hover:bg-gray-50/70 dark:hover:bg-gray-850/50"
 					type="button"
 					on:click={() => {
 						const propertySpec = valvesSpec.properties[property] ?? {};

src/lib/components/notes/Notes.svelte

@@ -34,7 +34,6 @@
 	import {
 		createNewNote,
 		deleteNoteById,
-		getNotes,
 		getNoteById,
 		getNoteList,
 		searchNotes,
@@ -83,15 +82,6 @@
 	let itemsLoading = false;
 	let allItemsLoaded = false;
 
-	type NoteExportItem = {
-		title?: string;
-		data?: {
-			content?: {
-				md?: string;
-			};
-		};
-	};
-
 	const downloadHandler = async (type) => {
 		// Fetch the full note since the list response may not contain full content
 		const note = await getNoteById(localStorage.token, selectedNote.id).catch((error) => {
@@ -138,7 +128,7 @@
 				/\.(md|txt)$/i.test(file.name);
 
 			if (!isSupportedFile) {
-				toast.error($i18n.t('Only TXT and Markdown files are allowed'));
+				toast.error('Only txt and md files are allowed');
 				return;
 			}
 
@@ -171,35 +161,6 @@
 		}
 	};
 
-	const getNoteExportContent = (notes: NoteExportItem[], type: 'md' | 'txt') => {
-		return notes
-			.map((note) => {
-				const title = note.title ?? $i18n.t('Untitled');
-				const content = note.data?.content?.md ?? '';
-
-				if (type === 'md') {
-					return `# ${title}\n\n${content}`;
-				}
-
-				return `${title}\n\n${content}`;
-			})
-			.join(type === 'md' ? '\n\n---\n\n' : '\n\n-----\n\n');
-	};
-
-	const exportNotes = async (type: 'md' | 'txt') => {
-		const allNotes = await getNotes(localStorage.token, true).catch((error) => {
-			toast.error(`${error}`);
-			return null;
-		});
-
-		if (!allNotes) return;
-
-		const blob = new Blob([getNoteExportContent(allNotes, type)], {
-			type: type === 'md' ? 'text/markdown' : 'text/plain'
-		});
-		saveAs(blob, `notes-export-${Date.now()}.${type}`);
-	};
-
 	const reset = () => {
 		page = 1;
 		items = null;
@@ -317,15 +278,15 @@
 		dragged = false;
 	};
 
-	const onDrop = async (e) => {
+	const onDrop = async (e: DragEvent) => {
 		e.preventDefault();
 		console.log(e);
 
 		if (e.dataTransfer?.files) {
-			const inputFiles = Array.from(e.dataTransfer?.files);
+			const inputFiles = Array.from(e.dataTransfer.files) as File[];
 			if (inputFiles && inputFiles.length > 0) {
 				console.log(inputFiles);
-				inputFilesHandler(inputFiles);
+				await inputFilesHandler(inputFiles);
 			}
 		}
 
@@ -447,18 +408,8 @@
 							},
 							{
 								id: 'notes-import',
-								label: $i18n.t('Import TXT/MD'),
+								label: $i18n.t('Import txt/md'),
 								onClick: () => notesImportInputElement?.click()
-							},
-							{
-								id: 'notes-export-md',
-								label: $i18n.t('Export MD'),
-								onClick: () => exportNotes('md')
-							},
-							{
-								id: 'notes-export-txt',
-								label: $i18n.t('Export TXT'),
-								onClick: () => exportNotes('txt')
 							}
 						]}
 					/>

src/lib/components/workspace/common/ValvesModal.svelte

@@ -154,19 +154,19 @@
 
 <Modal size="sm" bind:show>
 	<div>
-		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
+		<div class="flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
-			<div class=" text-lg font-normal self-center">{$i18n.t('Valves')}</div>
+			<div class="self-center text-sm font-medium">{$i18n.t('Valves')}</div>
 			<button
-				class="self-center"
+				class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className={'size-5'} />
+				<XMark className={'size-4'} />
 			</button>
 		</div>
 
-		<div class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 dark:text-gray-200">
+		<div class="flex flex-col md:flex-row w-full px-4 pb-3 md:space-x-4 dark:text-gray-200">
 			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
 				<form
 					class="flex flex-col w-full"
@@ -174,7 +174,7 @@
 						submitHandler();
 					}}
 				>
-					<div class="px-1">
+					<div>
 						{#if !loading}
 							<Valves {valvesSpec} bind:valves />
 						{:else}
@@ -182,9 +182,9 @@
 						{/if}
 					</div>
 
-					<div class="flex justify-end pt-3 text-sm font-normal">
+					<div class="flex justify-end pt-2.5 text-sm font-normal">
 						<button
-							class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {saving
+							class="px-3 py-1.5 text-sm font-normal bg-black hover:bg-gray-950 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {saving
 								? ' cursor-not-allowed'
 								: ''}"
 							type="submit"