FolderFiles Component

3D filing cabinet with stacked folders and drag-and-drop organisation

Database Connected

Interactive Demo

How to use: Hover over a folder to reveal more tabs beneath → Click a folder to open it → Drag items between "Selected" and "All Items" panels to organise content

Component Features

🗂️ 3D Filing Cabinet

Folders stacked with subtle 3D transforms and depth effects, like a physical filing cabinet drawer.

🎨 Colour-Coded Folders

Each folder has a vibrant colour with visible body and protruding tab for easy identification.

📑 Staggered Tabs

Folder tabs positioned in left-center-right pattern for easy access, like real filing folders.

👁️ Hover Animation

Hovering over a folder drops folders beneath to reveal more tabs with smooth animation.

🔄 Drag & Drop

Native HTML5 drag-and-drop between two panels for organising content items.

💬 Smart Tooltips

Tooltips appear below tabs in the revealed space, showing folder name and item count.

💾 Database Integration

Neon PostgreSQL with graceful fallback to constants when DB unavailable.

♿ Accessible

ARIA labels, keyboard navigation, focus management, reduced motion support.

📱 Responsive

Mobile-friendly layout adapts to all screen sizes automatically.

🔒 Secure

HTML sanitization with DOMPurify prevents XSS attacks.

📦 Self-Contained

Copy-paste ready with all styles scoped. Zero external dependencies.

Usage Example

<script>
  import FolderFiles from '$lib/components/FolderFiles.svelte';

  let { data } = $props();
</script>

<FolderFiles
  folders={data.folders}
  files={data.files}
/>

Props

PropTypeDefaultDescription
foldersFolder[][]Array of folder objects with id, label, color
filesFileItem[][]Array of file items with title, subtitle, previewText

Data Structure

Folder Interface

interface Folder {
  id: number;
  label: string;              // Display name
  color: string;              // Tailwind class (e.g., 'bg-blue-500')
  textColor?: string;         // Tailwind class (e.g., 'text-white')
  icon?: string;              // Emoji or character
  description?: string;       // For tooltip
  category?: string;          // For filtering
}

FileItem Interface

interface FileItem {
  id: number;
  folderId: number;           // Parent folder ID
  title: string;
  subtitle?: string;
  previewText: string;        // Brief description
}

Implementation Tips

🎨 Folder Colours

Use hex colour codes for folders (e.g., #a855f7). The component applies these colours to both the folder tab and body with automatic depth shading.

📑 Tab Positioning

Tabs automatically stagger left-center-right using modulo pattern. First folder left, second center-left, third center-right, then repeats.

🗃️ Database Schema

Run database/schema_folderfiles.sql in Neon to create tables. Simple structure with folders and files tables linked by folderId.

🔄 Fallback Data

Component works without database using FALLBACK_FOLDERS and FALLBACK_FILES from constants.ts.