feat(nav): bouton action intégré dans la navbar v0.4.8
- ActionButtonContext : contexte React permettant aux pages d'injecter leur bouton action dans la navbar (Shopping=fa-cart-plus, Todos/Notes=+) - BottomNav : 5e slot dédié avec dock circulaire visuel permanent ; bouton rendu 10px au-dessus du centre du slot (effet soulevé) - Layout : ActionButtonProvider + overflow visible sur le conteneur nav - Pages : useEffect enregistre/vide le bouton action — plus de FAB flottant sur le contenu, liste entièrement visible Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,7 @@ import type { Note, NoteFilters } from '../api/notes'
|
||||
import { fetchNotes, createNote, updateNote, deleteNote, addAttachment, deleteAttachment } from '../api/notes'
|
||||
import Modal from '../components/Modal'
|
||||
import NoteForm from '../components/notes/NoteForm'
|
||||
import { useActionButton } from '../contexts/ActionButtonContext'
|
||||
|
||||
const noSelect: React.CSSProperties = { userSelect: 'none' }
|
||||
|
||||
@@ -163,6 +164,24 @@ export default function NotesPage() {
|
||||
const [searchInput, setSearchInput] = useState('')
|
||||
const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
const { setActionButton } = useActionButton()
|
||||
useEffect(() => {
|
||||
setActionButton(
|
||||
<button
|
||||
onClick={() => setShowForm(true)}
|
||||
aria-label="Nouvelle note"
|
||||
style={{
|
||||
width: 56, height: 56, borderRadius: '50%',
|
||||
background: 'var(--accent)', color: '#1d2021', border: 'none',
|
||||
fontSize: 24, cursor: 'pointer',
|
||||
boxShadow: '0 4px 16px rgba(0,0,0,0.5)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>+</button>
|
||||
)
|
||||
return () => setActionButton(null)
|
||||
}, [setActionButton])
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
@@ -348,20 +367,6 @@ export default function NotesPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FAB */}
|
||||
<button
|
||||
className="fixed bottom-[10px] right-3 lg:bottom-6 lg:right-6"
|
||||
onClick={() => setShowForm(true)}
|
||||
aria-label="Nouvelle note"
|
||||
style={{
|
||||
width: 56, height: 56, borderRadius: '50%',
|
||||
background: 'var(--accent)', color: '#1d2021',
|
||||
border: 'none', fontSize: 28, cursor: 'pointer',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>+</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user