refac

src/lib/components/chat/Placeholder/FolderTitle.svelte

@@ -201,7 +201,11 @@
 		</div>
 	</DeleteConfirmDialog>
 
-	<div class="mb-3 px-6 @md:max-w-3xl justify-between w-full flex relative group items-center">
+	<div
+		class="{folder.data?.description
+			? 'mb-0.5'
+			: 'mb-2'} px-5 @md:max-w-3xl justify-between w-full flex relative group items-center"
+	>
 		<div class="text-center flex gap-3.5 items-center">
 			{#if readOnly}
 				<div
@@ -268,4 +272,13 @@
 			</div>
 		{/if}
 	</div>
+
+	{#if folder.data?.description}
+		<!-- Align with the title after the row padding, icon, and gap. -->
+		<div
+			class="mb-2 w-full pl-[4.875rem] pr-6 text-left text-sm text-gray-400 dark:text-gray-500 @md:max-w-3xl"
+		>
+			<p class="line-clamp-2 whitespace-pre-wrap break-words">{folder.data.description}</p>
+		</div>
+	{/if}
 {/if}

src/lib/components/layout/Sidebar/Folders/FolderModal.svelte

@@ -33,6 +33,7 @@
 		background_image_url: null
 	};
 	let data = {
+		description: '',
 		model_ids: [] as string[],
 		system_prompt: '',
 		files: []
@@ -65,6 +66,7 @@
 			meta,
 			// Sharing saves separately; do not overwrite its mode with the editor's snapshot.
 			data: {
+				description: data.description.trim(),
 				model_ids: data.model_ids,
 				system_prompt: data.system_prompt,
 				files: data.files
@@ -92,6 +94,7 @@
 				system_prompt: '',
 				files: [],
 				...folder.data,
+				description: folder.data?.description ?? '',
 				model_ids: folder.data?.model_ids ?? []
 			};
 		}
@@ -119,6 +122,7 @@
 			background_image_url: null
 		};
 		data = {
+			description: '',
 			model_ids: [],
 			system_prompt: '',
 			files: []
@@ -175,6 +179,20 @@
 						</div>
 					</div>
 
+					<div class="my-2">
+						<label for="folder-description" class="mb-1 block text-xs text-gray-500">
+							{$i18n.t('Description')}
+						</label>
+						<Textarea
+							id="folder-description"
+							ariaLabel={$i18n.t('Description')}
+							className="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
+							placeholder={$i18n.t('Enter description')}
+							maxSize={200}
+							bind:value={data.description}
+						/>
+					</div>
+
 					<input
 						id="folder-background-image-input"
 						type="file"