refac

src/lib/components/notes/Notes.svelte

@@ -339,37 +339,39 @@
 			</div>
 		</DeleteConfirmDialog>
 
-		<div class="flex flex-col gap-1 px-1 mt-1.5 mb-2">
-			<div class="flex justify-between items-center">
-				<div class="flex items-center md:self-center text-xl font-normal px-0.5 gap-2 shrink-0">
-					{#if $mobile}
-						<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
-							<button
-								id="sidebar-toggle-button"
-								class="cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition"
-								on:click={() => {
-									showSidebar.set(!$showSidebar);
-								}}
-							>
-								<div class="self-center p-1.5">
-									<SidebarIcon />
-								</div>
-							</button>
-						</Tooltip>
-					{/if}
+		<div class="flex items-center gap-0.5 md:gap-1 mb-2">
+			{#if $mobile}
+				<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
+					<Tooltip
+						content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
+						interactive={true}
+					>
+						<button
+							id="sidebar-toggle-button"
+							class="cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+							on:click={() => {
+								showSidebar.set(!$showSidebar);
+							}}
+						>
+							<div class="self-center p-1.5">
+								<SidebarIcon className="size-4" />
+							</div>
+						</button>
+					</Tooltip>
+				</div>
+			{/if}
 
-					<div>
-						{$i18n.t('Notes')}
-					</div>
-
-					<div class="text-lg font-normal text-gray-500 dark:text-gray-500">
+			<div class="flex w-full items-center">
+				<div class="flex items-center gap-1 py-1 min-w-0">
+					<span class="min-w-fit px-1 text-sm select-none">{$i18n.t('Notes')}</span>
+					<span class="text-xs text-gray-500 dark:text-gray-500">
 						{total ?? ''}
-					</div>
+					</span>
 				</div>
 
-				<div class="flex w-full justify-end gap-1.5">
+				<div class="ml-auto flex items-center gap-1">
 					<button
-						class=" px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-normal text-sm flex items-center"
+						class="ml-1 px-2 py-1.5 text-xs gap-1 rounded-xl bg-black text-white dark:bg-white dark:text-black transition flex items-center"
 						on:click={async () => {
 							const res = await createNoteHandler(dayjs().format('YYYY-MM-DD'));