spb/rareindex

1import Link from 'next/link';2import { Bookmark, FolderPlus, GitCompareArrows, Sparkles } from 'lucide-react';3import { toggleWatchAction } from '@/lib/account/actions';4import { cn } from '@/lib/format';56/**7 * Asset actions: Watch (server action, signs in first when anonymous), Add to collection, Compare,8 * Ask AI. Rendered inline on desktop and as a sticky bottom bar on phones (§165).9 */10export function AssetActions({ assetId, slug, watched = false, variant = 'inline', className }: { assetId: string; slug: string; watched?: boolean; variant?: 'inline' | 'bar'; className?: string }) {11  const back = `/asset/${slug}`;12  const btn = variant === 'bar' ? 'flex flex-1 flex-col items-center justify-center gap-0.5 rounded-md py-1.5 text-[10px] font-medium text-muted active:bg-inset' : 'inline-flex h-9 items-center gap-1.5 rounded-md border border-border bg-elevated px-3 text-[12px] font-medium text-fg hover:bg-inset';13  const icon = variant === 'bar' ? 'h-5 w-5' : 'h-3.5 w-3.5';14  return (15    <div className={cn(variant === 'bar' ? 'fixed inset-x-0 z-40 border-t border-border bg-elevated/95 backdrop-blur supports-[backdrop-filter]:bg-elevated/85 md:hidden' : 'flex flex-wrap gap-2', className)} style={variant === 'bar' ? { bottom: 'calc(var(--ri-tabbar-h, 0px) + env(safe-area-inset-bottom))' } : undefined}>16      <div className={cn(variant === 'bar' ? 'mx-auto flex max-w-lg items-stretch gap-1 px-2 py-1' : 'contents')}>17        <form action={toggleWatchAction} className={variant === 'bar' ? 'flex flex-1' : 'contents'}>18          <input type="hidden" name="targetType" value="asset" />19          <input type="hidden" name="targetId" value={assetId} />20          <input type="hidden" name="back" value={back} />21          <button type="submit" className={cn(btn, watched && (variant === 'bar' ? 'text-fg' : 'border-fg'))} aria-pressed={watched}>22            <Bookmark className={cn(icon, watched && 'fill-current')} />23            {watched ? 'Watching' : 'Watch'}24          </button>25        </form>26        <Link href={`/collections?add=${assetId}`} className={btn}>27          <FolderPlus className={icon} />28          {variant === 'bar' ? 'Collect' : 'Add to collection'}29        </Link>30        <Link href={`/compare?a=${slug}`} className={btn}>31          <GitCompareArrows className={icon} />32          Compare33        </Link>34        <Link href={`/research?asset=${slug}`} className={cn(btn, variant === 'inline' && 'border-transparent bg-accent text-accent-fg hover:opacity-90')}>35          <Sparkles className={icon} />36          Ask AI37        </Link>38      </div>39    </div>40  );41}42