GKaszewski/thoughts
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): show @handle and link to profile in federation actor lists

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-05-15 04:28:36 +02:00
parent d98c338e52
commit d88eb5d127
3 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
thoughts-frontend/components/federation/pending-requests.tsx
View File

@@ -11,6 +11,7 @@ import { useAuth } from "@/hooks/use-auth";
import { UserAvatar } from "@/components/user-avatar"; import { UserAvatar } from "@/components/user-avatar";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { toast } from "sonner"; import { toast } from "sonner";
import Link from "next/link";
interface Props { interface Props {
compact?: boolean; compact?: boolean;
@@ -56,7 +57,10 @@ export function PendingRequests({ compact = false }: Props) {
key={actor.url} key={actor.url}
className="flex items-center justify-between gap-3" className="flex items-center justify-between gap-3"
> >
<div className="flex items-center gap-2 min-w-0"> <Link
href={`/users/@${actor.handle}`}
className="flex items-center gap-2 min-w-0 hover:opacity-80"
>
<UserAvatar <UserAvatar
src={actor.avatarUrl} src={actor.avatarUrl}
alt={actor.displayName} alt={actor.displayName}
@@ -66,11 +70,11 @@ export function PendingRequests({ compact = false }: Props) {
<p className="text-sm font-medium truncate"> <p className="text-sm font-medium truncate">
{actor.displayName || actor.handle} {actor.displayName || actor.handle}
</p> </p>
<p className="text-xs text-muted-foreground truncate"> <p className="text-xs text-muted-foreground truncate font-mono">
{actor.handle} @{actor.handle}
</p> </p>
</div> </div>
</div> </Link>
<div className="flex gap-2 shrink-0"> <div className="flex gap-2 shrink-0">
<Button size="sm" onClick={() => accept(actor.url)}> <Button size="sm" onClick={() => accept(actor.url)}>
Accept Accept

12
thoughts-frontend/components/federation/remote-followers.tsx
View File

@@ -6,6 +6,7 @@ import { useAuth } from "@/hooks/use-auth";
import { UserAvatar } from "@/components/user-avatar"; import { UserAvatar } from "@/components/user-avatar";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { toast } from "sonner"; import { toast } from "sonner";
import Link from "next/link";
export function RemoteFollowers() { export function RemoteFollowers() {
const { token } = useAuth(); const { token } = useAuth();
@@ -36,7 +37,10 @@ export function RemoteFollowers() {
<ul className="space-y-3"> <ul className="space-y-3">
{followers.map((actor) => ( {followers.map((actor) => (
<li key={actor.url} className="flex items-center justify-between gap-3"> <li key={actor.url} className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2 min-w-0"> <Link
href={`/users/@${actor.handle}`}
className="flex items-center gap-2 min-w-0 hover:opacity-80"
>
<UserAvatar <UserAvatar
src={actor.avatarUrl} src={actor.avatarUrl}
alt={actor.displayName} alt={actor.displayName}
@@ -46,11 +50,11 @@ export function RemoteFollowers() {
<p className="text-sm font-medium truncate"> <p className="text-sm font-medium truncate">
{actor.displayName || actor.handle} {actor.displayName || actor.handle}
</p> </p>
<p className="text-xs text-muted-foreground truncate"> <p className="text-xs text-muted-foreground truncate font-mono">
{actor.handle} @{actor.handle}
</p> </p>
</div> </div>
</div> </Link>
<Button size="sm" variant="outline" onClick={() => remove(actor.url)}> <Button size="sm" variant="outline" onClick={() => remove(actor.url)}>
Remove Remove
</Button> </Button>

12
thoughts-frontend/components/federation/remote-following.tsx
View File

@@ -6,6 +6,7 @@ import { useAuth } from "@/hooks/use-auth";
import { UserAvatar } from "@/components/user-avatar"; import { UserAvatar } from "@/components/user-avatar";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { toast } from "sonner"; import { toast } from "sonner";
import Link from "next/link";
export function RemoteFollowing() { export function RemoteFollowing() {
const { token } = useAuth(); const { token } = useAuth();
@@ -36,7 +37,10 @@ export function RemoteFollowing() {
<ul className="space-y-3"> <ul className="space-y-3">
{following.map((actor) => ( {following.map((actor) => (
<li key={actor.url} className="flex items-center justify-between gap-3"> <li key={actor.url} className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2 min-w-0"> <Link
href={`/users/@${actor.handle}`}
className="flex items-center gap-2 min-w-0 hover:opacity-80"
>
<UserAvatar <UserAvatar
src={actor.avatarUrl} src={actor.avatarUrl}
alt={actor.displayName} alt={actor.displayName}
@@ -46,11 +50,11 @@ export function RemoteFollowing() {
<p className="text-sm font-medium truncate"> <p className="text-sm font-medium truncate">
{actor.displayName || actor.handle} {actor.displayName || actor.handle}
</p> </p>
<p className="text-xs text-muted-foreground truncate"> <p className="text-xs text-muted-foreground truncate font-mono">
{actor.handle} @{actor.handle}
</p> </p>
</div> </div>
</div> </Link>
<Button <Button
size="sm" size="sm"
variant="outline" variant="outline"