Skip to content

Commit 6e8883d

Browse files
VDudaVDuda
committed
feat(ui): update mobile view of the home page to match design mockups
1 parent 457fa22 commit 6e8883d

1 file changed

Lines changed: 119 additions & 46 deletions

File tree

‎src/app/home-page.tsx‎

Lines changed: 119 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { useState } from "react";
3+
import { useState, useEffect } from "react";
44
import Link from "next/link";
55
import { Button } from "@/components/ui/button";
66
import {
@@ -23,6 +23,8 @@ import {
2323
} from "@/components/ui/dropdown-menu";
2424
import { toast } from "sonner";
2525

26+
import { NotImplementedDialog } from "@/components/not-implemented-dialog";
27+
2628
interface Notebook {
2729
id: string;
2830
title: string;
@@ -41,6 +43,23 @@ export default function HomePage({
4143
const [notebooks, setNotebooks] = useState(initialNotebooks);
4244
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
4345
const [deletingNotebookId, setDeletingNotebookId] = useState<string | null>(null);
46+
const [notImplementedOpen, setNotImplementedOpen] = useState(false);
47+
48+
useEffect(() => {
49+
const handleResize = () => {
50+
if (window.innerWidth < 768) {
51+
setViewMode("list");
52+
} else {
53+
setViewMode("grid");
54+
}
55+
};
56+
57+
// Set initial layout
58+
handleResize();
59+
60+
window.addEventListener("resize", handleResize);
61+
return () => window.removeEventListener("resize", handleResize);
62+
}, []);
4463

4564
const refreshNotebooks = async () => {
4665
// Start fetching in the background
@@ -110,28 +129,50 @@ export default function HomePage({
110129

111130
return (
112131
<div className="min-h-screen bg-[#1a1a1a] text-white">
113-
<div className="max-w-[1400px] mx-auto px-16 py-16">
114-
<h1 className="text-[56px] font-medium leading-tight mb-16">
132+
<div className="max-w-[1400px] mx-auto px-4 sm:px-16 py-8 sm:py-16">
133+
<h1 className="text-4xl sm:text-[56px] font-medium leading-tight mb-8 sm:mb-16 hidden sm:block">
115134
<span className="text-[#4285f4]">Welcome to </span>
116135
<span className="text-[#8ab4f8]">OpenBookLM</span>
117136
</h1>
118137

119138
<div>
120-
<div className="flex items-center space-x-6 mb-8">
121-
<button className="px-4 py-1.5 rounded-full bg-[#252525] text-white text-sm font-medium border border-[#333]">
122-
All
123-
</button>
124-
<button className="text-gray-400 hover:text-white text-sm font-medium transition-colors">
125-
My notebooks
126-
</button>
127-
<button className="text-gray-400 hover:text-white text-sm font-medium transition-colors">
128-
Shared with me
129-
</button>
130-
</div>
139+
{/* Mobile Header elements are generally handled in root-layout, but we can structure the sub-header here */}
140+
141+
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6 mb-8 mt-2 sm:mt-0">
142+
<div className="flex items-center gap-4 sm:hidden justify-center mb-2">
143+
<Button
144+
variant="outline"
145+
className="bg-transparent border-[#333] text-white rounded-full px-5 h-10 w-40 flex justify-between"
146+
>
147+
<span>Most recent</span>
148+
<ChevronDown className="h-4 w-4 opacity-50" />
149+
</Button>
150+
<CreateNotebookDialog onNotebookCreated={handleNotebookCreated}>
151+
<Button
152+
className="flex items-center justify-center gap-2 bg-white text-black hover:bg-gray-200 rounded-full px-5 h-10 font-medium w-40"
153+
>
154+
<Plus className="h-4 w-4" />
155+
Create
156+
</Button>
157+
</CreateNotebookDialog>
158+
</div>
131159

132-
<div className="flex items-center justify-between mb-6">
133-
<h2 className="text-[22px] font-medium text-gray-100">Recent notebooks</h2>
134-
<div className="flex items-center gap-3">
160+
<div className="flex items-center justify-center sm:justify-start space-x-4 sm:space-x-6 overflow-x-auto pb-2 scrollbar-none w-full sm:w-auto">
161+
<button className="px-4 py-1.5 text-gray-400 hover:text-white text-sm font-medium transition-colors whitespace-nowrap">
162+
All
163+
</button>
164+
<button className="px-4 py-1.5 text-gray-400 hover:text-white text-sm font-medium transition-colors whitespace-nowrap">
165+
My notebooks
166+
</button>
167+
<button
168+
className="px-4 py-1.5 rounded-full bg-transparent text-[#A8C7FA] text-sm font-medium border border-[#A8C7FA] whitespace-nowrap"
169+
onClick={() => setNotImplementedOpen(true)}
170+
>
171+
Shared with me
172+
</button>
173+
</div>
174+
175+
<div className="hidden sm:flex items-center gap-2 sm:gap-3 w-full sm:w-auto">
135176
<div className="flex items-center gap-0.5 bg-[#2A2A2A] rounded-lg p-1">
136177
<Button
137178
size="sm"
@@ -165,7 +206,7 @@ export default function HomePage({
165206
<CreateNotebookDialog onNotebookCreated={handleNotebookCreated}>
166207
<Button
167208
size="sm"
168-
className="flex items-center gap-2 bg-white text-black hover:bg-gray-200 rounded-full px-5 h-9 font-medium ml-2"
209+
className="flex items-center justify-center gap-2 bg-white text-black hover:bg-gray-200 rounded-full px-5 h-9 font-medium"
169210
>
170211
<Plus className="h-4 w-4" />
171212
Create new
@@ -174,39 +215,79 @@ export default function HomePage({
174215
</div>
175216
</div>
176217

177-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
178-
<CreateNotebookDialog onNotebookCreated={handleNotebookCreated}>
179-
<div className="group relative rounded-2xl overflow-hidden aspect-[4/3] p-6 bg-[#202020] hover:bg-[#252525] border border-[#2A2A2A] hover:border-[#3A3A3A] transition-all cursor-pointer flex flex-col items-center justify-center text-center h-full">
180-
<div className="w-14 h-14 rounded-full bg-[#2A3B5C] flex items-center justify-center mb-4 group-hover:bg-[#344871] transition-colors">
181-
<Plus className="h-7 w-7 text-blue-400" />
218+
<h2 className="text-[24px] sm:text-[22px] font-medium text-gray-100 mb-6 px-2 sm:px-0">
219+
{notImplementedOpen ? "Shared with me" : "Recent notebooks"}
220+
</h2>
221+
222+
<div className={viewMode === "grid"
223+
? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 px-2 sm:px-0"
224+
: "flex flex-col px-2 sm:px-0"
225+
}>
226+
{viewMode === "grid" && (
227+
<CreateNotebookDialog onNotebookCreated={handleNotebookCreated}>
228+
<div className="group relative rounded-2xl overflow-hidden aspect-[4/3] p-6 bg-[#202020] hover:bg-[#252525] border border-[#2A2A2A] hover:border-[#3A3A3A] transition-all cursor-pointer flex flex-col items-center justify-center text-center h-full">
229+
<div className="w-14 h-14 rounded-full bg-[#2A3B5C] flex items-center justify-center mb-4 group-hover:bg-[#344871] transition-colors">
230+
<Plus className="h-7 w-7 text-blue-400" />
231+
</div>
232+
<h3 className="text-[17px] font-medium text-gray-300 group-hover:text-white transition-colors">
233+
Create new notebook
234+
</h3>
182235
</div>
183-
<h3 className="text-[17px] font-medium text-gray-300 group-hover:text-white transition-colors">
184-
Create new notebook
185-
</h3>
186-
</div>
187-
</CreateNotebookDialog>
236+
</CreateNotebookDialog>
237+
)}
188238

239+
{viewMode === "list" && (
240+
<div className="flex items-center text-sm font-medium text-gray-400 border-b border-[#333] pb-4 mb-2">
241+
<span className="flex-1">Title</span>
242+
</div>
243+
)}
244+
189245
{notebooks.map((notebook, index) => (
190246
<Link
191247
key={notebook.id}
192248
href={`/notebook/${notebook.id}`}
193-
className="group relative rounded-2xl overflow-hidden aspect-[4/3] p-6 bg-[#1C1C1C] border border-[#2A2A2A] hover:bg-[#252525] hover:border-[#3A3A3A] transition-all flex flex-col h-full"
249+
className={viewMode === "grid"
250+
? "group relative rounded-2xl overflow-hidden aspect-[4/3] p-6 bg-[#1C1C1C] border border-[#2A2A2A] hover:bg-[#252525] hover:border-[#3A3A3A] transition-all flex flex-col h-full"
251+
: "group relative flex items-center justify-between py-4 border-b border-[#2A2A2A] hover:bg-[#1C1C1C] transition-colors px-2"
252+
}
194253
>
195-
<div className="absolute top-3 right-3">
254+
<div className={viewMode === "grid" ? "flex flex-col h-full" : "flex items-center gap-4 flex-1"}>
255+
<div className={viewMode === "grid" ? "text-2xl mb-3" : "text-xl"}>
256+
{getNotebookEmoji(notebook)}
257+
</div>
258+
<div className={viewMode === "grid" ? "" : "flex-1"}>
259+
<h3 className="text-[17px] font-medium text-gray-100 line-clamp-2 leading-snug">
260+
{notebook.title}
261+
</h3>
262+
</div>
263+
264+
{viewMode === "grid" && (
265+
<div className="flex items-center text-sm text-gray-500 mt-auto pt-4">
266+
<span>{new Date(notebook.updatedAt).toLocaleDateString()}</span>
267+
<span className="mx-2">•</span>
268+
<span>{notebook.sources.length} source{notebook.sources.length !== 1 ? 's' : ''}</span>
269+
</div>
270+
)}
271+
</div>
272+
273+
<div className={viewMode === "grid" ? "absolute top-3 right-3" : ""}>
196274
<DropdownMenu>
197275
<DropdownMenuTrigger asChild>
198276
<Button
199277
size="sm"
200278
variant="ghost"
201-
className="h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-white rounded-full"
279+
className={viewMode === "grid"
280+
? "h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-white rounded-full"
281+
: "h-8 w-8 p-0 text-blue-400 hover:text-blue-300 hover:bg-[#2A2A2A] rounded-full"
282+
}
202283
disabled={deletingNotebookId === notebook.id}
203284
>
204285
<MoreVertical className="h-4 w-4" />
205286
</Button>
206287
</DropdownMenuTrigger>
207-
<DropdownMenuContent align="end" className="w-40">
288+
<DropdownMenuContent align="end" className="w-40 bg-[#1C1C1C] border-[#2A2A2A] text-white">
208289
<DropdownMenuItem
209-
className="text-red-500 focus:text-red-500"
290+
className="text-red-500 focus:text-red-400 focus:bg-red-500/10 cursor-pointer"
210291
onClick={(e) => {
211292
e.preventDefault();
212293
handleDeleteNotebook(notebook.id);
@@ -218,24 +299,16 @@ export default function HomePage({
218299
</DropdownMenuContent>
219300
</DropdownMenu>
220301
</div>
221-
<div className="flex flex-col h-full">
222-
<div>
223-
<div className="text-2xl mb-3">{getNotebookEmoji(notebook)}</div>
224-
<h3 className="text-[17px] font-medium text-gray-100 line-clamp-2 leading-snug">
225-
{notebook.title}
226-
</h3>
227-
</div>
228-
<div className="flex items-center text-sm text-gray-500 mt-auto pt-4">
229-
<span>{new Date(notebook.updatedAt).toLocaleDateString()}</span>
230-
<span className="mx-2">•</span>
231-
<span>{notebook.sources.length} source{notebook.sources.length !== 1 ? 's' : ''}</span>
232-
</div>
233-
</div>
234302
</Link>
235303
))}
236304
</div>
237305
</div>
238306
</div>
307+
<NotImplementedDialog
308+
open={notImplementedOpen}
309+
onOpenChange={setNotImplementedOpen}
310+
featureName="Notebook Sharing"
311+
/>
239312
</div>
240313
);
241314
}

0 commit comments

Comments
 (0)