fix: Bookmarklet improvements and header layout fixes

- Fix bookmarklet URL to use absolute path with window.location.origin
- Change capture prefix from 'rec:' to 'web:' for web captures
- Add BookmarkletInstructions to header and preferences panel
- Redesign QuickAdd as dropdown popup (no header overflow)
- Move capture button and work mode to mobile menu
- Fix isOpen bug in BookmarkletInstructions dialog

src/components/header.tsx

@@ -1,16 +1,30 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { Plus, FileText, Settings, Menu, X } from 'lucide-react'
 import { QuickAdd } from '@/components/quick-add'
 import { WorkModeToggle } from '@/components/work-mode-toggle'
+import { BookmarkletInstructions } from '@/components/bookmarklet-instructions'
+import { isWorkModeEnabled } from '@/lib/preferences'
 
 export function Header() {
   const pathname = usePathname()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [workModeToggleVisible, setWorkModeToggleVisible] = useState(true)
+
+  useEffect(() => {
+    setWorkModeToggleVisible(isWorkModeEnabled())
+
+    const handlePreferencesChange = () => {
+      setWorkModeToggleVisible(isWorkModeEnabled())
+    }
+
+    window.addEventListener('preferences-updated', handlePreferencesChange)
+    return () => window.removeEventListener('preferences-updated', handlePreferencesChange)
+  }, [])
 
   return (
     <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -44,7 +58,8 @@ export function Header() {
           </nav>
           <div className="flex items-center gap-2">
             <QuickAdd />
-            <WorkModeToggle />
+            <BookmarkletInstructions />
+            {workModeToggleVisible && <WorkModeToggle />}
             <Link href="/new">
               <Button size="sm" className="gap-1.5">
                 <Plus className="h-4 w-4" />
@@ -59,9 +74,8 @@ export function Header() {
           <Link href="/" className="flex items-center gap-2">
             <span className="text-lg font-bold">Recall</span>
           </Link>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1.5">
             <QuickAdd />
-            <WorkModeToggle />
             <Button
               variant="ghost"
               size="sm"
@@ -102,13 +116,20 @@ export function Header() {
                 </Button>
               </Link>
             </nav>
-            <div className="border-t pt-2">
+            <div className="border-t pt-2 flex flex-col gap-1">
               <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>
+              <BookmarkletInstructions />
+              {workModeToggleVisible && (
+                <div className="flex items-center justify-between px-2 py-1.5">
+                  <span className="text-sm">Modo trabajo</span>
+                  <WorkModeToggle />
+                </div>
+              )}
             </div>
           </div>
         )}