Integrate shadcn UI & add UI primitives

Integrates the shadcn/ui design system across the app and adds a collection of reusable UI primitives and layout components. Adds new UI atoms/molecules (avatar, card, collapsible, progress, select, sheet, sidebar, skeleton, table, tabs, toggles, tooltip), app sidebar, media filters, MediaTable, and a mobile hook; updates many views/components to use the new UI. Updates AGENTS.md with styling, layout, accessibility and design standards (Tailwind/shadcn guidance) and adds a registry entry to components.json. Also updates dependencies/lockfile to align shadcn and related packages.

AGENTS.md

@@ -21,9 +21,10 @@ This is a modern frontend project template based on React 18, TypeScript, and Vi
 - **State Management**: Zustand / Redux Toolkit
 - **Routing**: React Router v6
 - **UI Components**: Ant Design / Material-UI
-- **Styling**: Tailwind CSS / Styled-components
+- **Styling**: Tailwind CSS 4 with shadcn/ui component library
 - **Testing Framework**: Vitest + React Testing Library
 - **Code Quality**: ESLint + Prettier + Husky
+- **UI Components**: Complete shadcn/ui component set (New York style) with Lucide icons
 
 ## Project Structure
 
@@ -315,6 +316,54 @@ export default defineConfig({
 });
 ```
 
+
+## Styling
+
+1. Use the shadcn/ui library unless the user specifies otherwise.
+2. Avoid using indigo or blue colors unless specified in the user's request.
+3. MUST generate responsive designs.
+4. The Code Project is rendered on top of a white background. If a different background color is needed, use a wrapper element with a background color Tailwind class.
+
+---
+
+## UI/UX Design Standards
+
+### Visual Design
+
+- **Color System**: Use Tailwind CSS built-in variables (`bg-primary`, `text-primary-foreground`, `bg-background`).
+- **Color Restriction**: NO indigo or blue colors unless explicitly requested.
+- **Theme Support**: Implement light/dark mode with `next-themes`.
+- **Typography**: Consistent hierarchy with proper font weights and sizes.
+
+### Responsive Design (MANDATORY)
+
+- **Mobile-First**: Design for mobile, then enhance for desktop.
+- **Breakpoints**: Use Tailwind responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`).
+- **Touch-Friendly**: Minimum 44px touch targets for interactive elements.
+
+### Layout (MANDATORY)
+
+- **Sticky Footer Required**: If a `footer` exists, it MUST stick to the bottom of the viewport when content is shorter than one screen height (no floating/empty gap below).
+- **Natural Push on Overflow**: When content exceeds the viewport height, the footer MUST be pushed down naturally (never overlay or cover content).
+- **Recommended Implementation (Tailwind)**: Use a root wrapper with `min-h-screen flex flex-col`, and apply `mt-auto` to the `footer`.
+- **Mobile Safe Area**: On devices with safe areas (e.g., iOS), the footer MUST respect bottom safe area insets when applicable.
+
+### Accessibility (MANDATORY)
+
+- **Semantic HTML**: Use `main`, `header`, `nav`, `section`, `article`.
+- **ARIA Support**: Proper roles, labels, and descriptions.
+- **Screen Readers**: Use `sr-only` class for screen reader content.
+- **Alt Text**: Descriptive alt text for all images.
+- **Keyboard Navigation**: Ensure all elements are keyboard accessible.
+
+### Interactive Elements
+
+- **Loading States**: Show spinners/skeletons during async operations.
+- **Error Handling**: Clear, actionable error messages.
+- **Feedback**: Toast notifications for user actions.
+- **Animations**: Subtle Framer Motion transitions (hover, focus, page transitions).
+- **Hover Effects**: Interactive feedback on all clickable elements.
+
 ## Common Issues
 
 ### Issue 1: Vite Development Server Slow Startup