refac: collection styling

src/lib/components/workspace/Knowledge/Collection.svelte

@@ -553,65 +553,38 @@
 />
 
 <div class="flex flex-col w-full max-h-[100dvh] h-full">
-	<button
-		class="flex space-x-1 w-fit"
-		on:click={() => {
-			goto('/workspace/knowledge');
-		}}
-	>
-		<div class=" self-center">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 20 20"
-				fill="currentColor"
-				class="w-4 h-4"
-			>
-				<path
-					fill-rule="evenodd"
-					d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		</div>
-		<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
-	</button>
+	<div class="flex items-center justify-between">
+		<button
+			class="flex space-x-1 w-fit"
+			on:click={() => {
+				goto('/workspace/knowledge');
+			}}
+		>
+			<div class=" self-center">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="w-4 h-4"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</div>
+			<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
+		</button>
 
+		<div class=" flex-shrink-0">
+			<div>
+				<Badge type="success" content="Collection" />
+			</div>
+		</div>
+	</div>
 	<div class="flex flex-col my-2 flex-1 overflow-auto h-0">
 		{#if id && knowledge}
-			<div class=" flex w-full mt-1 mb-3.5">
-				<div class="flex-1">
-					<div class="flex items-center justify-between w-full px-0.5 mb-1">
-						<div class="w-full">
-							<input
-								type="text"
-								class="w-full font-medium text-2xl font-primary bg-transparent outline-none"
-								bind:value={knowledge.name}
-								on:input={() => {
-									changeDebounceHandler();
-								}}
-							/>
-						</div>
-
-						<div class=" flex-shrink-0">
-							<div>
-								<Badge type="success" content="Collection" />
-							</div>
-						</div>
-					</div>
-
-					<div class="flex w-full px-1">
-						<input
-							type="text"
-							class="w-full text-gray-500 text-sm bg-transparent outline-none"
-							bind:value={knowledge.description}
-							on:input={() => {
-								changeDebounceHandler();
-							}}
-						/>
-					</div>
-				</div>
-			</div>
-
 			<div class="flex flex-row h-0 flex-1 overflow-auto">
 				<div
 					class=" {largeScreen
@@ -669,7 +642,7 @@
 										files={filteredItems}
 										{selectedFileId}
 										on:click={(e) => {
-											selectedFileId = e.detail;
+											selectedFileId = selectedFileId === e.detail ? null : e.detail;
 										}}
 										on:delete={(e) => {
 											console.log(e.detail);
@@ -716,12 +689,40 @@
 								</div>
 							</div>
 						{:else}
-							<div class="m-auto">
-								<AddFilesPlaceholder title={$i18n.t('Select/Add Files')}>
-									<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
-										Select a file to view or drag and drop a file to upload
+							<div class="m-auto pb-24">
+								<div>
+									<div class=" flex w-full mt-1 mb-3.5">
+										<div class="flex-1">
+											<div class="flex items-center justify-between w-full px-0.5 mb-1">
+												<div class="w-full">
+													<input
+														type="text"
+														class="text-center w-full font-medium text-3xl font-primary bg-transparent outline-none"
+														bind:value={knowledge.name}
+														on:input={() => {
+															changeDebounceHandler();
+														}}
+													/>
+												</div>
+											</div>
+
+											<div class="flex w-full px-1">
+												<input
+													type="text"
+													class="text-center w-full text-gray-500 bg-transparent outline-none"
+													bind:value={knowledge.description}
+													on:input={() => {
+														changeDebounceHandler();
+													}}
+												/>
+											</div>
+										</div>
 									</div>
-								</AddFilesPlaceholder>
+								</div>
+
+								<div class=" mt-2 text-center text-sm dark:text-gray-700 w-full">
+									Select a file to view or drag and drop a file to upload
+								</div>
 							</div>
 						{/if}
 					</div>