refactor: Start tracking bookmark assets in the assets table

apps/web/app/api/assets/[assetId]/route.ts

@@ -1,5 +1,7 @@
 import { createContextFromRequest } from "@/server/api/client";
+import { and, eq } from "drizzle-orm";
 
+import { assets } from "@hoarder/db/schema";
 import { readAsset } from "@hoarder/shared/assetdb";
 
 export const dynamic = "force-dynamic";
@@ -11,6 +13,15 @@ export async function GET(
   if (!ctx.user) {
     return Response.json({ error: "Unauthorized" }, { status: 401 });
   }
+
+  const assetDb = await ctx.db.query.assets.findFirst({
+    where: and(eq(assets.id, params.assetId), eq(assets.userId, ctx.user.id)),
+  });
+
+  if (!assetDb) {
+    return Response.json({ error: "Asset not found" }, { status: 404 });
+  }
+
   const { asset, metadata } = await readAsset({
     userId: ctx.user.id,
     assetId: params.assetId,

apps/web/app/api/assets/route.ts

@@ -2,6 +2,7 @@ import { createContextFromRequest } from "@/server/api/client";
 import { TRPCError } from "@trpc/server";
 
 import type { ZUploadResponse } from "@hoarder/shared/types/uploads";
+import { assets, AssetTypes } from "@hoarder/db/schema";
 import {
   newAssetId,
   saveAsset,
@@ -43,8 +44,22 @@ export async function POST(request: Request) {
     return Response.json({ error: "Bad request" }, { status: 400 });
   }
 
-  const assetId = newAssetId();
   const fileName = data.name;
+  const [assetDb] = await ctx.db
+    .insert(assets)
+    .values({
+      id: newAssetId(),
+      // Initially, uploads are uploaded for unknown purpose
+      // And without an attached bookmark.
+      assetType: AssetTypes.UNKNOWN,
+      bookmarkId: null,
+      userId: ctx.user.id,
+      contentType,
+      size: data.size,
+      fileName,
+    })
+    .returning();
+  const assetId = assetDb.id;
 
   await saveAsset({
     userId: ctx.user.id,

apps/web/components/dashboard/preview/AttachmentBox.tsx

@@ -16,6 +16,7 @@ import {
   ChevronsDownUp,
   Download,
   Image,
+  Paperclip,
   Pencil,
   Plus,
   Trash2,
@@ -35,13 +36,16 @@ import {
 import {
   humanFriendlyNameForAssertType,
   isAllowedToAttachAsset,
+  isAllowedToDetachAsset,
 } from "@hoarder/trpc/lib/attachments";
 
 export default function AttachmentBox({ bookmark }: { bookmark: ZBookmark }) {
   const typeToIcon: Record<ZAssetType, React.ReactNode> = {
     screenshot: <Camera className="size-4" />,
     fullPageArchive: <Archive className="size-4" />,
     bannerImage: <Image className="size-4" />,
+    bookmarkAsset: <Paperclip className="size-4" />,
+    unknown: <Paperclip className="size-4" />,
   };
 
   const { mutate: attachAsset, isPending: isAttaching } =
@@ -100,11 +104,6 @@ export default function AttachmentBox({ bookmark }: { bookmark: ZBookmark }) {
 
   bookmark.assets.sort((a, b) => a.assetType.localeCompare(b.assetType));
 
-  if (bookmark.content.type == BookmarkTypes.ASSET) {
-    // Currently, we don't allow attaching assets to assets types.
-    return null;
-  }
-
   return (
     <Collapsible>
       <CollapsibleTrigger className="flex w-full items-center justify-between gap-2 text-sm text-gray-400">
@@ -156,59 +155,62 @@ export default function AttachmentBox({ bookmark }: { bookmark: ZBookmark }) {
                   <Pencil className="size-4" />
                 </FilePickerButton>
               )}
-              <ActionConfirmingDialog
-                title="Delete Attachment?"
-                description={`Are you sure you want to delete the attachment of the bookmark?`}
-                actionButton={(setDialogOpen) => (
-                  <ActionButton
-                    loading={isDetaching}
-                    variant="destructive"
-                    onClick={() =>
-                      detachAsset(
-                        { bookmarkId: bookmark.id, assetId: asset.id },
-                        { onSettled: () => setDialogOpen(false) },
-                      )
-                    }
-                  >
-                    <Trash2 className="mr-2 size-4" />
-                    Delete
-                  </ActionButton>
-                )}
-              >
-                <Button variant="none" size="none" title="Delete">
-                  <Trash2 className="size-4" />
-                </Button>
-              </ActionConfirmingDialog>
+              {isAllowedToDetachAsset(asset.assetType) && (
+                <ActionConfirmingDialog
+                  title="Delete Attachment?"
+                  description={`Are you sure you want to delete the attachment of the bookmark?`}
+                  actionButton={(setDialogOpen) => (
+                    <ActionButton
+                      loading={isDetaching}
+                      variant="destructive"
+                      onClick={() =>
+                        detachAsset(
+                          { bookmarkId: bookmark.id, assetId: asset.id },
+                          { onSettled: () => setDialogOpen(false) },
+                        )
+                      }
+                    >
+                      <Trash2 className="mr-2 size-4" />
+                      Delete
+                    </ActionButton>
+                  )}
+                >
+                  <Button variant="none" size="none" title="Delete">
+                    <Trash2 className="size-4" />
+                  </Button>
+                </ActionConfirmingDialog>
+              )}
             </div>
           </div>
         ))}
-        {!bookmark.assets.some((asset) => asset.assetType == "bannerImage") && (
-          <FilePickerButton
-            title="Attach a Banner"
-            loading={isAttaching}
-            accept=".jgp,.JPG,.jpeg,.png,.webp"
-            multiple={false}
-            variant="ghost"
-            size="none"
-            className="flex w-full items-center justify-center gap-2"
-            onFileSelect={(file) =>
-              uploadAsset(file, {
-                onSuccess: (resp) => {
-                  attachAsset({
-                    bookmarkId: bookmark.id,
-                    asset: {
-                      id: resp.assetId,
-                      assetType: "bannerImage",
-                    },
-                  });
-                },
-              })
-            }
-          >
-            <Plus className="size-4" />
-            Attach a Banner
-          </FilePickerButton>
-        )}
+        {!bookmark.assets.some((asset) => asset.assetType == "bannerImage") &&
+          bookmark.content.type != BookmarkTypes.ASSET && (
+            <FilePickerButton
+              title="Attach a Banner"
+              loading={isAttaching}
+              accept=".jgp,.JPG,.jpeg,.png,.webp"
+              multiple={false}
+              variant="ghost"
+              size="none"
+              className="flex w-full items-center justify-center gap-2"
+              onFileSelect={(file) =>
+                uploadAsset(file, {
+                  onSuccess: (resp) => {
+                    attachAsset({
+                      bookmarkId: bookmark.id,
+                      asset: {
+                        id: resp.assetId,
+                        assetType: "bannerImage",
+                      },
+                    });
+                  },
+                })
+              }
+            >
+              <Plus className="size-4" />
+              Attach a Banner
+            </FilePickerButton>
+          )}
       </CollapsibleContent>
     </Collapsible>
   );