fix: share modal UX improvements and creator name fallback
- Share links section always visible (not just in link/public mode), supporting future write-access link shares on public setups - Link list layout improved: URL and expiration stacked vertically, action buttons have hover backgrounds, trash icon replaces X - Public setup cards show "by Anonymous" when creator has no display name Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -29,9 +29,9 @@ export function PublicSetupCard({ setup }: PublicSetupCardProps) {
|
||||
<h3 className="text-sm font-semibold text-gray-900 truncate">
|
||||
{setup.name}
|
||||
</h3>
|
||||
{setup.creatorName && (
|
||||
<p className="text-xs text-gray-400 mt-0.5">by {setup.creatorName}</p>
|
||||
)}
|
||||
<p className="text-xs text-gray-400 mt-0.5">
|
||||
by {setup.creatorName || "Anonymous"}
|
||||
</p>
|
||||
<div className="flex items-center justify-between mt-2">
|
||||
<div className="flex items-center gap-2">
|
||||
{setup.itemCount != null && setup.itemCount > 0 && (
|
||||
|
||||
@@ -82,8 +82,7 @@ export function ShareModal({
|
||||
if (!isOpen) return null;
|
||||
|
||||
const activeLinks = shareLinks?.filter((link) => !link.revokedAt) ?? [];
|
||||
const showLinksSection =
|
||||
currentVisibility === "link" || currentVisibility === "public";
|
||||
const showLinksSection = true;
|
||||
const switchingToPrivateWithLinks =
|
||||
currentVisibility !== "private" && activeLinks.length > 0;
|
||||
|
||||
@@ -242,17 +241,18 @@ export function ShareModal({
|
||||
key={link.id}
|
||||
className="flex items-center gap-2 p-3 bg-gray-50 rounded-lg"
|
||||
>
|
||||
<span className="text-sm text-gray-600 truncate flex-1">
|
||||
{window.location.origin}/s/
|
||||
{link.token.slice(0, 8)}...
|
||||
</span>
|
||||
<span className="text-xs text-gray-400 shrink-0">
|
||||
{formatExpiration(link.expiresAt)}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm text-gray-600 truncate">
|
||||
/s/{link.token.slice(0, 12)}...
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
{formatExpiration(link.expiresAt)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleCopy(link.token, link.id)}
|
||||
className="p-1.5 text-gray-400 hover:text-gray-600 rounded"
|
||||
className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg shrink-0"
|
||||
title="Copy link"
|
||||
>
|
||||
<LucideIcon
|
||||
@@ -274,10 +274,10 @@ export function ShareModal({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => revokeShareLink.mutate(link.id)}
|
||||
className="p-1.5 text-gray-400 hover:text-red-500 rounded"
|
||||
className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg shrink-0"
|
||||
title="Revoke link"
|
||||
>
|
||||
<LucideIcon name="x" size={16} />
|
||||
<LucideIcon name="trash-2" size={16} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user