feat: Update settings icon and fonts Ui

- Updated `@shopify/react-native-skia` to version 2.4.2. - Updated
`react-reconciler` to version 0.31.0. - Updated settings icon.

bun.lock

@@ -1,11 +1,12 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "ShiggyCord",
       "dependencies": {
         "@gullerya/object-observer": "^6.1.4",
-        "@shopify/react-native-skia": "^1.12.4",
+        "@shopify/react-native-skia": "^2.4.2",
         "@tanstack/react-query": "^5.83.0",
         "@types/chroma-js": "~2.4.5",
         "@types/lodash": "~4.17.20",
@@ -473,7 +474,7 @@
 
     "@semantic-release/release-notes-generator": ["@semantic-release/release-notes-generator@14.0.3", "", { "dependencies": { "conventional-changelog-angular": "^8.0.0", "conventional-changelog-writer": "^8.0.0", "conventional-commits-filter": "^5.0.0", "conventional-commits-parser": "^6.0.0", "debug": "^4.0.0", "get-stream": "^7.0.0", "import-from-esm": "^2.0.0", "into-stream": "^7.0.0", "lodash-es": "^4.17.21", "read-package-up": "^11.0.0" }, "peerDependencies": { "semantic-release": ">=20.1.0" } }, "sha512-XxAZRPWGwO5JwJtS83bRdoIhCiYIx8Vhr+u231pQAsdFIAbm19rSVJLdnBN+Avvk7CKvNQE/nJ4y7uqKH6WTiw=="],
 
-    "@shopify/react-native-skia": ["@shopify/react-native-skia@1.12.4", "", { "dependencies": { "canvaskit-wasm": "0.40.0", "react-reconciler": "0.27.0" }, "peerDependencies": { "react": ">=18.0 <19.0.0", "react-native": ">=0.64 <0.78.0", "react-native-reanimated": ">=2.0.0" }, "optionalPeers": ["react-native", "react-native-reanimated"], "bin": { "setup-skia-web": "scripts/setup-canvaskit.js" } }, "sha512-8QDIBKSU7XB3Lc1kAv4jSFddTQK8AE+1AEoJnQLNllsiex1gufLQ8kN7rs9zii+iboSY8tYKT7ocV+5cE2Exdw=="],
+    "@shopify/react-native-skia": ["@shopify/react-native-skia@2.4.2", "", { "dependencies": { "canvaskit-wasm": "0.40.0", "react-reconciler": "0.31.0" }, "peerDependencies": { "react": ">=19.0", "react-native": ">=0.78", "react-native-reanimated": ">=3.19.1" }, "optionalPeers": ["react-native", "react-native-reanimated"], "bin": { "setup-skia-web": "scripts/setup-canvaskit.js" } }, "sha512-W+boV6E/hvRPcA8L7QRKnLs+05/iMEDbhVRLIx0UpW7NOQ8EbWCnu16mCU9BYJ/4s/y3NyYNk+wfP45Gf0LARQ=="],
 
     "@sinclair/typebox": ["@sinclair/typebox@0.27.8", "", {}, "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA=="],
 
@@ -1415,7 +1416,7 @@
 
     "react-native-worklets": ["react-native-worklets@0.6.1", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "semver": "7.7.2" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*" } }, "sha512-URca8l7c7Uog7gv4mcg9KILdJlnbvwdS5yfXQYf5TDkD2W1VY1sduEKrD+sA3lUPXH/TG1vmXAvNxCNwPMYgGg=="],
 
-    "react-reconciler": ["react-reconciler@0.27.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.21.0" }, "peerDependencies": { "react": "^18.0.0" } }, "sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA=="],
+    "react-reconciler": ["react-reconciler@0.31.0", "", { "dependencies": { "scheduler": "^0.25.0" }, "peerDependencies": { "react": "^19.0.0" } }, "sha512-7Ob7Z+URmesIsIVRjnLoDGwBEG/tVitidU0nMsqX/eeJaLY89RISO/10ERe0MqmzuKUUB1rmY+h1itMbUHg9BQ=="],
 
     "react-refresh": ["react-refresh@0.14.2", "", {}, "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA=="],
 
@@ -2221,8 +2222,6 @@
 
     "react-native/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
