refac: artifacts styling

src/lib/components/chat/Artifacts.svelte

@@ -184,35 +184,117 @@
 </script>
 
 <div class=" w-full h-full relative flex flex-col bg-gray-50 dark:bg-gray-850">
-	<div class="w-full h-full flex-1 relative">
+	<div class="w-full h-full flex flex-col flex-1 relative">
+		{#if contents.length > 0}
+			<div
+				class="pointer-events-auto z-20 flex justify-between items-center p-2.5 font-primar text-gray-900 dark:text-white"
+			>
+				<button
+					class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
+					on:click={() => {
+						showArtifacts.set(false);
+					}}
+				>
+					<ArrowLeft className="size-3.5  text-gray-900 dark:text-white" />
+				</button>
+
+				<div class="flex-1 flex items-center justify-between">
+					<div class="flex items-center space-x-2">
+						<div class="flex items-center gap-0.5 self-center min-w-fit" dir="ltr">
+							<button
+								class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition disabled:cursor-not-allowed"
+								on:click={() => navigateContent('prev')}
+								disabled={contents.length <= 1}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									stroke-width="2.5"
+									class="size-3.5"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M15.75 19.5 8.25 12l7.5-7.5"
+									/>
+								</svg>
+							</button>
+
+							<div class="text-xs self-center dark:text-gray-100 min-w-fit">
+								{$i18n.t('Version {{selectedVersion}} of {{totalVersions}}', {
+									selectedVersion: selectedContentIdx + 1,
+									totalVersions: contents.length
+								})}
+							</div>
+
+							<button
+								class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition disabled:cursor-not-allowed"
+								on:click={() => navigateContent('next')}
+								disabled={contents.length <= 1}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									stroke-width="2.5"
+									class="size-3.5"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="m8.25 4.5 7.5 7.5-7.5 7.5"
+									/>
+								</svg>
+							</button>
+						</div>
+					</div>
+
+					<div class="flex items-center gap-1">
+						<button
+							class="copy-code-button bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md px-1.5 py-0.5"
+							on:click={() => {
+								copyToClipboard(contents[selectedContentIdx].content);
+								copied = true;
+
+								setTimeout(() => {
+									copied = false;
+								}, 2000);
+							}}>{copied ? $i18n.t('Copied') : $i18n.t('Copy')}</button
+						>
+
+						{#if contents[selectedContentIdx].type === 'iframe'}
+							<Tooltip content={$i18n.t('Open in full screen')}>
+								<button
+									class=" bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md p-0.5"
+									on:click={showFullScreen}
+								>
+									<ArrowsPointingOut className="size-3.5" />
+								</button>
+							</Tooltip>
+						{/if}
+					</div>
+				</div>
+
+				<button
+					class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
+					on:click={() => {
+						dispatch('close');
+						showControls.set(false);
+						showArtifacts.set(false);
+					}}
+				>
+					<XMark className="size-3.5 text-gray-900 dark:text-white" />
+				</button>
+			</div>
+		{/if}
+
 		{#if overlay}
 			<div class=" absolute top-0 left-0 right-0 bottom-0 z-10"></div>
 		{/if}
 
-		<div class="absolute pointer-events-none z-50 w-full flex items-center justify-start p-4">
-			<button
-				class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
-				on:click={() => {
-					showArtifacts.set(false);
-				}}
-			>
-				<ArrowLeft className="size-3.5  text-gray-900 dark:text-white" />
-			</button>
-		</div>
-
-		<div class=" absolute pointer-events-none z-50 w-full flex items-center justify-end p-4">
-			<button
-				class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
-				on:click={() => {
-					dispatch('close');
-					showControls.set(false);
-					showArtifacts.set(false);
-				}}
-			>
-				<XMark className="size-3.5 text-gray-900 dark:text-white" />
-			</button>
-		</div>
-
 		<div class="flex-1 w-full h-full">
 			<div class=" h-full flex flex-col">
 				{#if contents.length > 0}
@@ -241,82 +323,4 @@
 			</div>
 		</div>
 	</div>
-
-	{#if contents.length > 0}
-		<div class="flex justify-between items-center p-2.5 font-primar text-gray-900 dark:text-white">
-			<div class="flex items-center space-x-2">
-				<div class="flex items-center gap-0.5 self-center min-w-fit" dir="ltr">
-					<button
-						class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition disabled:cursor-not-allowed"
-						on:click={() => navigateContent('prev')}
-						disabled={contents.length <= 1}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-							stroke-width="2.5"
-							class="size-3.5"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M15.75 19.5 8.25 12l7.5-7.5"
-							/>
-						</svg>
-					</button>
-
-					<div class="text-xs self-center dark:text-gray-100 min-w-fit">
-						{$i18n.t('Version {{selectedVersion}} of {{totalVersions}}', {
-							selectedVersion: selectedContentIdx + 1,
-							totalVersions: contents.length
-						})}
-					</div>
-
-					<button
-						class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition disabled:cursor-not-allowed"
-						on:click={() => navigateContent('next')}
-						disabled={contents.length <= 1}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-							stroke-width="2.5"
-							class="size-3.5"
-						>
-							<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-						</svg>
-					</button>
-				</div>
-			</div>
-
-			<div class="flex items-center gap-1">
-				<button
-					class="copy-code-button bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md px-1.5 py-0.5"
-					on:click={() => {
-						copyToClipboard(contents[selectedContentIdx].content);
-						copied = true;
-
-						setTimeout(() => {
-							copied = false;
-						}, 2000);
-					}}>{copied ? $i18n.t('Copied') : $i18n.t('Copy')}</button
-				>
-
-				{#if contents[selectedContentIdx].type === 'iframe'}
-					<Tooltip content={$i18n.t('Open in full screen')}>
-						<button
-							class=" bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md p-0.5"
-							on:click={showFullScreen}
-						>
-							<ArrowsPointingOut className="size-3.5" />
-						</button>
-					</Tooltip>
-				{/if}
-			</div>
-		</div>
-	{/if}
 </div>