feat: Add hour titles, make list titles sticky

src/app/date/[date]/page.tsx

@@ -1,4 +1,4 @@
-import { groupEventsByLine } from "@/common/utils";
+import { groupEventsByLine, groupEventsByStartTime } from "@/common/utils";
 import { EventCard } from "@/components/EventCard";
 import { EventList } from "@/components/EventList";
 import { Button } from "@/components/ui/button";
@@ -11,6 +11,7 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { getAllLines, getEventsForDate } from "@/db";
+import { line } from "drizzle-orm/pg-core";
 import { notFound } from "next/navigation";
 
 export default async function ScheduleByDate({
@@ -35,11 +36,12 @@ export default async function ScheduleByDate({
 	if (events.length === 0) {
 		return notFound();
 	}
-	const groupedEvents = groupEventsByLine(events);
+	const eventsByLine = groupEventsByLine(events);
+	const eventsByTime = groupEventsByStartTime(events);
 	const allLines = await getAllLines();
 	return (
-		<div className="flex flex-col items-center justify-items-center p-8 pb-20 gap-4 sm:p-20 w-full">
+		<div className="flex flex-col items-center justify-items-center pb-20 w-full">
-			<div className="flex flex-col sm:flex-row justify-between items-center w-full gap-2 mb-4">
+			<div className="flex flex-col sm:flex-row justify-between items-center w-full gap-2 p-8">
 				<h1 className="text-3xl font-bold">
 					{parsedDate.toLocaleDateString(["cs-CZ"], {
 						weekday: "long",
@@ -71,14 +73,25 @@ export default async function ScheduleByDate({
 			</div>
 			<main className="flex flex-col gap-8 items-center">
 				{group === "line" &&
-					groupedEvents.map((line) => (
+					eventsByLine.map((line) => (
 						<EventList
 							key={line.lineId}
 							events={line.events}
 							title={allLines.find((l) => l.id === line.lineId)?.name}
 						/>
 					))}
-				{group !== "line" && <EventList events={events} showLine />}
+				{group !== "line" &&
+					eventsByTime.map((time) => (
+						<EventList
+							key={time.startTime.toISOString()}
+							events={time.events}
+							title={`Od ${time.startTime.toLocaleTimeString("cs-CZ", {
+								hour12: false,
+								hour: "numeric",
+								minute: "2-digit",
+							})}`}
+						/>
+					))}
 			</main>
 		</div>
 	);

src/app/favorites/page.tsx

@@ -23,8 +23,8 @@ export default async function FavoritesPage({
 	});
 
 	return (
-		<div className="flex flex-col items-center justify-items-center p-8 pb-20 gap-4 sm:p-20 w-full">
+		<div className="flex flex-col items-center justify-items-center pb-20 w-full">
-			<div className="flex flex-col sm:flex-row justify-between items-center w-full gap-2 mb-4">
+			<div className="flex flex-col sm:flex-row justify-between items-center w-full gap-2 p-8">	
 				<h1 className="text-3xl font-bold">Oblíbené</h1>
 				<ShowElapsedSwitch defaultValue={false} />
 			</div>

src/app/layout.tsx

@@ -38,7 +38,7 @@ export default async function RootLayout({
 				<SidebarProvider>
 					<AppSidebar />
 					<SidebarInset>
-						<header className="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4">
+						<header className="bg-background sticky top-0 flex h-16 shrink-0 z-10 items-center gap-2 border-b px-4">
 							<SidebarTrigger className="-ml-1" />
 							<Separator orientation="vertical" className="mr-2 h-4" />
 							<div className="flex-grow">

src/app/line/[line]/page.tsx

@@ -23,7 +23,7 @@ export default async function ScheduleByLine({
 	const lineData = groupEventsByDate(events);
 
 	return (
-		<div className="flex flex-col items-center justify-items-center p-8 pb-20 gap-4 sm:p-20 w-full">
+		<div className="flex flex-col items-center justify-items-center pb-20 w-full">
 			<div className="flex flex-col items-center text-center">
 				<h1 className="text-3xl font-bold mb-4">{lineInfo.name}</h1>
 				<h6 className="text-gray-500 mb-4">{lineInfo.description}</h6>

src/app/now/page.tsx

@@ -7,21 +7,23 @@ export default async function FavoritesPage() {
 	const groupedEvents = groupEventsByStartTime(nowEvents);
 
 	return (
-		<div className="flex flex-col items-center justify-items-center p-8 pb-20 gap-4 sm:p-20 w-full">
+		<div className="flex flex-col items-center justify-items-center pb-20 w-full">
-			<div className="flex flex-col sm:flex-row justify-between items-center w-full gap-2 mb-4">
+			<div className="flex flex-col sm:flex-row justify-between items-center w-full gap-2 p-8">
 				<h1 className="text-3xl font-bold">Kam jít?</h1>
 			</div>
 			<main className="flex flex-col gap-8 w-full">
-				{groupedEvents.map(({events, startTime}) => (
+				{groupedEvents.map(({ events, startTime }) => (
 					<div key={startTime.toISOString()} className="w-full">
-						<h2 className="text-2xl font-semibold mb-4">
+						<EventList
-							Od {new Date(startTime).toLocaleTimeString("cs-CZ", {
+							title={`Od ${new Date(startTime).toLocaleTimeString("cs-CZ", {
 								hour: "2-digit",
 								minute: "2-digit",
 								hour12: false,
-							})}
+							})}`}
-						</h2>
+							events={events}
-						<EventList events={events} showDate showLine />
+							showDate
+							showLine
+						/>
 					</div>
 				))}
 			</main>

src/app/page.tsx

@@ -13,7 +13,7 @@ export default async function Home({ searchParams }: HomePageProps) {
 	console.log("Message from searchParams:", message);
 
 	return (
-		<div className="flex flex-col items-center justify-items-center p-8 pb-20 gap-4 sm:p-20 w-full">
+		<div className="flex flex-col items-center justify-items-center pb-20 w-full">
 			<main className="flex flex-col gap-[32px] w-full items-center sm:items-start">
 				{message && (
 					<Alert variant="default">

src/app/search/page.tsx

@@ -10,7 +10,7 @@ export default async function SearchPage({ searchParams }: SearchPageProps) {
 	const query = (await searchParams).q || "";
 	const results = query ? await searchEvents(query) : [];
 	return (
-		<div className="flex flex-col items-center justify-items-center p-8 pb-20 gap-4 sm:p-20 w-full">
+		<div className="flex flex-col items-center justify-items-center pb-20 w-full">
 			<main className="flex flex-col gap-8 items-center w-full">
 				<h1 className="text-3xl font-bold mb-4 w-full">
 					Výsledky hledání pro "{query}"

src/components/EventList.tsx

@@ -14,10 +14,13 @@ export function EventList({
 }) {
 	return (
 		<div className="space-y-2 w-full">
-            {title && <h2 className="text-2xl font-bold">{title}</h2>}
+			{title && (
-            {events.length === 0 && (
+				<h2 className="text-2xl font-bold sticky top-16 bg-white dark:bg-black px-8 py-4">
-                <p className="text-gray-500">Žádné události.</p>
+					{title}
+				</h2>
 			)}
+			{events.length === 0 && <p className="text-gray-500 px-8">Žádné události.</p>}
+			<div className="flex flex-col gap-2 px-8">
 				{events.map((event) => (
 					<EventCard
 						key={event.id}
@@ -27,5 +30,6 @@ export function EventList({
 					/>
 				))}
 			</div>
+		</div>
 	);
 }