fix: share modal UX improvements and creator name fallback
All checks were successful
CI / ci (push) Successful in 1m26s
CI / e2e (push) Has been skipped
CI / deploy (push) Successful in 21s

- 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:
2026-04-13 20:49:28 +02:00
parent 4c80e9aa3c
commit 51c8703a3d
2 changed files with 15 additions and 15 deletions

View File

@@ -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 && (

View File

@@ -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>
))}