Frontend: Improves file explorer UI with visual cues

web/eclipse/src/pages/files/Files.tsx

@@ -76,7 +76,7 @@ export default function Files() {
                     {files.error && <Note type="error" content={`${files.error}`} dismiss={dismissError} />}
                     {files.data && (
                         <div className="files-content">
-                            <VDirectory {...files.data} globalErrorHook={errorHook} />
+                            <VDirectory data={files.data} isLast={true} globalErrorHook={errorHook} />
                         </div>
                     )}
                 </div>

web/eclipse/src/pages/files/VDirectory.tsx

@@ -6,10 +6,13 @@ export type VDirectoryData = {
     path: string;
     nested: (VDirectoryData | VFileData)[];
     indent: number;
-    globalErrorHook?: (error: string) => void
 };
 
-type VDirectoryProps = VDirectoryData;
+type VDirectoryProps = {
+    data: VDirectoryData
+    isLast?: boolean
+    globalErrorHook?: (error: string) => void
+};
 
 type VDirectoryState = {
     open: boolean;
@@ -27,14 +30,16 @@ export class VDirectory extends React.Component<VDirectoryProps, VDirectoryState
         }
         const curname = `${json.dirname}/`;
         const curpath = `${path}${curname}`;
+        const directories = (json.directories ?? []);
+        const filenames = (json.filenames ?? []);
         const nested: (VDirectoryData | VFileData)[] = [];
-        for (const item of json.directories ?? []) {
+        for (const item of directories) {
             const dir = VDirectory.ParseFromJSON(item, curpath, indent + 1);
             if (dir) {
                 nested.push(dir);
             }
         }
-        for (const item of json.filenames ?? []) {
+        for (const item of filenames) {
             const file = {
                 name: item, path: `${curpath}${item}`, indent: indent + 1
             } as VFileData;
@@ -46,18 +51,26 @@ export class VDirectory extends React.Component<VDirectoryProps, VDirectoryState
 
     actionUpload = (e: React.MouseEvent) => {
         e.stopPropagation();
-        window.location.hash = `#/upload/${this.props.path}`;
+        window.location.hash = `#/upload/${this.props.data.path}`;
     }
 
     actionCreateFolder = (e: React.MouseEvent) => {
         e.stopPropagation();
     }
 
     render() {
-        const { name, path, nested, indent } = this.props;
+        const { name, path, nested, indent } = this.props.data;
+        const isLast = this.props.isLast ?? false;
+        const renderSelfLast = isLast && (nested.length === 0 || !this.state.open);
+        const nestedModified: ((VFileData | VDirectoryData) & { isLast: boolean })[] = nested.map((item, index) => (
+            {
+                ...item,
+                isLast: isLast && index === nested.length - 1
+            }
+        ));
         return (
             <div className="vobj-container">
-                <div className="vobj vobj-directory" onClick={() => this.setState({ open: !this.state.open })}>
+                <div className={`vobj vobj-directory ${renderSelfLast ? "vobj-last" : ""}`} onClick={() => this.setState({ open: !this.state.open })}>
                     {[...Array(indent)].map((_, i) => (
                         <span key={i} className="vobj-indent"></span>
                     ))}
@@ -80,10 +93,10 @@ export class VDirectory extends React.Component<VDirectoryProps, VDirectoryState
                 </div>
                 {this.state.open && (
                     <div className="vobj-nested">
-                        {nested.map(item =>
+                        {nestedModified.map(item =>
                             "nested" in item
-                                ? <VDirectory key={item.name} {...item} globalErrorHook={this.props.globalErrorHook} />
-                                : <VFile key={item.name} {...item} globalErrorHook={this.props.globalErrorHook} />
+                                ? <VDirectory key={item.name} data={item} isLast={item.isLast} globalErrorHook={this.props.globalErrorHook} />
+                                : <VFile key={item.name} data={item} isLast={item.isLast} globalErrorHook={this.props.globalErrorHook} />
                         )}
                     </div>
                 )}

web/eclipse/src/pages/files/VFile.tsx

@@ -6,14 +6,17 @@ export type VFileData = {
     name: string;
     path: string;
     indent: number;
-    globalErrorHook?: (error: string) => void
 };
 
 type VFileState = {
     isLoading: boolean;
 }
 
-type VFileProps = VFileData;
+type VFileProps = {
+    data: VFileData;
+    isLast?: boolean
+    globalErrorHook?: (error: string) => void
+};
 
 export class VFile extends React.PureComponent<VFileProps, VFileState> {
     constructor(props: VFileProps) {
@@ -28,7 +31,7 @@ export class VFile extends React.PureComponent<VFileProps, VFileState> {
         this.setState({ isLoading: true });
         RequestCollection.getSettings.getSettings().then((settings) => {
             if (settings.data) {
-                window.location.hash = `#/lookup/${settings.data.domain}/${this.props.path}`;
+                window.location.hash = `#/lookup/${settings.data.domain}/${this.props.data.path}`;
             } else {
                 this.props.globalErrorHook?.("Settings not found or domain is empty");
                 console.log("Expected settings, got:", settings);
@@ -41,10 +44,11 @@ export class VFile extends React.PureComponent<VFileProps, VFileState> {
     }
 
     render() {
-        const { name, path, indent } = this.props;
+        const { name, path, indent } = this.props.data;
+        const isLast = this.props.isLast ?? false;
         return (
             <div className="vobj-container">
-                <div className="vobj">
+                <div className={`vobj ${isLast ? "vobj-last" : ""}`}>
                     {[...Array(indent)].map((_, i) => (
                         <span key={i} className="vobj-indent"> </span>
                     ))}

web/eclipse/src/pages/files/VObj.scss

@@ -16,6 +16,10 @@
     background-color: var(--text-input-color);
     align-items: center;
 
+    &:not(.vobj-last) {
+        border-bottom: 2px dashed var(--secondary-background-color);
+    }
+
     // font-variation-settings:     'wght' 300;
 
     & .vobj-indent {