feat: Code and UI cleanup

pages/hosting/loading.ts

@@ -127,6 +127,10 @@ export const currentFiles = asPointer(<RemotePath[]>[]);
 export const currentPath = asPointer("/");
 export let messageQueueSidecar = <{ request: SidecarRequest, response: Deferred<SidecarResponse>; }[]>[];
 let activeSideCar: Deferred<void> | undefined = undefined;
+export const isSidecarConnect = asPointer(false);
+export function stopSidecarConnection() {
+    activeSideCar?.resolve();
+}
 export async function startSidecarConnection(id: string) {
     if (activeSideCar) {
         activeSideCar.resolve();
@@ -159,14 +163,18 @@ export async function startSidecarConnection(id: string) {
             syncedResponses.add(msg);
             ws.send(JSON.stringify(msg.request));
         }, 100);
+        isSidecarConnect.setValue(true);
     };
 
     ws.onclose = () => {
+        if (!activeSideCar) return;
+        isSidecarConnect.setValue(false);
         clearInterval(watcher);
         startSidecarConnection(id);
     };
 
     await activeSideCar;
+    ws.close();
     activeSideCar = undefined;
 }
 

pages/hosting/views/details.css

@@ -42,4 +42,12 @@
 
 .hidden {
     display: none;
+}
+
+.disconnected-screen {
+    min-height: 50vh;
+    display: grid;
+    place-items: center;
+    font-size: 2rem;
+    font-weight: 500;
 }

pages/hosting/views/dropHandler.ts

@@ -0,0 +1,61 @@
+import { readableStreamFromIterable } from "https://deno.land/[email protected]/streams/readable_stream_from_iterable.ts";
+import { sumOf } from "std/collections/sum_of.ts";
+import { Component, asPointer } from "webgen/mod.ts";
+import { FileEntry, countFileTree, getFileStream } from "./fileHandler.ts";
+
+const supportsFileSystemAccessAPI =
+    'getAsFileSystemHandle' in DataTransferItem.prototype;
+const supportsWebkitGetAsEntry =
+    'webkitGetAsEntry' in DataTransferItem.prototype;
+
+declare global {
+    interface DataTransferItem {
+        getAsFileSystemHandle: () => Promise<FileSystemHandle | FileSystemDirectoryHandle>;
+    }
+}
+
+export function DropHandler(onData: (data: ReadableStream<FileEntry>, length: number) => void, component: Component) {
+    return new class extends Component {
+        hovering = asPointer(false);
+        constructor() {
+            super();
+            this.addClass(this.hovering.map(it => it ? "hovering" : "default"), "drop-area");
+            this.wrapper.ondragover = (ev) => {
+                ev.preventDefault();
+                this.hovering.setValue(true);
+            };
+            this.wrapper.ondragleave = (ev) => {
+                ev.preventDefault();
+                console.log(ev);
+                if (ev.target && !this.wrapper.contains(ev.relatedTarget as Node))
+                    this.hovering.setValue(false);
+            };
+            this.wrapper.ondrop = async (ev) => {
+                ev.preventDefault();
+                if (!supportsFileSystemAccessAPI) {
+                    alert("Please upgrade you Browser to use the latest features");
+                    return;
+                }
+                if (!supportsFileSystemAccessAPI && !supportsWebkitGetAsEntry || !ev.dataTransfer) return;
+
+                this.hovering.setValue(false);
+                const files = await Promise.all([ ...ev.dataTransfer.items ]
+                    .filter(item => item.kind === 'file') // File means file or directory
+                    .map(item => item.getAsFileSystemHandle() as Promise<FileSystemHandle | FileSystemDirectoryHandle>));
+
+                const fileSizeCount = sumOf(await Promise.all(files.filter(it => it).map(it => countFileTree(it!))), it => it);
+
+                onData?.(readableStreamFromIterable(files)
+                    .pipeThrough(new TransformStream<FileSystemHandle | null, FileEntry>({
+                        async transform(chunk, controller) {
+                            if (!chunk) return;
+                            for await (const iterator of getFileStream(chunk)) {
+                                controller.enqueue(iterator);
+                            }
+                        }
+                    })), fileSizeCount);
+            };
+            this.wrapper.append(component.draw());
+        }
+    };
+}

pages/hosting/views/fileBrowser.css

@@ -1,14 +1,3 @@
-.file-browser {
-    padding: 0 20px 20px;
-}
-
-.wtable {
-    background-color: transparent;
-    padding: 0;
-    font-size: 13.6px;
-    font-weight: 500;
-}
-
 .file-item {
     display: grid;
     grid-auto-flow: column;

pages/hosting/views/fileTypeName.ts

@@ -0,0 +1,5 @@
+export function fileTypeName(fileType: string) {
+    const mimeType = fileType.split(";").at(0);
+    if (!mimeType) return fileType + " File";
+    return mimeType.split("/").at(-1)?.toUpperCase() + " Document";
+}

pages/hosting/views/icon.ts

@@ -0,0 +1,87 @@
+import { RemotePath } from "../loading.ts";
+
+const fileNameIncludes: Record<string, string> = {
+    "world": "globe2",
+    "world_nether": "globe2",
+    "world_the_end": "globe2",
+    "logs": "body-text",
+    "plugins": "plug",
+    "mods": "box-seam",
+    "config": "gear"
+};
+
+const supportedFiletypes = [
+    'aac',
+    'ai',
+    'bmp',
+    'cs',
+    'css',
+    'csv',
+    'doc',
+    'docx',
+    'exe',
+    'gif',
+    'heic',
+    'html',
+    'java',
+    'jpg',
+    'js',
+    'json',
+    'jsx',
+    'key',
+    'm4p',
+    'md',
+    'mdx',
+    'mov',
+    'mp3',
+    'mp4',
+    'otf',
+    'pdf',
+    'php',
+    'png',
+    'ppt',
+    'pptx',
+    'psd',
+    'py',
+    'raw',
+    'rb',
+    'sass',
+    'scss',
+    'sh',
+    'sql',
+    'svg',
+    'tiff',
+    'tsx',
+    'ttf',
+    'txt',
+    'wav',
+    'woff',
+    'xls',
+    'xlsx',
+    'xml',
+    'yml',
+];
+
+const otherFiletypes: Record<string, string> = {
+    'zip': 'archive',
+    'tar': 'archive',
+    'gz': 'archive',
+    '7z': 'archive',
+    'rar': 'archive',
+    'yaml': 'filetype-yml',
+    'jar': 'filetype-java',
+};
+
+export function mapFiletoIcon(file: RemotePath) {
+    if (!file.fileMimeType) {
+        return fileNameIncludes[ file.name ] ?? "folder";
+    }
+    //const filetype = file.fileMimeType.split(';')[0].split('/')[1].split('-').at(-1);
+    const filetype = file.name.split('.').at(-1);
+    if (!filetype) return "file-earmark";
+    if (supportedFiletypes.includes(filetype))
+        return "filetype-" + filetype;
+    if (otherFiletypes[ filetype ])
+        return otherFiletypes[ filetype ];
+    return "file-earmark";
+}