Feature: Add support for uploading images and automatically inferring their tags (#2)

* feature: Experimental support for asset uploads

* feature(web): Add new bookmark type asset

* feature: Add support for automatically tagging images

* fix: Add support for image assets in preview page

* use next Image for fetching the images

* Fix auth and error codes in the route handlers

* Add support for image uploads on mobile

* Fix typing of upload requests

* Remove the ugly dragging box

* Bump mobile version to 1.3

* Change the editor card placeholder to mention uploading images

* Fix a typo

* Change ios icon for photo library

* Silence typescript error

1 files changed, 33 insertions, 0 deletions

diff --git a/apps/mobile/components/bookmarks/BookmarkCard.tsx b/apps/mobile/components/bookmarks/BookmarkCard.tsx
index a969bc8b..ac6eaea4 100644
--- a/apps/mobile/components/bookmarks/BookmarkCard.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkCard.tsx
@@ -11,6 +11,7 @@ import Markdown from "react-native-markdown-display";
 import * as Haptics from "expo-haptics";
 import { Link } from "expo-router";
 import * as WebBrowser from "expo-web-browser";
+import useAppSettings from "@/lib/settings";
 import { api } from "@/lib/trpc";
 import { MenuView } from "@react-native-menu/menu";
 import { Ellipsis, Star } from "lucide-react-native";
@@ -239,6 +240,35 @@ function TextCard({ bookmark }: { bookmark: ZBookmark }) {
   );
 }
 
+function AssetCard({ bookmark }: { bookmark: ZBookmark }) {
+  const { settings } = useAppSettings();
+  if (bookmark.content.type !== "asset") {
+    throw new Error("Wrong content type rendered");
+  }
+
+  return (
+    <View className="flex gap-2">
+      <Image
+        source={{
+          uri: `${settings.address}/api/assets/${bookmark.content.assetId}`,
+          headers: {
+            Authorization: `Bearer ${settings.apiKey}`,
+          },
+        }}
+        className="h-56 min-h-56 w-full object-cover"
+      />
+      <View className="flex gap-2 p-2">
+        <TagList bookmark={bookmark} />
+        <Divider orientation="vertical" className="mt-2 h-0.5 w-full" />
+        <View className="mt-2 flex flex-row justify-between px-2 pb-2">
+          <View />
+          <ActionBar bookmark={bookmark} />
+        </View>
+      </View>
+    </View>
+  );
+}
+
 export default function BookmarkCard({
   bookmark: initialData,
 }: {
@@ -272,6 +302,9 @@ export default function BookmarkCard({
     case "text":
       comp = <TextCard bookmark={bookmark} />;
       break;
+    case "asset":
+      comp = <AssetCard bookmark={bookmark} />;
+      break;
   }
 
   return <View className="border-b border-gray-300 bg-white">{comp}</View>;