feat: Add support for user uploaded files (#2100)

* feat: add user file upload support for bookmarks

Add a new "user-uploaded" asset type that allows users to upload and
attach their own files to bookmarks from the attachment box in the
bookmark preview page.

Changes:
- Add USER_UPLOADED asset type to database schema
- Add userUploaded to zAssetTypesSchema for type safety
- Update attachment permissions to allow attaching/detaching user files
- Add fileName field to asset schema for displaying custom filenames
- Add "Upload File" button in AttachmentBox component
- Display actual filename for user-uploaded files
- Allow any file type for user uploads (respects existing upload limits)
- Add Upload icon for user-uploaded files

Fixes #1863 related asset attachment improvements

* fix: ensure fileName is returned and remove edit button for user uploads

- Fix attachAsset mutation to fetch and return complete asset with fileName
  instead of just returning the input (which lacks fileName)
- Remove replace/edit button for user-uploaded files - users can only
  delete and re-upload instead
- This ensures the filename displays correctly in the UI immediately
  after upload

Fixes fileName propagation issue for user-uploaded assets

* fix asset file name

* remove filename from attach asset api

---------

Co-authored-by: Claude <noreply@anthropic.com>

4 files changed, 20 insertions, 4 deletions

diff --git a/packages/trpc/lib/attachments.ts b/packages/trpc/lib/attachments.ts
index af484462..7a4e2668 100644
--- a/packages/trpc/lib/attachments.ts
+++ b/packages/trpc/lib/attachments.ts
@@ -16,6 +16,7 @@ export function mapDBAssetTypeToUserType(assetType: AssetTypes): ZAssetType {
     [AssetTypes.LINK_VIDEO]: "video",
     [AssetTypes.LINK_HTML_CONTENT]: "linkHtmlContent",
     [AssetTypes.BOOKMARK_ASSET]: "bookmarkAsset",
+    [AssetTypes.USER_UPLOADED]: "userUploaded",
     [AssetTypes.UNKNOWN]: "bannerImage",
   };
   return map[assetType];
@@ -33,6 +34,7 @@ export function mapSchemaAssetTypeToDB(
     video: AssetTypes.LINK_VIDEO,
     bookmarkAsset: AssetTypes.BOOKMARK_ASSET,
     linkHtmlContent: AssetTypes.LINK_HTML_CONTENT,
+    userUploaded: AssetTypes.USER_UPLOADED,
     unknown: AssetTypes.UNKNOWN,
   };
   return map[assetType];
@@ -48,6 +50,7 @@ export function humanFriendlyNameForAssertType(type: ZAssetType) {
     video: "Video",
     bookmarkAsset: "Bookmark Asset",
     linkHtmlContent: "HTML Content",
+    userUploaded: "User Uploaded File",
     unknown: "Unknown",
   };
   return map[type];
@@ -63,6 +66,7 @@ export function isAllowedToAttachAsset(type: ZAssetType) {
     video: true,
     bookmarkAsset: false,
     linkHtmlContent: false,
+    userUploaded: true,
     unknown: false,
   };
   return map[type];
@@ -78,6 +82,7 @@ export function isAllowedToDetachAsset(type: ZAssetType) {
     video: true,
     bookmarkAsset: false,
     linkHtmlContent: false,
+    userUploaded: true,
     unknown: false,
   };
   return map[type];
diff --git a/packages/trpc/models/bookmarks.ts b/packages/trpc/models/bookmarks.ts
index e0864ec1..c689f64d 100644
--- a/packages/trpc/models/bookmarks.ts
+++ b/packages/trpc/models/bookmarks.ts
@@ -295,6 +295,7 @@ export class Bookmark implements PrivacyAware {
           acc[bookmarkId].assets.push({
             id: row.assets.id,
             assetType: mapDBAssetTypeToUserType(row.assets.assetType),
+            fileName: row.assets.fileName,
           });
         }
 
diff --git a/packages/trpc/routers/assets.ts b/packages/trpc/routers/assets.ts
index af508a4e..7be85446 100644
--- a/packages/trpc/routers/assets.ts
+++ b/packages/trpc/routers/assets.ts
@@ -99,7 +99,10 @@ export const assetsAppRouter = router({
     .input(
       z.object({
         bookmarkId: z.string(),
-        asset: zAssetSchema,
+        asset: z.object({
+          id: z.string(),
+          assetType: zAssetTypesSchema,
+        }),
       }),
     )
     .output(zAssetSchema)
@@ -112,7 +115,7 @@ export const assetsAppRouter = router({
           message: "You can't attach this type of asset",
         });
       }
-      await ctx.db
+      const [updatedAsset] = await ctx.db
         .update(assets)
         .set({
           assetType: mapSchemaAssetTypeToDB(input.asset.assetType),
@@ -120,8 +123,14 @@ export const assetsAppRouter = router({
         })
         .where(
           and(eq(assets.id, input.asset.id), eq(assets.userId, ctx.user.id)),
-        );
-      return input.asset;
+        )
+        .returning();
+
+      return {
+        id: updatedAsset.id,
+        assetType: mapDBAssetTypeToUserType(updatedAsset.assetType),
+        fileName: updatedAsset.fileName,
+      };
     }),
   replaceAsset: authedProcedure
     .input(
diff --git a/packages/trpc/routers/bookmarks.ts b/packages/trpc/routers/bookmarks.ts
index 5a2fc1eb..72c6c1d1 100644
--- a/packages/trpc/routers/bookmarks.ts
+++ b/packages/trpc/routers/bookmarks.ts
@@ -253,6 +253,7 @@ async function toZodSchema(
     assets: assets.map((a) => ({
       id: a.id,
       assetType: mapDBAssetTypeToUserType(a.assetType),
+      fileName: a.fileName,
     })),
     ...rest,
   };