khal-os 1.260324.2

package/packages/files-app/components.ts

@@ -0,0 +1,12 @@
+'use client';
+
+import { type ComponentType, lazy } from 'react';
+
+interface AppComponentProps {
+	windowId: string;
+	meta?: Record<string, unknown>;
+}
+
+export const components: Record<string, ComponentType<AppComponentProps>> = {
+	files: lazy(() => import('./views/files/FilesApp').then((m) => ({ default: m.FilesApp }))),
+};

package/packages/files-app/manifest.ts

@@ -0,0 +1,19 @@
+export default {
+	id: 'files-app',
+	views: [
+		{
+			id: 'files',
+			label: 'Files',
+			permission: 'files',
+			minRole: 'member' as const,
+			natsPrefix: 'fs',
+			defaultSize: { width: 800, height: 600 },
+			component: './views/files/FilesApp',
+		},
+	],
+	desktop: {
+		icon: '/icons/dusk/finder.svg',
+		categories: ['System'],
+		comment: 'File browser',
+	},
+};

package/packages/files-app/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "@genie-os/files-app",
+	"version": "0.0.1",
+	"private": true,
+	"main": "./manifest.ts",
+	"exports": {
+		".": "./manifest.ts",
+		"./components": "./components.ts",
+		"./views/*": "./views/*"
+	},
+	"genieOs": {
+		"services": [
+			{
+				"name": "files",
+				"entry": "./views/files/service/index.ts",
+				"runtime": "node"
+			}
+		]
+	},
+	"peerDependencies": {
+		"react": ">=19"
+	}
+}

package/packages/files-app/views/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 { FileEntry } from './schema';
+
+export interface ContextMenuState {
+	x: number;
+	y: number;
+	entry: FileEntry;
+}
+
+interface FilesContextMenuProps {
+	state: ContextMenuState;
+	currentPath: string;
+	filesRoot: string;
+	selectedNames: Set<string>;
+	onClose: () => void;
+	onRename: (entry: FileEntry) => void;
+	onDelete: (entry: FileEntry) => void;
+	onDownload: (entry: FileEntry) => 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(--os-menu-bg)',
+		border: '1px solid var(--os-menu-border)',
+		boxShadow: 'var(--os-menu-shadow)',
+		color: 'var(--os-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(--os-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(--os-menu-hover)]"
+			style={{ color: destructive ? 'var(--os-danger, #ef4444)' : 'var(--os-text-primary)' }}
+			onClick={onClick}
+		>
+			{icon}
+			{label}
+		</button>
+	);
+}

package/packages/files-app/views/files/DeleteConfirmDialog.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { Trash2 } from 'lucide-react';
+import { Dialog } from '@/components/os-primitives/dialog';
+
+interface DeleteConfirmDialogProps {
+	/** Names of items to delete */
+	names: string[];
+	onConfirm: () => void;
+	onCancel: () => void;
+}
+
+export function DeleteConfirmDialog({ names, onConfirm, onCancel }: DeleteConfirmDialogProps) {
+	const label = names.length === 1 ? names[0] : `${names.length} items`;
+
+	return (
+		<Dialog open={true} onClose={onCancel}>
+			<Dialog.Body>
+				<Dialog.Icon variant="destructive">
+					<Trash2 />
+				</Dialog.Icon>
+				<div className="flex flex-col gap-1">
+					<Dialog.Title>Delete {label}?</Dialog.Title>
+					<Dialog.Description>
+						{names.length === 1
+							? 'This action cannot be undone.'
+							: `This will permanently delete ${names.length} items.`}
+					</Dialog.Description>
+				</div>
+			</Dialog.Body>
+			<Dialog.Actions>
+				<Dialog.Cancel onClick={onCancel}>Cancel</Dialog.Cancel>
+				<Dialog.Confirm variant="destructive" onClick={onConfirm}>
+					Delete
+				</Dialog.Confirm>
+			</Dialog.Actions>
+		</Dialog>
+	);
+}

package/packages/files-app/views/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 { FileEntry } 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: FileEntry): 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}`;
+}