feat: implement Breadcrumbs component with styling and navigation functionality

Author: aesopov

packages/ui/lib/components/Breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,68 @@
+.breadcrumbs {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  scrollbar-width: none;
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+
+.breadcrumbs::-webkit-scrollbar {
+  display: none;
+}
+
+.breadcrumbs.is-cropped-left {
+  -webkit-mask-image: linear-gradient(to right, transparent 0, black 18px, black 100%);
+  mask-image: linear-gradient(to right, transparent 0, black 18px, black 100%);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.breadcrumbs.is-cropped-right {
+  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 18px), transparent 100%);
+  mask-image: linear-gradient(to right, black 0, black calc(100% - 18px), transparent 100%);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.breadcrumbs.is-cropped-left.is-cropped-right {
+  -webkit-mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
+  mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
+}
+
+.breadcrumb-segment {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  cursor: pointer;
+  padding: 2px 6px;
+  margin: -2px -6px;
+  border-radius: 4px;
+  transition: background-color 0.1s ease;
+}
+
+.breadcrumb-segment:hover {
+  background: var(--entry-hover, rgba(255, 255, 255, 0.06));
+}
+
+.breadcrumb-segment-text {
+  white-space: nowrap;
+}
+
+.breadcrumb-separator {
+  flex-shrink: 0;
+  opacity: 0.6;
+  pointer-events: none;
+  user-select: none;
+}

…/lib/components/FileList/Breadcrumbs.tsx …b/components/Breadcrumbs/Breadcrumbs.tsxpackages/ui/lib/components/FileList/Breadcrumbs.tsx renamed to packages/ui/lib/components/Breadcrumbs/Breadcrumbs.tsx packages/ui/lib/components/FileList/Breadcrumbs.tsx renamed to packages/ui/lib/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import { cx } from "@/utils/cssModules";
 import { getBreadcrumbSegments } from "@/utils/path";
 import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import styles from "./FileList.module.css";
+import styles from "./Breadcrumbs.module.css";
 
 interface BreadcrumbsProps {
   currentPath: string;

packages/ui/lib/components/FileList/FileList.module.css

@@ -22,92 +22,6 @@
   overflow: visible;
 }
 
-.breadcrumbs {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  min-width: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-  scrollbar-width: none;
-  -webkit-mask-image: none;
-  mask-image: none;
-}
-
-.breadcrumbs::-webkit-scrollbar {
-  display: none;
-}
-
-.breadcrumbs.is-cropped-left {
-  -webkit-mask-image: linear-gradient(to right, transparent 0, black 18px, black 100%);
-  mask-image: linear-gradient(to right, transparent 0, black 18px, black 100%);
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-}
-
-.breadcrumbs.is-cropped-right {
-  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 18px), transparent 100%);
-  mask-image: linear-gradient(to right, black 0, black calc(100% - 18px), transparent 100%);
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-}
-
-.breadcrumbs.is-cropped-left.is-cropped-right {
-  -webkit-mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
-  mask-image: linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
-}
-
-.breadcrumbs .breadcrumb-copied-tooltip {
-  position: absolute;
-  left: 0;
-  top: 100%;
-  margin-top: 4px;
-  padding: 4px 8px;
-  background: var(--fg);
-  color: var(--bg);
-  font-size: 11px;
-  font-weight: 500;
-  border-radius: 4px;
-  white-space: nowrap;
-  pointer-events: none;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-  z-index: 10;
-}
-
-.breadcrumb-segment {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex: 0 0 auto;
-  cursor: pointer;
-  padding: 2px 6px;
-  margin: -2px -6px;
-  border-radius: 4px;
-  transition: background-color 0.1s ease;
-}
-
-.breadcrumb-segment:hover {
-  background: var(--entry-hover, rgba(255, 255, 255, 0.06));
-}
-
-.breadcrumb-segment-text {
-  white-space: nowrap;
-}
-
-.breadcrumb-separator {
-  flex-shrink: 0;
-  opacity: 0.6;
-  pointer-events: none;
-  user-select: none;
-}
-
 .file-list-body {
   flex: 1;
   min-height: 0;

packages/ui/lib/components/FileList/FileList.tsx

@@ -1,8 +1,8 @@
 import { ActionQueue } from "@/components/FileList/actionQueue";
 import type { PanelSide } from "@/entities/panel/model/types";
 import type { FileListTabState } from "@/entities/tab/model/types";
-import { useCommandRegistry } from "@/features/commands/commands";
 import { TERMINAL_EXECUTE, VIEW_FILE } from "@/features/commands/commandIds";
+import { useCommandRegistry } from "@/features/commands/commands";
 import { useFileStyleResolver } from "@/features/fss/fileStyleResolver";
 import { usePanelControllerRegistry } from "@/features/panels/panelControllers";
 import { useMediaQuery } from "@/hooks/useMediaQuery";
@@ -11,7 +11,7 @@ import { dirname, join } from "@/utils/path";
 import { useEditorRegistry, useViewerRegistry } from "@/viewerEditorRegistry";
 import type { FsNode } from "fss-lang";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Breadcrumbs } from "./Breadcrumbs";
