fix: align the directory tree with the sidebar

apps/web/features/app-shell/app-sidebar-row.ts

@@ -11,3 +11,11 @@ export const appSidebarIconClassName =
 export const appSidebarRowClassName = `flex ${appSidebarRowHeightClassName} w-full items-center justify-start gap-1.5 rounded-md border-0 px-2 text-xs font-normal text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring`;
 
 export const appSidebarRowGapClassName = "gap-px";
+
+export const appSidebarTreeLeadingInsetRem = 1.25;
+
+export const appSidebarTreeDepthInsetRem = 0.75;
+
+export function getAppSidebarTreePaddingInlineStart(depth: number): string {
+  return `${appSidebarTreeLeadingInsetRem + depth * appSidebarTreeDepthInsetRem}rem`;
+}

apps/web/features/editor/pages/page-tree.tsx

@@ -14,6 +14,7 @@ import { useEditorSiteOptional } from "@/features/editor/editor-state";
 import {
   appSidebarIconSlotClassName,
   appSidebarRowHeightClassName,
+  getAppSidebarTreePaddingInlineStart,
 } from "@/features/app-shell/app-sidebar-row";
 import { api, type Id } from "@baseblocks/backend";
 import {
@@ -273,7 +274,7 @@ function PageTreeRow({
         asChild
         isActive={selectedPageId === page._id}
         style={{
-          paddingInlineStart: `calc(var(--app-sidebar-leading-inset) + ${item.depth * 0.75}rem)`,
+          paddingInlineStart: getAppSidebarTreePaddingInlineStart(item.depth),
         }}
         className={cn(
           "flex min-w-0 gap-1.5 overflow-hidden rounded-md p-0 text-xs font-normal transition-colors data-[active=true]:font-medium",

apps/web/features/libraries/library-explorer.tsx

@@ -407,6 +407,7 @@ export function LibraryExplorer({
       canManage={canManage}
       currentFolderId={currentFolderId}
       nodes={model.nodes}
+      selectedEntityId={openFileId ?? currentFolderId}
       onCreateFolder={createFolder}
       onDeleteEntity={deleteEntity}
       onDownloadFile={(entity) => {

apps/web/features/libraries/library-file-icon.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, test } from "bun:test";
+import { getLibraryFileIconKind } from "./library-file-icon";
+
+describe("getLibraryFileIconKind", () => {
+  test.each([
+    ["report.pdf", "application/octet-stream", "pdf"],
+    [
+      "slides.pptx",
+      "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+      "presentation",
+    ],
+    [
+      "data.xlsx",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      "spreadsheet",
+    ],
+    [
+      "notes.docx",
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      "document",
+    ],
+    ["readme.md", "text/markdown; charset=utf-8", "markdown"],
+    ["data.csv", "text/csv", "csv"],
+    ["photo.png", "image/png", "image"],
+    ["clip.mp4", "video/mp4", "video"],
+    ["song.mp3", "audio/mpeg", "audio"],
+    ["source.ts", "text/plain", "code"],
+    ["bundle.zip", "application/zip", "archive"],
+    ["notes.txt", "text/plain", "text"],
+    ["unknown.bin", "application/octet-stream", "file"],
+  ] as const)("maps %s to %s", (filename, contentType, expected) => {
+    expect(getLibraryFileIconKind(filename, contentType)).toBe(expected);
+  });
+});

apps/web/features/libraries/library-file-icon.tsx

@@ -0,0 +1,158 @@
+import { HugeiconsIcon } from "@hugeicons/react";
+import {
+  Csv01Icon,
+  File01Icon,
+  FileArchiveIcon,
+  FileAudioIcon,
+  FileCodeIcon,
+  FileImageIcon,
+  FileVideoIcon,
+} from "@hugeicons/core-free-icons";
+import { cn } from "@baseblocks/ui/lib/utils";
+import Image from "next/image";
+
+export type LibraryFileIconKind =
+  | "archive"
+  | "audio"
+  | "code"
+  | "csv"
+  | "document"
+  | "file"
+  | "image"
+  | "markdown"
+  | "pdf"
+  | "presentation"
+  | "spreadsheet"
+  | "text"
+  | "video";
+
+const extensionPattern = /\.([^.]+)$/;
+
+export function getLibraryFileIconKind(
+  filename: string,
+  contentType: string,
+): LibraryFileIconKind {
+  const normalizedType = contentType.toLowerCase().split(";", 1)[0] ?? "";
+  const extension = filename.toLowerCase().match(extensionPattern)?.[1] ?? "";
+
+  if (normalizedType === "application/pdf" || extension === "pdf") return "pdf";
+  if (
+    normalizedType.includes("presentation") ||
+    normalizedType === "application/vnd.ms-powerpoint" ||
+    ["ppt", "pptx"].includes(extension)
+  ) {
+    return "presentation";
+  }
+  if (
+    normalizedType.includes("spreadsheet") ||
+    normalizedType === "application/vnd.ms-excel" ||
+    ["xls", "xlsx"].includes(extension)
+  ) {
+    return "spreadsheet";
+  }
+  if (
+    normalizedType.includes("wordprocessingml") ||
+    normalizedType === "application/msword" ||
+    ["doc", "docx"].includes(extension)
+  ) {
+    return "document";
+  }
+  if (
+    normalizedType === "text/markdown" ||
+    ["md", "mdx", "markdown"].includes(extension)
+  ) {
+    return "markdown";
+  }
+  if (normalizedType === "text/csv" || extension === "csv") return "csv";
+  if (normalizedType.startsWith("image/")) return "image";
+  if (normalizedType.startsWith("video/")) return "video";
+  if (normalizedType.startsWith("audio/")) return "audio";
+  if (
+    [
+      "application/zip",
+      "application/x-7z-compressed",
+      "application/x-rar-compressed",
+      "application/gzip",
+    ].includes(normalizedType) ||
+    ["zip", "7z", "rar", "gz", "tar"].includes(extension)
+  ) {
+    return "archive";
+  }
+  if (
+    ["application/json", "application/javascript", "application/xml"].includes(
+      normalizedType,
+    ) ||
+    [
+      "css",
+      "html",
+      "js",
+      "jsx",
+      "json",
+      "sql",
+      "ts",
+      "tsx",
+      "xml",
+      "yaml",
+      "yml",
+    ].includes(extension)
+  ) {
+    return "code";
+  }
+  if (normalizedType.startsWith("text/") || extension === "txt") return "text";
+  return "file";
+}
+
+const documentIconSource: Partial<Record<LibraryFileIconKind, string>> = {
+  document: "/document-icons/word.svg",
+  markdown: "/document-icons/markdown.svg",
+  pdf: "/document-icons/pdf.svg",
+  presentation: "/document-icons/powerpoint.svg",
+  spreadsheet: "/document-icons/excel.svg",
+  text: "/document-icons/text.svg",
+};
+
+const fallbackIcon = {
+  archive: FileArchiveIcon,
+  audio: FileAudioIcon,
+  code: FileCodeIcon,
+  csv: Csv01Icon,
+  file: File01Icon,
+  image: FileImageIcon,
+  video: FileVideoIcon,
+} as const;
+
+export function LibraryFileIcon({
+  className,
+  contentType,
+  filename,
+}: {
+  className?: string;
+  contentType: string;
+  filename: string;
+}) {
+  const kind = getLibraryFileIconKind(filename, contentType);
+  const source = documentIconSource[kind];
+
+  if (source) {
+    return (
+      <Image
+        alt=""
+        aria-hidden="true"
+        className={cn("size-3.5 shrink-0 object-contain", className)}
+        draggable={false}
+        height={14}
+        src={source}
+        width={14}
+      />
+    );
+  }
+
+  return (
+    <HugeiconsIcon
+      aria-hidden
+      className={cn("size-3.5 shrink-0", className)}
+      icon={fallbackIcon[kind as keyof typeof fallbackIcon] ?? File01Icon}
+      strokeWidth={1.75}
+    />
+  );
+}