structural refactor and codebase improvements

spa/src/components/actor-list.tsx

@@ -1,5 +1,6 @@
 import type { LucideIcon } from "lucide-react"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Link } from "@tanstack/react-router"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Card, CardContent } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
 import { EmptyState } from "@/components/empty-state"
@@ -28,9 +29,9 @@ export function ActorList({ data, isPending, emptyIcon, emptyTitle, emptyDescrip
 }
 
 function actorHandle(actor: RemoteActorDto): string {
+  if (actor.handle.startsWith("@")) return actor.handle
   try {
-    const host = new URL(actor.url).host
-    return `@${actor.handle}@${host}`
+    return `@${actor.handle}@${new URL(actor.url).host}`
   } catch {
     return `@${actor.handle}`
   }
@@ -39,16 +40,31 @@ function actorHandle(actor: RemoteActorDto): string {
 function ActorCard({ actor, action }: { actor: RemoteActorDto; action?: React.ReactNode }) {
   const initial = (actor.display_name || actor.handle)[0]?.toUpperCase() ?? "?"
 
+  const identity = (
+    <div className="flex min-w-0 flex-1 items-center gap-3">
+      <Avatar>
+        {actor.avatar_url && <AvatarImage src={actor.avatar_url} />}
+        <AvatarFallback>{initial}</AvatarFallback>
+      </Avatar>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-semibold">{actor.display_name || actor.handle}</p>
+        <p className="truncate text-xs text-muted-foreground">{actorHandle(actor)}</p>
+      </div>
+    </div>
+  )
+
   return (
     <Card size="sm">
       <CardContent className="flex items-center gap-3">
-        <Avatar>
-          <AvatarFallback>{initial}</AvatarFallback>
-        </Avatar>
-        <div className="min-w-0 flex-1">
-          <p className="truncate text-sm font-semibold">{actor.display_name || actor.handle}</p>
-          <p className="truncate text-xs text-muted-foreground">{actorHandle(actor)}</p>
-        </div>
+        {actor.user_id ? (
+          <Link to="/users/$id" params={{ id: actor.user_id }} className="min-w-0 flex-1">
+            {identity}
+          </Link>
+        ) : (
+          <a href={actor.url} target="_blank" rel="noopener noreferrer" className="min-w-0 flex-1">
+            {identity}
+          </a>
+        )}
         {action}
       </CardContent>
     </Card>

spa/src/components/bottom-tab-bar.tsx

@@ -3,7 +3,13 @@ import { useTranslation } from "react-i18next"
 import { Home, Search, BookOpen, User } from "lucide-react"
 import { cn } from "@/lib/utils"
 
-export function BottomTabBar({ onLogTap }: { onLogTap: () => void }) {
+export function BottomTabBar({
+  onLogTap,
+  pendingCount = 0,
+}: {
+  onLogTap: () => void
+  pendingCount?: number
+}) {
   const { t } = useTranslation()
   const matchRoute = useMatchRoute()
 
@@ -55,7 +61,12 @@ export function BottomTabBar({ onLogTap }: { onLogTap: () => void }) {
                 active ? "text-foreground" : "text-muted-foreground",
               )}
             >
-              <tab.icon className="size-5" strokeWidth={active ? 2.5 : 2} />
+              <div className="relative">
+                <tab.icon className="size-5" strokeWidth={active ? 2.5 : 2} />
+                {tab.to === "/profile" && pendingCount > 0 && (
+                  <span className="absolute -right-1 -top-0.5 size-2 rounded-full bg-primary" />
+                )}
+              </div>
               <span className="text-[10px] font-medium">{tab.label}</span>
             </Link>
           )

spa/src/components/profile-view.tsx

@@ -41,7 +41,6 @@ export function ProfileView({
   userId,
   search,
   onSearchChange,
-  isFederated,
   bio,
   handle,
 }: ProfileViewProps) {
@@ -65,7 +64,7 @@ export function ProfileView({
         </Avatar>
         <div className="min-w-0 flex-1">
           <p className="font-semibold">{data.username}</p>
-          {isFederated && handle && (
+          {handle && (
             <div className="flex items-center gap-1 text-xs text-muted-foreground">
               <Globe className="size-3" />
               <span>{handle}</span>