From 8b6c62d312c50221a0464f22dce20742ead064cb Mon Sep 17 00:00:00 2001 From: ewsgit Date: Mon, 23 Mar 2026 13:04:08 +0000 Subject: [PATCH] Files: migrate more icons --- applications/uk.tcsw.files/web/App.tsx | 4 +- applications/uk.tcsw.files/web/Layout.tsx | 16 +- .../web/components/PathBar/PathBar.tsx | 184 ++++++++-------- .../web/components/SideBar/SideBar.tsx | 205 +++++++++--------- instance/src/systems/webFrontend.ts | 12 +- 5 files changed, 214 insertions(+), 207 deletions(-) diff --git a/applications/uk.tcsw.files/web/App.tsx b/applications/uk.tcsw.files/web/App.tsx index ed4cb3e..dc9b74c 100644 --- a/applications/uk.tcsw.files/web/App.tsx +++ b/applications/uk.tcsw.files/web/App.tsx @@ -1,8 +1,8 @@ -import { type Component } from "solid-js"; import { Route } from "@solidjs/router"; -import Layout from "./Layout.tsx"; +import type { Component } from "solid-js"; import Redirect from "./components/Redirect.tsx"; import ViewContainer from "./components/ViewContainer/ViewContainer.tsx"; +import Layout from "./Layout.tsx"; const App: Component = () => { return ( diff --git a/applications/uk.tcsw.files/web/Layout.tsx b/applications/uk.tcsw.files/web/Layout.tsx index cf44167..2518679 100644 --- a/applications/uk.tcsw.files/web/Layout.tsx +++ b/applications/uk.tcsw.files/web/Layout.tsx @@ -1,28 +1,22 @@ -import { createSignal, type Component, type ParentProps } from "solid-js"; +import { type Component, createSignal, type ParentProps } from "solid-js"; import PathBar from "./components/PathBar/PathBar.tsx"; import SideBar from "./components/SideBar/SideBar.tsx"; import StatusBar from "./components/StatusBar/StatusBar.tsx"; -import styles from "./Layout.module.scss"; import { ViewContext } from "./components/ViewContainer/ViewContext.ts"; +import styles from "./Layout.module.scss"; const Layout: Component = (props) => { const [selectedItems, setSelectedItems] = createSignal([]); - const [lastSelectionIndex, setLastSelectionIndex] = createSignal< - number | undefined - >(undefined); + const [lastSelectionIndex, setLastSelectionIndex] = createSignal(undefined); const [viewItems, setViewItems] = createSignal< { name: string; path: string; type: "directory" | "file" | "alias" }[] >([]); const [viewType, setViewType] = createSignal<"grid" | "list">("grid"); - const [renameEntry, setRenameEntry] = createSignal( - undefined, - ); + const [renameEntry, setRenameEntry] = createSignal(undefined); const [cutItems, setCutItems] = createSignal([]); const [copyItems, setCopyItems] = createSignal([]); const [reload, setReload] = createSignal(0); - const [activeTasks, setActiveTasks] = createSignal< - { taskId: string; message: string }[] - >([]); + const [activeTasks, setActiveTasks] = createSignal<{ taskId: string; message: string }[]>([]); return ( { - const viewCtx = useContext(ViewContext); - const navigate = useNavigate(); - let params = useParams<{ currentPath: string }>(); - const [showTextField, setShowTextField] = createSignal(); + const viewCtx = useContext(ViewContext); + const navigate = useNavigate(); + const params = useParams<{ currentPath: string }>(); + const [showTextField, setShowTextField] = createSignal(); - return ( -
- { - let split = `/${decodeURI(params.currentPath || "")}`.split("/"); - let output = "/"; + return ( +
+ { + const split = `/${decodeURI(params.currentPath || "")}`.split("/"); + let output = "/"; - for (let i = 0; i < split.length - 1; i++) { - console.log(split[i]); - output = path.join(output, split[i]); - } + for (let i = 0; i < split.length - 1; i++) { + console.log(split[i]); + output = path.join(output, split[i]); + } - navigate(`/app/uk.tcsw.files/dir${output}`); - }} - size={"xs"} - color={"standard"} - alt={"go up one directory"} - icon={"arrow_upward"} - width="default" - /> - { - viewCtx?.setViewType(viewCtx.viewType() === "grid" ? "list" : "grid"); - }} - size={"xs"} - color={"standard"} - alt={"Change view"} - icon={"grid_view"} - width="default" - /> - {showTextField() ? ( -
- { - if (val[0] === "/") navigate(`/app/uk.tcsw.files/dir${val}`); - }} - onBlur={() => setShowTextField(false)} - onSubmit={() => setShowTextField(false)} - color={"outlined"} - /> -
- ) : ( - <> -
setShowTextField(true)}> - - {(segment, index) => { - if ( - index() === `/${decodeURI(params.currentPath || "")}`.split("/").length - 1 && - segment === "" - ) - return null; + navigate(`/app/uk.tcsw.files/dir${output}`); + }} + size={"xs"} + color={"standard"} + alt={"go up one directory"} + icon={ARROW_UPWARD_ICON} + width="default" + /> + { + viewCtx?.setViewType(viewCtx.viewType() === "grid" ? "list" : "grid"); + }} + size={"xs"} + color={"standard"} + alt={"Change view"} + icon={GRID_VIEW_ICON} + width="default" + /> + {showTextField() ? ( +
+ { + if (val[0] === "/") navigate(`/app/uk.tcsw.files/dir${val}`); + }} + onBlur={() => setShowTextField(false)} + onSubmit={() => setShowTextField(false)} + color={"outlined"} + /> +
+ ) : ( + <> +
setShowTextField(true)}> + + {(segment, index) => { + if ( + index() === `/${decodeURI(params.currentPath || "")}`.split("/").length - 1 && + segment === "" + ) + return null; - return ( - <> - { - e.stopPropagation(); + return ( + <> + { + e.stopPropagation(); - let split = `/${decodeURI(params.currentPath || "")}`.split("/"); - let output = "/"; + const split = `/${decodeURI(params.currentPath || "")}`.split("/"); + let output = "/"; - for (let i = 0; i < index() + 1; i++) { - output = path.join(output, split[i]); - } + for (let i = 0; i < index() + 1; i++) { + output = path.join(output, split[i]); + } - navigate(`/app/uk.tcsw.files/dir${output}`); - }} - class={styles.segment} - role={"label"} - size={"l"} - > - {segment !== "" ? {segment} : null} - {index() !== - `/${decodeURI(params.currentPath || "")}`.split("/").length - 1 && ( - / - )} - - - ); - }} - -
- - )} -
- ); + navigate(`/app/uk.tcsw.files/dir${output}`); + }} + class={styles.segment} + role={"label"} + size={"l"} + > + {segment !== "" ? {segment} : null} + {index() !== + `/${decodeURI(params.currentPath || "")}`.split("/").length - 1 && ( + / + )} + + + ); + }} + +
+ + )} +
+ ); }; export default PathBar; diff --git a/applications/uk.tcsw.files/web/components/SideBar/SideBar.tsx b/applications/uk.tcsw.files/web/components/SideBar/SideBar.tsx index 5169a65..1eecfb6 100644 --- a/applications/uk.tcsw.files/web/components/SideBar/SideBar.tsx +++ b/applications/uk.tcsw.files/web/components/SideBar/SideBar.tsx @@ -1,114 +1,125 @@ -import { createResource, For, useContext, type Component } from "solid-js"; -import styles from "./SideBar.module.scss"; +import ADD_ICON from "@material-symbols/svg-700/outlined/add.svg"; +import UPLOAD_ICON from "@material-symbols/svg-700/outlined/upload.svg"; +import { createFileUploader } from "@solid-primitives/upload"; +import { useNavigate, useParams } from "@solidjs/router"; import UKButton from "@tcsw/uikit-solid/src/components/button/UKButton.tsx"; -import UKDivider from "@tcsw/uikit-solid/src/components/divider/UKDivider.tsx"; import { DividerDirection } from "@tcsw/uikit-solid/src/components/divider/lib/direction.ts"; -import { useNavigate, useParams } from "@solidjs/router"; -import trpc from "../../lib/trpc.ts"; +import UKDivider from "@tcsw/uikit-solid/src/components/divider/UKDivider.tsx"; +import backend from "@tcsw/workspaces-instance-web/src/lib/backend"; import path from "path-browserify"; +import { type Component, createResource, For, useContext } from "solid-js"; +import trpc from "../../lib/trpc.ts"; import { ViewContext } from "../ViewContainer/ViewContext.ts"; -import { createFileUploader } from "@solid-primitives/upload"; -import backend from "@tcsw/workspaces-instance-web/src/lib/backend"; +import styles from "./SideBar.module.scss"; const SideBar: Component = () => { - const navigate = useNavigate(); - const viewCtx = useContext(ViewContext); - let params = useParams<{ currentPath: string }>(); - const { selectFiles: selectFilesForUpload } = createFileUploader({ - multiple: true, - }); + const navigate = useNavigate(); + const viewCtx = useContext(ViewContext); + const params = useParams<{ currentPath: string }>(); + const { selectFiles: selectFilesForUpload } = createFileUploader({ + multiple: true, + }); - const [places] = createResource(() => trpc.getPlaces.query()); + const [places] = createResource(() => trpc.getPlaces.query()); - return ( -
- {""} - { - selectFilesForUpload(async (files) => { - for (const file of files) { - let taskUUID = crypto.randomUUID(); - viewCtx!.setActiveTasks([ - ...viewCtx!.activeTasks(), - { taskId: taskUUID, message: `Uploading file '${file.name}'` }, - ]); - let uuid = (await trpc.uploadFile.mutate(file.file)).id; + return ( +
+ {""} + { + selectFilesForUpload(async (files) => { + for (const file of files) { + const taskUUID = crypto.randomUUID(); + viewCtx!.setActiveTasks([ + ...viewCtx!.activeTasks(), + { taskId: taskUUID, message: `Uploading file '${file.name}'` }, + ]); + const uuid = (await trpc.uploadFile.mutate(file.file)).id; - await trpc.setUploadMetadata.mutate({ - id: uuid, - path: path.join(`/${decodeURI(params.currentPath || "")}`, file.name), - lastModified: file.file.lastModified, - }); - viewCtx!.setActiveTasks(viewCtx!.activeTasks().filter((t) => t.taskId !== taskUUID)); + await trpc.setUploadMetadata.mutate({ + id: uuid, + path: path.join(`/${decodeURI(params.currentPath || "")}`, file.name), + lastModified: file.file.lastModified, + }); + viewCtx!.setActiveTasks(viewCtx!.activeTasks().filter((t) => t.taskId !== taskUUID)); - viewCtx!.setViewItems([ - ...viewCtx!.viewItems(), - { - name: file.name, - path: path.join(`/${decodeURI(params.currentPath || "")}`, file.name), - type: "ghost", - }, - ]); - } + viewCtx!.setViewItems([ + ...viewCtx!.viewItems(), + { + name: file.name, + path: path.join(`/${decodeURI(params.currentPath || "")}`, file.name), + type: "ghost", + }, + ]); + } - viewCtx!.setReload(); - }); - }} - > - Upload File - - path.basename(i.path) === "untitled") !== -1} - onClick={async () => { - await trpc.createDirectory.mutate({ - directoryPath: path.join(`/${decodeURI(params.currentPath || "")}`, "untitled"), - }); - viewCtx!.setRenameEntry(path.join(`${decodeURI(params.currentPath || "")}`, "untitled")); - viewCtx!.setReload(); - }} - > - Create Directory - + viewCtx!.setReload(); + }); + }} + > + Upload File + + path.basename(i.path) === "untitled") !== -1 + } + onClick={async () => { + await trpc.createDirectory.mutate({ + directoryPath: path.join(`/${decodeURI(params.currentPath || "")}`, "untitled"), + }); + viewCtx!.setRenameEntry(path.join(`${decodeURI(params.currentPath || "")}`, "untitled")); + viewCtx!.setReload(); + }} + > + Create Directory + + path.basename(i.path) === "untitled") !== -1 + } + onClick={async () => { + await trpc.createFile.mutate({ + filePath: path.join(`/${decodeURI(params.currentPath || "")}`, "untitled"), + }); + viewCtx!.setRenameEntry(path.join(`${decodeURI(params.currentPath || "")}`, "untitled")); + viewCtx!.setReload(); + }} + > + Create File + + + + {(place) => { + return ( path.basename(i.path) === "untitled") !== -1} - onClick={async () => { - await trpc.createFile.mutate({ - filePath: path.join(`/${decodeURI(params.currentPath || "")}`, "untitled"), - }); - viewCtx!.setRenameEntry(path.join(`${decodeURI(params.currentPath || "")}`, "untitled")); - viewCtx!.setReload(); - }} + color={"standard"} + size={"s"} + leadingIcon={place.icon} + onClick={() => { + navigate(`/app/uk.tcsw.files/dir${place.path}`); + }} > - Create File + {place.name} - - - {(place) => { - return ( - { - navigate(`/app/uk.tcsw.files/dir${place.path}`); - }} - > - {place.name} - - ); - }} - -
- ); + ); + }} + +
+ ); }; export default SideBar; diff --git a/instance/src/systems/webFrontend.ts b/instance/src/systems/webFrontend.ts index 7f5f2ff..4955c9a 100644 --- a/instance/src/systems/webFrontend.ts +++ b/instance/src/systems/webFrontend.ts @@ -12,12 +12,12 @@ export default class WebFrontendSystem extends System { async startup(): Promise { if (this.instance.sys.configuration.isDevMode) { - this.viteServer = await createViteServer({ - configFile: path.join(this.instance.sys.filesystem.SRC_ROOT, "web/vite.config.ts"), - root: path.join(this.instance.sys.filesystem.SRC_ROOT, "web"), - clearScreen: false, - }); - await this.viteServer.listen(); + // this.viteServer = await createViteServer({ + // configFile: path.join(this.instance.sys.filesystem.SRC_ROOT, "web/vite.config.ts"), + // root: path.join(this.instance.sys.filesystem.SRC_ROOT, "web"), + // clearScreen: false, + // }); + // await this.viteServer.listen(); this.log.info("Listening for web requests:"); } return true; -- 2.54.0