From 9a8a776995380b3e4717eb044832c44f3e6a1b9d Mon Sep 17 00:00:00 2001
From: ewsgit <ewsgit@ewsgit.uk>
Date: Mon, 27 Apr 2026 01:05:05 +0100
Subject: [PATCH] changes

---
 .../uk.ewsgit.files/electron/package.json     |   3 +-
 .../uk.ewsgit.files/electron/src/preload.js   |   1 +
 .../ActionBar/ActionBar.module.scss           |  35 +++-
 .../layout/components/ActionBar/ActionBar.tsx |  26 ++-
 .../uk.ewsgit.files/web/pages/dir/View.tsx    |   6 +-
 .../DetailsView/DetailsView.module.scss       |   5 +-
 .../components/DetailsView/DetailsView.tsx    | 184 ++++++++++--------
 .../components/GalleryView/GalleryView.tsx    |  14 ++
 bun.lock                                      |   1 +
 9 files changed, 181 insertions(+), 94 deletions(-)
 create mode 100644 applications/uk.ewsgit.files/web/pages/dir/components/GalleryView/GalleryView.tsx

diff --git a/applications/uk.ewsgit.files/electron/package.json b/applications/uk.ewsgit.files/electron/package.json
index 5b3c2dd..5072284 100644
--- a/applications/uk.ewsgit.files/electron/package.json
+++ b/applications/uk.ewsgit.files/electron/package.json
@@ -17,7 +17,8 @@
     "fast-folder-size": "^2.4.0"
   },
   "trustedDependencies": [
-    "fast-folder-size"
+    "fast-folder-size",
+    "electron"
   ],
   "peerDependencies": {
     "typescript": "^5"
diff --git a/applications/uk.ewsgit.files/electron/src/preload.js b/applications/uk.ewsgit.files/electron/src/preload.js
index 877e845..b5e32fc 100644
--- a/applications/uk.ewsgit.files/electron/src/preload.js
+++ b/applications/uk.ewsgit.files/electron/src/preload.js
@@ -24,6 +24,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
   document.body.appendChild(elem);
 
+  document.head.querySelector("title").innerText = "OW Files";
   document.body.style.overflow = "hidden";
   document.body.style.boxShadow = "1px 0px #646464 inset, 0 0 1px 0px #646464";
   document.body.style.border = "1px solid #646464";
diff --git a/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.module.scss b/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.module.scss
index b14e21b..4430054 100644
--- a/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.module.scss
+++ b/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.module.scss
@@ -25,6 +25,37 @@
   top: 0;
   display: flex;
   z-index: 1;
+  height: 100%;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border-radius: var(--uk-sys-shape-corner-medium);
+  background-color: rgb(var(--uk-sys-color-surface-container));
+
+  > * {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 0.25rem;
+
+    &:first-child {
+      margin-right: 0.5rem;
+    }
+
+    > * {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+    }
+
+    &:hover {
+      outline: 1px solid red;
+    }
+  }
 }
 
 .pathSuggestions {
@@ -44,11 +75,13 @@
   left: 0;
   top: 0;
   height: 100%;
-  opacity: 0.5;
+  width: 100%;
+  opacity: 0;
   -webkit-app-region: no-drag;
 
   &[data-visible="true"] {
     z-index: 2;
+    opacity: 1;
   }
 }
 
