refactor(mobile): improve AI summary component and remove unused assets

- Remove Media.xcassets and Accent color set
- Update Utils.swift to hardcode accent color
- Enhance AISummary component with error handling and retry functionality
- Adjust layout and styling for AI summary
- Update image size calculation to handle undefined dimensions

Signed-off-by: Innei <tukon479@gmail.com>

apps/mobile/native/ios/Media.xcassets/Accent.colorset/Contents.json

@@ -1,38 +0,0 @@
-{
-  "colors": [
-    {
-      "color": {
-        "color-space": "srgb",
-        "components": {
-          "alpha": "1.000",
-          "blue": "0x00",
-          "green": "0x5C",
-          "red": "0xFF"
-        }
-      },
-      "idiom": "universal"
-    },
-    {
-      "appearances": [
-        {
-          "appearance": "luminosity",
-          "value": "dark"
-        }
-      ],
-      "color": {
-        "color-space": "srgb",
-        "components": {
-          "alpha": "1.000",
-          "blue": "0x00",
-          "green": "0x5C",
-          "red": "0xFF"
-        }
-      },
-      "idiom": "universal"
-    }
-  ],
-  "info": {
-    "author": "xcode",
-    "version": 1
-  }
-}

apps/mobile/native/ios/Media.xcassets/Contents.json

@@ -1,6 +0,0 @@
-{
-  "info": {
-    "author": "xcode",
-    "version": 1
-  }
-}

apps/mobile/native/ios/Utils/Utils.swift

@@ -12,8 +12,7 @@ private class Noop {}
 
 enum Utils {
   static let bundle = Bundle(for: Noop.self)
-  static let accentColor =
-    UIColor(named: "Accent", in: bundle, compatibleWith: nil) ?? UIColor.systemBlue
+  static let accentColor = UIColor(cgColor: .init(red: 255 / 255, green: 92 / 255, blue: 0, alpha: 1))
   
   static func getRootVC() -> UIViewController? {
     if let scene = UIApplication.shared.connectedScenes.first as? UIWindowScene,

apps/mobile/src/modules/ai/summary.tsx

@@ -1,8 +1,9 @@
 import { cn } from "@follow/utils"
 import type { FC } from "react"
 import * as React from "react"
-import { Text, View } from "react-native"
+import { Pressable, Text, View } from "react-native"
 import Animated, {
+  CurvedTransition,
   FadeIn,
   FadeOut,
   LinearTransition,
@@ -20,8 +21,11 @@ export const AISummary: FC<{
   className?: string
   summary: string
   pending?: boolean
-}> = ({ className, summary, pending = false }) => {
+  error?: string
+  onRetry?: () => void
+}> = ({ className, summary, pending = false, error, onRetry }) => {
   const labelColor = useColor("label")
+
   const opacity = useSharedValue(0.3)
 
   React.useEffect(() => {
@@ -38,20 +42,35 @@ export const AISummary: FC<{
   }))
 
   return (
-    <View className={cn("border-opaque-separator mx-1 rounded-lg border p-3", className)}>
+    <Animated.View
+      layout={CurvedTransition}
+      className={cn("border-opaque-separator mx-2 rounded border p-3", className)}
+    >
       <View className="flex-row items-center gap-2">
         <Magic2CuteReIcon height={16} width={16} color={labelColor} />
         <Text className="text-label font-medium">AI Summary</Text>
       </View>
       <Animated.View layout={LinearTransition}>
-        {pending ? (
-          <Animated.View entering={FadeIn} exiting={FadeOut} className="mt-2">
+        {error ? (
+          <Animated.View entering={FadeIn} exiting={FadeOut} className="mt-3">
+            <View className="flex-row items-center gap-2">
+              {/* <ErrorIcon width={16} height={16} color={errorColor} /> */}
+              <Text className="text-red flex-1 text-[15px]">{error}</Text>
+            </View>
+            {onRetry && (
+              <Pressable onPress={onRetry} className="mt-2">
+                <Text className="text-label text-[15px]">Retry</Text>
+              </Pressable>
+            )}
+          </Animated.View>
+        ) : pending ? (
+          <Animated.View entering={FadeIn} exiting={FadeOut} className="mt-3">
             <Animated.View
-              className="bg-secondary-label h-4 w-full rounded"
+              className="bg-quaternary-system-fill h-4 w-4/5 rounded"
               style={animatedStyle}
             />
             <Animated.View
-              className="bg-secondary-label mt-2 h-4 w-3/5 rounded"
+              className="bg-quaternary-system-fill mt-2 h-4 w-3/5 rounded"
               style={animatedStyle}
             />
           </Animated.View>
@@ -59,12 +78,12 @@ export const AISummary: FC<{
           <Animated.Text
             entering={FadeIn}
             exiting={FadeOut}
-            className="text-secondary-label mt-1 text-[15px] leading-normal"
+            className="text-secondary-label mt-3 text-[15px] leading-normal"
           >
-            {summary}
+            {summary.trim()}
           </Animated.Text>
         )}
       </Animated.View>
-    </View>
+    </Animated.View>
   )
 }

apps/mobile/src/modules/entry-content/EntryAISummary.tsx

@@ -23,6 +23,7 @@ export const EntryAISummary: FC<{
       className="mb-3"
       summary={summary?.summary || ""}
       pending={status === SummaryGeneratingStatus.Pending}
+      error={status === SummaryGeneratingStatus.Error ? "Failed to generate summary" : undefined}
     />
   )
 }

apps/mobile/web-app/html-renderer/hooks/useCalculateNaturalSize.tsx

@@ -5,11 +5,11 @@ export const calculateDimensions = ({
   height,
   max,
 }: {
-  width: number
-  height: number
+  width: number | undefined
+  height: number | undefined
   max: { width: number; height: number }
 }) => {
-  if (width === 0 || height === 0) return { width: 0, height: 0 }
+  if (!width || !height) return { width: undefined, height: undefined }
 
   const { width: maxW, height: maxH } = max
 

apps/mobile/web-app/html-renderer/src/components/image.tsx

@@ -28,8 +28,8 @@ export const MarkdownImage = (props: HTMLProps<"img">) => {
   const { height: scaleHeight, width: scaleWidth } = useMemo(
     () =>
       calculateDimensions({
-        width: image?.width ?? 0,
-        height: image?.height ?? 0,
+        width: image?.width,
+        height: image?.height,
         max: {
           width: ref?.clientWidth ?? 0,
           height: window.innerHeight,