develop #1
@@ -9,7 +9,8 @@
|
||||
"Bash(node:*)",
|
||||
"Bash(curl:*)",
|
||||
"Bash(npx tsc:*)",
|
||||
"Bash(npm list:*)"
|
||||
"Bash(npm list:*)",
|
||||
"Bash(npx jest:*)"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
BIN
prisma/dev.db
BIN
prisma/dev.db
Binary file not shown.
@@ -148,6 +148,11 @@ model Backlink {
|
||||
- Registro de origen de creación (form/quick/import)
|
||||
- Feature flags configurables
|
||||
|
||||
### Mejoras UI Recientes
|
||||
- Header responsive con menú hamburguesa en móvil
|
||||
- Desktop: una fila con logo, nav links, QuickAdd y botón Nueva nota
|
||||
- Mobile: logo + QuickAdd + hamburguesa → dropdown con nav links y botón Nueva nota
|
||||
|
||||
## Algoritmo de Scoring
|
||||
|
||||
```typescript
|
||||
|
||||
@@ -1,18 +1,21 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Plus, FileText, Settings } from 'lucide-react'
|
||||
import { Plus, FileText, Settings, Menu, X } from 'lucide-react'
|
||||
import { QuickAdd } from '@/components/quick-add'
|
||||
|
||||
export function Header() {
|
||||
const pathname = usePathname()
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container mx-auto px-4 flex h-14 items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="container mx-auto px-2 sm:px-4">
|
||||
{/* Desktop: single row */}
|
||||
<div className="hidden sm:flex h-14 items-center justify-between gap-2">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<span className="text-xl font-bold">Recall</span>
|
||||
</Link>
|
||||
@@ -38,8 +41,7 @@ export function Header() {
|
||||
</Button>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<QuickAdd />
|
||||
<Link href="/new">
|
||||
<Button size="sm" className="gap-1.5">
|
||||
@@ -49,6 +51,65 @@ export function Header() {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile: hamburger + logo */}
|
||||
<div className="flex sm:hidden h-14 items-center justify-between gap-2">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<span className="text-lg font-bold">Recall</span>
|
||||
</Link>
|
||||
<div className="flex items-center gap-2">
|
||||
<QuickAdd />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
className="p-2"
|
||||
>
|
||||
{mobileMenuOpen ? (
|
||||
<X className="h-5 w-5" />
|
||||
) : (
|
||||
<Menu className="h-5 w-5" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile dropdown menu */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="sm:hidden py-3 border-t flex flex-col gap-2">
|
||||
<nav className="flex flex-col gap-1">
|
||||
<Link href="/notes" onClick={() => setMobileMenuOpen(false)}>
|
||||
<Button
|
||||
variant={pathname === '/notes' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
className="w-full justify-start gap-2"
|
||||
>
|
||||
<FileText className="h-4 w-4" />
|
||||
Notas
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/settings" onClick={() => setMobileMenuOpen(false)}>
|
||||
<Button
|
||||
variant={pathname === '/settings' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
className="w-full justify-start gap-2"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
Configuración
|
||||
</Button>
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="border-t pt-2">
|
||||
<Link href="/new" onClick={() => setMobileMenuOpen(false)}>
|
||||
<Button size="sm" className="w-full justify-start gap-2">
|
||||
<Plus className="h-4 w-4" />
|
||||
Nueva nota
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -188,8 +188,8 @@ export function QuickAdd() {
|
||||
onFocus={() => setIsExpanded(true)}
|
||||
onPaste={handlePaste}
|
||||
className={cn(
|
||||
'w-48 transition-all duration-200',
|
||||
isExpanded && 'w-72'
|
||||
'w-24 xs:w-32 sm:w-48 transition-all duration-200',
|
||||
isExpanded && 'w-40 xs:w-48 sm:w-72'
|
||||
)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
@@ -202,29 +202,29 @@ export function QuickAdd() {
|
||||
type="button"
|
||||
onClick={toggleMultiline}
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center rounded-lg border bg-background p-2',
|
||||
'inline-flex items-center justify-center rounded-lg border bg-background p-1.5 sm:p-2',
|
||||
'hover:bg-accent hover:text-accent-foreground',
|
||||
'transition-colors',
|
||||
isMultiline && 'bg-accent text-accent-foreground'
|
||||
)}
|
||||
title={isMultiline ? 'Modo línea' : 'Modo multilínea'}
|
||||
>
|
||||
<Text className="h-4 w-4" />
|
||||
<Text className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!value.trim() || isLoading}
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center rounded-lg border bg-background p-2',
|
||||
'inline-flex items-center justify-center rounded-lg border bg-background p-1.5 sm:p-2',
|
||||
'hover:bg-accent hover:text-accent-foreground',
|
||||
'disabled:pointer-events-none disabled:opacity-50',
|
||||
'transition-colors'
|
||||
)}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<Loader2 className="h-3 w-3 sm:h-4 sm:w-4 animate-spin" />
|
||||
) : (
|
||||
<Plus className="h-4 w-4" />
|
||||
<Plus className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user