Visual tweaks & improvements

components/apps/FileExplorer/Navigation.tsx

@@ -1,5 +1,5 @@
 import { basename, dirname } from "path";
-import { forwardRef, useMemo } from "react";
+import { forwardRef, useMemo, useRef } from "react";
 import AddressBar from "components/apps/FileExplorer/AddressBar";
 import {
   Back,
@@ -16,12 +16,15 @@ import useHistory from "hooks/useHistory";
 import Button from "styles/common/Button";
 import { ROOT_NAME } from "utils/constants";
 import { haltEvent, label } from "utils/functions";
+import { type CaptureTriggerEvent } from "contexts/menu/useMenuContextState";
 
 type NavigationProps = {
   hideSearch: boolean;
   id: string;
 };
 
+const CONTEXT_MENU_OFFSET = 3;
+
 const Navigation = forwardRef<HTMLInputElement, NavigationProps>(
   ({ hideSearch, id }, inputRef) => {
     const {
@@ -48,9 +51,11 @@ const Navigation = forwardRef<HTMLInputElement, NavigationProps>(
         ),
       [contextMenu, history, moveHistory, position]
     );
+    const navRef = useRef<HTMLElement | null>(null);
 
     return (
       <StyledNavigation
+        ref={navRef}
         {...useTitlebarContextMenu(id)}
         onDragOver={haltEvent}
         onDrop={haltEvent}
@@ -79,7 +84,24 @@ const Navigation = forwardRef<HTMLInputElement, NavigationProps>(
         </Button>
         <Button
           disabled={history.length === 1}
-          onClick={onContextMenuCapture}
+          onClick={(event) => {
+            event.preventDefault();
+
+            const {
+              height = 0,
+              y = 0,
+              x = 0,
+            } = navRef.current?.getBoundingClientRect() || {};
+
+            onContextMenuCapture(
+              x && y && height
+                ? ({
+                    pageX: x,
+                    pageY: y + height - CONTEXT_MENU_OFFSET,
+                  } as CaptureTriggerEvent)
+                : event
+            );
+          }}
           {...label("Recent locations")}
         >
           <Down />

components/apps/FileExplorer/StyledNavigation.ts

@@ -14,11 +14,11 @@ const StyledNavigation = styled.nav`
       color: #fff;
       fill: currentColor;
       height: 16px;
+      transition: color 0.35s ease;
       width: 16px;
 
       &:hover {
         color: rgb(50, 152, 254);
-        transition: fill 0.5s ease;
       }
 
       &:active {

components/system/Files/FileEntry/index.tsx

@@ -99,7 +99,8 @@ const truncateName = (
   name: string,
   fontSize: string,
   fontFamily: string,
-  maxWidth: number
+  maxWidth: number,
+  alwaysShowPossibleLines = false
 ): string => {
   const nonBreakingName = name.replace(/-/g, NON_BREAKING_HYPHEN);
   const { lines } = getTextWrapData(
@@ -110,9 +111,12 @@ const truncateName = (
   );
 
   if (lines.length > 2) {
-    const text = name.includes(" ") ? lines.slice(0, 2).join("") : lines[0];
+    const text =
+      alwaysShowPossibleLines || name.includes(" ")
+        ? lines.slice(0, 2).join("")
+        : lines[0];
 
-    return `${text.slice(0, -3)}...`;
+    return `${text.slice(0, -3).trim()}...`;
   }
 
   return nonBreakingName;
@@ -210,9 +214,10 @@ const FileEntry: FC<FileEntryProps> = ({
         formats.systemFont,
         sizes.fileEntry[
           listView ? "maxListTextDisplayWidth" : "maxIconTextDisplayWidth"
-        ]
+        ],
+        !isDesktop
       ),
-    [formats.systemFont, listView, name, sizes.fileEntry]
+    [formats.systemFont, isDesktop, listView, name, sizes.fileEntry]
   );
   const iconRef = useRef<HTMLImageElement | null>(null);
   const isIconCached = useRef(false);

components/system/Files/FileManager/index.tsx

@@ -217,6 +217,7 @@ const FileManager: FC<FileManagerProps> = ({
               <StyledFileEntry
                 key={file}
                 $selecting={isSelecting}
+                $shadows={isDesktop}
                 $visible={!isLoading}
                 {...(!readOnly && draggableEntry(url, file, renaming === file))}
                 {...(renaming === "" && { onKeyDown: keyShortcuts(file) })}

components/system/Files/Views/Icon/StyledFileEntry.ts

@@ -31,10 +31,11 @@ const StyledFileEntry = styled.li<StyledFileEntryProps>`
       figcaption {
         color: ${({ theme }) => theme.colors.fileEntry.text};
         font-size: ${({ theme }) => theme.sizes.fileEntry.fontSize};
-        line-height: 1.2;
-        margin: 1px 0;
-        padding: 2px 0;
-        text-shadow: ${({ theme }) => theme.colors.fileEntry.textShadow};
+        line-height: ${({ $shadows }) => ($shadows ? "1.2" : "1.25")};
+        margin: ${({ $shadows }) => ($shadows ? "1px 0" : "0 0 3px 0")};
+        padding: ${({ $shadows }) => ($shadows ? "2px 0" : 0)};
+        text-shadow: ${({ $shadows, theme }) =>
+          $shadows ? theme.colors.fileEntry.textShadow : undefined};
         word-break: break-word;
       }
 

components/system/Files/Views/index.ts

@@ -6,6 +6,7 @@ import { type IconProps } from "styles/common/Icon";
 
 export type StyledFileEntryProps = {
   $selecting?: boolean;
+  $shadows?: boolean;
   $visible?: boolean;
 };