improve stream sidebar experience and avatar affordance (#284)

* fix awkward stream list experience

* fix avatar change affordance

* cleanup unnecessary logic

* cleanup unnecessary logic and complexity

* unused var

js/desktop/src/features/particles/stream-list-sidebar.tsx

@@ -10,7 +10,6 @@ import { KeyHint } from '@/components/key-hint';
 import { ScrollArea } from '@/components/ui/scroll-area';
 
 interface StreamListSidebarProps {
-  streamName: string;
   items: Particle[];
   networkId: string;
   currentIndex: number;
@@ -24,7 +23,6 @@ interface StreamListSidebarProps {
  * nothing auto-advances.
  */
 export function StreamListSidebar({
-  streamName,
   items,
   networkId,
   currentIndex,
@@ -41,13 +39,12 @@ export function StreamListSidebar({
   }, [currentIndex]);
 
   return (
-    <aside className="dark flex w-96 shrink-0 flex-col border-l border-white/10 bg-zinc-950">
+    <aside className="dark flex max-w-60 shrink-0 flex-col border-l border-white/10 bg-zinc-950">
       <div className="flex shrink-0 items-center gap-2 border-b border-white/10 px-4 py-3">
         <List className="size-3.5 text-white/40" />
-        <span className="truncate text-sm font-medium text-white/90">
-          {streamName}
+        <span className="truncate text-sm font-medium text-white/90 mr-auto">
+          {items.length} messages
         </span>
-        <span className="ml-auto text-xs text-white/40">{items.length}</span>
         <KeyHint
           keys="L"
           onClick={onToggle}
@@ -144,7 +141,7 @@ function ChatRowContent({ particle }: { particle: Particle }) {
   switch (particle.type) {
     case 'text':
       return (
-        <p className="line-clamp-3 text-xs leading-relaxed whitespace-pre-line text-white/70">
+        <p className="line-clamp-2 text-xs leading-relaxed whitespace-pre-line text-white/70">
           {particle.properties.content}
         </p>
       );

js/desktop/src/features/particles/stream-view.tsx

@@ -212,11 +212,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
     platform.autoplay.dismiss();
   });
 
-  const userId = useAuthStore((s) => s.user?.id);
-  const { mode, toggle: toggleViewMode } = useStreamViewMode(
-    streamParticle,
-    userId,
-  );
+  const { mode, toggle: toggleViewMode } = useStreamViewMode();
 
   const {
     children,
@@ -572,7 +568,6 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
       {/* Browse sidebar — a separate chat-like panel beside the stream */}
       {mode === 'list' && (
         <StreamListSidebar
-          streamName={streamParticle.properties.name}
           items={children}
           networkId={networkId}
           currentIndex={currentIndex}

js/desktop/src/features/settings-page.tsx

@@ -145,13 +145,14 @@ export default function SettingsPage() {
             aria-label="Change profile picture"
           >
             <HumanAvatar
-              size="lg"
+              className="size-16"
               avatarObjectId={user?.avatar_object_id}
               initials={initials}
-              fallbackClassName="bg-primary/10 text-primary font-medium"
+              fallbackClassName="bg-primary/10 text-primary text-xl font-medium"
             />
-            <span className="absolute inset-0 flex items-center justify-center rounded-full bg-black/40 opacity-0 transition-opacity group-hover:opacity-100">
-              <Camera className="size-4 text-white" />
+            <span className="absolute inset-0 flex items-center justify-center rounded-full bg-black/40 opacity-0 transition-opacity group-hover:opacity-100" />
+            <span className="bg-primary text-primary-foreground ring-background absolute bottom-0 right-0 flex size-5 items-center justify-center rounded-full ring-2">
+              <Camera className="size-2.5" />
             </span>
           </button>
           <div className="min-w-0 flex-1">