feat(share): display icons in note tree

apps/server/src/becca/entities/bnote.ts

@@ -28,7 +28,7 @@ const LABEL = "label";
 const RELATION = "relation";
 
 // TODO: Deduplicate with fnote
-const NOTE_TYPE_ICONS = {
+export const NOTE_TYPE_ICONS = {
     file: "bx bx-file",
     image: "bx bx-image",
     code: "bx bx-code",

apps/server/src/share/shaca/entities/snote.ts

@@ -9,6 +9,7 @@ import type SAttachment from "./sattachment.js";
 import type SAttribute from "./sattribute.js";
 import type SBranch from "./sbranch.js";
 import type { SNoteRow } from "./rows.js";
+import { NOTE_TYPE_ICONS } from "../../../becca/entities/bnote.js";
 
 const LABEL = "label";
 const RELATION = "relation";
@@ -530,6 +531,33 @@ class SNote extends AbstractShacaEntity {
             childNoteIds: this.children.map((child) => child.noteId)
         };
     }
+
+    getIcon() {
+        const iconClassLabels = this.getLabels("iconClass");
+
+        if (iconClassLabels && iconClassLabels.length > 0) {
+            return iconClassLabels[0].value;
+        } else if (this.noteId === "root") {
+            return "bx bx-home-alt-2";
+        }
+        if (this.noteId === "_share") {
+            return "bx bx-share-alt";
+        } else if (this.type === "text") {
+            if (this.isFolder()) {
+                return "bx bx-folder";
+            } else {
+                return "bx bx-note";
+            }
+        } else if (this.type === "code" && this.mime.startsWith("text/x-sql")) {
+            return "bx bx-data";
+        } else {
+            return NOTE_TYPE_ICONS[this.type];
+        }
+    }
+
+    isFolder() {
+        return this.getChildBranches().length > 0;
+    }
 }
 
 export default SNote;

packages/share-theme/src/templates/tree_item.ejs

@@ -8,7 +8,7 @@ const target = isExternalLink ? ` target="_blank" rel="noopener noreferrer"` : "
     <% if (note.noteId !== subRoot.note.noteId) { %>
     <a class="<%= linkClass %>" href="<%= linkHref %>"<%= target %>>
         <% if (note.hasVisibleChildren()) { %><button class="collapse-button" aria-label="Expand"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle"><path d="M3 8L12 17L21 8"></path></svg></button><% } %>
-        <span><%= note.title %></span>
+        <span><i class="<%= note.getIcon() %>"></i> <%= note.title %></span>
     </a>
 <% } %>