Build note grid/card view

[RossCabrera]

Overview

Create the main workspace note grid displaying notes as cards with title,
description preview, category badge, and action buttons.

Components

Notes Grid

• Responsive grid layout (1-4 columns based on screen)
• Masonry layout (optional)
• Empty state message
• Loading skeleton cards (optional)
• Infinite scroll or pagination

Note Card

• Title (heading)
• Description preview (truncated, 3-4 lines)
• Category badge (color + name)
• Created/updated timestamp (relative time)
• Action buttons (edit, delete)
• Click to open/edit
• Hover effects

Note Detail Modal

• Full title
• Full description
• Category display
• Edit button
• Delete button
• Close button
• Timestamps
• Read-only view (optional)

Features

• Create new note button (floating or top)
• Search notes
• Sort by date created, date updated, title
• Empty state when no notes
• Loading states
• Error states
• Responsive design

Integration

• Use useNotes() to fetch
• Use useCreateNote(), useUpdateNote(), useDeleteNote() mutations
• Filter by selected category
• Search and sort on client-side

Acceptance Criteria

• All notes displayed (AC-NOTE-05)
• Notes show title and description (AC-NOTE-01)
• Category badge shown if set (AC-NOTE-06)
• Create note works
• Edit note works
• Delete note works
• Responsive grid layout
• Loading states
• Empty state

Related User Stories

• US-NOTE-05: CRUD operations
• US-NOTE-06: Color-coded categories

Related Acceptance Criteria

• AC-NOTE-01: Notes with title, description, timestamps
• AC-NOTE-05: Create, edit, delete notes

Related Issues

• Depends on: Create TanStack Query hooks for notes #20
• Blocks: Add loading skeletons for UX #25, Set up drf-spectacular for Swagger docs #26, Add error toast notifications #28