Update emojis and icons (#195)

apps/desktop/package.json

@@ -13,7 +13,7 @@
     "make": "electron-forge make",
     "publish": "electron-forge publish",
     "lint": "eslint --ext .ts,.tsx src",
-    "postinstall": "electron-rebuild"
+    "rebuild": "electron-rebuild -f -w better-sqlite3"
   },
   "devDependencies": {
     "@electron-forge/cli": "^7.8.3",

package-lock.json

@@ -36,7 +36,6 @@
     "apps/desktop": {
       "name": "@colanode/desktop",
       "version": "1.0.0",
-      "hasInstallScript": true,
       "dependencies": {
         "@colanode/client": "*",
         "@colanode/core": "*",
@@ -21001,6 +21000,12 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/sax": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
+      "license": "ISC"
+    },
     "node_modules/scheduler": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
@@ -21496,7 +21501,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -24831,7 +24835,8 @@
         "adm-zip": "^0.5.16",
         "better-sqlite3": "^12.2.0",
         "ky": "^1.8.2",
-        "svg-sprite": "^2.0.4"
+        "svg-sprite": "^2.0.4",
+        "svgo": "^4.0.0"
       },
       "devDependencies": {
         "@faker-js/faker": "^9.9.0",
@@ -24839,6 +24844,151 @@
         "@types/better-sqlite3": "^7.6.12",
         "@types/svg-sprite": "^0.0.39"
       }
+    },
+    "scripts/node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "scripts/node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "scripts/node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "scripts/node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "scripts/node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "scripts/node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "license": "CC0-1.0"
+    },
+    "scripts/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "scripts/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "scripts/node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "scripts/node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "license": "CC0-1.0"
+    },
+    "scripts/node_modules/svgo": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-4.0.0.tgz",
+      "integrity": "sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^11.1.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^3.0.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.1.1",
+        "sax": "^1.4.1"
+      },
+      "bin": {
+        "svgo": "bin/svgo.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
     }
   }
 }

packages/core/package.json

@@ -5,7 +5,11 @@
   "type": "module",
   "types": "./src/index.ts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./registry/*": "./src/registry/*",
