xfeed 0.1.3 → 0.1.4

package/dist/index.js

@@ -439,7 +439,7 @@ import { cac } from "cac";
 
 // src/app.tsx
 import { useKeyboard as useKeyboard15, useRenderer as useRenderer2 } from "@opentui/react";
-import { useCallback as useCallback16, useEffect as useEffect21, useRef as useRef12, useState as useState23 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect20, useRef as useRef12, useState as useState23 } from "react";
 
 // src/components/Footer.tsx
 import { useTerminalDimensions } from "@opentui/react";
@@ -456,7 +456,10 @@ var colors = {
   mention: "#9B59B6",
   quoted: "#3498DB",
   reply: "#95A5A6",
-  handle: "#6B8A9E"
+  handle: "#6B8A9E",
+  liked: "#E0245E",
+  bookmarked: "#1DA1F2",
+  actionInactive: "#888888"
 };
 
 // src/components/Footer.tsx
@@ -466,8 +469,9 @@ var DEFAULT_BINDINGS = [
   { key: "l", label: "like" },
   { key: "b", label: "bookmark" },
   { key: "r", label: "refresh" },
-  { key: "n", label: "notifs" },
-  { key: "Tab", label: "view" },
+  { key: "1", label: "home" },
+  { key: "2", label: "bookmarks" },
+  { key: "3", label: "notifs" },
   { key: "q", label: "quit" }
 ];
 function KeybindingItem({ binding }) {
@@ -1916,7 +1920,7 @@ function useModal() {
 
 // src/experiments/index.tsx
 import { QueryClientProvider } from "@tanstack/react-query";
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 
 // src/experiments/query-client.ts
 import { QueryClient } from "@tanstack/react-query";
@@ -1998,7 +2002,7 @@ var queryKeys = {
 
 // src/experiments/TimelineScreenExperimental.tsx
 import { useKeyboard as useKeyboard9 } from "@opentui/react";
-import { useEffect as useEffect9, useRef as useRef4 } from "react";
+import { useEffect as useEffect9, useRef as useRef5 } from "react";
 
 // src/components/ErrorBanner.tsx
 import { useEffect as useEffect6 } from "react";
@@ -2230,7 +2234,10 @@ function ErrorBanner({
 
 // src/components/PostList.tsx
 import { useKeyboard as useKeyboard8 } from "@opentui/react";
-import { useEffect as useEffect7, useRef as useRef2 } from "react";
+import { useEffect as useEffect7, useRef as useRef3 } from "react";
+
+// src/components/PostCard.tsx
+import { useRef as useRef2, useState as useState10 } from "react";
 
 // src/components/QuotedPostCard.tsx
 import { jsxDEV as jsxDEV11 } from "@opentui/react/jsx-dev-runtime";
@@ -2390,8 +2397,85 @@ function PostCard({
   isJustLiked,
   isJustBookmarked,
   parentAuthorUsername,
-  mainPostAuthorUsername
+  mainPostAuthorUsername,
+  onCardClick,
+  onLikeClick,
+  onBookmarkClick
 }) {
+  const cardDragState = useRef2({ isDragging: false, startX: 0, startY: 0 });
+  const likeDragState = useRef2({ isDragging: false, startX: 0, startY: 0 });
+  const bookmarkDragState = useRef2({ isDragging: false, startX: 0, startY: 0 });
+  const DRAG_THRESHOLD = 3;
+  const handleCardMouse = onCardClick ? (event) => {
+    if (event.button !== 0)
+      return;
+    if (event.type === "down") {
+      cardDragState.current = {
+        isDragging: false,
+        startX: event.x,
+        startY: event.y
+      };
+    } else if (event.type === "drag") {
+      const dx = Math.abs(event.x - cardDragState.current.startX);
+      const dy = Math.abs(event.y - cardDragState.current.startY);
+      if (dx > DRAG_THRESHOLD || dy > DRAG_THRESHOLD) {
+        cardDragState.current.isDragging = true;
+      }
+    } else if (event.type === "up") {
+      if (!cardDragState.current.isDragging) {
+        onCardClick();
+      }
+      cardDragState.current.isDragging = false;
+    }
+  } : undefined;
+  const handleLikeMouse = onLikeClick ? (event) => {
+    if (event.button !== 0)
+      return;
+    event.stopPropagation();
+    if (event.type === "down") {
+      likeDragState.current = {
+        isDragging: false,
+        startX: event.x,
+        startY: event.y
+      };
+    } else if (event.type === "drag") {
+      const dx = Math.abs(event.x - likeDragState.current.startX);
+      const dy = Math.abs(event.y - likeDragState.current.startY);
+      if (dx > DRAG_THRESHOLD || dy > DRAG_THRESHOLD) {
+        likeDragState.current.isDragging = true;
+      }
+    } else if (event.type === "up") {
+      if (!likeDragState.current.isDragging) {
+        onLikeClick();
+      }
+      likeDragState.current.isDragging = false;
+    }
+  } : undefined;
+  const handleBookmarkMouse = onBookmarkClick ? (event) => {
+    if (event.button !== 0)
+      return;
+    event.stopPropagation();
+    if (event.type === "down") {
+      bookmarkDragState.current = {
+        isDragging: false,
+        startX: event.x,
+        startY: event.y
+      };
+    } else if (event.type === "drag") {
+      const dx = Math.abs(event.x - bookmarkDragState.current.startX);
+      const dy = Math.abs(event.y - bookmarkDragState.current.startY);
+      if (dx > DRAG_THRESHOLD || dy > DRAG_THRESHOLD) {
+        bookmarkDragState.current.isDragging = true;
+      }
+    } else if (event.type === "up") {
+      if (!bookmarkDragState.current.isDragging) {
+        onBookmarkClick();
+      }
+      bookmarkDragState.current.isDragging = false;
+    }
+  } : undefined;
+  const [isLikeHovered, setIsLikeHovered] = useState10(false);
+  const [isBookmarkHovered, setIsBookmarkHovered] = useState10(false);
   const textToDisplay = parentAuthorUsername ? stripLeadingMention(post.text, parentAuthorUsername) : post.text;
   const displayText = truncateText(textToDisplay, MAX_TEXT_LINES3);
   const showShowMore = isTruncated(textToDisplay, MAX_TEXT_LINES3);
@@ -2399,6 +2483,7 @@ function PostCard({
   const hasMedia = post.media && post.media.length > 0;
   return /* @__PURE__ */ jsxDEV13("box", {
     id,
+    onMouse: handleCardMouse,
     style: {
       flexDirection: "column",
       marginBottom: 1,
@@ -2472,7 +2557,10 @@ function PostCard({
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ jsxDEV13("text", {
-            fg: isJustLiked ? colors.success : isLiked ? colors.error : colors.muted,
+            onMouse: handleLikeMouse,
+            onMouseOver: () => setIsLikeHovered(true),
+            onMouseOut: () => setIsLikeHovered(false),
+            fg: isJustLiked ? colors.success : isLikeHovered ? colors.liked : isLiked ? colors.liked : colors.actionInactive,
             children: [
               "  ",
               isLiked ? HEART_FILLED : /* @__PURE__ */ jsxDEV13("b", {
@@ -2481,7 +2569,10 @@ function PostCard({
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ jsxDEV13("text", {
-            fg: isJustBookmarked ? colors.success : isBookmarked ? colors.primary : colors.muted,
+            onMouse: handleBookmarkMouse,
+            onMouseOver: () => setIsBookmarkHovered(true),
+            onMouseOut: () => setIsBookmarkHovered(false),
+            fg: isJustBookmarked ? colors.success : isBookmarkHovered ? colors.bookmarked : isBookmarked ? colors.bookmarked : colors.actionInactive,
             children: [
               "  ",
               isBookmarked ? FLAG_FILLED : /* @__PURE__ */ jsxDEV13("b", {
@@ -2540,9 +2631,9 @@ function PostList({
   loadingMore = false,
   hasMore = true
 }) {
-  const scrollRef = useRef2(null);
-  const savedScrollTop = useRef2(0);
-  const wasFocused = useRef2(focused);
+  const scrollRef = useRef3(null);
+  const savedScrollTop = useRef3(0);
+  const wasFocused = useRef3(focused);
   useEffect7(() => {
     const scrollbox = scrollRef.current;
     if (!scrollbox)
@@ -2650,7 +2741,10 @@ function PostList({
           isLiked: actionState?.liked,
           isBookmarked: actionState?.bookmarked,
           isJustLiked: actionState?.justLiked,
-          isJustBookmarked: actionState?.justBookmarked
+          isJustBookmarked: actionState?.justBookmarked,
+          onCardClick: () => onPostSelect?.(post),
+          onLikeClick: () => onLike?.(post),
+          onBookmarkClick: () => onBookmark?.(post)
         }, post.id, false, undefined, this);
       }),
       loadingMore ? /* @__PURE__ */ jsxDEV14("box", {
@@ -2697,7 +2791,7 @@ function usePreferences() {
 
 // src/experiments/use-timeline-query.ts
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { useCallback as useCallback5, useEffect as useEffect8, useMemo, useRef as useRef3, useState as useState10 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useMemo, useRef as useRef4, useState as useState11 } from "react";
 async function fetchTimelinePage(client, tab, cursor) {
   const result = cursor ? tab === "for_you" ? await client.getHomeTimeline(30, cursor) : await client.getHomeLatestTimeline(30, cursor) : tab === "for_you" ? await client.getHomeTimelineV2(30) : await client.getHomeLatestTimelineV2(30);
   if (!result.success) {
@@ -2728,9 +2822,9 @@ function useTimelineQuery({
   initialTab = "for_you",
   refreshBannerDelay = DEFAULT_REFRESH_BANNER_DELAY
 }) {
-  const [tab, setTabState] = useState10(initialTab);
-  const [showRefreshBanner, setShowRefreshBanner] = useState10(false);
-  const bannerTimerRef = useRef3(null);
+  const [tab, setTabState] = useState11(initialTab);
+  const [showRefreshBanner, setShowRefreshBanner] = useState11(false);
+  const bannerTimerRef = useRef4(null);
   const {
     data,
     isLoading,
@@ -2896,7 +2990,7 @@ function TimelineScreenExperimental({
   useEffect9(() => {
     onPostCountChange?.(posts.length);
   }, [posts.length, onPostCountChange]);
-  const hasCalledInitialLoadComplete = useRef4(false);
+  const hasCalledInitialLoadComplete = useRef5(false);
   useEffect9(() => {
     if (!isLoading && !hasCalledInitialLoadComplete.current) {
       hasCalledInitialLoadComplete.current = true;
@@ -2913,6 +3007,9 @@ function TimelineScreenExperimental({
       case "2":
         setTab("following");
         break;
+      case "tab":
+        setTab(tab === "for_you" ? "following" : "for_you");
+        break;
       case "r":
         refresh();
         break;
@@ -2995,7 +3092,105 @@ function TimelineScreenExperimental({
 }
 // src/experiments/use-profile-query.ts
 import { useQuery } from "@tanstack/react-query";
-import { useCallback as useCallback6, useState as useState11 } from "react";
+import { useCallback as useCallback6, useState as useState12 } from "react";
+function useProfileQuery({
+  client,
+  username,
+  isSelf = false
+}) {
+  const [likesEnabled, setLikesEnabled] = useState12(false);
+  const {
+    data: profileData,
+    isLoading: isProfileLoading,
+    error: profileError,
+    refetch: refetchProfile,
+    isRefetching: isProfileRefetching
+  } = useQuery({
+    queryKey: queryKeys.user.profile(username.toLowerCase()),
+    queryFn: async () => {
+      const result = await client.getUserByScreenName(username);
+      if (!result.success) {
+        throw new Error(result.error ?? "Failed to load profile");
+      }
+      if (!result.user) {
+        throw new Error("User not found");
+      }
+      return result.user;
+    }
+  });
+  const {
+    data: tweetsData,
+    isLoading: isTweetsLoading,
+    refetch: refetchTweets,
+    isRefetching: isTweetsRefetching
+  } = useQuery({
+    queryKey: queryKeys.user.tweets(profileData?.id ?? ""),
+    queryFn: async () => {
+      if (!profileData?.id)
+        return [];
+      const result = await client.getUserTweets(profileData.id, 20);
+      if (!result.success) {
+        return [];
+      }
+      return result.tweets ?? [];
+    },
+    enabled: !!profileData?.id
+  });
+  const {
+    data: likesData,
+    isLoading: isLikesLoading,
+    error: likesError,
+    refetch: refetchLikes,
+    isFetched: likesFetched
+  } = useQuery({
+    queryKey: queryKeys.user.likes(),
+    queryFn: async () => {
+      const result = await client.getLikes(20);
+      if (!result.success) {
+        throw new Error(result.error ?? "Failed to load likes");
+      }
+      return result.tweets ?? [];
+    },
+    enabled: isSelf && likesEnabled
+  });
+  const fetchLikes = useCallback6(() => {
+    if (isSelf && !likesEnabled) {
+      setLikesEnabled(true);
+    } else if (isSelf && likesEnabled) {
+      refetchLikes();
+    }
+  }, [isSelf, likesEnabled, refetchLikes]);
+  const refresh = useCallback6(() => {
+    refetchProfile();
+    if (profileData?.id) {
+      refetchTweets();
+    }
+    if (isSelf && likesEnabled) {
+      refetchLikes();
+    }
+  }, [
+    refetchProfile,
+    refetchTweets,
+    refetchLikes,
+    profileData?.id,
+    isSelf,
+    likesEnabled
+  ]);
+  return {
+    user: profileData ?? null,
+    tweets: tweetsData ?? [],
+    isLoading: isProfileLoading,
+    isTweetsLoading,
+    error: profileError instanceof Error ? profileError.message : null,
+    refresh,
+    likedTweets: likesData ?? [],
+    isLikesLoading,
+    likesError: likesError instanceof Error ? likesError.message : null,
+    fetchLikes,
+    likesFetched,
+    isRefetching: isProfileRefetching || isTweetsRefetching
+  };
+}
 // src/experiments/use-post-detail-query.ts
 import {
   useInfiniteQuery as useInfiniteQuery2,
@@ -3183,7 +3378,7 @@ function useBookmarksQuery({
 }
 // src/experiments/use-bookmark-mutation.ts
 import { useMutation, useQueryClient as useQueryClient3 } from "@tanstack/react-query";
-import { useCallback as useCallback8, useRef as useRef5, useState as useState12 } from "react";
+import { useCallback as useCallback8, useRef as useRef6, useState as useState13 } from "react";
 var JUST_ACTED_DURATION = 600;
 function useBookmarkMutation({
   client,
@@ -3191,9 +3386,9 @@ function useBookmarkMutation({
   onError
 }) {
   const queryClient = useQueryClient3();
-  const [pendingTweets, setPendingTweets] = useState12(new Set);
-  const [justBookmarkedTweets, setJustBookmarkedTweets] = useState12(new Set);
-  const justBookmarkedTimeouts = useRef5(new Map);
+  const [pendingTweets, setPendingTweets] = useState13(new Set);
+  const [justBookmarkedTweets, setJustBookmarkedTweets] = useState13(new Set);
+  const justBookmarkedTimeouts = useRef6(new Map);
   const addMutation = useMutation({
     mutationFn: async (tweet) => {
       const result = await client.createBookmark(tweet.id);
@@ -3388,7 +3583,7 @@ import { useEffect as useEffect12, useMemo as useMemo5 } from "react";
 
 // src/components/ThreadView.prototype.tsx
 import { useKeyboard as useKeyboard10 } from "@opentui/react";
-import { useState as useState13, useRef as useRef6, useEffect as useEffect11, useMemo as useMemo4 } from "react";
+import { useState as useState14, useRef as useRef7, useEffect as useEffect11, useMemo as useMemo4 } from "react";
 import { jsxDEV as jsxDEV17 } from "@opentui/react/jsx-dev-runtime";
 var SELECTED_BG = "#2a2a3e";
 var TREE = {
@@ -3627,11 +3822,11 @@ function ThreadViewPrototype({
   onSelectTweet,
   showFooter = true
 }) {
-  const scrollRef = useRef6(null);
-  const savedScrollTop = useRef6(0);
-  const wasFocused = useRef6(focused);
-  const [selectedIndex, setSelectedIndex] = useState13(0);
-  const [treeState, setTreeState] = useState13(replyTree);
+  const scrollRef = useRef7(null);
+  const savedScrollTop = useRef7(0);
+  const wasFocused = useRef7(focused);
+  const [selectedIndex, setSelectedIndex] = useState14(0);
+  const [treeState, setTreeState] = useState14(replyTree);
   useEffect11(() => {
     const scrollbox = scrollRef.current;
     if (!scrollbox)
@@ -3956,7 +4151,7 @@ function useThreadQuery({
 }
 // src/experiments/use-user-actions.ts
 import { useMutation as useMutation2, useQueryClient as useQueryClient5 } from "@tanstack/react-query";
-import { useCallback as useCallback9, useState as useState14 } from "react";
+import { useCallback as useCallback9, useState as useState15 } from "react";
 function useUserActions({
   client,
   username,
@@ -3964,7 +4159,7 @@ function useUserActions({
   onError
 }) {
   const queryClient = useQueryClient5();
-  const [pendingAction, setPendingAction] = useState14(null);
+  const [pendingAction, setPendingAction] = useState15(null);
   const updateProfileCache = useCallback9((updates) => {
     queryClient.setQueryData(queryKeys.user.profile(username), (old) => {
       if (!old?.success || !old.user)
@@ -4172,7 +4367,7 @@ function getQueryClient() {
   return queryClientInstance;
 }
 function QueryProvider({ children }) {
-  const [queryClient] = useState15(() => getQueryClient());
+  const [queryClient] = useState16(() => getQueryClient());
   return /* @__PURE__ */ jsxDEV18(QueryClientProvider, {
     client: queryClient,
     children
@@ -4180,7 +4375,7 @@ function QueryProvider({ children }) {
 }
 
 // src/hooks/useActions.ts
-import { useState as useState16, useCallback as useCallback10, useRef as useRef7 } from "react";
+import { useState as useState17, useCallback as useCallback10, useRef as useRef8 } from "react";
 var DEFAULT_STATE = {
   liked: false,
   bookmarked: false,
@@ -4198,9 +4393,9 @@ function useActions({
   bookmarkMutation,
   currentFolderId
 }) {
-  const [states, setStates] = useState16(new Map);
-  const justLikedTimeouts = useRef7(new Map);
-  const justBookmarkedTimeouts = useRef7(new Map);
+  const [states, setStates] = useState17(new Map);
+  const justLikedTimeouts = useRef8(new Map);
+  const justBookmarkedTimeouts = useRef8(new Map);
   const getState = useCallback10((tweetId) => {
     const baseState = states.get(tweetId) ?? DEFAULT_STATE;
     if (bookmarkMutation) {
@@ -4377,10 +4572,10 @@ function useActions({
 }
 
 // src/hooks/useNavigation.ts
-import { useState as useState17, useCallback as useCallback11 } from "react";
+import { useState as useState18, useCallback as useCallback11 } from "react";
 function useNavigation(options) {
   const { initialView, mainViews } = options;
-  const [history, setHistory] = useState17([initialView]);
+  const [history, setHistory] = useState18([initialView]);
   const currentView = history[history.length - 1];
   const previousView = history.length > 1 ? history[history.length - 2] : null;
   const canGoBack = history.length > 1;
@@ -4483,7 +4678,7 @@ function ScreenHeader({ folderName, inFolder }) {
         fg: colors.dim,
         children: [
           " ",
-          "(f folders, c new",
+          "(Tab/f folders, c new",
           inFolder ? ", e rename, D delete" : "",
           ")"
         ]
@@ -4528,7 +4723,7 @@ function BookmarksScreen({
     if (key.name === "r") {
       refresh();
     }
-    if (key.name === "f") {
+    if (key.name === "f" || key.name === "tab") {
       onFolderPickerOpen?.();
     }
     if (key.name === "c") {
@@ -4623,7 +4818,7 @@ import { useKeyboard as useKeyboard12 } from "@opentui/react";
 import { useEffect as useEffect16 } from "react";
 
 // src/components/NotificationList.tsx
-import { useEffect as useEffect14, useRef as useRef8 } from "react";
+import { useEffect as useEffect14, useRef as useRef9 } from "react";
 
 // src/components/NotificationItem.tsx
 import { jsxDEV as jsxDEV20 } from "@opentui/react/jsx-dev-runtime";
@@ -4721,9 +4916,9 @@ function NotificationList({
   loadingMore = false,
   hasMore = true
 }) {
-  const scrollRef = useRef8(null);
-  const savedScrollTop = useRef8(0);
-  const wasFocused = useRef8(focused);
+  const scrollRef = useRef9(null);
+  const savedScrollTop = useRef9(0);
+  const wasFocused = useRef9(focused);
   useEffect14(() => {
     const scrollbox = scrollRef.current;
     if (!scrollbox)
@@ -4828,7 +5023,7 @@ import { useInfiniteQuery as useInfiniteQuery4 } from "@tanstack/react-query";
 import { appendFileSync } from "fs";
 import { homedir as homedir2 } from "os";
 import { join } from "path";
-import { useCallback as useCallback12, useEffect as useEffect15, useMemo as useMemo6, useRef as useRef9, useState as useState18 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect15, useMemo as useMemo6, useRef as useRef10, useState as useState19 } from "react";
 var LOG_FILE = join(homedir2(), ".xfeed-notifications.log");
 function log(message, data) {
   const timestamp = new Date().toISOString();
@@ -4911,8 +5106,8 @@ function useNotificationsQuery({
   client,
   pollingInterval = DEFAULT_POLLING_INTERVAL
 }) {
-  const lastSeenNewestIdRef = useRef9(null);
-  const [newNotificationsCount, setNewNotificationsCount] = useState18(0);
+  const lastSeenNewestIdRef = useRef10(null);
+  const [newNotificationsCount, setNewNotificationsCount] = useState19(0);
   log("useNotificationsQuery render", {
     lastSeenNewestId: lastSeenNewestIdRef.current,
     newNotificationsCount
@@ -4962,7 +5157,7 @@ function useNotificationsQuery({
       lastSeenNewestIdRef.current = newestId ?? null;
     }
   }, [notifications]);
-  const lastUnreadSortIndexRef = useRef9(null);
+  const lastUnreadSortIndexRef = useRef10(null);
   useEffect15(() => {
     if (lastUnreadSortIndexRef.current === null && data?.pages?.[0]) {
       const sortIndex = data.pages[0].unreadSortIndex;
@@ -5228,7 +5423,7 @@ function NotificationsScreen({
 
 // src/screens/PostDetailScreen.tsx
 import { useKeyboard as useKeyboard13 } from "@opentui/react";
-import { useState as useState19, useRef as useRef10, useEffect as useEffect17, useCallback as useCallback13 } from "react";
+import { useState as useState20, useRef as useRef11, useEffect as useEffect17, useCallback as useCallback13 } from "react";
 init_media();
 
 // src/lib/text.tsx
@@ -5356,16 +5551,16 @@ function PostDetailScreen({
     hasMoreReplies,
     loadMoreReplies
   } = usePostDetailQuery({ client, tweet });
-  const [isExpanded, setIsExpanded] = useState19(false);
-  const [statusMessage, setStatusMessage] = useState19(null);
-  const [linkIndex, setLinkIndex] = useState19(0);
-  const [mentionIndex, setMentionIndex] = useState19(0);
-  const [linkMetadata, setLinkMetadata] = useState19(null);
-  const [isLoadingMetadata, setIsLoadingMetadata] = useState19(false);
-  const [repliesMode, setRepliesMode] = useState19(false);
-  const [mentionsMode, setMentionsMode] = useState19(false);
-  const [linkMode, setLinkMode] = useState19(false);
-  const scrollRef = useRef10(null);
+  const [isExpanded, setIsExpanded] = useState20(false);
+  const [statusMessage, setStatusMessage] = useState20(null);
+  const [linkIndex, setLinkIndex] = useState20(0);
+  const [mentionIndex, setMentionIndex] = useState20(0);
+  const [linkMetadata, setLinkMetadata] = useState20(null);
+  const [isLoadingMetadata, setIsLoadingMetadata] = useState20(false);
+  const [repliesMode, setRepliesMode] = useState20(false);
+  const [mentionsMode, setMentionsMode] = useState20(false);
+  const [linkMode, setLinkMode] = useState20(false);
+  const scrollRef = useRef11(null);
   useEffect17(() => {
     setRepliesMode(false);
     setMentionsMode(false);
@@ -5622,7 +5817,10 @@ function PostDetailScreen({
             setMentionsMode(true);
             setMentionIndex(0);
           }
-        } else if (isBookmarked) {
+        }
+        break;
+      case "f":
+        if (isBookmarked) {
           onMoveToFolder?.();
         }
         break;
@@ -5961,6 +6159,11 @@ function PostDetailScreen({
       }, undefined, true, undefined, this)
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this) : null;
+  const handleMentionRowClick = useCallback13((username) => (event) => {
+    if (event.type === "up" && event.button === 0) {
+      onProfileOpen?.(username);
+    }
+  }, [onProfileOpen]);
   const firstMention = tweet.mentions?.[0];
   const mentionsContent = hasMentions ? /* @__PURE__ */ jsxDEV24("box", {
     style: { marginTop: 1, paddingLeft: 1, paddingRight: 1 },
@@ -5968,6 +6171,7 @@ function PostDetailScreen({
       style: { flexDirection: "column" },
       children: mentionCount === 1 ? /* @__PURE__ */ jsxDEV24("box", {
         style: { flexDirection: "row" },
+        onMouse: firstMention ? handleMentionRowClick(firstMention.username) : undefined,
         children: [
           /* @__PURE__ */ jsxDEV24("text", {
             fg: colors.dim,
@@ -5997,7 +6201,7 @@ function PostDetailScreen({
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV24("text", {
             fg: colors.dim,
-            children: " profile)"
+            children: "/click)"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this) : mentionsMode ? /* @__PURE__ */ jsxDEV24(Fragment, {
@@ -6027,7 +6231,7 @@ function PostDetailScreen({
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV24("text", {
                 fg: colors.dim,
-                children: " profile"
+                children: "/click profile"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
@@ -6035,6 +6239,7 @@ function PostDetailScreen({
             const isSelected = idx === mentionIndex;
             return /* @__PURE__ */ jsxDEV24("box", {
               style: { flexDirection: "row", marginTop: idx === 0 ? 1 : 0 },
+              onMouse: handleMentionRowClick(mention.username),
               children: [
                 /* @__PURE__ */ jsxDEV24("text", {
                   fg: isSelected ? colors.mention : colors.muted,
@@ -6057,6 +6262,12 @@ function PostDetailScreen({
         ]
       }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV24("box", {
         style: { flexDirection: "row" },
+        onMouse: (event) => {
+          if (event.type === "up" && event.button === 0) {
+            setMentionsMode(true);
+            setMentionIndex(0);
+          }
+        },
         children: [
           /* @__PURE__ */ jsxDEV24("text", {
             fg: colors.dim,
@@ -6083,7 +6294,7 @@ function PostDetailScreen({
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV24("text", {
             fg: colors.dim,
-            children: " to navigate)"
+            children: "/click)"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
@@ -6187,13 +6398,13 @@ function PostDetailScreen({
     {
       key: "l",
       label: isLiked ? HEART_FILLED2 : HEART_EMPTY2,
-      activeColor: isJustLiked ? colors.success : isLiked ? colors.error : undefined,
+      activeColor: isJustLiked ? colors.success : isLiked ? colors.liked : undefined,
       isActive: isLiked || isJustLiked
     },
     {
       key: "b",
       label: isBookmarked ? FLAG_FILLED2 : FLAG_EMPTY2,
-      activeColor: isJustBookmarked ? colors.success : isBookmarked ? colors.primary : undefined,
+      activeColor: isJustBookmarked ? colors.success : isBookmarked ? colors.bookmarked : undefined,
       isActive: isBookmarked || isJustBookmarked
     },
     { key: "p", label: "profile" },
@@ -6223,7 +6434,7 @@ function PostDetailScreen({
       activeColor: isLoadingQuote ? colors.primary : undefined,
       show: hasQuote
     },
-    { key: "m", label: "folder", show: isBookmarked && !hasMentions }
+    { key: "f", label: "folder", show: isBookmarked }
   ];
   return /* @__PURE__ */ jsxDEV24("box", {
     style: { flexDirection: "column", height: "100%" },
@@ -6257,91 +6468,7 @@ function PostDetailScreen({
 
 // src/screens/ProfileScreen.tsx
 import { useKeyboard as useKeyboard14 } from "@opentui/react";
-import { useState as useState21, useCallback as useCallback15, useEffect as useEffect19 } from "react";
-
-// src/hooks/useUserProfile.ts
-import { useState as useState20, useEffect as useEffect18, useCallback as useCallback14, useRef as useRef11 } from "react";
-function useUserProfile({
-  client,
-  username,
-  isSelf = false
-}) {
-  const [user, setUser] = useState20(null);
-  const [tweets, setTweets] = useState20([]);
-  const [loading, setLoading] = useState20(true);
-  const [error, setError] = useState20(null);
-  const [refreshCounter, setRefreshCounter] = useState20(0);
-  const [likedTweets, setLikedTweets] = useState20([]);
-  const [likesLoading, setLikesLoading] = useState20(false);
-  const [likesError, setLikesError] = useState20(null);
-  const [likesFetched, setLikesFetched] = useState20(false);
-  const likesFetchInProgress = useRef11(false);
-  const fetchProfile = useCallback14(async () => {
-    setLoading(true);
-    setError(null);
-    const profileResult = await client.getUserByScreenName(username);
-    if (!profileResult.success) {
-      setError(profileResult.error ?? "Failed to load profile");
-      setLoading(false);
-      return;
-    }
-    const userProfile = profileResult.user;
-    if (!userProfile) {
-      setError("User not found");
-      setLoading(false);
-      return;
-    }
-    setUser(userProfile);
-    const tweetsResult = await client.getUserTweets(userProfile.id, 20);
-    if (tweetsResult.success) {
-      setTweets(tweetsResult.tweets ?? []);
-    } else {
-      setTweets([]);
-    }
-    setLoading(false);
-  }, [client, username]);
-  const fetchLikes = useCallback14(async () => {
-    if (!isSelf || likesFetchInProgress.current)
-      return;
-    likesFetchInProgress.current = true;
-    setLikesLoading(true);
-    setLikesError(null);
-    const likesResult = await client.getLikes(20);
-    if (likesResult.success) {
-      setLikedTweets(likesResult.tweets ?? []);
-      setLikesFetched(true);
-    } else {
-      setLikesError(likesResult.error ?? "Failed to load likes");
-    }
-    setLikesLoading(false);
-    likesFetchInProgress.current = false;
-  }, [client, isSelf]);
-  useEffect18(() => {
-    setUser(null);
-    setTweets([]);
-    setLikedTweets([]);
-    setLikesFetched(false);
-    setLikesError(null);
-    fetchProfile();
-  }, [fetchProfile, refreshCounter]);
-  const refresh = useCallback14(() => {
-    setRefreshCounter((prev) => prev + 1);
-  }, []);
-  return {
-    user,
-    tweets,
-    loading,
-    error,
-    refresh,
-    likedTweets,
-    likesLoading,
-    likesError,
-    fetchLikes,
-    likesFetched
-  };
-}
-
-// src/screens/ProfileScreen.tsx
+import { useState as useState21, useCallback as useCallback14, useEffect as useEffect18 } from "react";
 init_media();
 import { jsxDEV as jsxDEV25, Fragment as Fragment2 } from "@opentui/react/jsx-dev-runtime";
 function formatJoinDate(createdAt) {
@@ -6386,15 +6513,15 @@ function ProfileScreen({
   const {
     user,
     tweets,
-    loading,
+    isLoading,
     error,
     refresh,
     likedTweets,
-    likesLoading,
+    isLikesLoading,
     likesError,
     fetchLikes,
     likesFetched
-  } = useUserProfile({
+  } = useProfileQuery({
     client,
     username,
     isSelf
@@ -6405,7 +6532,7 @@ function ProfileScreen({
   });
   const [isFollowing, setIsFollowing] = useState21(false);
   const [isMuting, setIsMuting] = useState21(false);
-  useEffect19(() => {
+  useEffect18(() => {
     if (user) {
       setIsFollowing(user.following ?? false);
       setIsMuting(user.muting ?? false);
@@ -6415,16 +6542,16 @@ function ProfileScreen({
   const [isCollapsed, setIsCollapsed] = useState21(false);
   const [mentionsMode, setMentionsMode] = useState21(false);
   const [mentionIndex, setMentionIndex] = useState21(0);
-  useEffect19(() => {
-    if (isSelf && activeTab === "likes" && !likesFetched && !likesLoading) {
+  useEffect18(() => {
+    if (isSelf && activeTab === "likes" && !likesFetched && !isLikesLoading) {
       fetchLikes();
     }
-  }, [isSelf, activeTab, likesFetched, likesLoading, fetchLikes]);
+  }, [isSelf, activeTab, likesFetched, isLikesLoading, fetchLikes]);
   const bioMentions = user?.description ? extractMentions(user.description) : [];
   const hasMentions = bioMentions.length > 0;
   const mentionCount = bioMentions.length;
   const currentMention = hasMentions ? bioMentions[mentionIndex] : undefined;
-  const handleSelectedIndexChange = useCallback15((index) => {
+  const handleSelectedIndexChange = useCallback14((index) => {
     setIsCollapsed(index > 0);
   }, []);
   useKeyboard14((key) => {
@@ -6508,6 +6635,12 @@ function ProfileScreen({
           setIsCollapsed(false);
         }
         break;
+      case "tab":
+        if (isSelf) {
+          setActiveTab((prev) => prev === "tweets" ? "likes" : "tweets");
+          setIsCollapsed(false);
+        }
+        break;
       case "f":
         if (!isSelf && user) {
           const newFollowing = !isFollowing;
@@ -6897,7 +7030,7 @@ function ProfileScreen({
           children: "[2] Likes"
         }, undefined, false, undefined, this) : " 2  Likes"
       }, undefined, false, undefined, this),
-      activeTab === "likes" && likesLoading && /* @__PURE__ */ jsxDEV25("text", {
+      activeTab === "likes" && isLikesLoading && /* @__PURE__ */ jsxDEV25("text", {
         fg: colors.muted,
         children: " (loading...)"
       }, undefined, false, undefined, this)
@@ -6946,7 +7079,7 @@ function ProfileScreen({
     { key: "x", label: "x.com" },
     { key: "r", label: "refresh" }
   ];
-  if (loading) {
+  if (isLoading) {
     return /* @__PURE__ */ jsxDEV25("box", {
       style: { flexDirection: "column", height: "100%" },
       children: /* @__PURE__ */ jsxDEV25("box", {
@@ -7044,7 +7177,7 @@ function ProfileScreen({
 }
 
 // src/screens/SplashScreen.tsx
-import { useEffect as useEffect20, useState as useState22 } from "react";
+import { useEffect as useEffect19, useState as useState22 } from "react";
 import { jsxDEV as jsxDEV26 } from "@opentui/react/jsx-dev-runtime";
 var LOGO = [
   "          \u2588\u2588\u2557  \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2557 ",
@@ -7058,7 +7191,7 @@ var SPINNER_FRAMES = ["\u25E2", "\u25E3", "\u25E4", "\u25E5"];
 var SPINNER_INTERVAL_MS = 100;
 function SplashScreen() {
   const [spinnerIndex, setSpinnerIndex] = useState22(0);
-  useEffect20(() => {
+  useEffect19(() => {
     const interval = setInterval(() => {
       setSpinnerIndex((prev) => (prev + 1) % SPINNER_FRAMES.length);
     }, SPINNER_INTERVAL_MS);
@@ -7194,7 +7327,7 @@ function App({ client, user }) {
 }
 function AppContent({ client, user }) {
   const renderer = useRenderer2();
-  const { currentView, navigate, goBack, cycleNext, isMainView } = useNavigation({
+  const { currentView, navigate, goBack, isMainView } = useNavigation({
     initialView: "timeline",
     mainViews: MAIN_VIEWS
   });
@@ -7206,7 +7339,7 @@ function AppContent({ client, user }) {
   const [actionMessage, setActionMessage] = useState23(null);
   const [showFooter, setShowFooter] = useState23(true);
   const { openModal, closeModal, isModalOpen } = useModal();
-  useEffect21(() => {
+  useEffect20(() => {
     client.setOnSessionExpired(() => {
       openModal("session-expired", {});
     });
@@ -7224,7 +7357,7 @@ function AppContent({ client, user }) {
     bookmarkMutation,
     currentFolderId: selectedBookmarkFolder?.id
   });
-  useEffect21(() => {
+  useEffect20(() => {
     if (actionMessage) {
       const timer = setTimeout(() => setActionMessage(null), 3000);
       return () => clearTimeout(timer);
@@ -7233,21 +7366,21 @@ function AppContent({ client, user }) {
   const [showSplash, setShowSplash] = useState23(true);
   const [minTimeElapsed, setMinTimeElapsed] = useState23(false);
   const initialLoadComplete = useRef12(false);
-  useEffect21(() => {
+  useEffect20(() => {
     const timer = setTimeout(() => {
       setMinTimeElapsed(true);
     }, SPLASH_MIN_DISPLAY_MS);
     return () => clearTimeout(timer);
   }, []);
-  useEffect21(() => {
+  useEffect20(() => {
     if (minTimeElapsed && initialLoadComplete.current) {
       setShowSplash(false);
     }
   }, [minTimeElapsed]);
-  const handlePostCountChange = useCallback16((count) => {
+  const handlePostCountChange = useCallback15((count) => {
     setPostCount(count);
   }, []);
-  const handleInitialLoadComplete = useCallback16(() => {
+  const handleInitialLoadComplete = useCallback15(() => {
     if (!initialLoadComplete.current) {
       initialLoadComplete.current = true;
       if (minTimeElapsed) {
@@ -7255,16 +7388,16 @@ function AppContent({ client, user }) {
       }
     }
   }, [minTimeElapsed]);
-  const handleBookmarkCountChange = useCallback16((count) => {
+  const handleBookmarkCountChange = useCallback15((count) => {
     setBookmarkCount(count);
   }, []);
-  const handleBookmarkHasMoreChange = useCallback16((hasMore) => {
+  const handleBookmarkHasMoreChange = useCallback15((hasMore) => {
     setBookmarkHasMore(hasMore);
   }, []);
-  const handleNotificationCountChange = useCallback16((count) => {
+  const handleNotificationCountChange = useCallback15((count) => {
     setNotificationCount(count);
   }, []);
-  const handleUnreadCountChange = useCallback16((count) => {
+  const handleUnreadCountChange = useCallback15((count) => {
     setUnreadNotificationCount(count);
   }, []);
   const [postStack, setPostStack] = useState23([]);
@@ -7272,17 +7405,17 @@ function AppContent({ client, user }) {
   const [isLoadingQuote, setIsLoadingQuote] = useState23(false);
   const [isLoadingParent, setIsLoadingParent] = useState23(false);
   const [threadRootTweet, setThreadRootTweet] = useState23(null);
-  const handlePostSelect = useCallback16((post) => {
+  const handlePostSelect = useCallback15((post) => {
     setPostStack((prev) => [...prev, post]);
     initState(post.id, post.favorited ?? false, post.bookmarked ?? false);
     navigate("post-detail");
   }, [navigate, initState]);
-  const handlePostSelectFromThread = useCallback16((post) => {
+  const handlePostSelectFromThread = useCallback15((post) => {
     setPostStack((prev) => [...prev, post]);
     initState(post.id, post.favorited ?? false, post.bookmarked ?? false);
     navigate("post-detail");
   }, [navigate, initState]);
-  const handleQuoteSelect = useCallback16(async (quotedTweet) => {
+  const handleQuoteSelect = useCallback15(async (quotedTweet) => {
     if (isLoadingQuote)
       return;
     if (postStack.some((p) => p.id === quotedTweet.id)) {
@@ -7303,7 +7436,7 @@ function AppContent({ client, user }) {
       setIsLoadingQuote(false);
     }
   }, [client, initState, isLoadingQuote, navigate, postStack]);
-  const handleParentSelect = useCallback16(async (parentTweet) => {
+  const handleParentSelect = useCallback15(async (parentTweet) => {
     if (isLoadingParent)
       return;
     const parentIndex = postStack.findIndex((p) => p.id === parentTweet.id);
@@ -7329,36 +7462,36 @@ function AppContent({ client, user }) {
       setIsLoadingParent(false);
     }
   }, [client, goBack, initState, isLoadingParent, navigate, postStack]);
-  const handleBackFromDetail = useCallback16(() => {
+  const handleBackFromDetail = useCallback15(() => {
     goBack();
     setPostStack((prev) => prev.slice(0, -1));
   }, [goBack]);
   const [profileStack, setProfileStack] = useState23([]);
   const profileUsername = profileStack[profileStack.length - 1] ?? null;
-  const handleProfileOpen = useCallback16((username) => {
+  const handleProfileOpen = useCallback15((username) => {
     setProfileStack((prev) => [...prev, username]);
     navigate("profile");
   }, [navigate]);
-  const handleThreadView = useCallback16(() => {
+  const handleThreadView = useCallback15(() => {
     if (selectedPost) {
       setThreadRootTweet(selectedPost);
       navigate("thread");
     }
   }, [navigate, selectedPost]);
-  const handleBackFromThread = useCallback16(() => {
+  const handleBackFromThread = useCallback15(() => {
     goBack();
     setThreadRootTweet(null);
   }, [goBack]);
-  const handleBackFromProfile = useCallback16(() => {
+  const handleBackFromProfile = useCallback15(() => {
     goBack();
     setProfileStack((prev) => prev.slice(0, -1));
   }, [goBack]);
-  const handlePostSelectFromProfile = useCallback16((post) => {
+  const handlePostSelectFromProfile = useCallback15((post) => {
     setPostStack((prev) => [...prev, post]);
     initState(post.id, post.favorited ?? false, post.bookmarked ?? false);
     navigate("post-detail");
   }, [navigate, initState]);
-  const handleMoveToFolder = useCallback16(() => {
+  const handleMoveToFolder = useCallback15(() => {
     if (!selectedPost)
       return;
     openModal("folder-picker", {
@@ -7376,7 +7509,7 @@ function AppContent({ client, user }) {
       onClose: closeModal
     });
   }, [client, selectedPost, openModal, closeModal]);
-  const handleBookmarkFolderSelectorOpen = useCallback16(() => {
+  const handleBookmarkFolderSelectorOpen = useCallback15(() => {
     openModal("bookmark-folder-selector", {
       client,
       currentFolder: selectedBookmarkFolder,
@@ -7387,7 +7520,7 @@ function AppContent({ client, user }) {
       onClose: closeModal
     });
   }, [client, selectedBookmarkFolder, openModal, closeModal]);
-  const handleCreateBookmarkFolder = useCallback16(() => {
+  const handleCreateBookmarkFolder = useCallback15(() => {
     openModal("folder-name-input", {
       mode: "create",
       onSubmit: async (name) => {
@@ -7402,7 +7535,7 @@ function AppContent({ client, user }) {
       onClose: closeModal
     });
   }, [client, openModal, closeModal]);
-  const handleEditBookmarkFolder = useCallback16(() => {
+  const handleEditBookmarkFolder = useCallback15(() => {
     if (!selectedBookmarkFolder)
       return;
     openModal("folder-name-input", {
@@ -7421,7 +7554,7 @@ function AppContent({ client, user }) {
       onClose: closeModal
     });
   }, [client, selectedBookmarkFolder, openModal, closeModal]);
-  const handleDeleteBookmarkFolder = useCallback16(() => {
+  const handleDeleteBookmarkFolder = useCallback15(() => {
     if (!selectedBookmarkFolder)
       return;
     openModal("delete-folder-confirm", {
@@ -7439,7 +7572,7 @@ function AppContent({ client, user }) {
       onCancel: closeModal
     });
   }, [client, selectedBookmarkFolder, openModal, closeModal]);
-  const handleNotificationSelect = useCallback16((notification) => {
+  const handleNotificationSelect = useCallback15((notification) => {
     if (notification.targetTweet) {
       setPostStack((prev) => [...prev, notification.targetTweet]);
       initState(notification.targetTweet.id, notification.targetTweet.favorited ?? false, notification.targetTweet.bookmarked ?? false);
@@ -7526,11 +7659,32 @@ function AppContent({ client, user }) {
       setShowFooter((prev) => !prev);
       return;
     }
-    if (showSplash || !isMainView) {
+    if (showSplash) {
+      return;
+    }
+    if (key.name === "1") {
+      setPostStack([]);
+      setProfileStack([]);
+      setThreadRootTweet(null);
+      navigate("timeline");
+      return;
+    }
+    if (key.name === "2") {
+      setPostStack([]);
+      setProfileStack([]);
+      setThreadRootTweet(null);
+      navigate("bookmarks");
       return;
     }
-    if (key.name === "tab") {
-      cycleNext();
+    if (key.name === "3") {
+      setPostStack([]);
+      setProfileStack([]);
+      setThreadRootTweet(null);
+      navigate("notifications");
+      return;
+    }
+    if (!isMainView) {
+      return;
     }
     if (key.name === "n") {
       navigate("notifications");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xfeed",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Terminal-based X/Twitter viewer with vim-style navigation. Install with: bun install -g xfeed",
   "type": "module",
   "bin": "./dist/index.js",
@@ -18,8 +18,8 @@
     "prepare": "lefthook install"
   },
   "dependencies": {
-    "@opentui/core": "^0.1.68",
-    "@opentui/react": "^0.1.68",
+    "@opentui/core": "^0.1.69",
+    "@opentui/react": "^0.1.69",
     "@steipete/sweet-cookie": "file:./vendor/sweet-cookie",
     "@tanstack/react-query": "^5.90.16",
     "@tanstack/react-router": "^1.144.0",