khal-os 1.260324.2

package/src/components/apps/files/ContextMenu.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { Archive, Copy, Download, Edit3, FolderPlus, Trash2 } from 'lucide-react';
+import { useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import type { FsEntry } from './schema';
+
+export interface ContextMenuState {
+	x: number;
+	y: number;
+	entry: FsEntry;
+}
+
+interface FilesContextMenuProps {
+	state: ContextMenuState;
+	currentPath: string;
+	filesRoot: string;
+	selectedNames: Set<string>;
+	onClose: () => void;
+	onRename: (entry: FsEntry) => void;
+	onDelete: (entry: FsEntry) => void;
+	onDownload: (entry: FsEntry) => void;
+	onDownloadZip: (names: string[]) => void;
+	onNewFolder: () => void;
+}
+
+export function FilesContextMenu({
+	state,
+	currentPath,
+	filesRoot,
+	selectedNames,
+	onClose,
+	onRename,
+	onDelete,
+	onDownload,
+	onDownloadZip,
+	onNewFolder,
+}: FilesContextMenuProps) {
+	const menuRef = useRef<HTMLDivElement>(null);
+
+	const handleCopyPath = useCallback(() => {
+		const relativePath = currentPath === '/' ? `/${state.entry.name}` : `${currentPath}/${state.entry.name}`;
+		const absolutePath = filesRoot ? `${filesRoot}${relativePath}` : relativePath;
+		navigator.clipboard.writeText(absolutePath);
+		onClose();
+	}, [currentPath, filesRoot, state.entry.name, onClose]);
+
+	const handleRename = useCallback(() => {
+		onRename(state.entry);
+		onClose();
+	}, [state.entry, onRename, onClose]);
+
+	const handleDelete = useCallback(() => {
+		onDelete(state.entry);
+		onClose();
+	}, [state.entry, onDelete, onClose]);
+
+	const handleDownload = useCallback(() => {
+		onDownload(state.entry);
+		onClose();
+	}, [state.entry, onDownload, onClose]);
+
+	const handleDownloadZip = useCallback(() => {
+		onDownloadZip([...selectedNames]);
+		onClose();
+	}, [selectedNames, onDownloadZip, onClose]);
+
+	const handleNewFolder = useCallback(() => {
+		onNewFolder();
+		onClose();
+	}, [onNewFolder, onClose]);
+
+	// Close on Escape or click outside
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') onClose();
+		};
+		const handleMouseDown = (e: MouseEvent) => {
+			if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+				onClose();
+			}
+		};
+		document.addEventListener('keydown', handleKeyDown);
+		document.addEventListener('mousedown', handleMouseDown);
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown);
+			document.removeEventListener('mousedown', handleMouseDown);
+		};
+	}, [onClose]);
+
+	// Adjust position to stay within viewport
+	const style: React.CSSProperties = {
+		position: 'fixed',
+		left: state.x,
+		top: state.y,
+		zIndex: 9999,
+		background: 'var(--khal-menu-bg)',
+		border: '1px solid var(--khal-menu-border)',
+		boxShadow: 'var(--khal-menu-shadow)',
+		color: 'var(--khal-text-primary)',
+	};
+
+	return createPortal(
+		<div
+			ref={menuRef}
+			className="min-w-[10rem] overflow-hidden rounded-xl p-1 animate-in fade-in-0 zoom-in-95"
+			style={style}
+		>
+			<MenuItem icon={<Edit3 className="h-3.5 w-3.5" />} label="Rename" onClick={handleRename} />
+			{!state.entry.isDir && (
+				<MenuItem icon={<Download className="h-3.5 w-3.5" />} label="Download" onClick={handleDownload} />
+			)}
+			{selectedNames.size > 1 && (
+				<MenuItem
+					icon={<Archive className="h-3.5 w-3.5" />}
+					label={`Download ${selectedNames.size} as Zip`}
+					onClick={handleDownloadZip}
+				/>
+			)}
+			<MenuItem icon={<Trash2 className="h-3.5 w-3.5" />} label="Delete" onClick={handleDelete} destructive />
+			<MenuItem icon={<Copy className="h-3.5 w-3.5" />} label="Copy Path" onClick={handleCopyPath} />
+			<div className="-mx-1 my-1 h-px" style={{ background: 'var(--khal-border-default)' }} />
+			<MenuItem icon={<FolderPlus className="h-3.5 w-3.5" />} label="New Folder" onClick={handleNewFolder} />
+		</div>,
+		document.body
+	);
+}
+
+function MenuItem({
+	icon,
+	label,
+	onClick,
+	destructive,
+}: {
+	icon: React.ReactNode;
+	label: string;
+	onClick: () => void;
+	destructive?: boolean;
+}) {
+	return (
+		<button
+			type="button"
+			className="relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-copy-13 outline-none select-none transition-colors hover:bg-[var(--khal-menu-hover)]"
+			style={{ color: destructive ? 'var(--khal-danger, #ef4444)' : 'var(--khal-text-primary)' }}
+			onClick={onClick}
+		>
+			{icon}
+			{label}
+		</button>
+	);
+}

