sync: update from private repo (dfadcd5f)

2026-06-23 06:38:48 +00:00
parent 6a2f2cc736
commit 29ccaf1e92
377 changed files with 31028 additions and 8994 deletions
@@ -0,0 +1,51 @@
+/**
+ * FileBreadcrumb — ファイルブラウザのパンくず（ルート / seg / seg …）。
+ * スペースのファイルタブとタスクのファイルタブで共有する。
+ */
+interface FileBreadcrumbProps {
+  /** 現在パスのセグメント配列（空配列 = ルート）。 */
+  pathSegments: string[];
+  /** セグメントをクリックしたときに移動するパス（'' = ルート）。 */
+  onNavigate: (path: string) => void;
+  /** ルートラベル左に出す任意のプレフィックス（例: '/files'）。 */
+  testid?: string;
+}
+
+export function FileBreadcrumb({ pathSegments, onNavigate, testid }: FileBreadcrumbProps) {
+  return (
+    <nav
+      data-testid={testid}
+      aria-label="パンくず"
+      className="flex flex-wrap items-center gap-0.5 text-2xs text-slate-500"
+    >
+      <button
+        type="button"
+        onClick={() => onNavigate('')}
+        className="rounded px-1 py-0.5 transition-colors hover:bg-surface hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:text-slate-700"
+        disabled={pathSegments.length === 0}
+        aria-current={pathSegments.length === 0 ? 'location' : undefined}
+      >
+        ルート
+      </button>
+      {pathSegments.map((seg, i) => {
+        const prefix = pathSegments.slice(0, i + 1).join('/');
+        const isLast = i === pathSegments.length - 1;
+        return (
+          <span key={prefix} className="flex items-center gap-0.5">
+            <span className="text-slate-300" aria-hidden>/</span>
+            <button
+              type="button"
+              onClick={() => onNavigate(prefix)}
+              className="max-w-[14ch] truncate rounded px-1 py-0.5 transition-colors hover:bg-surface hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:text-slate-700"
+              disabled={isLast}
+              aria-current={isLast ? 'location' : undefined}
+              title={seg}
+            >
+              {seg}
+            </button>
+          </span>
+        );
+      })}
+    </nav>
+  );
+}