+    "./lib/*": "./src/lib/*",
+    "./types/*": "./src/types/*",
+    "./synchronizers/*": "./src/synchronizers/*"
   },
   "files": [
     "src"

packages/ui/src/components/icons/icon-element.tsx

@@ -12,7 +12,7 @@ interface IconElementProps {
 const IconElementWeb = ({ id, className }: IconElementProps) => {
   return (
     <div className={cn('icon-element', className)}>
-      <svg>
+      <svg fill="currentColor" viewBox="0 0 24 24">
         <use href={`/assets/icons.svg#${id}`} />
       </svg>
     </div>

packages/ui/src/components/ui/sonner.tsx

@@ -7,7 +7,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
 
   return (
     <Sonner
-      theme={theme.value}
+      theme={theme.mode}
       className="toaster group"
       style={
         {

scripts/package.json

@@ -21,6 +21,7 @@
     "adm-zip": "^0.5.16",
     "better-sqlite3": "^12.2.0",
     "ky": "^1.8.2",
-    "svg-sprite": "^2.0.4"
+    "svg-sprite": "^2.0.4",
+    "svgo": "^4.0.0"
   }
 }

scripts/src/emojis/index.ts

@@ -101,7 +101,7 @@ const EMOJI_MART_DATA_FILE_PATH = path.join(
 );
 
 const TWEEMOJI_REPO = 'jdecked/twemoji';
-const TWEEMOJI_TAG = '15.1.0';
+const TWEEMOJI_TAG = '16.0.1';
 const TWEEMOJI_DIR_PATH = path.join(WORK_DIR_PATH, `twemoji-${TWEEMOJI_TAG}`);
 const TWEEMOJI_SVG_DIR_PATH = path.join(TWEEMOJI_DIR_PATH, 'assets', 'svg');
 
@@ -250,6 +250,7 @@ const initDatabase = () => {
 
   database.exec(CREATE_CATEGORIES_TABLE_SQL);
   database.exec(CREATE_EMOJITS_TABLE_SQL);
+  database.exec(CREATE_EMOJI_SKINS_TABLE_SQL);
   database.exec(CREATE_EMOJI_SVGS_TABLE_SQL);
   database.exec(CREATE_EMOJI_SEARCH_TABLE_SQL);
   database.exec(CREATE_EMOJI_CATEGORY_INDEX_SQL);
@@ -331,8 +332,10 @@ const processEmojis = (
   const insertSearch = database.prepare(INSERT_SEARCH_SQL);
   const insertSearchMin = minDatabase.prepare(INSERT_SEARCH_SQL);
 
+  const upsertEmojiSkin = database.prepare(UPSERT_EMOJI_SKIN_SQL);
+  const upsertEmojiSkinMin = minDatabase.prepare(UPSERT_EMOJI_SKIN_SQL);
+
   const upsertSvg = database.prepare(UPSERT_SVG_SQL);
-  const upsertEmojiSkin = minDatabase.prepare(UPSERT_EMOJI_SKIN_SQL);
 
   const existingMetadata = readExistingMetadata(database);
 
@@ -481,11 +484,17 @@ const processEmojis = (
           emoji_id: newEmoji.id,
           svg: svgBuffer,
         });
+
         upsertEmojiSkin.run({
           skin_id: skin.id,
           emoji_id: newEmoji.id,
         });
 
+        upsertEmojiSkinMin.run({
+          skin_id: skin.id,
+          emoji_id: newEmoji.id,
+        });
+
         sprite.add(skin.id, null, svgBuffer.toString('utf-8'));
       }
 

scripts/src/icons/index.ts

@@ -5,6 +5,7 @@ import AdmZip from 'adm-zip';
 import SQLite from 'better-sqlite3';
 import ky from 'ky';
 import SvgSprite from 'svg-sprite';
+import { optimize } from 'svgo';
 
 import { generateId, IdType } from '@colanode/core';
 
@@ -89,7 +90,7 @@ const REMIX_ICON_TAGS_FILE_PATH = path.join(REMIX_ICON_DIR_PATH, 'tags.json');
 const REMIX_ICON_ICONS_DIR_PATH = path.join(REMIX_ICON_DIR_PATH, 'icons');
 
 const SIMPLE_ICONS_REPO = 'simple-icons/simple-icons';
-const SIMPLE_ICONS_TAG = '14.13.0';
+const SIMPLE_ICONS_TAG = '15.12.0';
 const SIMPLE_ICONS_DIR_PATH = path.join(
   WORK_DIR_PATH,
   `simple-icons-${SIMPLE_ICONS_TAG}`
@@ -180,6 +181,37 @@ const downloadZipAndExtract = async (url: string, dir: string) => {
   zip.extractAllTo(dir, true);
 };
 
+const processSvgContent = (svgContent: string): string => {
+  try {
+    const { data } = optimize(svgContent, {
+      multipass: true,
+      plugins: [
+        {
+          name: 'addAttributesToSVGElement',
+          params: {
+            attributes: [
+              {
+                fill: 'currentColor',
+              },
+            ],
+          },
+        },
+        {
+          name: 'removeTitle',
+        },
+      ],
+    });
+
+    return data;
+  } catch (error) {
+    console.warn(
+      'Failed to process SVG with SVGO, falling back to original:',
+      error
+    );
+    return svgContent;
+  }
+};
+
 const downloadRemixIconRepo = async () => {
   console.log('Downloading remix icon repo...');
   const url = `${GITHUB_DOMAIN}/${REMIX_ICON_REPO}/archive/refs/tags/v${REMIX_ICON_TAG}.zip`;
@@ -378,13 +410,15 @@ const processIcons = (
       const svgPath = path.join(REMIX_ICON_ICONS_DIR_PATH, category, file);
       if (fs.existsSync(svgPath)) {
         const svgBuffer = fs.readFileSync(svgPath);
+        const svgContent = svgBuffer.toString('utf-8');
+        const processedSvg = processSvgContent(svgContent);
 
         upsertSvg.run({
           id: newIcon.id,
-          svg: svgBuffer,
+          svg: Buffer.from(processedSvg),
         });
 
-        sprite.add(newIcon.id, null, svgBuffer.toString('utf-8'));
+        sprite.add(newIcon.id, null, processedSvg);
       }
     }
   }
@@ -472,10 +506,12 @@ const processIcons = (
 
     if (fs.existsSync(svgFile)) {
       const svgBuffer = fs.readFileSync(svgFile);
+      const svgContent = svgBuffer.toString('utf-8');
+      const processedSvg = processSvgContent(svgContent);
 
-      upsertSvg.run({ id: logo.id, svg: svgBuffer });
+      upsertSvg.run({ id: logo.id, svg: Buffer.from(processedSvg) });
 
-      sprite.add(logo.id, null, svgBuffer.toString('utf-8'));
+      sprite.add(logo.id, null, processedSvg);
     }
   }