publicディレクトリ内でディレクトリ分けができるようにする(ディレクトリを再起的に読み込む)

src/client/components/SidebarArticles.tsx

@@ -59,26 +59,111 @@ export const SidebarArticles = ({ items, sortType, articleState }: Props) => {
     localStorage.setItem(StorageName[articleState], isDetailsOpen.toString());
   }, [isDetailsOpen]);
 
+  // build recursive tree from item.parent (segments array)
+  const topLevelItems: ItemViewModel[] = [];
+
+  type TreeNode = {
+    name: string;
+    items: ItemViewModel[];
+    children: { [name: string]: TreeNode };
+  };
+
+  const roots: { [name: string]: TreeNode } = {};
+
+  const addToTree = (segments: string[], item: ItemViewModel) => {
+    const rootName = segments[0];
+    if (!roots[rootName])
+      roots[rootName] = { name: rootName, items: [], children: {} };
+    let node = roots[rootName];
+    const rest = segments.slice(1);
+    if (rest.length === 0) {
+      node.items.push(item);
+      return;
+    }
+    for (const seg of rest) {
+      if (!node.children[seg])
+        node.children[seg] = { name: seg, items: [], children: {} };
+      node = node.children[seg];
+    }
+    node.items.push(item);
+  };
+
+  items.forEach((item) => {
+    if (!item.parent || item.parent.length === 0) {
+      topLevelItems.push(item);
+    } else {
+      addToTree(item.parent, item);
+    }
+  });
+
+  const countSubtreeItems = (node: TreeNode): number =>
+    node.items.length +
+    Object.values(node.children).reduce((s, c) => s + countSubtreeItems(c), 0);
+
+  const renderNode = (node: TreeNode, path: string) => {
+    const cmp = compare[sortType];
+    return (
+      <li key={path}>
+        <details css={articleDetailsStyle} open>
+          <summary css={articleSummaryStyle}>
+            {node.name}
+            <span css={articleSectionTitleCountStyle}>
+              {countSubtreeItems(node)}
+            </span>
+          </summary>
+          <ul>
+            {Object.values(node.children)
+              .sort((a, b) => a.name.localeCompare(b.name))
+              .map((child) => renderNode(child, `${path}/${child.name}`))}
+
+            {[...node.items].sort(cmp).map((item) => (
+              <li key={item.items_show_path}>
+                <Link css={articlesListItemStyle} to={item.items_show_path}>
+                  <MaterialSymbol
+                    fill={item.modified && articleState !== "Draft"}
+                  >
+                    note
+                  </MaterialSymbol>
+                  <span css={articleListItemInnerStyle}>
+                    {item.modified && articleState !== "Draft" && "(差分あり) "}
+                    {item.title}
+                  </span>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </details>
+      </li>
+    );
+  };
+
   return (
     <details css={articleDetailsStyle} open={isDetailsOpen}>
       <summary css={articleSummaryStyle} onClick={toggleAccordion}>
         {ArticleState[articleState]}
         <span css={articleSectionTitleCountStyle}>{items.length}</span>
       </summary>
       <ul>
-        {items.sort(compare[sortType]).map((item) => (
-          <li key={item.items_show_path}>
-            <Link css={articlesListItemStyle} to={item.items_show_path}>
-              <MaterialSymbol fill={item.modified && articleState !== "Draft"}>
-                note
-              </MaterialSymbol>
-              <span css={articleListItemInnerStyle}>
-                {item.modified && articleState !== "Draft" && "(差分あり) "}
-                {item.title}
-              </span>
-            </Link>
-          </li>
-        ))}
+        {Object.values(roots)
+          .sort((a, b) => a.name.localeCompare(b.name))
+          .map((r) => renderNode(r, r.name))}
+
+        {topLevelItems.length > 0 &&
+          [...topLevelItems].sort(compare[sortType]).map((item) => (
+            <li key={item.items_show_path}>
+              <Link css={articlesListItemStyle} to={item.items_show_path}>
+                <MaterialSymbol
+                  fill={item.modified && articleState !== "Draft"}
+                >
+                  note
+                </MaterialSymbol>
+                <span css={articleListItemInnerStyle}>
+                  {item.modified && articleState !== "Draft" && "(差分あり) "}
+                  {item.title}
+                </span>
+              </Link>
+            </li>
+          ))}
       </ul>
     </details>
   );
@@ -93,6 +178,44 @@ const articleDetailsStyle = css({
   "&[open] > summary::before": {
     content: "'expand_more'",
   },
+  // nested lists: draw vertical guide lines inside the padded area
+  "& ul": {
+    listStyle: "none",
+    margin: 0,
+    paddingLeft: getSpace(1),
+  },
+  "& ul ul": {
+    position: "relative",
+    paddingLeft: getSpace(3),
+  },
+  "& ul ul::before": {
+    content: "''",
+    position: "absolute",
+    left: getSpace(3),
+    top: 0,
+    bottom: 0,
+    width: 1,
+    backgroundColor: Colors.gray20,
+  },
+  "& ul ul > li": {
+    paddingLeft: getSpace(1.5),
+  },
+  "& ul ul ul": {
+    position: "relative",
+    paddingLeft: getSpace(4),
+  },
+  "& ul ul ul::before": {
+    content: "''",
+    position: "absolute",
+    left: getSpace(3),
+    top: 0,
+    bottom: 0,
+    width: 1,
+    backgroundColor: Colors.gray20,
+  },
+  "& ul ul ul > li": {
+    paddingLeft: getSpace(1.5),
+  },
 });
 
 const articleSummaryStyle = css({
@@ -137,9 +260,9 @@ const articlesListItemStyle = css({
   fontSize: Typography.body2,
   gap: getSpace(1),
   lineHeight: LineHeight.bodyDense,
-  padding: `${getSpace(3 / 4)}px ${getSpace(5 / 2)}px ${getSpace(
-    3 / 4,
-  )}px ${getSpace(3 / 2)}px`,
+  padding: `${getSpace(3 / 4)}px ${getSpace(5 / 2)}px ${getSpace(3 / 4)}px ${getSpace(
+    3,
+  )}px`,
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
 

src/lib/file-system-repo.ts

@@ -206,17 +206,22 @@ export class FileSystemRepo {
   }
 
   private parseFilename(filename: string) {
-    return path.basename(filename, ".md");
+    return filename.replace(/\.md$/, "");
   }
 
   private getFilePath(uuid: string, remote: boolean = false) {
     return path.join(this.getRootOrRemotePath(remote), this.getFilename(uuid));
   }
 
   private async getItemFilenames(remote: boolean = false) {
-    return await fs.readdir(
-      this.getRootOrRemotePath(remote),
-      FileSystemRepo.fileSystemOptions(),
+    return (
+      await fs.readdir(
+        this.getRootOrRemotePath(remote),
+        FileSystemRepo.fileSystemOptions(),
+      )
+    ).filter(
+      (itemFilename) =>
+        /\.md$/.test(itemFilename) && !itemFilename.startsWith(".remote/"),
     );
   }
 
@@ -246,6 +251,8 @@ export class FileSystemRepo {
   private static fileSystemOptions() {
     return {
       encoding: "utf8",
+      withFileTypes: false,
+      recursive: true,
     } as const;
   }
 
@@ -325,12 +332,10 @@ export class FileSystemRepo {
   async loadItems(): Promise<QiitaItem[]> {
     const itemFilenames = await this.getItemFilenames();
 
-    const promises = itemFilenames
-      .filter((itemFilename) => /\.md$/.test(itemFilename))
-      .map(async (itemFilename) => {
-        const basename = this.parseFilename(itemFilename);
-        return await this.loadItemByBasename(basename);
-      });
+    const promises = itemFilenames.map(async (itemFilename) => {
+      const basename = this.parseFilename(itemFilename);
+      return await this.loadItemByBasename(basename);
+    });
 
     const items = excludeNull(await Promise.all(promises));
     return items;

src/lib/view-models/items.ts

@@ -5,6 +5,7 @@ export type ItemViewModel = {
   title: string;
   updated_at: string;
   modified: boolean;
+  parent: string[];
 };
 
 export type ItemsIndexViewModel = {

src/server/api/items.ts

@@ -27,6 +27,7 @@ const itemsIndex = async (req: Express.Request, res: Express.Response) => {
         title: item.title,
         updated_at: item.updatedAt,
         modified: item.modified,
+        parent: item.name.split("/").slice(0, -1),
       };
 
       if (item.id) {

src/server/app.ts

@@ -66,7 +66,8 @@ export function startLocalChangeWatcher({
 }) {
   const wsServer = new WebSocketServer({ server });
   const watcher = chokidar.watch(watchPath, {
-    ignored: ["**/.remote/**"],
+    ignored: [/node_modules|\.git/, "**/.remote/**"],
+    persistent: true,
   });
   watcher.on("change", () => {
     wsServer.clients.forEach((client) => {