package/src/components/apps/files/DeleteConfirmDialog.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { Trash2 } from 'lucide-react';
+import { useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+interface DeleteConfirmDialogProps {
+	/** Names of items to delete */
+	names: string[];
+	onConfirm: () => void;
+	onCancel: () => void;
+}
+
+export function DeleteConfirmDialog({ names, onConfirm, onCancel }: DeleteConfirmDialogProps) {
+	const cancelRef = useRef<HTMLButtonElement>(null);
+
+	// Focus cancel button on mount, close on Escape
+	useEffect(() => {
+		cancelRef.current?.focus();
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') onCancel();
+		};
+		document.addEventListener('keydown', handleKeyDown);
+		return () => document.removeEventListener('keydown', handleKeyDown);
+	}, [onCancel]);
+
+	const handleBackdropClick = useCallback(
+		(e: React.MouseEvent) => {
+			if (e.target === e.currentTarget) onCancel();
+		},
+		[onCancel]
+	);
+
+	const label = names.length === 1 ? names[0] : `${names.length} items`;
+
+	return createPortal(
+		<div
+			className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/40"
+			onClick={handleBackdropClick}
+			onKeyDown={undefined}
+			role="presentation"
+		>
+			<div className="flex w-80 flex-col gap-4 rounded-xl border border-gray-alpha-200 bg-background-100 p-5 shadow-xl animate-in fade-in-0 zoom-in-95">
+				<div className="flex items-start gap-3">
+					<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-red-100 dark:bg-red-900/30">
+						<Trash2 className="h-4.5 w-4.5 text-red-600 dark:text-red-400" />
+					</div>
+					<div className="flex flex-col gap-1">
+						<span className="text-label-14 font-medium text-gray-1000">Delete {label}?</span>
+						<span className="text-copy-13 text-gray-800">
+							{names.length === 1
+								? 'This action cannot be undone.'
+								: `This will permanently delete ${names.length} items.`}
+						</span>
+					</div>
+				</div>
+				<div className="flex justify-end gap-2">
+					<button
+						ref={cancelRef}
+						type="button"
+						onClick={onCancel}
+						className="rounded-lg border border-gray-alpha-400 bg-background-100 px-3 py-1.5 text-label-13 text-gray-1000 transition-colors hover:bg-gray-alpha-100"
+					>
+						Cancel
+					</button>
+					<button
+						type="button"
+						onClick={onConfirm}
+						className="rounded-lg bg-red-600 px-3 py-1.5 text-label-13 text-white transition-colors hover:bg-red-700"
+					>
+						Delete
+					</button>
+				</div>
+			</div>
+		</div>,
+		document.body
+	);
+}

package/src/components/apps/files/FileItem.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import {
+	File,
+	FileArchive,
+	FileAudio,
+	FileCode,
+	FileImage,
+	FileJson,
+	FileSpreadsheet,
+	FileText,
+	FileVideo,
+	Folder,
+} from 'lucide-react';
+import type { FsEntry } from './schema';
+
+/**
+ * Map of file extensions to icon components.
+ */
+const extensionIcons: Record<string, typeof File> = {
+	// Images
+	png: FileImage,
+	jpg: FileImage,
+	jpeg: FileImage,
+	gif: FileImage,
+	svg: FileImage,
+	webp: FileImage,
+	ico: FileImage,
+	// Video
+	mp4: FileVideo,
+	mov: FileVideo,
+	avi: FileVideo,
+	mkv: FileVideo,
+	webm: FileVideo,
+	// Audio
+	mp3: FileAudio,
+	wav: FileAudio,
+	flac: FileAudio,
+	ogg: FileAudio,
+	// Code
+	ts: FileCode,
+	tsx: FileCode,
+	js: FileCode,
+	jsx: FileCode,
+	py: FileCode,
+	rb: FileCode,
+	go: FileCode,
+	rs: FileCode,
+	c: FileCode,
+	cpp: FileCode,
+	h: FileCode,
+	css: FileCode,
+	html: FileCode,
+	// Data
+	json: FileJson,
+	yaml: FileCode,
+	yml: FileCode,
+	toml: FileCode,
+	xml: FileCode,
+	// Documents
+	md: FileText,
+	txt: FileText,
+	pdf: FileText,
+	doc: FileText,
+	docx: FileText,
+	// Spreadsheets
+	csv: FileSpreadsheet,
+	xls: FileSpreadsheet,
+	xlsx: FileSpreadsheet,
+	// Archives
+	zip: FileArchive,
+	tar: FileArchive,
+	gz: FileArchive,
+	rar: FileArchive,
+	'7z': FileArchive,
+};
+
+/**
+ * Get the appropriate icon component for a file entry.
+ */
+export function getFileIcon(entry: FsEntry): typeof File {
+	if (entry.isDir) return Folder;
+	const ext = entry.name.split('.').pop()?.toLowerCase() ?? '';
+	return extensionIcons[ext] ?? File;
+}
+
+/**
+ * Format file size in human-readable format.
+ */
+export function formatSize(bytes: number): string {
+	if (bytes === 0) return '0 B';
+	const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(1024));
+	const value = bytes / 1024 ** i;
+	return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[i]}`;
+}
+
+/**
+ * Format a timestamp (epoch ms) as a relative or short date string.
+ */
+export function formatDate(mtime: number): string {
+	if (mtime === 0) return '--';
+	const now = Date.now();
+	const diff = now - mtime;
+
+	const seconds = Math.floor(diff / 1000);
+	if (seconds < 60) return 'just now';
+
+	const minutes = Math.floor(seconds / 60);
+	if (minutes < 60) return `${minutes}m ago`;
+
+	const hours = Math.floor(minutes / 60);
+	if (hours < 24) return `${hours}h ago`;
+
+	const days = Math.floor(hours / 24);
+	if (days < 7) return `${days}d ago`;
+
+	const date = new Date(mtime);
+	const month = date.toLocaleString('en', { month: 'short' });
+	const day = date.getDate();
+	const year = date.getFullYear();
+	const currentYear = new Date().getFullYear();
+
+	if (year === currentYear) {
+		return `${month} ${day}`;
+	}
+	return `${month} ${day}, ${year}`;
+}