multi columns layout

src/shared/appHeader.tsx

@@ -1,7 +1,6 @@
 import ArrowLeftIcon from "@icons/arrowLeft";
 import ArrowRightIcon from "@icons/arrowRight";
-import RefreshIcon from "@icons/refresh";
-
+import EventCollector from "@shared/eventCollector";
 import useSWR from "swr";
 
 const fetcher = async () => {
@@ -27,47 +26,33 @@ export default function AppHeader() {
 	return (
 		<div
 			data-tauri-drag-region
-			className="flex h-full w-full flex-1 items-center px-2"
+			className="flex h-11 w-full items-center justify-between border-b border-zinc-900 px-3 gap-2.5"
 		>
-			<div
-				className={`flex h-full items-center gap-2 ${
-					platform === "darwin" ? "pl-[68px]" : ""
-				}`}
-			>
+			<div className="flex gap-2.5">
 				<button
 					type="button"
 					onClick={() => goBack()}
-					className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
+					className="group inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-900"
 				>
 					<ArrowLeftIcon
-						width={14}
-						height={14}
+						width={16}
+						height={16}
 						className="text-zinc-500 group-hover:text-zinc-300"
 					/>
 				</button>
 				<button
 					type="button"
 					onClick={() => goForward()}
-					className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
+					className="group inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-900"
 				>
 					<ArrowRightIcon
-						width={14}
-						height={14}
-						className="text-zinc-500 group-hover:text-zinc-300"
-					/>
-				</button>
-				<button
-					type="button"
-					onClick={() => reload()}
-					className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
-				>
-					<RefreshIcon
-						width={14}
-						height={14}
+						width={16}
+						height={16}
 						className="text-zinc-500 group-hover:text-zinc-300"
 					/>
 				</button>
 			</div>
+			<EventCollector />
 		</div>
 	);
 }