mobile: fix icon loading

apps/mobile/.gitignore

@@ -5,7 +5,7 @@ artifacts/
 .DS_Store
 
 native/android/app/src/main/assets/
-
+native/fonts
 *Issues.md
 build_cache/
 #

apps/mobile/app/package.json

@@ -5,7 +5,6 @@
   "license": "GPL-3.0-or-later",
   "dependencies": {
     "@flyerhq/react-native-link-preview": "^1.6.0",
-    "@mdi/js": "^6.9.96",
     "absolutify": "^0.1.0",
     "dayjs": "^1.10.4",
     "entities": "^3.0.1",

apps/mobile/native/android/app/build.gradle

@@ -224,20 +224,22 @@ task deleteFiles(type: Delete) {
   delete './src/main/assets/static'
 }
 
-task copyFiles(type: Copy) {
+task copyEditorBundle(type: Copy) {
     from '../../../../../packages/editor-mobile/build.bundle'
     into './src/main/assets'
 }
-copyFiles.dependsOn(deleteFiles)
-preBuild.dependsOn(copyFiles)
+
+task copyFontFiles(type: Copy) {
+    from '../../fonts'
+    into './src/main/assets/fonts'
+}
 
 
-project.ext.vectoricons = [
-    iconFontNames: ['MaterialCommunityIcons.ttf' ],
-    iconFontsDir: "../../../node_modules/react-native-vector-icons/Fonts"
-]
+copyEditorBundle.dependsOn(deleteFiles)
+copyFontFiles.dependsOn(copyEditorBundle);
+preBuild.dependsOn(copyFontFiles)
+
 
-apply from: "../../../node_modules/react-native-vector-icons/fonts.gradle"
 
 apply from: file("../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
 

apps/mobile/package-lock.json

@@ -210,7 +210,6 @@
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@flyerhq/react-native-link-preview": "^1.6.0",
-        "@mdi/js": "^6.9.96",
         "@streetwriters/showdown": "^3.0.1-alpha.2",
         "absolutify": "^0.1.0",
         "buffer": "^6.0.3",
@@ -6761,11 +6760,6 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
-    "node_modules/@mdi/js": {
-      "version": "6.9.96",
-      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.9.96.tgz",
-      "integrity": "sha512-rK0/vLFaiItYS2W7uVmaKPKnhNQE4XVkylpk5njtVwENnp8elwY5uRL6qvdj2esuvUHG7DwygE4Qu3eKxxuJiQ=="
-    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -28898,11 +28892,6 @@
         }
       }
     },
-    "@mdi/js": {
-      "version": "6.9.96",
-      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.9.96.tgz",
-      "integrity": "sha512-rK0/vLFaiItYS2W7uVmaKPKnhNQE4XVkylpk5njtVwENnp8elwY5uRL6qvdj2esuvUHG7DwygE4Qu3eKxxuJiQ=="
-    },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -29086,7 +29075,6 @@
       "version": "file:app",
       "requires": {
         "@flyerhq/react-native-link-preview": "^1.6.0",
-        "@mdi/js": "^6.9.96",
         "@streetwriters/showdown": "^3.0.1-alpha.2",
         "absolutify": "^0.1.0",
         "buffer": "^6.0.3",

apps/mobile/package.json

@@ -8,7 +8,7 @@
     "app/"
   ],
   "scripts": {
-    "postinstall": "patch-package",
+    "postinstall": "patch-package && node ./scripts/optimize-fonts.mjs",
     "run-android": "cd native && react-native run-android --active-arch-only",
     "run-ios": "cd native && react-native run-ios",
     "start": "cd native && react-native start",
@@ -23,10 +23,10 @@
     "release-android-bundle": "cd native/android && ./gradlew bundleRelease --no-daemon"
   },
   "devDependencies": {
+    "fonteditor-core": "^2.1.11",
     "otplib": "12.0.1",
     "patch-package": "7.0.0",
-    "react-refresh": "0.14.0",
-    "fonteditor-core": "^2.1.11"
+    "react-refresh": "0.14.0"
   },
   "dependencies": {
     "@notesnook/common": "file:../../packages/common",

apps/mobile/scripts/optimize-fonts.mjs

@@ -18,13 +18,31 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import fg from "fast-glob";
-import { readFile, writeFile } from "fs/promises";
+import { Font } from "fonteditor-core";
+import { existsSync } from "fs";
+import { mkdir, readFile, writeFile } from "fs/promises";
 import Listr from "listr";
 import os from "os";
 import path from "path";
 import { fileURLToPath } from "url";
-import { existsSync } from "fs";
-import { Font } from "fonteditor-core";
+
+const EXTRA_ICON_NAMES = [
+  "menu",
+  "lock-open-outline",
+  "key-outline",
+  "pin-off-outline",
+  "pin-outline",
+  "star-off",
+  "star-outline",
+  "link-variant-remove",
+  "link-variant",
+  "bell",
+  "bell-off-outline",
+  "check",
+  "plus",
+  "magnify",
+  "plus"
+];
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -36,6 +54,14 @@ const GLYPH_MAP_PATH = path.join(
   "glyphmaps",
   "MaterialCommunityIcons.json"
 );
+const GLYPH_MAP_OLD_PATH = path.join(
+  ROOT_DIR,
+  "node_modules",
+  "react-native-vector-icons",
+  "glyphmaps",
+  "MaterialCommunityIcons.old.json"
+);
+
 const ICON_FONT_PATH = path.join(
   ROOT_DIR,
   "node_modules",
@@ -44,11 +70,21 @@ const ICON_FONT_PATH = path.join(
   "MaterialCommunityIcons.ttf"
 );
 
-if (!existsSync(GLYPH_MAP_PATH)) throw new Error("Glyph file not found.");
+if (!existsSync(GLYPH_MAP_OLD_PATH) && !existsSync(GLYPH_MAP_PATH))
+  throw new Error("Glyph file not found.");
 
-const glyphs = JSON.parse(await readFile(GLYPH_MAP_PATH, "utf-8"));
+if (!existsSync(GLYPH_MAP_OLD_PATH)) {
+  await writeFile(
+    GLYPH_MAP_OLD_PATH,
+    await readFile(GLYPH_MAP_PATH, "utf-8"),
+    "utf-8"
+  );
+}
+
+const glyphs = JSON.parse(await readFile(GLYPH_MAP_OLD_PATH, "utf-8"));
 const files = await fg("app/**/*.{js,jsx,ts,tsx}");
 const pattern = /.name="(.+?)"/gm;
+
 const glyphCodepoints = new Set();
 
 class SilentRenderer {
@@ -60,6 +96,7 @@ class SilentRenderer {
 
   end() {}
 }
+const MODIFIED_GLYPH_MAP = {};
 
 const tasks = new Listr([], {
   concurrent: os.cpus().length,
@@ -70,19 +107,38 @@ for (const filePath of files) {
     title: `Searching ${filePath}`,
     task: async () => {
       const file = await readFile(filePath, "utf-8");
-      for (const m of file.matchAll(pattern)) {
-        if (!glyphs[m[1]]) continue;
-        glyphCodepoints.add(glyphs[m[1]]);
+      const matches = [
+        ...file.matchAll(pattern),
+        ...file.matchAll(/.icon: "(.+?)"/gm)
+      ];
+      const icons = matches
+        .map((m) => m[1])
+        .filter((value) => value !== null && value !== undefined);
+      icons.push(...EXTRA_ICON_NAMES);
+
+      for (const icon of icons) {
+        if (!glyphs[icon]) continue;
+        MODIFIED_GLYPH_MAP[icon] = glyphs[icon];
+        glyphCodepoints.add(glyphs[icon]);
       }
     }
   });
 }
-await tasks.run();
 
+await tasks.run();
 const font = Font.create(await readFile(ICON_FONT_PATH), {
   type: "ttf",
   subset: Array.from(glyphCodepoints.values()),
   hinting: true
 });
 
-await writeFile("out.ttf", font.write({ type: "ttf", hinting: true }));
+if (!existsSync(path.join(ROOT_DIR, "native", "fonts"))) {
+  await mkdir(path.join(ROOT_DIR, "native", "fonts"));
+}
+
+await writeFile(
+  path.join(ROOT_DIR, "native", "fonts", "MaterialCommunityIcons.ttf"),
+  font.write({ type: "ttf", hinting: true })
+);
+
+await writeFile(GLYPH_MAP_PATH, JSON.stringify(MODIFIED_GLYPH_MAP), "utf-8");