feat: Unified icon picker (#7038)

server/routes/api/collections/collections.test.ts

@@ -1,5 +1,4 @@
 import { CollectionPermission } from "@shared/types";
-import { colorPalette } from "@shared/utils/collections";
 import { Document, UserMembership, GroupPermission } from "@server/models";
 import {
   buildUser,
@@ -182,6 +181,23 @@ describe("#collections.move", () => {
     expect(body.success).toBe(true);
   });
 
+  it("should allow setting an emoji as icon", async () => {
+    const team = await buildTeam();
+    const admin = await buildAdmin({ teamId: team.id });
+    const collection = await buildCollection({ teamId: team.id });
+    const res = await server.post("/api/collections.move", {
+      body: {
+        token: admin.getJwtToken(),
+        id: collection.id,
+        index: "P",
+        icon: "😁",
+      },
+    });
+    const body = await res.json();
+    expect(res.status).toEqual(200);
+    expect(body.success).toBe(true);
+  });
+
   it("should return error when icon is not valid", async () => {
     const team = await buildTeam();
     const admin = await buildAdmin({ teamId: team.id });
@@ -1150,7 +1166,6 @@ describe("#collections.create", () => {
     expect(body.data.name).toBe("Test");
     expect(body.data.sort.field).toBe("index");
     expect(body.data.sort.direction).toBe("asc");
-    expect(colorPalette.includes(body.data.color)).toBeTruthy();
     expect(body.policies.length).toBe(1);
     expect(body.policies[0].abilities.read).toBeTruthy();
   });

server/routes/api/collections/schema.ts

@@ -1,21 +1,13 @@
+import emojiRegex from "emoji-regex";
 import isUndefined from "lodash/isUndefined";
 import { z } from "zod";
-import { randomElement } from "@shared/random";
 import { CollectionPermission, FileOperationFormat } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";
-import { colorPalette } from "@shared/utils/collections";
 import { Collection } from "@server/models";
+import { zodEnumFromObjectKeys } from "@server/utils/zod";
 import { ValidateColor, ValidateIndex } from "@server/validation";
 import { BaseSchema, ProsemirrorSchema } from "../schema";
 
-function zodEnumFromObjectKeys<
-  TI extends Record<string, any>,
-  R extends string = TI extends Record<infer R, any> ? R : never
->(input: TI): z.ZodEnum<[R, ...R[]]> {
-  const [firstKey, ...otherKeys] = Object.keys(input) as [R, ...R[]];
-  return z.enum([firstKey, ...otherKeys]);
-}
-
 const BaseIdSchema = z.object({
   /** Id of the collection to be updated */
   id: z.string(),
@@ -27,7 +19,7 @@ export const CollectionsCreateSchema = BaseSchema.extend({
     color: z
       .string()
       .regex(ValidateColor.regex, { message: ValidateColor.message })
-      .default(randomElement(colorPalette)),
+      .nullish(),
     description: z.string().nullish(),
     data: ProsemirrorSchema.nullish(),
     permission: z
@@ -35,7 +27,12 @@ export const CollectionsCreateSchema = BaseSchema.extend({
       .nullish()
       .transform((val) => (isUndefined(val) ? null : val)),
     sharing: z.boolean().default(true),
-    icon: zodEnumFromObjectKeys(IconLibrary.mapping).optional(),
+    icon: z
+      .union([
+        z.string().regex(emojiRegex()),
+        zodEnumFromObjectKeys(IconLibrary.mapping),
+      ])
+      .optional(),
     sort: z
       .object({
         field: z.union([z.literal("title"), z.literal("index")]),
@@ -174,7 +171,12 @@ export const CollectionsUpdateSchema = BaseSchema.extend({
     name: z.string().optional(),
     description: z.string().nullish(),
     data: ProsemirrorSchema.nullish(),
-    icon: zodEnumFromObjectKeys(IconLibrary.mapping).nullish(),
+    icon: z
+      .union([
+        z.string().regex(emojiRegex()),
+        zodEnumFromObjectKeys(IconLibrary.mapping),
+      ])
+      .nullish(),
     permission: z.nativeEnum(CollectionPermission).nullish(),
     color: z
       .string()