Function AssetCard

packages/app-core/src/components/NoteList.tsx:1055–1100

({
  asset,
  vaultRoot,
  onOpen,
  onContextMenu
}: {
  asset: AssetMeta
  vaultRoot: string | null
  onOpen: () => void
  onContextMenu?: (e: React.MouseEvent) => void
})

}

function AssetCard({
  asset,
  vaultRoot,
  onOpen,
  onContextMenu
}: {
  asset: AssetMeta
  vaultRoot: string | null
  onOpen: () => void
  onContextMenu?: (e: React.MouseEvent) => void
}): JSX.Element {
  const url = assetUrl(vaultRoot, asset.path)

  return (
    <button
      type="button"
      onClick={onOpen}
      onContextMenu={onContextMenu}
      draggable
      onDragStart={(e) => setDragPayload(e, { kind: 'asset', path: asset.path })}
      className="flex h-full min-h-[154px] flex-col overflow-hidden rounded-xl border border-paper-300/70 bg-paper-50/24 text-left transition-colors hover:border-paper-400 hover:bg-paper-100/40"
    >
      <div className="flex min-h-0 flex-1 items-center justify-center bg-paper-200/25">
        {asset.kind === 'image' && url ? (
          <img
            src={url}
            alt={asset.name}
            className="max-h-[170px] w-full object-cover"
            loading="lazy"
          />
        ) : (
          <div className="px-4 text-xs uppercase tracking-[0.18em] text-ink-500">
            {asset.kind}
          </div>
        )}
      </div>
      <div className="border-t border-paper-300/70 px-3 py-2">
        <div className="truncate text-sm font-medium text-ink-900">{asset.name}</div>
        <div className="mt-0.5 flex items-center justify-between gap-2 text-xs text-ink-500">
          <span className="truncate">{asset.path}</span>
          <span className="shrink-0">{formatBytes(asset.size)}</span>
        </div>
      </div>
    </button>
  )
}

function AssetRow({
  asset,