feat: Attachments UX improvements

tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentThumbnailImage.svelte

@@ -30,7 +30,9 @@
 	}: Props = $props();
 </script>
 
-<div class="group relative overflow-hidden rounded-lg border border-border bg-muted {className}">
+<div
+	class="group relative overflow-hidden rounded-lg bg-muted shadow-lg dark:border dark:border-muted {className}"
+>
 	{#if onClick}
 		<button
 			type="button"

tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList.svelte

@@ -183,6 +183,7 @@
 
 {#if displayItems.length > 0}
 	<div class={className} {style}>
+		{#if limitToSingleRow}
 			<div class="relative">
 				<button
 					class="absolute top-1/2 left-4 z-10 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full bg-foreground/15 shadow-md backdrop-blur-xs transition-opacity hover:bg-foreground/35 {canScrollLeft
@@ -202,7 +203,9 @@
 					{#each displayItems as item (item.id)}
 						{#if item.isImage && item.preview}
 							<ChatAttachmentThumbnailImage
-							class="flex-shrink-0 cursor-pointer {limitToSingleRow ? 'first:ml-4 last:mr-4' : ''}"
+								class="flex-shrink-0 cursor-pointer {limitToSingleRow
+									? 'first:ml-4 last:mr-4'
+									: ''}"
 								id={item.id}
 								name={item.name}
 								preview={item.preview}
@@ -215,7 +218,9 @@
 							/>
 						{:else}
 							<ChatAttachmentThumbnailFile
-							class="flex-shrink-0 cursor-pointer {limitToSingleRow ? 'first:ml-4 last:mr-4' : ''}"
+								class="flex-shrink-0 cursor-pointer {limitToSingleRow
+									? 'first:ml-4 last:mr-4'
+									: ''}"
 								id={item.id}
 								name={item.name}
 								type={item.type}
@@ -249,10 +254,42 @@
 						class="h-6 text-xs text-muted-foreground hover:text-foreground"
 						onclick={() => (viewAllDialogOpen = true)}
 					>
-					View all
+						View all ({displayItems.length})
 					</Button>
 				</div>
 			{/if}
+		{:else}
+			<div class="flex flex-wrap justify-end gap-3">
+				{#each displayItems as item (item.id)}
+					{#if item.isImage && item.preview}
+						<ChatAttachmentThumbnailImage
+							class="cursor-pointer"
+							id={item.id}
+							name={item.name}
+							preview={item.preview}
+							{readonly}
+							onRemove={onFileRemove}
+							height={imageHeight}
+							width={imageWidth}
+							{imageClass}
+							onClick={(event) => openPreview(item, event)}
+						/>
+					{:else}
+						<ChatAttachmentThumbnailFile
+							class="cursor-pointer"
+							id={item.id}
+							name={item.name}
+							type={item.type}
+							size={item.size}
+							{readonly}
+							onRemove={onFileRemove}
+							textContent={item.textContent}
+							onClick={(event) => openPreview(item, event)}
+						/>
+					{/if}
+				{/each}
+			</div>
+		{/if}
 	</div>
 {/if}
 

tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsFields.svelte

@@ -224,7 +224,7 @@
 				<div class="space-y-1">
 					<label
 						for={field.key}
-						class="cursor-pointer text-sm leading-none font-medium {isDisabled
+						class="cursor-pointer pt-1 pb-0.5 text-sm leading-none font-medium {isDisabled
 							? 'text-muted-foreground'
 							: ''} flex items-center gap-1.5"
 					>