+import { Breadcrumbs } from "../Breadcrumbs/Breadcrumbs";
 import { ColumnsScroller, type ColumnsScrollerProps } from "./ColumnsScroller";
 import { FileInfoFooter } from "./FileInfoFooter";
 import styles from "./FileList.module.css";

packages/ui/lib/features/command-line/CommandLine/CommandLine.tsx

@@ -1,28 +1,28 @@
 import { panelsVisibleAtom } from "@/atoms";
 import { useCommandLine, useCommandLineRegistration } from "@/features/command-line/useCommandLine";
-import { useCommandRegistry } from "@/features/commands/commands";
 import {
-  COMMANDLINE_CLEAR,
-  COMMANDLINE_COPY,
-  COMMANDLINE_CUT,
-  COMMANDLINE_DELETE_LEFT,
-  COMMANDLINE_DELETE_RIGHT,
-  COMMANDLINE_END,
-  COMMANDLINE_EXECUTE,
-  COMMANDLINE_HOME,
-  COMMANDLINE_LEFT,
-  COMMANDLINE_MOVE_WORD_LEFT,
-  COMMANDLINE_MOVE_WORD_RIGHT,
-  COMMANDLINE_PASTE,
-  COMMANDLINE_RIGHT,
-  COMMANDLINE_SELECT_ALL,
-  COMMANDLINE_SELECT_END,
-  COMMANDLINE_SELECT_HOME,
-  COMMANDLINE_SELECT_LEFT,
-  COMMANDLINE_SELECT_RIGHT,
-  COMMANDLINE_SELECT_WORD_LEFT,
-  COMMANDLINE_SELECT_WORD_RIGHT,
+    COMMANDLINE_CLEAR,
+    COMMANDLINE_COPY,
+    COMMANDLINE_CURSOR_END,
+    COMMANDLINE_CURSOR_HOME,
+    COMMANDLINE_CURSOR_LEFT,
+    COMMANDLINE_CURSOR_RIGHT,
+    COMMANDLINE_CURSOR_WORD_LEFT,
+    COMMANDLINE_CURSOR_WORD_RIGHT,
+    COMMANDLINE_CUT,
+    COMMANDLINE_DELETE_LEFT,
+    COMMANDLINE_DELETE_RIGHT,
+    COMMANDLINE_EXECUTE,
+    COMMANDLINE_PASTE,
+    COMMANDLINE_SELECT_ALL,
+    COMMANDLINE_SELECT_END,
+    COMMANDLINE_SELECT_HOME,
+    COMMANDLINE_SELECT_LEFT,
+    COMMANDLINE_SELECT_RIGHT,
+    COMMANDLINE_SELECT_WORD_LEFT,
+    COMMANDLINE_SELECT_WORD_RIGHT,
 } from "@/features/commands/commandIds";
+import { useCommandRegistry } from "@/features/commands/commands";
 import { registerCommandLineKeybindings } from "@/features/commands/registerKeybindings";
 import { useTerminal } from "@/features/terminal/useTerminal";
 import terminalStyles from "@/styles/terminal.module.css";
@@ -144,7 +144,7 @@ export function CommandLine() {
     );
 
     d.push(
-      commandRegistry.registerCommand(COMMANDLINE_MOVE_WORD_LEFT, () => {
+      commandRegistry.registerCommand(COMMANDLINE_CURSOR_WORD_LEFT, () => {
         const v = valueRef.current;
         let p = cursorRef.current;
         while (p > 0 && v[p - 1] === " ") p--;
@@ -154,7 +154,7 @@ export function CommandLine() {
     );
 
     d.push(
-      commandRegistry.registerCommand(COMMANDLINE_MOVE_WORD_RIGHT, () => {
+      commandRegistry.registerCommand(COMMANDLINE_CURSOR_WORD_RIGHT, () => {
         const v = valueRef.current;
         let p = cursorRef.current;
         while (p < v.length && v[p] !== " ") p++;
@@ -163,10 +163,10 @@ export function CommandLine() {
       }),
     );
 
-    d.push(commandRegistry.registerCommand(COMMANDLINE_HOME, () => moveCursor(0, false)));
-    d.push(commandRegistry.registerCommand(COMMANDLINE_END, () => moveCursor(valueRef.current.length, false)));
-    d.push(commandRegistry.registerCommand(COMMANDLINE_LEFT, () => moveCursor(Math.max(0, cursorRef.current - 1), false)));
-    d.push(commandRegistry.registerCommand(COMMANDLINE_RIGHT, () => moveCursor(Math.min(valueRef.current.length, cursorRef.current + 1), false)));
+    d.push(commandRegistry.registerCommand(COMMANDLINE_CURSOR_HOME, () => moveCursor(0, false)));
+    d.push(commandRegistry.registerCommand(COMMANDLINE_CURSOR_END, () => moveCursor(valueRef.current.length, false)));
+    d.push(commandRegistry.registerCommand(COMMANDLINE_CURSOR_LEFT, () => moveCursor(Math.max(0, cursorRef.current - 1), false)));
+    d.push(commandRegistry.registerCommand(COMMANDLINE_CURSOR_RIGHT, () => moveCursor(Math.min(valueRef.current.length, cursorRef.current + 1), false)));
 
     d.push(
       commandRegistry.registerCommand(COMMANDLINE_SELECT_ALL, () => {