-    "react-reconciler/scheduler": ["scheduler@0.21.0", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ=="],
-
     "read-pkg/parse-json": ["parse-json@8.3.0", "", { "dependencies": { "@babel/code-frame": "^7.26.2", "index-to-position": "^1.1.0", "type-fest": "^4.39.1" } }, "sha512-ybiGyvspI+fAoRQbIPRddCcSTV9/LsJbf0e/S85VLowVGzRmokfneg2kwVW/KU5rOXrPSbF1qAKPMgNTqqROQQ=="],
 
     "read-pkg/unicorn-magic": ["unicorn-magic@0.1.0", "", {}, "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ=="],

package.json

@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@gullerya/object-observer": "^6.1.4",
-    "@shopify/react-native-skia": "^1.12.4",
+    "@shopify/react-native-skia": "^2.4.2",
     "@tanstack/react-query": "^5.83.0",
     "@types/chroma-js": "~2.4.5",
     "@types/lodash": "~4.17.20",

src/core/ui/settings/index.ts

@@ -45,7 +45,7 @@ export default function initSettings() {
       {
         key: "BUNNY_FONTS",
         title: () => Strings.FONTS,
-        icon: findAssetId("ic_add_text"),
+        icon: findAssetId("LettersIcon"),
         render: () => import("@core/ui/settings/pages/Fonts"),
         usePredicate: () => isFontSupported(),
       },

src/core/ui/settings/pages/Fonts/FontCard.tsx

@@ -5,74 +5,12 @@ import { useProxy } from "@core/vendetta/storage";
 import { FontDefinition, fonts, selectFont } from "@lib/addons/fonts";
 import { findAssetId } from "@lib/api/assets";
 import { BundleUpdaterManager } from "@lib/api/native/modules";
-import { lazyDestructure } from "@lib/utils/lazy";
-import { findByProps } from "@metro";
-import { NavigationNative, tokens } from "@metro/common";
-import {
-  Button,
-  Card,
-  IconButton,
-  Stack,
-  Text,
-} from "@metro/common/components";
-// import * as Skia from "@shopify/react-native-skia"; // Commented out due to preview crashes
-// import { TextStyleSheet } from "@ui/styles"; // Commented out due to preview crashes
-// import { useMemo } from "react"; // Commented out due to preview crashes
+import { NavigationNative } from "@metro/common";
+import { Button, Card, IconButton, Text } from "@metro/common/components";
 import { View } from "react-native";
 
 import FontEditor from "./FontEditor";
 
-const { useToken } = lazyDestructure(() => findByProps("useToken")); // Commented out due to preview crashes
-
-// FontPreview component commented out due to crashes
-// tho, who even used this? Lol
-/*
-function FontPreview({ font }: { font: FontDefinition }) {
-  const TEXT_NORMAL = useToken(tokens.colors.TEXT_NORMAL);
-  const { fontFamily: fontFamilyList, fontSize } =
-    TextStyleSheet["text-md/medium"];
-  const fontFamily = fontFamilyList!.split(/,/g)[0];
-
-  const typeface = Skia.useFont(font.main[fontFamily])?.getTypeface();
-
-  const paragraph = useMemo(() => {
-    if (!typeface) return null;
-
-    const fMgr = SkiaApi.TypefaceFontProvider.Make();
-    fMgr.registerFont(typeface, fontFamily);
-
-    return SkiaApi.ParagraphBuilder.Make({}, fMgr)
-      .pushStyle({
-        color: SkiaApi.Color(TEXT_NORMAL),
-        fontFamilies: [fontFamily],
-        fontSize,
-      })
-      .addText(
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-      )
-      .pop()
-      .build();
-  }, [typeface]);
-
-  return (
-    // This does not work, actually :woeis:
-    <View style={{ height: 64 }}>
-      {typeface ? (
-        <Skia.Canvas style={{ height: 64 }}>
-          <Skia.Paragraph paragraph={paragraph} x={0} y={0} width={300} />
-        </Skia.Canvas>
-      ) : (
-        <View style={{ justifyContent: "center", alignItems: "center" }}>
-          <Text color="text-muted" variant="heading-lg/semibold">
-            Loading...
-          </Text>
-        </View>
-      )}
-    </View>
-  );
-}
-*/
-
 export default function FontCard({ item: font }: CardWrapper<FontDefinition>) {
   useProxy(fonts);
 
@@ -81,21 +19,18 @@ export default function FontCard({ item: font }: CardWrapper<FontDefinition>) {
 
   return (
     <Card style={{ padding: 18, borderRadius: 16, backgroundColor: "#23272a" }}>
-      <View style={{ flexDirection: "row", alignItems: "center" }}>
-        <View style={{ flex: 1, minWidth: 0 }}>
-          <Text variant="heading-lg/bold" style={{ marginBottom: 2 }}>
-            {font.name}
-          </Text>
-          {/* FontPreview commented out due to crashes */}
-          <View style={{ height: 64, justifyContent: "center", alignItems: "center" }}>
-            <Text color="text-muted" variant="heading-lg/semibold">
-              Preview unavailable
-            </Text>
-          </View>
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <View style={{ flex: 1 }}>
+          <Text variant="heading-lg/bold">{font.name}</Text>
         </View>
-        <View
-          style={{ marginLeft: 16, flexDirection: "row", alignItems: "center" }}
-        >
+
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
           <Button
             size="sm"
             variant={selected ? "secondary" : "primary"}