settings/other: add a setting to dim file extensions, false by default

Author: novoselt

src/packages/frontend/_colors.sass

@@ -69,3 +69,4 @@ $COL_LANDING_TOP_BG: #c7d9f5
 $COL_TAB: #333333
 $COL_FILE_ICON: rgb(66, 139, 202)
 $COL_FILE_EXT: #999
+$COL_FILE_DIMMED: #959595

src/packages/frontend/account/other-settings.tsx

@@ -210,6 +210,18 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
     );
   }
 
+  function render_dim_file_extensions(): Rendered {
+    return (
+      <Switch
+        checked={!!props.other_settings.get("dim_file_extensions")}
+        onChange={(e) => on_change("dim_file_extensions", e.target.checked)}
+      >
+        <strong>Dim file extensions:</strong> gray out file extensions so their
+        names stand out.
+      </Switch>
+    );
+  }
+
   function render_antd(): Rendered {
     return (
       <>
@@ -443,6 +455,7 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
             </>
           }
         >
+          {render_dim_file_extensions()}
           {render_mask_files()}
           {render_default_file_sort()}
           {render_page_size()}

src/packages/frontend/components/path-link.tsx

@@ -13,6 +13,10 @@ import { COLORS } from "@cocalc/util/theme";
 import { handleFileEntryClick } from "../project/history/utils";
 import { Tip } from "./tip";
 
+import React from "react";
+
+const DIMMED_STYLE = { color: COLORS.FILE_DIMMED } as const;
+
 interface Props {
   path: string;
   project_id: string;
@@ -22,6 +26,7 @@ interface Props {
   style?: React.CSSProperties;
   link?: boolean; // set to false to make it not be a link
   onOpen?: () => void; // called if link is clicked on to open it.
+  dimExtensions?: boolean;
 }
 
 // Component to attempt opening a cocalc path in a project
@@ -34,6 +39,7 @@ export const PathLink: React.FC<Props> = ({
   style = {},
   link = true,
   onOpen,
+  dimExtensions = false,
 }: Props) => {
   function render_link(text): React.JSX.Element {
     let s;
@@ -43,7 +49,7 @@ export const PathLink: React.FC<Props> = ({
         s = (
           <>
             {name}
-            <span style={{ color: "#999" }}>.{ext}</span>
+            <span style={dimExtensions ? DIMMED_STYLE : undefined}>.{ext}</span>
           </>
         );
       } else {

src/packages/frontend/project/explorer/file-listing/file-listing.tsx

@@ -84,6 +84,7 @@ export const FileListing: React.FC<Props> = ({
   configuration_main,
   file_search = "",
   isRunning,
+  other_settings,
 }: Props) => {
   const [starting, setStarting] = useState<boolean>(false);
   const { starred, setStarredPath } = useStarredFilesManager(project_id);
@@ -120,6 +121,7 @@ export const FileListing: React.FC<Props> = ({
   }, [current_path, isRunning]);
 
   const computeServerId = useTypedRedux({ project_id }, "compute_server_id");
+  const dimFileExtensions = !!other_settings?.get?.("dim_file_extensions");
 
   function render_row(
     name,
@@ -170,6 +172,7 @@ export const FileListing: React.FC<Props> = ({
             isdir && !path.endsWith("/") ? `${path}/` : path;
           setStarredPath(normalizedPath, starState);
         }}
+        dimFileExtensions={dimFileExtensions}
       />
     );
   }

src/packages/frontend/project/explorer/file-listing/file-row.tsx

@@ -35,6 +35,8 @@ export const VIEWABLE_FILE_EXT: Readonly<string[]> = [
   "jpeg",
 ] as const;
 
+const DIMMED_STYLE = { color: COLORS.FILE_DIMMED } as const;
+
 interface Props {
   isdir: boolean;
   name: string;
@@ -57,6 +59,7 @@ interface Props {
   computeServerId?: number;
   isStarred?: boolean;
   onToggleStar?: (path: string, starred: boolean) => void;
+  dimFileExtensions?: boolean;
 }
 
 export const FileRow: React.FC<Props> = React.memo((props) => {
@@ -68,7 +71,7 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
 
   function render_icon() {
     const style: React.CSSProperties = {
-      color: props.mask ? "#bbbbbb" : COLORS.FILE_ICON,
+      color: props.mask ? COLORS.FILE_DIMMED : COLORS.FILE_ICON,
       verticalAlign: "sub",
     } as const;
     let body: React.JSX.Element;
@@ -117,12 +120,11 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
   }
 
   function render_name_link(styles, name, ext) {
+    const extStyle = props.dimFileExtensions ? DIMMED_STYLE : undefined;
     return (
       <a style={styles} cocalc-test="file-line">
         {misc.trunc_middle(name, 50)}
-        <span style={{ color: !props.mask ? COLORS.GRAY_M : undefined }}>
-          {ext === "" ? "" : `.${ext}`}
-        </span>
+        <span style={extStyle}>{ext === "" ? "" : `.${ext}`}</span>
         {render_link_target()}
       </a>
     );
@@ -147,7 +149,7 @@ export const FileRow: React.FC<Props> = React.memo((props) => {
       wordWrap: "break-word",
       overflowWrap: "break-word",
       verticalAlign: "middle",
-      color: props.mask ? "#bbbbbb" : COLORS.TAB,
+      color: props.mask ? COLORS.FILE_DIMMED : COLORS.TAB,
     };
 
     if (show_tip) {

src/packages/frontend/project/history/log-entry.tsx

@@ -146,6 +146,8 @@ export const LogEntry: React.FC<Props> = React.memo(
       "customize",
       "software",
     );
+    const otherSettings = useTypedRedux("account", "other_settings");
+    const dimFileExtensions = !!otherSettings?.get("dim_file_extensions");
 
     function render_open_file(event: OpenFile): React.JSX.Element {
       return (
@@ -158,6 +160,7 @@ export const LogEntry: React.FC<Props> = React.memo(
             style={cursor ? selected_item : undefined}
             trunc={TRUNC}
             project_id={project_id}
+            dimExtensions={dimFileExtensions}
             onOpen={() =>
               track("open-file", {
                 how: "project-log",
@@ -193,6 +196,7 @@ export const LogEntry: React.FC<Props> = React.memo(
                   style={cursor ? selected_item : undefined}
                   trunc={TRUNC}
                   project_id={project_id}
+                  dimExtensions={dimFileExtensions}
                 />
               ),
               event: event.disabled ? "disabled" : "enabled",
@@ -350,6 +354,7 @@ export const LogEntry: React.FC<Props> = React.memo(
           trunc={TRUNC}
           link={link}
           project_id={project_id != null ? project_id : props.project_id}
+          dimExtensions={dimFileExtensions}
           onOpen={() =>
             track("open-file", {
               how: "project-log",
@@ -609,6 +614,7 @@ export const LogEntry: React.FC<Props> = React.memo(
           style={cursor ? selected_item : undefined}
           trunc={TRUNC}
           project_id={project_id}
+          dimExtensions={dimFileExtensions}
         />
       );
 
@@ -670,6 +676,7 @@ export const LogEntry: React.FC<Props> = React.memo(
                 style={cursor ? selected_item : undefined}
                 trunc={TRUNC}
                 project_id={project_id}
+                dimExtensions={dimFileExtensions}
               />
             </span>
           );

src/packages/frontend/project/page/file-tab.tsx

@@ -215,10 +215,10 @@ export function FileTab(props: Readonly<Props>) {
   // alerts only work on non-docker projects (for now) -- #7077
   const status_alerts: string[] =
     !onCoCalcDocker && name === "info"
-      ? project_status
+      ? (project_status
           ?.get("alerts")
           ?.map((a) => a.get("type"))
-          .toJS() ?? []
+          .toJS() ?? [])
       : [];
 
   const other_settings = useTypedRedux("account", "other_settings");
@@ -303,8 +303,8 @@ export function FileTab(props: Readonly<Props>) {
       flyout === active_flyout
         ? COLORS.PROJECT.FIXED_LEFT_ACTIVE
         : active_flyout == null
-        ? COLORS.GRAY_L
-        : COLORS.GRAY_L0;
+          ? COLORS.GRAY_L
+          : COLORS.GRAY_L0;
     const bg = flyout === active_flyout ? COLORS.GRAY_L0 : undefined;
 
     return (
@@ -368,7 +368,7 @@ export function FileTab(props: Readonly<Props>) {
 
   const icon =
     path != null
-      ? file_options(path)?.icon ?? "code-o"
+      ? (file_options(path)?.icon ?? "code-o")
       : FIXED_PROJECT_TABS[name!].icon;
 
   const tags =
@@ -545,6 +545,8 @@ const FULLPATH_LABEL_STYLE: CSS = {
 } as const;
 
 function DisplayedLabel({ path, label, inline = true, project_id }) {
+  const otherSettings = useTypedRedux("account", "other_settings");
+  const dimFileExtensions = !!otherSettings?.get("dim_file_extensions");
   if (path == null) {
     // a fixed tab (not an actual file)
     const E = inline ? "span" : "div";
@@ -590,7 +592,11 @@ function DisplayedLabel({ path, label, inline = true, project_id }) {
     >
       <span style={{ direction: "ltr" }}>
         {label}
-        <span style={{ color: COLORS.FILE_EXT }}>{ext}</span>
+        <span
+          style={dimFileExtensions ? { color: COLORS.FILE_DIMMED } : undefined}
+        >
+          {ext}
+        </span>
       </span>
     </div>
   );

src/packages/frontend/project/page/flyouts/active-group.tsx

@@ -28,6 +28,7 @@ interface GroupProps {
   setStarredPath: (path: string, next: boolean) => void;
   showStarred: boolean;
   isLast?: boolean; // if group is empty, it is also the last one in the group
+  dimFileExtensions: boolean;
 }
 
 export function Group({
@@ -38,6 +39,7 @@ export function Group({
   setStarredPath,
   showStarred,
   isLast = false,
+  dimFileExtensions,
 }: GroupProps): React.JSX.Element {
   const { project_id } = useProjectContext();
   const actions = useActions({ project_id });
@@ -75,7 +77,7 @@ export function Group({
     const fileType = file_options(`foo.${group}`);
     return {
       iconName:
-        group === "" ? UNKNOWN_FILE_TYPE_ICON : fileType?.icon ?? "file",
+        group === "" ? UNKNOWN_FILE_TYPE_ICON : (fileType?.icon ?? "file"),
       display: (group === "" ? "No extension" : fileType?.name) || group,
     };
   }
@@ -127,6 +129,7 @@ export function Group({
             // trailing slash indicates to open a directory
             handleFileEntryClick(e, `${group}/`, project_id);
           }}
+          dimFileExtensions={dimFileExtensions}
         />
       );
 

src/packages/frontend/project/page/flyouts/active.tsx

@@ -133,6 +133,8 @@ export function ActiveFlyout(props: Readonly<Props>): React.JSX.Element {
   const openFiles = useTypedRedux({ project_id }, "open_files_order");
   const justClosed = useTypedRedux({ project_id }, "just_closed_files");
   const activeTab = useTypedRedux({ project_id }, "active_project_tab");
+  const otherSettings = useTypedRedux("account", "other_settings");
+  const dimFileExtensions = !!otherSettings?.get("dim_file_extensions");
   const [filterTerm, setFilterTerm] = useState<string>("");
   const [showStarred, setShowStarred] = useState<boolean>(
     getFlyoutActiveShowStarred(project_id),
@@ -195,7 +197,7 @@ export function ActiveFlyout(props: Readonly<Props>): React.JSX.Element {
     filteredFiles.forEach((path) => {
       const { head, tail } = path_split(path);
       const group =
-        mode === "folder" ? head : filename_extension_notilde(tail) ?? "";
+        mode === "folder" ? head : (filename_extension_notilde(tail) ?? "");
       if (grouped[group] == null) grouped[group] = [];
       grouped[group].push(path);
     });
@@ -317,6 +319,7 @@ export function ActiveFlyout(props: Readonly<Props>): React.JSX.Element {
             />
           ) : undefined
         }
+        dimFileExtensions={dimFileExtensions}
       />
     );
   }
@@ -473,6 +476,7 @@ export function ActiveFlyout(props: Readonly<Props>): React.JSX.Element {
           setStarredPath={setStarredPath}
           showStarred={showStarred}
           isLast={fileNames.length === 0}
+          dimFileExtensions={dimFileExtensions}
         />,
       );