krispire/spsays-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mention user position in post compose drawer

Browse Source
This commit is contained in:
gosangam
2026-06-10 16:52:21 +05:30
parent 909ae67320
commit 922d76e21f
1 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/selection-toolbar/compose-post.tsx
+40 -40
View File
@@ -186,6 +186,46 @@ export function ComposePost({
const body = (
<div className="space-y-4">
<div>
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
Mention people
</p>
{mentions.length > 0 ? (
<div className="mt-2 flex flex-wrap gap-2">
{mentions.map((u) => (
<span
key={u.id ?? u.handle}
className="inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-1 text-sm text-foreground"
>
@{u.handle}
<button
type="button"
onClick={() =>
setMentions((prev) => prev.filter((m) => m.id !== u.id))
}
aria-label={`Remove @${u.handle}`}
className="text-muted-foreground hover:text-foreground"
>
<X className="size-3.5" />
</button>
</span>
))}
</div>
) : null}
<div className="mt-2">
<MentionAutocomplete
excludeIds={mentions
.map((m) => m.id)
.filter((id): id is string => !!id)}
onSelect={(u) =>
setMentions((prev) =>
prev.some((m) => m.id === u.id) ? prev : [...prev, u],
)
}
/>
</div>
</div>
<div className="rounded-lg border border-border bg-muted/40 p-4">
<p className="text-[0.7rem] uppercase tracking-[0.18em] text-muted-foreground">
Caption (locked)
@@ -255,46 +295,6 @@ export function ComposePost({
) : null}
</div>
<div>
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
Mention people
</p>
{mentions.length > 0 ? (
<div className="mt-2 flex flex-wrap gap-2">
{mentions.map((u) => (
<span
key={u.id ?? u.handle}
className="inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-1 text-sm text-foreground"
>
@{u.handle}
<button
type="button"
onClick={() =>
setMentions((prev) => prev.filter((m) => m.id !== u.id))
}
aria-label={`Remove @${u.handle}`}
className="text-muted-foreground hover:text-foreground"
>
<X className="size-3.5" />
</button>
</span>
))}
</div>
) : null}
<div className="mt-2">
<MentionAutocomplete
excludeIds={mentions
.map((m) => m.id)
.filter((id): id is string => !!id)}
onSelect={(u) =>
setMentions((prev) =>
prev.some((m) => m.id === u.id) ? prev : [...prev, u],
)
}
/>
</div>
</div>
{error ? <p className="text-sm text-destructive">{error}</p> : null}
<button