feat: add tree item icon

Author: Yukaii

images/icon/dark/file-text.svg

@@ -73,7 +73,7 @@
       "hackmd-tree": [
         {
           "id": "hackmd.tree.my-notes",
-          "name": "Browse My Notes"
+          "name": "My Notes"
         },
         {
           "id": "hackmd.tree.recent-notes",

images/icon/dark/users.svg

@@ -5,12 +5,12 @@ import * as vscode from 'vscode';
 import * as hljs from 'highlight.js/lib/highlight';
 import * as markdownitContainer from 'markdown-it-container';
 import * as Prism from 'prismjs';
-import React from 'react';
 import ReactTreeView from 'react-vsc-treeview';
 import * as S from 'string';
 
 import { initializeAPIClient } from './api';
 import { registerCommands } from './commands';
+import { createWithContainer } from './treeReactApp/AppContainer';
 import { History, MyNotes, TeamNotes } from './treeReactApp/pages';
 
 require('prismjs/components/prism-wiki');
@@ -211,9 +211,23 @@ export async function activate(context: vscode.ExtensionContext) {
 
   registerCommands(context);
 
-  context.subscriptions.push(ReactTreeView.render(React.createElement(MyNotes), 'hackmd.tree.my-notes'));
-  context.subscriptions.push(ReactTreeView.render(React.createElement(History), 'hackmd.tree.recent-notes'));
-  context.subscriptions.push(ReactTreeView.render(React.createElement(TeamNotes), 'hackmd.tree.team-notes'));
+  console.log(context.extensionPath, 'context.extensionPath');
+
+  context.subscriptions.push(
+    ReactTreeView.render(createWithContainer(MyNotes, { extensionPath: context.extensionPath }), 'hackmd.tree.my-notes')
+  );
+  context.subscriptions.push(
+    ReactTreeView.render(
+      createWithContainer(History, { extensionPath: context.extensionPath }),
+      'hackmd.tree.recent-notes'
+    )
+  );
+  context.subscriptions.push(
+    ReactTreeView.render(
+      createWithContainer(TeamNotes, { extensionPath: context.extensionPath }),
+      'hackmd.tree.team-notes'
+    )
+  );
 
   return {
     extendMarkdownIt(md: any) {

images/icon/light/file-text.svg

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+
+type AppContextType = {
+  extensionPath: string;
+};
+
+const AppContext = createContext<AppContextType>({
+  extensionPath: '',
+});
+
+export const useAppContext = () => {
+  return useContext(AppContext);
+};
+
+export const AppContainer = ({ extensionPath, children }: { children: React.ReactNode; extensionPath }) => {
+  return <AppContext.Provider value={{ extensionPath }}>{children}</AppContext.Provider>;
+};
+
+export function createWithContainer(Component: React.ComponentType, context: AppContextType) {
+  return (
+    <AppContainer {...context}>
+      <Component />
+    </AppContainer>
+  );
+}

images/icon/light/users.svg

@@ -1,7 +1,11 @@
+import path from 'path';
+
 import { Note } from '@hackmd/api/dist/type';
 import { useMemo } from 'react';
 import { TreeItem } from 'react-vsc-treeview';
 
+import { useAppContext } from '../AppContainer';
+
 export const NoteTreeItem = ({ note }: { note: Note }) => {
   const context = useMemo(
     () => ({
@@ -11,15 +15,29 @@ export const NoteTreeItem = ({ note }: { note: Note }) => {
     [note]
   );
 
+  const { extensionPath } = useAppContext();
+  const iconPath = useMemo(() => {
+    if (extensionPath) {
+      return {
+        light: path.join(extensionPath, 'images/icon/light/file-text.svg'),
+        dark: path.join(extensionPath, 'images/icon/dark/file-text.svg'),
+      };
+    } else {
+      return undefined;
+    }
+  }, [extensionPath]);
+
   return (
     <TreeItem
       label={note.title}
       id={note.id}
+      iconPath={iconPath}
       command={{
         title: '',
         command: 'clickTreeItem',
         arguments: [note.title, note.id],
       }}
+      description={note.tags?.join(', ') || ''}
       contextValue="file"
       context={context}
     />

package.json

@@ -1,9 +1,12 @@
+import path from 'path';
+
 import { Team } from '@hackmd/api/dist/type';
 import { useEffect, useMemo, useState } from 'react';
 import { TreeItem } from 'react-vsc-treeview';
 import useSWR from 'swr';
 
 import { API } from '../../api';
+import { useAppContext } from '../AppContainer';
 import { NoteTreeItem } from '../components/NoteTreeItem';
 import { useTeamNotesStore } from '../store';
 
@@ -13,8 +16,20 @@ const TeamTreeItem = ({ team }: { team: Team }) => {
     () => API.getTeamNotes(team.path)
   );
 
+  const { extensionPath } = useAppContext();
+  const iconPath = useMemo(() => {
+    if (extensionPath) {
+      return {
+        light: path.join(extensionPath, 'images/icon/light/users.svg'),
+        dark: path.join(extensionPath, 'images/icon/dark/users.svg'),
+      };
+    } else {
+      return undefined;
+    }
+  }, [extensionPath]);
+
   return (
-    <TreeItem label={team.name} expanded>
+    <TreeItem label={team.name} expanded iconPath={iconPath} description={team.path}>
       {notes.map((note) => {
         return <NoteTreeItem key={note.id} note={note} />;
       })}