Copyparty WebUI

A modern, beautiful web interface for Copyparty with a GNOME Files (Nautilus) aesthetic.

![Theme: Light/Dark]

Features

• 🎨 GNOME Files Aesthetic - Clean, modern design inspired by Nautilus
• 🌙 Dark/Light Theme - Toggle between themes with system preference support
• 📁 Grid & List Views - Switch between icon grid and compact list
• 🔍 Search - Quick file search (ready for API integration)
• 🧭 Navigation - Breadcrumbs, back/forward, sidebar shortcuts
• 📱 Responsive - Works on desktop and mobile

Tech Stack

• Svelte + TypeScript - Fast, reactive UI
• Vite - Lightning fast dev server and build
• Tailwind CSS - Utility-first styling with custom GNOME color palette
• Lucide Icons - Beautiful, consistent icons

Getting Started

Prerequisites

• Node.js 18+
• npm or pnpm
• Copyparty backend running (for API calls)

Installation

# Clone the repository (if standalone)
git clone <repo-url>
cd copyparty-ui

# Install dependencies
npm install

# Start development server
npm run dev

The UI will be available at http://localhost:5173

Development with Copyparty Backend

1. Start Copyparty:

   python3 copyparty-sfx.py -v /srv/files:/files:r
   

   (Default port: 3923)

2. The Vite dev server proxies API calls to localhost:3923 automatically.

Build for Production

npm run build

Output will be in the dist/ directory.

Project Structure

copyparty-ui/
├── src/
│   ├── lib/
│   │   ├── api/           # Copyparty API client
│   │   ├── components/    # Svelte components
│   │   │   └── layout/    # AppShell, Sidebar, TopBar, MainContent
│   │   ├── stores/        # Svelte stores (theme, navigation, viewMode)
│   │   └── types/         # TypeScript types for API
│   ├── App.svelte         # Root component
│   ├── main.ts            # Entry point
│   └── app.css            # Global styles & Tailwind
├── tailwind.config.js     # Tailwind with GNOME color palette
├── vite.config.ts         # Vite config with API proxy
└── package.json

Design System

Colors

Based on GNOME Files / Adwaita theme:

Token	Light	Dark	Usage
gnome-blue-500	#3584e4	#3584e4	Primary accent, folder icons
gnome-blue-600	#1c71d8	#1c71d8	Hover states
gnome-sidebar	#f6f5f4	#303030	Sidebar background
gnome-surface	#ffffff	#242424	Card backgrounds
gnome-background	#fafafa	#1e1e1e	Page background
gnome-border	#deddda	#4a4a4a	Borders

Typography

• Primary Font: SF Pro Display / SF Pro Text (Apple)
• Fallbacks: Inter, -apple-system, BlinkMacSystemFont, Segoe UI

Components

• .btn-gnome - Standard button
• .btn-gnome-primary - Primary (blue) button
• .sidebar-item - Sidebar navigation item
• .grid-item - File/folder in grid view
• .list-item - File/folder in list view
• .search-input - Search input field
• .icon-btn - Icon-only button
• .card-gnome - Card container

API Integration

The API client (src/lib/api/client.ts) wraps Copyparty's HTTP API:

import { api } from './lib/api';

// List directory
const listing = await api.listDirectory('/path');

// Search
const results = await api.search('query');

// Upload file
await api.uploadFile('/path', file);

// Create directory
await api.createDirectory('/parent', 'new-folder');

// Delete
await api.delete('/path/to/file');

// Move/rename
await api.move('/old/path', '/new/path');

Roadmap

• Phase 1: Design system & layout skeleton
• Phase 2: API integration for file browsing
• Phase 3: File operations (copy, move, delete)
• Phase 4: Upload system (basic + up2k resumable)
• Phase 5: Media viewers (image, video, audio)
• Phase 6: Search implementation
• Phase 7: Shares & permissions
• Phase 8: Admin features

License

MIT (or match Copyparty's license)

---

Built with ❤️ for the Copyparty project

CORS Configuration

Development

The Vite dev server is configured to proxy requests to copyparty and strip the Origin header. This is necessary because:

1. Copyparty 1.6.0+ requires CORS validation for POST/PUT/DELETE operations
2. Browser's fetch() automatically includes Origin header for cross-origin requests
3. The default CORS config only allows GET/HEAD methods

The fix is implemented in vite.config.ts using the proxy's configure callback to remove the Origin header before forwarding to copyparty.

Production Deployment

For production, you have several options:

Option A: Reverse proxy (recommended) Use nginx/caddy to serve both the frontend and proxy to copyparty. Configure the proxy to strip Origin headers:

location /files {
    proxy_pass http://copyparty-backend:3923;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    # Don't forward Origin header to avoid CORS issues
    proxy_set_header Origin "";
}

Option B: Configure copyparty CORS Start copyparty with CORS flags to allow your frontend origin:

python3 -m copyparty \
  --acao 'https://your-frontend.com' \
  --acam 'GET,HEAD,POST,PUT,DELETE'

Option C: Disable CORS protection (dev only)

python3 -m copyparty --allow-csrf

⚠️ This disables all CORS protections and should NOT be used in production.