diff --git a/applications/uk.ewsgit.files/web/layout/components/StatusBar/StatusBar.tsx b/applications/uk.ewsgit.files/web/layout/components/StatusBar/StatusBar.tsx index 768aa80..d6933af 100644 --- a/applications/uk.ewsgit.files/web/layout/components/StatusBar/StatusBar.tsx +++ b/applications/uk.ewsgit.files/web/layout/components/StatusBar/StatusBar.tsx @@ -1,10 +1,14 @@ import UKLinearProgressIndicator from "@onlineworkspace/uikit-solid/src/components/linearProgressIndicator/UKLinearProgressIndicator.tsx"; import UKText from "@onlineworkspace/uikit-solid/src/components/text/UKText.tsx"; -import { type Component, createSignal, onCleanup, onMount } from "solid-js"; +import { type Component, createEffect, createSignal, onCleanup, onMount, useContext } from "solid-js"; +import { AppContext } from "../../../appContext.ts"; +import humanReadableSize from "../../../lib/humanReadableSize.ts"; import styles from "./StatusBar.module.scss"; const StatusBar: Component = () => { + const appContext = useContext(AppContext); const [statusProgression, setStatusProgression] = createSignal(0); + const [dirContents, setDirContents] = createSignal(""); onMount(() => { const interval = setInterval(() => { @@ -22,10 +26,49 @@ const StatusBar: Component = () => { }); }); + createEffect(() => { + const viewItems = appContext?.viewState.viewItems; + + let outputString = ""; + + const directories = viewItems?.filter((item) => item.type === "directory") || []; + const files = viewItems?.filter((item) => item.type === "file") || []; + + if (directories.length > 0) { + outputString += `${directories.length} Folder${directories.length !== 1 ? "s" : ""}${files.length > 0 ? ", " : ""}`; + } + + if (files.length > 0) { + outputString += `${files.length} File${files.length !== 1 ? "s" : ""}`; + } + + let totalSize = 0; + + for (const directory of directories) { + if (directory.size) totalSize += directory.size; + } + + for (const file of files) { + if (file.size) totalSize += file.size; + } + + if (totalSize > 0) { + outputString += ` (${humanReadableSize(totalSize)})`; + } + + const selectedItems = appContext?.viewState.selectedItems || []; + + if (selectedItems?.length > 0) { + outputString += ` - Selected ${selectedItems.length} item${selectedItems.length !== 1 ? "s" : ""}`; + } + + setDirContents(outputString); + }); + return (
- 29 Folders, 16 Files (256KB) + {dirContents()}
diff --git a/applications/uk.ewsgit.files/web/lib/humanReadableSize.ts b/applications/uk.ewsgit.files/web/lib/humanReadableSize.ts new file mode 100644 index 0000000..47fbb7e --- /dev/null +++ b/applications/uk.ewsgit.files/web/lib/humanReadableSize.ts @@ -0,0 +1,4 @@ +export default function humanReadableSize(sizeBytes: number) { + const i = sizeBytes === 0 ? 0 : Math.floor(Math.log(sizeBytes) / Math.log(1024)); + return `${+(sizeBytes / 1024 ** i).toFixed(2)} ${["B", "kB", "MB", "GB", "TB"][i]}`; +} diff --git a/applications/uk.ewsgit.files/web/pages/dir/View.tsx b/applications/uk.ewsgit.files/web/pages/dir/View.tsx index a9bdecd..e8e95a8 100644 --- a/applications/uk.ewsgit.files/web/pages/dir/View.tsx +++ b/applications/uk.ewsgit.files/web/pages/dir/View.tsx @@ -1,14 +1,22 @@ -import { type Component, Match, Switch, useContext } from "solid-js"; +import { useSearchParams } from "@solidjs/router"; +import { type Component, createEffect, Match, Switch, useContext } from "solid-js"; import { AppContext } from "../../appContext.ts"; import GridView from "./components/GridView/GridView.tsx"; const View: Component = () => { + const [searchParams, setSearchParams] = useSearchParams<{ path?: string }>(); const appContext = useContext(AppContext); + createEffect(() => { + if (!searchParams.path) { + setSearchParams({ path: appContext?.userPreferences.homePath }); + } + }, []); + return ( - + Details View Gallery View diff --git a/applications/uk.ewsgit.files/web/pages/dir/viewItem.ts b/applications/uk.ewsgit.files/web/pages/dir/viewItem.ts index 4792024..787e2cb 100644 --- a/applications/uk.ewsgit.files/web/pages/dir/viewItem.ts +++ b/applications/uk.ewsgit.files/web/pages/dir/viewItem.ts @@ -3,6 +3,7 @@ type ViewItem = { type: "file" | "directory" | "link"; thumbnail?: string; shared?: boolean; + size?: number; }; export type { ViewItem };