The great move >.<

2026-02-05 22:26:34 +01:00
parent 175ea1b726
commit 083cb70fbe
90 changed files with 85 additions and 137 deletions
@@ -0,0 +1,96 @@
+import "./FileBrowser.css";
+import {
+	type Accessor,
+	type Component,
+	createSignal,
+	For,
+	Show,
+} from "solid-js";
+import { FileIcon } from "./icons/File.tsx";
+import { FolderIcon } from "./icons/Folder.tsx";
+import { FolderOpenIcon } from "./icons/FolderOpen.tsx";
+
+export type BrowserFile = {
+	path: string;
+	isActive: boolean;
+};
+
+export type BrowserFolder = Map<string, BrowserFile | BrowserFolder>;
+
+export type FileHandler = (path: string) => void;
+
+function isFolder(entry: BrowserFile | BrowserFolder): entry is BrowserFolder {
+	return typeof (entry as BrowserFolder).size === "number";
+}
+
+export const FileBrowser: Component<{
+	root: Accessor<BrowserFolder>;
+	handler: FileHandler;
+}> = (props) => {
+	const FileEntry: Component<{
+		name: string;
+		entry: BrowserFile;
+	}> = ({ name, entry }) => {
+		return (
+			<div
+				class="file-browser-label"
+				classList={{
+					active: entry.isActive,
+				}}
+				onClick={() => props.handler(entry.path)}
+			>
+				<FileIcon />
+				<span>{name}</span>
+			</div>
+		);
+	};
+
+	const FolderEntry: Component<{
+		folder: BrowserFolder;
+		name: string;
+		open: boolean;
+	}> = ({ folder, name, open }) => {
+		const [isOpen, setIsOpen] = createSignal(open);
+
+		return (
+			<>
+				<div class="file-browser-label" onClick={() => setIsOpen(!isOpen())}>
+					{isOpen() ? <FolderOpenIcon /> : <FolderIcon />}
+					<span>{name}</span>
+				</div>
+
+				<Show when={isOpen()}>
+					<FileList folder={folder} />
+				</Show>
+			</>
+		);
+	};
+
+	const FileList: Component<{ folder: BrowserFolder }> = (props) => {
+		return (
+			<ul class="file-browser-list">
+				<For each={[...props.folder.entries()]}>
+					{(item, index) => {
+						const [name, entry] = item;
+
+						return (
+							<li class="file-browser-item">
+								{isFolder(entry) ? (
+									<FolderEntry folder={entry} name={name} open={index() < 1} />
+								) : (
+									<FileEntry name={name} entry={entry} />
+								)}
+							</li>
+						);
+					}}
+				</For>
+			</ul>
+		);
+	};
+
+	return (
+		<div class="file-browser">
+			<FileList folder={props.root()} />
+		</div>
+	);
+};