feat: Unified icon picker (#7038)

server/models/Collection.ts

@@ -183,6 +183,7 @@ class Collection extends ParanoidModel<
   @Column(DataType.JSONB)
   content: ProsemirrorData | null;
 
+  /** An icon (or) emoji to use as the collection icon. */
   @Length({
     max: 50,
     msg: `icon must be 50 characters or less`,
@@ -190,6 +191,7 @@ class Collection extends ParanoidModel<
   @Column
   icon: string | null;
 
+  /** The color of the icon. */
   @IsHexColor
   @Column
   color: string | null;
@@ -270,10 +272,6 @@ class Collection extends ParanoidModel<
 
   @BeforeSave
   static async onBeforeSave(model: Collection) {
-    if (model.icon === "collection") {
-      model.icon = null;
-    }
-
     if (!model.content) {
       model.content = await DocumentHelper.toJSON(model);
     }

server/models/Document.ts

@@ -255,14 +255,18 @@ class Document extends ParanoidModel<
   @Column
   editorVersion: string;
 
-  /** An emoji to use as the document icon. */
+  /**
+   * An emoji to use as the document icon,
+   * This is used as fallback (for backward compat) when icon is not set.
+   */
   @Length({
-    max: 1,
-    msg: `Emoji must be a single character`,
+    max: 50,
+    msg: `Emoji must be 50 characters or less`,
   })
   @Column
   emoji: string | null;
 
+  /** An icon to use as the document icon. */
   @Length({
     max: 50,
     msg: `icon must be 50 characters or less`,
@@ -365,7 +369,11 @@ class Document extends ParanoidModel<
       model.archivedAt ||
       model.template ||
       !model.publishedAt ||
-      !(model.changed("title") || model.changed("emoji")) ||
+      !(
+        model.changed("title") ||
+        model.changed("icon") ||
+        model.changed("color")
+      ) ||
       !model.collectionId
     ) {
       return;
@@ -721,6 +729,8 @@ class Document extends ParanoidModel<
     this.text = revision.text;
     this.title = revision.title;
     this.emoji = revision.emoji;
+    this.icon = revision.icon;
+    this.color = revision.color;
   };
 
   /**
@@ -1083,6 +1093,8 @@ class Document extends ParanoidModel<
       title: this.title,
       url: this.url,
       emoji: isNil(this.emoji) ? undefined : this.emoji,
+      icon: isNil(this.icon) ? undefined : this.icon,
+      color: isNil(this.color) ? undefined : this.color,
       children,
     };
   };

server/models/Revision.ts

@@ -71,13 +71,18 @@ class Revision extends IdModel<
   @Column(DataType.JSONB)
   content: ProsemirrorData;
 
+  /**
+   * An emoji to use as the document icon,
+   * This is used as fallback (for backward compat) when icon is not set.
+   */
   @Length({
-    max: 1,
-    msg: `Emoji must be a single character`,
+    max: 50,
+    msg: `Emoji must be 50 characters or less`,
   })
   @Column
   emoji: string | null;
 
+  /** An icon to use as the document icon. */
   @Length({
     max: 50,
     msg: `icon must be 50 characters or less`,
@@ -134,7 +139,7 @@ class Revision extends IdModel<
       title: document.title,
       text: document.text,
       emoji: document.emoji,
-      icon: document.emoji,
+      icon: document.icon,
       color: document.color,
       content: document.content,
       userId: document.lastModifiedById,

server/models/helpers/DocumentHelper.tsx

@@ -8,7 +8,8 @@ import { Node } from "prosemirror-model";
 import * as Y from "yjs";
 import textBetween from "@shared/editor/lib/textBetween";
 import { EditorStyleHelper } from "@shared/editor/styles/EditorStyleHelper";
-import { ProsemirrorData } from "@shared/types";
+import { IconType, ProsemirrorData } from "@shared/types";
+import { determineIconType } from "@shared/utils/icon";
 import { parser, serializer, schema } from "@server/editor";
 import { addTags } from "@server/logging/tracer";
 import { trace } from "@server/logging/tracing";
@@ -148,7 +149,10 @@ export class DocumentHelper {
       return text;
     }
 
-    const title = `${document.emoji ? document.emoji + " " : ""}${
+    const icon = document.icon ?? document.emoji;
+    const iconType = determineIconType(icon);
+
+    const title = `${iconType === IconType.Emoji ? icon + " " : ""}${
       document.title
     }`;