feat: mobile-responsive UI + canvas sync callback
- Responsive navigation: compact buttons with icons on mobile, hidden search bar (moved to dedicated row below nav on mobile) - Responsive typography: hero text scales from 3xl to 5xl - Responsive grids: sm:grid-cols-2 breakpoint for cards - Canvas split view: full-screen overlay on mobile with close button - Breadcrumbs collapse on mobile, truncate long titles - Buttons show icon-only on small screens (add, delete, pin) - Wire up onShapeUpdate callback in notebook detail page for bidirectional canvas sync (rSpace → rnotes via /api/sync) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
2351339241
commit
cf27a54caa
|
|
@ -7,6 +7,7 @@ import { NoteCard } from '@/components/NoteCard';
|
|||
import { CanvasEmbed } from '@/components/CanvasEmbed';
|
||||
import { UserMenu } from '@/components/UserMenu';
|
||||
import { authFetch } from '@/lib/authFetch';
|
||||
import type { CanvasShapeMessage } from '@/lib/canvas-sync';
|
||||
|
||||
interface NoteData {
|
||||
id: string;
|
||||
|
|
@ -51,6 +52,23 @@ export default function NotebookDetailPage() {
|
|||
fetchNotebook();
|
||||
}, [fetchNotebook]);
|
||||
|
||||
const handleShapeUpdate = useCallback(async (message: CanvasShapeMessage) => {
|
||||
try {
|
||||
await fetch('/api/sync', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
shapeId: message.shapeId,
|
||||
type: message.type,
|
||||
data: message.data,
|
||||
}),
|
||||
});
|
||||
fetchNotebook();
|
||||
} catch (err) {
|
||||
console.error('Canvas sync error:', err);
|
||||
}
|
||||
}, [fetchNotebook]);
|
||||
|
||||
const handleCreateCanvas = async () => {
|
||||
if (creatingCanvas) return;
|
||||
setCreatingCanvas(true);
|
||||
|
|
@ -98,51 +116,54 @@ export default function NotebookDetailPage() {
|
|||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0a0a0a]">
|
||||
<nav className="border-b border-slate-800 px-6 py-4">
|
||||
<div className="max-w-6xl mx-auto flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/" className="flex items-center gap-3">
|
||||
<nav className="border-b border-slate-800 px-4 md:px-6 py-4">
|
||||
<div className="max-w-6xl mx-auto flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2 md:gap-3 min-w-0">
|
||||
<Link href="/" className="flex-shrink-0">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-sm font-bold text-black">
|
||||
rN
|
||||
</div>
|
||||
</Link>
|
||||
<span className="text-slate-600">/</span>
|
||||
<Link href="/notebooks" className="text-slate-400 hover:text-white transition-colors">Notebooks</Link>
|
||||
<span className="text-slate-600">/</span>
|
||||
<span className="text-white">{notebook.title}</span>
|
||||
<span className="text-slate-600 hidden sm:inline">/</span>
|
||||
<Link href="/notebooks" className="text-slate-400 hover:text-white transition-colors hidden sm:inline">Notebooks</Link>
|
||||
<span className="text-slate-600 hidden sm:inline">/</span>
|
||||
<span className="text-white truncate">{notebook.title}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2 md:gap-3 flex-shrink-0">
|
||||
{notebook.canvasSlug ? (
|
||||
<button
|
||||
onClick={() => setShowCanvas(!showCanvas)}
|
||||
className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
|
||||
className={`px-2 md:px-3 py-1.5 text-sm rounded-lg transition-colors ${
|
||||
showCanvas
|
||||
? 'bg-amber-500/20 text-amber-400 border border-amber-500/30'
|
||||
: 'bg-slate-800 text-slate-400 border border-slate-700 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{showCanvas ? 'Hide Canvas' : 'Show Canvas'}
|
||||
<span className="hidden sm:inline">{showCanvas ? 'Hide Canvas' : 'Show Canvas'}</span>
|
||||
<svg className="w-4 h-4 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" /></svg>
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleCreateCanvas}
|
||||
disabled={creatingCanvas}
|
||||
className="px-3 py-1.5 text-sm bg-slate-800 text-slate-400 border border-slate-700 rounded-lg hover:text-white transition-colors"
|
||||
className="px-2 md:px-3 py-1.5 text-sm bg-slate-800 text-slate-400 border border-slate-700 rounded-lg hover:text-white transition-colors hidden sm:inline-flex"
|
||||
>
|
||||
{creatingCanvas ? 'Creating...' : 'Create Canvas'}
|
||||
</button>
|
||||
)}
|
||||
<Link
|
||||
href={`/notes/new?notebookId=${notebook.id}`}
|
||||
className="px-4 py-2 bg-amber-500 hover:bg-amber-400 text-black text-sm font-medium rounded-lg transition-colors"
|
||||
className="px-3 md:px-4 py-2 bg-amber-500 hover:bg-amber-400 text-black text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
Add Note
|
||||
<span className="hidden sm:inline">Add Note</span>
|
||||
<svg className="w-4 h-4 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
|
||||
</Link>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="px-3 py-1.5 text-sm text-red-400 hover:text-red-300 border border-red-900/30 hover:border-red-800 rounded-lg transition-colors"
|
||||
className="px-2 md:px-3 py-1.5 text-sm text-red-400 hover:text-red-300 border border-red-900/30 hover:border-red-800 rounded-lg transition-colors"
|
||||
>
|
||||
Delete
|
||||
<span className="hidden sm:inline">Delete</span>
|
||||
<svg className="w-4 h-4 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
|
||||
</button>
|
||||
<UserMenu />
|
||||
</div>
|
||||
|
|
@ -151,12 +172,12 @@ export default function NotebookDetailPage() {
|
|||
|
||||
<div className={`flex ${showCanvas ? 'gap-0' : ''}`}>
|
||||
{/* Notes panel */}
|
||||
<main className={`${showCanvas ? 'w-3/5' : 'w-full'} max-w-6xl mx-auto px-6 py-8`}>
|
||||
<main className={`${showCanvas ? 'hidden md:block md:w-3/5' : 'w-full'} max-w-6xl mx-auto px-4 md:px-6 py-6 md:py-8`}>
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<div className="mb-6 md:mb-8">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="w-4 h-4 rounded-full" style={{ backgroundColor: notebook.coverColor }} />
|
||||
<h1 className="text-3xl font-bold text-white">{notebook.title}</h1>
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-white">{notebook.title}</h1>
|
||||
</div>
|
||||
{notebook.description && (
|
||||
<p className="text-slate-400 ml-7">{notebook.description}</p>
|
||||
|
|
@ -194,7 +215,7 @@ export default function NotebookDetailPage() {
|
|||
{tab === 'pinned' ? 'No pinned notes' : 'No notes yet. Add one!'}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{filteredNotes.map((note) => (
|
||||
<NoteCard
|
||||
key={note.id}
|
||||
|
|
@ -216,10 +237,19 @@ export default function NotebookDetailPage() {
|
|||
)}
|
||||
</main>
|
||||
|
||||
{/* Canvas sidebar */}
|
||||
{/* Canvas sidebar — full screen on mobile, split on desktop */}
|
||||
{showCanvas && notebook.canvasSlug && (
|
||||
<div className="w-2/5 border-l border-slate-800 sticky top-0 h-screen">
|
||||
<CanvasEmbed canvasSlug={notebook.canvasSlug} className="h-full" />
|
||||
<div className="fixed inset-0 z-40 md:relative md:inset-auto md:w-2/5 md:z-auto border-l border-slate-800 md:sticky md:top-0 md:h-screen bg-[#0a0a0a]">
|
||||
<div className="md:hidden flex items-center justify-between px-4 py-3 border-b border-slate-800">
|
||||
<span className="text-sm font-medium text-white">Canvas</span>
|
||||
<button
|
||||
onClick={() => setShowCanvas(false)}
|
||||
className="p-1 text-slate-400 hover:text-white"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
<CanvasEmbed canvasSlug={notebook.canvasSlug} className="h-full" onShapeUpdate={handleShapeUpdate} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -42,23 +42,23 @@ export default function NewNotebookPage() {
|
|||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0a0a0a]">
|
||||
<nav className="border-b border-slate-800 px-6 py-4">
|
||||
<nav className="border-b border-slate-800 px-4 md:px-6 py-4">
|
||||
<div className="max-w-6xl mx-auto flex items-center gap-3">
|
||||
<Link href="/" className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-sm font-bold text-black">
|
||||
rN
|
||||
</div>
|
||||
</Link>
|
||||
<span className="text-slate-600">/</span>
|
||||
<Link href="/notebooks" className="text-slate-400 hover:text-white transition-colors">Notebooks</Link>
|
||||
<span className="text-slate-600">/</span>
|
||||
<span className="text-slate-600 hidden sm:inline">/</span>
|
||||
<Link href="/notebooks" className="text-slate-400 hover:text-white transition-colors hidden sm:inline">Notebooks</Link>
|
||||
<span className="text-slate-600 hidden sm:inline">/</span>
|
||||
<span className="text-white">New</span>
|
||||
<div className="ml-auto"><UserMenu /></div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main className="max-w-2xl mx-auto px-6 py-12">
|
||||
<h1 className="text-3xl font-bold text-white mb-8">Create Notebook</h1>
|
||||
<main className="max-w-2xl mx-auto px-4 md:px-6 py-8 md:py-12">
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-white mb-6 md:mb-8">Create Notebook</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -29,34 +29,39 @@ export default function NotebooksPage() {
|
|||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0a0a0a]">
|
||||
<nav className="border-b border-slate-800 px-6 py-4">
|
||||
<nav className="border-b border-slate-800 px-4 md:px-6 py-4">
|
||||
<div className="max-w-6xl mx-auto flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/" className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-sm font-bold text-black">
|
||||
rN
|
||||
</div>
|
||||
<span className="text-lg font-semibold text-white">rNotes</span>
|
||||
<span className="text-lg font-semibold text-white hidden sm:inline">rNotes</span>
|
||||
</Link>
|
||||
<span className="text-slate-600">/</span>
|
||||
<span className="text-slate-400">Notebooks</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-64">
|
||||
<div className="flex items-center gap-2 md:gap-4">
|
||||
<div className="hidden md:block w-64">
|
||||
<SearchBar />
|
||||
</div>
|
||||
<Link
|
||||
href="/notebooks/new"
|
||||
className="px-4 py-2 bg-amber-500 hover:bg-amber-400 text-black text-sm font-medium rounded-lg transition-colors"
|
||||
className="px-3 md:px-4 py-2 bg-amber-500 hover:bg-amber-400 text-black text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
New Notebook
|
||||
<span className="hidden sm:inline">New Notebook</span>
|
||||
<svg className="w-4 h-4 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
|
||||
</Link>
|
||||
<UserMenu />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/* Mobile search */}
|
||||
<div className="md:hidden px-4 py-3 border-b border-slate-800">
|
||||
<SearchBar />
|
||||
</div>
|
||||
|
||||
<main className="max-w-6xl mx-auto px-6 py-8">
|
||||
<main className="max-w-6xl mx-auto px-4 md:px-6 py-6 md:py-8">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<svg className="animate-spin h-8 w-8 text-amber-400" viewBox="0 0 24 24">
|
||||
|
|
@ -75,7 +80,7 @@ export default function NotebooksPage() {
|
|||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div className="grid sm:grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
|
||||
{notebooks.map((nb) => (
|
||||
<NotebookCard
|
||||
key={nb.id}
|
||||
|
|
|
|||
|
|
@ -123,44 +123,45 @@ export default function NoteDetailPage() {
|
|||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0a0a0a]">
|
||||
<nav className="border-b border-slate-800 px-6 py-4">
|
||||
<div className="max-w-4xl mx-auto flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/" className="flex items-center gap-3">
|
||||
<nav className="border-b border-slate-800 px-4 md:px-6 py-4">
|
||||
<div className="max-w-4xl mx-auto flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2 md:gap-3 min-w-0">
|
||||
<Link href="/" className="flex-shrink-0">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-sm font-bold text-black">
|
||||
rN
|
||||
</div>
|
||||
</Link>
|
||||
<span className="text-slate-600">/</span>
|
||||
<span className="text-slate-600 hidden sm:inline">/</span>
|
||||
{note.notebook ? (
|
||||
<>
|
||||
<Link href={`/notebooks/${note.notebook.id}`} className="text-slate-400 hover:text-white transition-colors">
|
||||
<Link href={`/notebooks/${note.notebook.id}`} className="text-slate-400 hover:text-white transition-colors hidden sm:inline truncate max-w-[120px]">
|
||||
{note.notebook.title}
|
||||
</Link>
|
||||
<span className="text-slate-600">/</span>
|
||||
<span className="text-slate-600 hidden sm:inline">/</span>
|
||||
</>
|
||||
) : null}
|
||||
<span className="text-white truncate max-w-[200px]">{note.title}</span>
|
||||
<span className="text-white truncate max-w-[120px] md:max-w-[200px]">{note.title}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1.5 md:gap-2 flex-shrink-0">
|
||||
<button
|
||||
onClick={handleTogglePin}
|
||||
className={`px-3 py-1.5 text-sm rounded-lg border transition-colors ${
|
||||
className={`px-2 md:px-3 py-1.5 text-sm rounded-lg border transition-colors ${
|
||||
note.isPinned
|
||||
? 'bg-amber-500/20 text-amber-400 border-amber-500/30'
|
||||
: 'text-slate-400 border-slate-700 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{note.isPinned ? 'Unpin' : 'Pin to Canvas'}
|
||||
<span className="hidden sm:inline">{note.isPinned ? 'Unpin' : 'Pin to Canvas'}</span>
|
||||
<svg className="w-4 h-4 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" /></svg>
|
||||
</button>
|
||||
{editing ? (
|
||||
<>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="px-3 py-1.5 text-sm bg-amber-500 hover:bg-amber-400 text-black font-medium rounded-lg transition-colors"
|
||||
className="px-2 md:px-3 py-1.5 text-sm bg-amber-500 hover:bg-amber-400 text-black font-medium rounded-lg transition-colors"
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save'}
|
||||
{saving ? '...' : 'Save'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
|
|
@ -168,7 +169,7 @@ export default function NoteDetailPage() {
|
|||
setEditTitle(note.title);
|
||||
setEditContent(note.content);
|
||||
}}
|
||||
className="px-3 py-1.5 text-sm text-slate-400 border border-slate-700 rounded-lg hover:text-white transition-colors"
|
||||
className="px-2 md:px-3 py-1.5 text-sm text-slate-400 border border-slate-700 rounded-lg hover:text-white transition-colors hidden sm:inline-flex"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
|
@ -176,25 +177,26 @@ export default function NoteDetailPage() {
|
|||
) : (
|
||||
<button
|
||||
onClick={() => setEditing(true)}
|
||||
className="px-3 py-1.5 text-sm text-slate-400 border border-slate-700 rounded-lg hover:text-white transition-colors"
|
||||
className="px-2 md:px-3 py-1.5 text-sm text-slate-400 border border-slate-700 rounded-lg hover:text-white transition-colors"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="px-3 py-1.5 text-sm text-red-400 hover:text-red-300 border border-red-900/30 rounded-lg transition-colors"
|
||||
className="px-2 md:px-3 py-1.5 text-sm text-red-400 hover:text-red-300 border border-red-900/30 rounded-lg transition-colors"
|
||||
>
|
||||
Delete
|
||||
<span className="hidden sm:inline">Delete</span>
|
||||
<svg className="w-4 h-4 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
|
||||
</button>
|
||||
<UserMenu />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main className="max-w-4xl mx-auto px-6 py-8">
|
||||
<main className="max-w-4xl mx-auto px-4 md:px-6 py-6 md:py-8">
|
||||
{/* Metadata */}
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="flex flex-wrap items-center gap-2 md:gap-3 mb-6">
|
||||
<span className={`text-xs font-bold uppercase px-2 py-1 rounded ${TYPE_COLORS[note.type] || TYPE_COLORS.NOTE}`}>
|
||||
{note.type}
|
||||
</span>
|
||||
|
|
@ -264,7 +266,7 @@ export default function NoteDetailPage() {
|
|||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-6">{note.title}</h1>
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-white mb-6">{note.title}</h1>
|
||||
{note.type === 'CODE' ? (
|
||||
<pre className="bg-slate-800/50 border border-slate-700 rounded-lg p-4 overflow-x-auto">
|
||||
<code className="text-sm text-slate-200 font-mono">
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ function NewNoteForm() {
|
|||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0a0a0a]">
|
||||
<nav className="border-b border-slate-800 px-6 py-4">
|
||||
<nav className="border-b border-slate-800 px-4 md:px-6 py-4">
|
||||
<div className="max-w-6xl mx-auto flex items-center gap-3">
|
||||
<Link href="/" className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-sm font-bold text-black">
|
||||
|
|
@ -121,8 +121,8 @@ function NewNoteForm() {
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<main className="max-w-3xl mx-auto px-6 py-12">
|
||||
<h1 className="text-3xl font-bold text-white mb-8">Create Note</h1>
|
||||
<main className="max-w-3xl mx-auto px-4 md:px-6 py-8 md:py-12">
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-white mb-6 md:mb-8">Create Note</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Type selector */}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export default function HomePage() {
|
|||
return (
|
||||
<div className="min-h-screen bg-[#0a0a0a]">
|
||||
{/* Nav */}
|
||||
<nav className="border-b border-slate-800 px-6 py-4">
|
||||
<nav className="border-b border-slate-800 px-4 md:px-6 py-4">
|
||||
<div className="max-w-6xl mx-auto flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-sm font-bold text-black">
|
||||
|
|
@ -38,51 +38,57 @@ export default function HomePage() {
|
|||
</div>
|
||||
<span className="text-lg font-semibold text-white">rNotes</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-64">
|
||||
<div className="flex items-center gap-2 md:gap-4">
|
||||
<div className="hidden md:block w-64">
|
||||
<SearchBar />
|
||||
</div>
|
||||
<Link
|
||||
href="/notebooks"
|
||||
className="text-sm text-slate-400 hover:text-white transition-colors"
|
||||
className="text-sm text-slate-400 hover:text-white transition-colors hidden sm:inline"
|
||||
>
|
||||
Notebooks
|
||||
</Link>
|
||||
<Link
|
||||
href="/notes/new"
|
||||
className="px-4 py-2 bg-amber-500 hover:bg-amber-400 text-black text-sm font-medium rounded-lg transition-colors"
|
||||
className="px-3 md:px-4 py-2 bg-amber-500 hover:bg-amber-400 text-black text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
New Note
|
||||
<span className="hidden sm:inline">New Note</span>
|
||||
<svg className="w-4 h-4 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
|
||||
</Link>
|
||||
<UserMenu />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Mobile search */}
|
||||
<div className="md:hidden px-4 py-3 border-b border-slate-800">
|
||||
<SearchBar />
|
||||
</div>
|
||||
|
||||
{/* Hero */}
|
||||
<section className="py-20 px-6">
|
||||
<section className="py-12 md:py-20 px-4 md:px-6">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-5xl font-bold mb-4">
|
||||
<h1 className="text-3xl md:text-5xl font-bold mb-4">
|
||||
<span className="bg-gradient-to-r from-amber-400 to-orange-500 bg-clip-text text-transparent">
|
||||
Capture Everything
|
||||
</span>
|
||||
<br />
|
||||
<span className="text-white">Find Anything</span>
|
||||
</h1>
|
||||
<p className="text-lg text-slate-400 mb-8 max-w-2xl mx-auto">
|
||||
<p className="text-base md:text-lg text-slate-400 mb-6 md:mb-8 max-w-2xl mx-auto">
|
||||
Notes, clips, bookmarks, code, images, and files — all in one place.
|
||||
Organize in notebooks, tag freely, and collaborate on a visual canvas shared across r*Spaces.
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4">
|
||||
<Link
|
||||
href="/notebooks/new"
|
||||
className="px-6 py-3 bg-amber-500 hover:bg-amber-400 text-black font-semibold rounded-lg transition-colors"
|
||||
className="w-full sm:w-auto px-6 py-3 bg-amber-500 hover:bg-amber-400 text-black font-semibold rounded-lg transition-colors text-center"
|
||||
>
|
||||
Create Notebook
|
||||
</Link>
|
||||
<Link
|
||||
href="/notes/new"
|
||||
className="px-6 py-3 border border-slate-700 hover:border-slate-600 text-white rounded-lg transition-colors"
|
||||
className="w-full sm:w-auto px-6 py-3 border border-slate-700 hover:border-slate-600 text-white rounded-lg transition-colors text-center"
|
||||
>
|
||||
Quick Note
|
||||
</Link>
|
||||
|
|
@ -91,10 +97,10 @@ export default function HomePage() {
|
|||
</section>
|
||||
|
||||
{/* How it works */}
|
||||
<section className="py-16 px-6 border-t border-slate-800">
|
||||
<section className="py-12 md:py-16 px-4 md:px-6 border-t border-slate-800">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h2 className="text-2xl font-bold text-white text-center mb-12">How It Works</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<h2 className="text-xl md:text-2xl font-bold text-white text-center mb-8 md:mb-12">How It Works</h2>
|
||||
<div className="grid sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 rounded-xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-6 h-6 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
|
|
@ -128,15 +134,15 @@ export default function HomePage() {
|
|||
|
||||
{/* Recent notebooks */}
|
||||
{!loading && notebooks.length > 0 && (
|
||||
<section className="py-16 px-6 border-t border-slate-800">
|
||||
<section className="py-12 md:py-16 px-4 md:px-6 border-t border-slate-800">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h2 className="text-2xl font-bold text-white">Recent Notebooks</h2>
|
||||
<div className="flex items-center justify-between mb-6 md:mb-8">
|
||||
<h2 className="text-xl md:text-2xl font-bold text-white">Recent Notebooks</h2>
|
||||
<Link href="/notebooks" className="text-sm text-amber-400 hover:text-amber-300">
|
||||
View all
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div className="grid sm:grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
|
||||
{notebooks.slice(0, 6).map((nb) => (
|
||||
<NotebookCard
|
||||
key={nb.id}
|
||||
|
|
@ -154,8 +160,8 @@ export default function HomePage() {
|
|||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-slate-800 px-6 py-8">
|
||||
<div className="max-w-6xl mx-auto flex items-center justify-between text-sm text-slate-500">
|
||||
<footer className="border-t border-slate-800 px-4 md:px-6 py-6 md:py-8">
|
||||
<div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-slate-500">
|
||||
<span>rNotes.online — Part of the r* ecosystem</span>
|
||||
<a href="https://rspace.online" className="hover:text-amber-400 transition-colors">
|
||||
rSpace.online
|
||||
|
|
|
|||
Loading…
Reference in New Issue