Optionally show notebook tag and title on each card

src/board.ts

@@ -217,6 +217,7 @@ export default class Board {
       name: this.boardName,
       messages: [],
       hiddenTags: [],
+      displayConfig: this.parsedConfig?.display ?? {},
     };
 
     if (this.isValid) {

src/gui/Card.tsx

@@ -1,16 +1,20 @@
-import React from "react";
+import React, { useContext } from "react";
 import styled from "styled-components";
-import { IoMdPricetag } from "react-icons/io";
+import { IoMdFolder, IoMdPricetag } from "react-icons/io";
 import { IoCalendarOutline } from "react-icons/io5";
 import moment from "moment";
 
 import type { NoteData } from "../types";
+import { BoardContext } from "./index";
 
 const dateFmt = document.getElementById('date-fmt')?.innerHTML || ""
 
 export default React.forwardRef<HTMLDivElement, { note: NoteData }>(
   ({ note }, ref) => {
-    const { title, tags, due } = note;
+
+    const board = useContext(BoardContext);
+
+    const { title, tags, due, notebookData: notebook } = note;
 
     const renderExtra = (
       key: number,
@@ -23,10 +27,28 @@ export default React.forwardRef<HTMLDivElement, { note: NoteData }>(
         {text}
       </ExtraItem>
     );
+
     const extras: [React.ReactNode, string, string?][] = tags.map((tag) => [
       <IoMdPricetag size="1rem" />,
       tag,
     ]);
+
+    if (board.displayConfig.showNotebookTag) {
+      const { icon } = notebook;
+      extras.unshift([
+        icon ? (
+          icon.dataUrl ? (
+            <DataIcon alt={notebook.title} src={icon.dataUrl} />
+          ) : (
+            <span>{icon.emoji}</span>
+          )
+        ) : (
+          <IoMdFolder size="1rem" />
+        ),
+        notebook.title,
+      ]);
+    }
+
     if (due > 0) {
       const dueDate = new Date(due);
       const dateStr = moment(dueDate).format(dateFmt);
@@ -83,3 +105,8 @@ const ExtraItem = styled.div<{ color: string }>(({ color }) => ({
 const IconCont = styled.span({
   marginRight: "4px",
 });
+
+const DataIcon = styled.img({
+  maxHeight: "1rem",
+  maxWidth: "1rem",
+});

src/gui/index.tsx

@@ -1,16 +1,17 @@
 import React from "react";
 import { render } from "react-dom";
 import styled from "styled-components";
-import { IoMdSettings, IoMdAdd } from "react-icons/io";
+import { IoMdSettings, IoMdAdd, IoMdEye } from "react-icons/io";
 
 import { capitalize } from "../utils";
 import { DispatchFn, useRemoteBoard } from "./hooks";
 import { DragDropContext } from "./DragDrop";
 import Column from "./Column";
-import type { Message } from "../types";
+import type { BoardState, Message } from "../types";
 
 export const DispatchContext = React.createContext<DispatchFn>(async () => {});
 export const IsWaitingContext = React.createContext<boolean>(false);
+export const BoardContext = React.createContext<BoardState>({} as BoardState);
 
 function MessageBox({
   message,
@@ -57,49 +58,59 @@ function App() {
   }));
 
   const cont = board ? (
-    <Container>
-      <Header>
-        {board.name}
-        <IconCont
-          onClick={() =>
-            dispatch({ type: "settings", payload: { target: "filters" } })
-          }
-        >
-          <IoMdSettings size="25px" />
-        </IconCont>
-
-        <IconCont
-          onClick={() =>
-            dispatch({ type: "settings", payload: { target: "columnnew" } })
-          }
-        >
-          <IoMdAdd size="25px" />
-        </IconCont>
-      </Header>
-
-      <MessagesCont>
-        {board.messages.map((msg, idx) => (
-          <MessageBox
-            key={idx}
-            message={msg}
-            onMsgAction={(action) =>
-              dispatch({
-                type: "messageAction",
-                payload: { actionName: action, messageId: msg.id },
-              })
+    <BoardContext.Provider value={board}>
+      <Container>
+        <Header>
+          {board.name}
+          <IconCont
+            onClick={() =>
+              dispatch({ type: "settings", payload: { target: "filters" } })
             }
-          />
-        ))}
-      </MessagesCont>
-
-      {board.columns && (
-        <ColumnsCont>
-          {notesToShow?.map(({ name, notes }) => (
-            <Column key={name} name={name} notes={notes} />
+          >
+            <IoMdSettings size="25px" />
+          </IconCont>
+
+          <IconCont
+            onClick={() =>
+              dispatch({ type: "settings", payload: { target: "display" } })
+            }
+          >
+            <IoMdEye size="25px" />
+          </IconCont>
+
+          <IconCont
+            onClick={() =>
+              dispatch({ type: "settings", payload: { target: "columnnew" } })
+            }
+          >
+            <IoMdAdd size="25px" />
+          </IconCont>
+        </Header>
+
+        <MessagesCont>
+          {board.messages.map((msg, idx) => (
+            <MessageBox
+              key={idx}
+              message={msg}
+              onMsgAction={(action) =>
+                dispatch({
+                  type: "messageAction",
+                  payload: { actionName: action, messageId: msg.id },
+                })
+              }
+            />
           ))}
-        </ColumnsCont>
-      )}
-    </Container>
+        </MessagesCont>
+
+        {board.columns && (
+          <ColumnsCont>
+            {notesToShow?.map(({ name, notes }) => (
+              <Column key={name} name={name} notes={notes} />
+            ))}
+          </ColumnsCont>
+        )}
+      </Container>
+    </BoardContext.Provider>
   ) : (
     <h1>Loading...</h1>
   );

src/noteData.ts

@@ -1,6 +1,6 @@
 import joplin from "api";
 import { getUpdatedConfigNote } from "./parser";
-import { NoteData, ConfigNote, UpdateQuery } from "./types";
+import { ConfigNote, Folder, NoteData, UpdateQuery } from "./types";
 
 /**
  * Execute the given search query and return all matching notes in the kanban format.
@@ -35,6 +35,11 @@ async function search(query: string): Promise<NoteData[]> {
     has_more: boolean;
   };
 
+  const allNotebooks = await getAllNotebooks();
+  const notebookIndex = Object.fromEntries(
+    allNotebooks.map((folder) => [folder.id, folder])
+  );
+
   let allNotes: any[] = [];
   let page = 1;
   while (true) {
@@ -71,6 +76,7 @@ async function search(query: string): Promise<NoteData[]> {
         isTodo: !!note.is_todo,
         isCompleted: !!note.todo_completed,
         notebookId: note.parent_id,
+        notebookData: notebookIndex[note.parent_id],
         due: note.todo_due,
         order: note.order === 0 ? note.created_time : note.order,
         createdTime: note.created_time,
@@ -272,28 +278,34 @@ export async function findAllChildrenNotebook(
   return children;
 }
 
-type Folder = {
-  id: string;
-  title: string;
-  parent_id: string;
-};
-
 /**
  * Get a list of all notebooks, with id, title, and parent_id.
  */
 export async function getAllNotebooks(): Promise<Folder[]> {
+  const fields = ["id", "title", "parent_id", "icon"];
+
   let folders: Folder[] = [];
   let page = 1;
+
   while (true) {
     console.log("data call get", ["folders"], { page });
 
     const {
-      items: newFolders,
+      items,
       has_more: hasMore,
-    }: { items: Folder[]; has_more: boolean } = await joplin.data.get(
-      ["folders"],
-      { page }
-    );
+    }: { items: (Folder & { icon: string })[]; has_more: boolean } =
+      await joplin.data.get(["folders"], { page, fields });
+    const newFolders = items.map((folder) => {
+      let icon = folder.icon || null;
+      if (icon)
+        try {
+          // Is it always JSON? I'm not sure.
+          icon = JSON.parse(icon);
+        } catch (e) {
+          console.error(e);
+        }
+      return { ...folder, icon };
+    });
     folders = [...folders, ...newFolders];
 
     if (!hasMore) break;

src/rules.ts

@@ -151,10 +151,14 @@ const editorTypes = {
     completed: "checkbox",
     backlog: "checkbox",
   },
+  display: {
+    showNotebookTag: "checkbox",
+  },
 };
 
 export const getRuleEditorTypes = (targetPath: string) => {
   if (targetPath === "filters") return editorTypes.filters;
+  if (targetPath === "display") return editorTypes.display;
   if (targetPath.startsWith("column")) return editorTypes.columns;
   throw new Error(`Unkown target path ${targetPath}`);
 };

src/types.ts

@@ -31,7 +31,8 @@ export interface Config {
     backlog?: boolean;
   }[];
   display: {
-    markdown: string;
+    markdown?: string;
+    showNotebookTag?: boolean;
   };
 }
 
@@ -79,6 +80,7 @@ export interface BoardState {
   }[];
   hiddenTags: string[];
   messages: Message[];
+  displayConfig: Config["display"];
 }
 
 // Joplin API related types
@@ -96,11 +98,22 @@ export interface ConfigNote {
   body: string;
 }
 
+export interface Folder {
+  id: string;
+  title: string;
+  parent_id: string;
+  icon: null | {
+    emoji: string;
+    dataUrl?: string;
+  };
+}
+
 export interface NoteData {
   id: string;
   title: string;
   tags: string[];
   notebookId: string;
+  notebookData: Folder;
   isTodo: boolean;
   isCompleted: boolean;
   due: number;

tests/board.test.ts

@@ -66,6 +66,12 @@ const note = (args: Partial<NoteData> = {}): NoteData => ({
   id: "id",
   title: "title",
   notebookId: parentNb,
+  notebookData: {
+    id: parentNb,
+    title: "notebook",
+    icon: { emoji: "☢️" },
+    parent_id: ""
+  },
   tags: ["task"],
   createdTime: mockTime,
   due: 0,
@@ -90,6 +96,7 @@ const state = (
     { name: "Working", notes: working },
     { name: "Done", notes: done },
   ],
+  displayConfig: {},
 });
 
 describe("Board", () => {