diff --git a/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.tsx b/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.tsx
index a07cb1c..3f0e6ea 100644
--- a/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.tsx
+++ b/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.tsx
@@ -55,23 +55,38 @@ const ActionBar: Component = () => {
       <Show when={searchParams.path !== undefined}>
         <div class={styles.pathSelector}>
           <div class={styles.pathSegments}>
-            {/* Path Segments */}
-            {(searchParams.path || "").split(browserPath.sep).map((segment, index) => {
+            {(searchParams.path || "").split(browserPath.sep).slice(0, 1).map((segment, index) => {
               return (
                 <>
-                  <UKText role="label" size="m">
-                    {segment}
+                  <UKText role="label" size="l">
+                    {segment.slice(0, -1).toUpperCase()}
                   </UKText>
                   {(searchParams.path || "").split(browserPath.sep).length - 1 === index ? (
                     ""
                   ) : (
-                    <UKText role="label" size="m">
+                    <UKText role="label" size="l">
                       /
                     </UKText>
                   )}
                 </>
               );
             })}
+            {(searchParams.path || "").split(browserPath.sep).slice(1).map((segment, index) => {
+              return (
+                <div>
+                  <UKText role="label" size="l">
+                    {segment}
+                  </UKText>
+                  {(searchParams.path || "").split(browserPath.sep).length - 1 === index ? (
+                    ""
+                  ) : (
+                    <UKText role="label" size="l">
+                      /
+                    </UKText>
+                  )}
+                </div>
+              );
+            })}
           </div>
           <input
             class={styles.pathInput}
@@ -80,6 +95,7 @@ const ActionBar: Component = () => {
             onKeyDown={(e) => {
               setPathQuery(e.currentTarget.value);
             }}
+            onBlur={() => setShowTextualPath(false)}
             onClick={() => setShowTextualPath(true)}
             data-visible={showTextualPath()}
             onChange={(e) => setSearchParams({path: e.currentTarget.value})}
diff --git a/applications/uk.ewsgit.files/web/pages/dir/View.tsx b/applications/uk.ewsgit.files/web/pages/dir/View.tsx
index 7c3ede2..36b4593 100644
--- a/applications/uk.ewsgit.files/web/pages/dir/View.tsx
+++ b/applications/uk.ewsgit.files/web/pages/dir/View.tsx
@@ -11,6 +11,7 @@ import filesystemInterface, {type UniformResourceLocator} from "../../lib/filesy
 import DetailsView from "./components/DetailsView/DetailsView.tsx";
 import GridView from "./components/GridView/GridView.tsx";
 import styles from "./View.module.scss";
+import GalleryView from "./components/GalleryView/GalleryView.tsx";
 
 const View: Component = () => {
   const [ searchParams, setSearchParams ] = useSearchParams<{path?: UniformResourceLocator}>();
@@ -33,6 +34,7 @@ const View: Component = () => {
       return;
     }
 
+    appContext?.userPreferences.viewType;
     navigationCounter++
     const currentNavigationCount = navigationCounter;
 
@@ -273,7 +275,9 @@ const View: Component = () => {
               <Match when={appContext?.userPreferences.viewType === "details"}>
                 <DetailsView />
               </Match>
-              <Match when={appContext?.userPreferences.viewType === "gallery"}>Gallery View</Match>
+              <Match when={appContext?.userPreferences.viewType === "gallery"}>
+                <GalleryView />
+              </Match>
             </Switch>
             {dragSelectRegion.transOrigin !== undefined ? (
               <div
diff --git a/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.module.scss b/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.module.scss
index 5a7c236..c58cbcd 100644
--- a/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.module.scss
+++ b/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.module.scss
@@ -19,6 +19,7 @@
   user-select: none;
   max-width: 100%;
   width: 72rem;
+  table-layout: fixed;
 }
 
 .columns {
@@ -51,7 +52,7 @@
   // justify-content: start;
   // border: none;
   position: relative;
-  animation: forwards fadeItemIn 200ms var(--uk-sys-motion-easing-standard-decelerate);
+  animation: forwards fadeItemIn 150ms var(--uk-sys-motion-easing-standard-decelerate);
 
   > td {
     padding-left: var(--col-spacing);
@@ -60,6 +61,8 @@
     box-sizing: border-box;
     vertical-align: middle;
     white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
   }
 
   &::after {
diff --git a/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.tsx b/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.tsx
index 2b1e04c..d6542e5 100644
--- a/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.tsx
+++ b/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.tsx
@@ -1,104 +1,118 @@
 import UKIcon from "@onlineworkspace/uikit-solid/src/components/icon/UKIcon.tsx";
 import UKText from "@onlineworkspace/uikit-solid/src/components/text/UKText.tsx";
+import {useSearchParams} from "@solidjs/router";
+import clsx from "clsx";
 import browserPath from "path-browserify";
-import {type Component, For, useContext} from "solid-js";
+import {type Component, For, Show, useContext} from "solid-js";
+import type {DOMElement} from "solid-js/jsx-runtime";
 import {AppContext} from "../../../../appContext.ts";
+import humanReadableSize from "../../../../lib/humanReadableSize.ts";
 import iconForItemType from "../../iconForItemType.ts";
 import onItemClick from "../../itemClick.ts";
 import styles from "./DetailsView.module.scss";
-import type {DOMElement} from "solid-js/jsx-runtime";
-import {useSearchParams} from "@solidjs/router";
-import humanReadableSize from "../../../../lib/humanReadableSize.ts";
-import clsx from "clsx";
 
 const DetailsView: Component = () => {
   const [ _, setSearchParams ] = useSearchParams();
   const appContext = useContext(AppContext);
 
   return (
-    <table class={styles.root}>
-      <thead>
-        <tr class={styles.columns}>
-          <th scope="col"></th>
-          <th scope="col" style={{"max-width": "48rem", "width": "100%"}}>
-            <UKText role={"title"} size={"s"}>
-              Name
-            </UKText>
-          </th>
-          <th scope="col" style={{"min-width": "8rem", "max-width": "12rem", "width": "100%"}}>
-            <UKText role={"title"} size={"s"}>
-              Modified
-            </UKText>
-          </th>
-          <th scope="col" style={{"min-width": "8rem", "max-width": "12rem", "width": "100%"}}>
-            <UKText role={"title"} size={"s"}>
-              Created
-            </UKText>
-          </th>
-          <th scope="col" style={{"min-width": "8rem", "max-width": "12rem", "width": "100%"}}>
-            <UKText role={"title"} size={"s"}>
-              Size
-            </UKText>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <For each={appContext?.viewState.viewItems}>
-          {(item, index) => {
-            if (!appContext?.userPreferences.showHidden && item.hidden) return null;
+    <Show when={(appContext?.viewState.viewItems.length || 0) > 0}>
+      <table class={styles.root}>
+        <thead>
+          <tr class={styles.columns}>
+            <th scope="col"></th>
+            <th scope="col" style={{"max-width": "48rem", width: "100%"}}>
+              <UKText role={"title"} size={"s"}>
+                Name
+              </UKText>
+            </th>
+            <th scope="col" style={{"min-width": "8rem", "max-width": "12rem", width: "100%"}}>
+              <UKText role={"title"} size={"s"}>
+                Modified
+              </UKText>
+            </th>
+            <th scope="col" style={{"min-width": "8rem", "max-width": "12rem", width: "100%"}}>
+              <UKText role={"title"} size={"s"}>
+                Created
+              </UKText>
+            </th>
+            <th scope="col" style={{"min-width": "8rem", "max-width": "12rem", width: "100%"}}>
+              <UKText role={"title"} size={"s"}>
+                Size
+              </UKText>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <For each={appContext?.viewState.viewItems}>
+            {(item, index) => {
+              if (!appContext?.userPreferences.showHidden && item.hidden) return null;
 
-            let modifiedAtString = (new Date(item.modifiedAt || 0)).toLocaleString()
-            const createdAtString = (new Date(item.createdAt || 0)).toLocaleString()
+              let modifiedAtString = new Date(item.modifiedAt || 0).toLocaleString();
+              const createdAtString = new Date(item.createdAt || 0).toLocaleString();
 
-            if (modifiedAtString === createdAtString) {
-              modifiedAtString = "-"
-            }
+              if (modifiedAtString === createdAtString) {
+                modifiedAtString = "-";
+              }
 
-            return (
-              <tr
-                data-fs-item-path={item.path}
-                class={clsx(styles.item, item.hidden && styles.itemHidden)}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onItemClick(e as unknown as MouseEvent & {currentTarget: HTMLButtonElement; target: DOMElement}, appContext!, index(), item, setSearchParams)
-                }}
-                onMouseDown={(e) => {
-                  e.preventDefault()
-                  e.stopPropagation()
-                }}
-                onDblClick={(e) => {
-                  e.preventDefault()
-                  e.stopPropagation()
-                }}
-                data-selected={appContext?.viewState.selectedItems.includes(item.path)}
-              >
-                <td>{item.thumbnail !== undefined ? <img class={styles.itemThumbnail} alt="" src={item.thumbnail} loading="lazy" /> : <UKIcon class={styles.itemIcon}>{iconForItemType(item.type)}</UKIcon>}</td>
-                <td>
-                  <UKText size="m" role="body">
-                    {browserPath.basename(item.path)}
-                  </UKText>
-                </td>
-                <td>
-                  <UKText size="m" role="body">
-                    {modifiedAtString}
-                  </UKText>
-                </td>
-                <td>
-                  <UKText size="m" role="body">
-                    {createdAtString}
-                  </UKText>
-                </td>
-                <td>
-                  <UKText size="m" role="body">
-                    {humanReadableSize(item.size || 0)}
-                  </UKText>
-                </td>
-              </tr>
-            );
-          }}
-        </For>
-      </tbody>
-    </table>
+              return (
+                <tr
+                  data-fs-item-path={item.path}
+                  class={clsx(styles.item, item.hidden && styles.itemHidden)}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onItemClick(
+                      e as unknown as MouseEvent & {currentTarget: HTMLButtonElement; target: DOMElement},
+                      appContext!,
+                      index(),
+                      item,
+                      setSearchParams,
+                    );
+                  }}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                  onDblClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                  data-selected={appContext?.viewState.selectedItems.includes(item.path)}
+                >
+                  <td>
+                    {item.thumbnail !== undefined ? (
+                      <img class={styles.itemThumbnail} alt="" src={item.thumbnail} loading="lazy" />
+                    ) : (
+                      <UKIcon class={styles.itemIcon}>{iconForItemType(item.type)}</UKIcon>
+                    )}
+                  </td>
+                  <td>
+                    <UKText size="m" role="body">
+                      {browserPath.basename(item.path)}
+                    </UKText>
+                  </td>
+                  <td>
+                    <UKText size="m" role="body">
+                      {modifiedAtString}
+                    </UKText>
+                  </td>
+                  <td>
+                    <UKText size="m" role="body">
+                      {createdAtString}
+                    </UKText>
+                  </td>
+                  <td>
+                    <UKText size="m" role="body">
+                      {humanReadableSize(item.size || 0)}
+                    </UKText>
+                  </td>
+                </tr>
+              );
+            }}
+          </For>
+        </tbody>
+      </table>
+    </Show>
   );
 };
 
diff --git a/applications/uk.ewsgit.files/web/pages/dir/components/GalleryView/GalleryView.tsx b/applications/uk.ewsgit.files/web/pages/dir/components/GalleryView/GalleryView.tsx
new file mode 100644
index 0000000..713cc9a
--- /dev/null
+++ b/applications/uk.ewsgit.files/web/pages/dir/components/GalleryView/GalleryView.tsx
@@ -0,0 +1,14 @@
+import type {Component} from "solid-js";
+
+const GalleryView: Component = () => {
+  return <>
+    <div>
+      Gallery View Header
+    </div>
+    <div>
+      Gallery View Grid List
+    </div>
+  </>
+}
+
+export default GalleryView
diff --git a/bun.lock b/bun.lock
index cc6f276..3ee6867 100644
--- a/bun.lock
+++ b/bun.lock
@@ -449,6 +449,7 @@
     },
   },
   "trustedDependencies": [
+    "electron",
     "fast-folder-size",
   ],
   "packages": {
-- 
2.51.2