refac: styling

src/lib/components/channel/Channel.svelte

@@ -279,11 +279,12 @@
 			{/if}
 		{:else if threadId !== null}
 			<PaneResizer
-				class="relative flex w-[3px] items-center justify-center bg-background group bg-gray-50 dark:bg-gray-850"
+				class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850 hover:border-gray-200 dark:hover:border-gray-800  transition z-20"
+				id="controls-resizer"
 			>
-				<div class="z-10 flex h-7 w-5 items-center justify-center rounded-xs">
-					<EllipsisVertical className="size-4 invisible group-hover:visible" />
-				</div>
+				<div
+					class=" absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
+				/>
 			</PaneResizer>
 
 			<Pane defaultSize={50} minSize={30} class="h-full w-full">

src/lib/components/channel/MessageInput.svelte

@@ -56,6 +56,8 @@
 	export let acceptFiles = true;
 	export let showFormattingToolbar = true;
 
+	export let typingUsersClassName = 'from-white dark:from-gray-900';
+
 	let loaded = false;
 	let draggedOver = false;
 
@@ -693,9 +695,9 @@
 
 					{#if typingUsers.length > 0}
 						<div
-							class=" absolute -top-6 pb-2.5 w-full bg-gradient-to-t to-transparent from-white dark:from-gray-900 pointer-events-none select-none"
+							class=" -mt-7 pb-2.5 bg-gradient-to-t to-transparent {typingUsersClassName} pointer-events-none select-none"
 						>
-							<div class=" text-xs px-2 mt-1 flex items-center gap-1.5">
+							<div class=" text-xs px-1 mt-1.5 flex items-center gap-1.5">
 								<Skeleton size="xs" />
 
 								<div>

src/lib/components/channel/Thread.svelte

@@ -198,8 +198,14 @@
 				}}
 			/>
 
-			<div class=" pb-[1rem] px-2.5">
-				<MessageInput id={threadId} {typingUsers} {onChange} onSubmit={submitHandler} />
+			<div class=" pb-[1rem] px-2.5 w-full">
+				<MessageInput
+					id={threadId}
+					typingUsersClassName="from-gray-50 dark:from-gray-850"
+					{typingUsers}
+					{onChange}
+					onSubmit={submitHandler}
+				/>
 			</div>
 		</div>
 	</div>

src/lib/components/chat/Artifacts.svelte

@@ -213,15 +213,6 @@
 			<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 pr-1">
 					<div class="flex items-center space-x-2">
 						<div class="flex items-center gap-0.5 self-center min-w-fit" dir="ltr">

src/lib/components/chat/ChatControls.svelte

@@ -205,12 +205,12 @@
 
 		{#if $showControls}
 			<PaneResizer
-				class="relative flex w-2 items-center justify-center bg-white dark:bg-gray-850 border-l border-gray-100 dark:border-gray-850  group"
+				class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850 hover:border-gray-200 dark:hover:border-gray-800  transition z-20"
 				id="controls-resizer"
 			>
-				<div class="z-10 flex h-7 w-5 items-center justify-center rounded-xs">
-					<EllipsisVertical className="size-4 invisible group-hover:visible" />
-				</div>
+				<div
+					class=" absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
+				/>
 			</PaneResizer>
 		{/if}
 
@@ -243,7 +243,7 @@
 					<div
 						class="w-full {($showOverview || $showArtifacts) && !$showCallOverlay
 							? ' '
-							: 'pl-3 pr-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850 '} z-40 pointer-events-auto overflow-y-auto scrollbar-hidden"
+							: 'px-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850 '} z-40 pointer-events-auto overflow-y-auto scrollbar-hidden"
 						id="controls-container"
 					>
 						{#if $showCallOverlay}

src/lib/components/notes/NoteEditor/Chat.svelte

@@ -327,8 +327,8 @@ Based on the user's instruction, update and enhance the existing notes or select
 	});
 </script>
 
-<div class="flex items-center mb-1.5 pt-1.5 pl-1.5 pr-2.5">
-	<div class=" -translate-x-1.5 flex items-center">
+<div class="flex items-center mb-1.5 pt-1.5 px-2.5">
+	<div class="flex items-center mr-1">
 		<button
 			class="p-0.5 bg-transparent transition rounded-lg"
 			on:click={() => {
@@ -358,7 +358,7 @@ Based on the user's instruction, update and enhance the existing notes or select
 	</div>
 </div>
 
-<div class="flex flex-col items-center flex-1 @container">
+<div class="flex flex-col items-center flex-1 @container px-2.5">
 	<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
 		<div class="mx-auto w-full md:px-0 h-full relative">
 			<div class=" flex flex-col h-full">
@@ -375,7 +375,7 @@ Based on the user's instruction, update and enhance the existing notes or select
 					</div>
 				</div>
 
-				<div class=" pb-[1rem] pl-1.5 pr-2.5">
+				<div class=" pb-[1rem]">
 					{#if selectedContent}
 						<div class="text-xs rounded-xl px-3.5 py-3 w-full markdown-prose-xs">
 							<blockquote>

src/lib/components/notes/NoteEditor/Controls.svelte

@@ -17,8 +17,8 @@
 	};
 </script>
 
-<div class="flex items-center mb-1.5 pt-1.5 pl-1.5 pr-2.5">
-	<div class=" -translate-x-1.5 flex items-center">
+<div class="flex items-center mb-1.5 pt-1.5 px-2.5">
+	<div class=" mr-1 flex items-center">
 		<button
 			class="p-0.5 bg-transparent transition rounded-lg"
 			on:click={() => {
@@ -36,7 +36,7 @@
 	</div>
 </div>
 
-<div class="mt-1 pl-1.5 pr-2.5">
+<div class="mt-1 px-2.5">
 	<div class="pb-10">
 		{#if files.length > 0}
 			<div class=" text-xs font-medium pb-1">{$i18n.t('Files')}</div>

src/lib/components/notes/NotePanel.svelte

@@ -78,11 +78,12 @@
 	{/if}
 {:else if show}
 	<PaneResizer
-		class="relative flex w-2 items-center justify-center bg-background group bg-white dark:shadow-lg dark:bg-gray-850 border-l border-gray-50 dark:border-gray-850"
+		class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850 hover:border-gray-200 dark:hover:border-gray-800  transition z-20"
+		id="controls-resizer"
 	>
-		<div class="z-10 flex h-7 w-5 items-center justify-center rounded-xs">
-			<EllipsisVertical className="size-4 invisible group-hover:visible" />
-		</div>
+		<div
+			class=" absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
+		/>
 	</PaneResizer>
 
 	<Pane