Update inbox conversation experience

desktop/src/app/routes/index.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 
+import { useAppNavigation } from "@/app/navigation/useAppNavigation";
 import { useChannelsQuery } from "@/features/channels/hooks";
 import { useIdentityQuery } from "@/shared/api/hooks";
 import { HomeScreen } from "@/features/home/ui/HomeScreen";
@@ -9,6 +10,7 @@ export const Route = createFileRoute("/")({
 });
 
 function HomeRouteComponent() {
+  const { goChannel } = useAppNavigation();
   const channelsQuery = useChannelsQuery();
   const identityQuery = useIdentityQuery();
   const channels = channelsQuery.data ?? [];
@@ -18,6 +20,9 @@ function HomeRouteComponent() {
     <HomeScreen
       availableChannelIds={availableChannelIds}
       currentPubkey={identityQuery.data?.pubkey}
+      onOpenContext={(channelId, messageId) => {
+        void goChannel(channelId, { messageId });
+      }}
     />
   );
 }

desktop/src/features/home/hooks.ts

@@ -7,7 +7,7 @@ export function useHomeFeedQuery() {
     queryKey: ["home-feed"],
     queryFn: () =>
       getHomeFeed({
-        limit: 12,
+        limit: 50,
         types: "mentions,needs_action,activity,agent_activity",
       }),
     staleTime: 15_000,

desktop/src/features/home/ui/HomeScreen.tsx

@@ -5,11 +5,13 @@ import { HomeView } from "@/features/home/ui/HomeView";
 type HomeScreenProps = {
   availableChannelIds: ReadonlySet<string>;
   currentPubkey?: string;
+  onOpenContext: (channelId: string, messageId: string) => void;
 };
 
 export function HomeScreen({
   availableChannelIds,
   currentPubkey,
+  onOpenContext,
 }: HomeScreenProps) {
   const homeFeedQuery = useHomeFeedQuery();
 
@@ -33,6 +35,7 @@ export function HomeScreen({
           }
           feed={homeFeedQuery.data}
           isLoading={homeFeedQuery.isLoading}
+          onOpenContext={onOpenContext}
           onRefresh={() => {
             void homeFeedQuery.refetch();
           }}

desktop/src/features/home/ui/HomeView.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/features/home/lib/inbox";
 import { useFeedItemState } from "@/features/home/useFeedItemState";
 import { useInboxThreadContext } from "@/features/home/useInboxThreadContext";
+import { useResizableInboxListWidth } from "@/features/home/useResizableInboxListWidth";
 import { InboxDetailPane } from "@/features/home/ui/InboxDetailPane";
 import { InboxListPane } from "@/features/home/ui/InboxListPane";
 import {
@@ -104,6 +105,7 @@ type HomeViewProps = {
   errorMessage?: string;
   currentPubkey?: string;
   availableChannelIds: ReadonlySet<string>;
+  onOpenContext: (channelId: string, messageId: string) => void;
   onRefresh: () => void;
 };
 
@@ -113,6 +115,7 @@ export function HomeView({
   errorMessage,
   currentPubkey,
   availableChannelIds,
+  onOpenContext,
   onRefresh,
 }: HomeViewProps) {
   const [filter, setFilter] = React.useState<InboxFilter>("all");
@@ -124,6 +127,12 @@ export function HomeView({
   const [localRepliesByItemId, setLocalRepliesByItemId] = React.useState<
     Record<string, InboxReply[]>
   >({});
+  const {
+    canResetInboxListWidth,
+    handleInboxListResizeStart,
+    handleInboxListWidthReset,
+    inboxListWidthPx,
+  } = useResizableInboxListWidth();
   const { doneSet, markDone, undoDone } = useFeedItemState(currentPubkey);
   const feedItems = React.useMemo(
     () =>
@@ -303,10 +312,12 @@ export function HomeView({
     );
   }
 
-  const canReply =
+  const canReact =
     selectedItem !== null &&
     selectedItem.item.channelId !== null &&
-    availableChannelIds.has(selectedItem.item.channelId) &&
+    availableChannelIds.has(selectedItem.item.channelId);
+  const canReply =
+    canReact &&
     selectedItem.item.kind !== 45001 &&
     selectedItem.item.kind !== 45003;
   const disabledReplyReason =
@@ -323,10 +334,15 @@ export function HomeView({
       selectedItem.item.pubkey.trim().toLowerCase();
 
   return (
-    <div className="flex-1 overflow-hidden">
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
       <div
-        className="grid h-full min-h-0 w-full lg:grid-cols-[320px_minmax(0,1fr)]"
+        className="relative grid min-h-0 flex-1 w-full lg:grid-cols-[var(--home-inbox-list-width)_minmax(0,1fr)]"
         data-testid="home-inbox"
+        style={
+          {
+            "--home-inbox-list-width": `${inboxListWidthPx}px`,
+          } as React.CSSProperties
+        }
       >
         <InboxListPane
           doneSet={doneSet}
@@ -340,6 +356,25 @@ export function HomeView({
           selectedId={selectedItemId}
         />
 
+        <button
+          aria-label="Resize inbox list"
+          className="group absolute inset-y-0 z-20 hidden w-3 -translate-x-1/2 cursor-col-resize lg:block"
+          data-testid="home-inbox-list-resize-handle"
+          onDoubleClick={
+            canResetInboxListWidth ? handleInboxListWidthReset : undefined
+          }
+          onPointerDown={handleInboxListResizeStart}
+          style={{ left: `${inboxListWidthPx}px` }}
+          title={
+            canResetInboxListWidth
+              ? "Drag to resize. Double-click to reset width."
+              : "Drag to resize."
+          }
+          type="button"
+        >
+          <span className="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-transparent transition-colors group-hover:bg-border/80 group-focus-visible:bg-border/80" />
+        </button>
+
         <InboxDetailPane
           canDelete={canDelete}
           canOpenChannel={Boolean(
@@ -355,6 +390,7 @@ export function HomeView({
           item={selectedItem}
           messages={contextMessages}
           replies={selectedItemReplies}
+          contextChannelName={selectedChannel?.name ?? null}
           onDelete={() => {
             if (!selectedItem || !canDelete) {
               return;
@@ -369,6 +405,7 @@ export function HomeView({
                 setIsDeletingMessage(false);
               });
           }}
+          onOpenContext={onOpenContext}
           onSendReply={async ({
             content,
             mediaTags,
@@ -420,13 +457,8 @@ export function HomeView({
               setIsSendingReply(false);
             }
           }}
-          onToggleDone={() => {
-            if (selectedItem) {
-              handleToggleDone(selectedItem.id);
-            }
-          }}
           onToggleReaction={
-            canReply
+            canReact
               ? async (message, emoji, remove) => {
                   await toggleReactionMutation.mutateAsync({
                     emoji,
@@ -438,6 +470,11 @@ export function HomeView({
                 }
               : undefined
           }
+          onToggleDone={() => {
+            if (selectedItem) {
+              handleToggleDone(selectedItem.id);
+            }
+          }}
         />
       </div>
     </div>