xfeed 0.1.0

package/src/components/NotificationList.test.ts

@@ -0,0 +1,328 @@
+/**
+ * Unit tests for NotificationList component logic
+ * Tests list navigation, scroll behavior, and item selection
+ */
+
+import { describe, expect, it } from "bun:test";
+
+import type { NotificationData } from "@/api/types";
+
+function createNotification(
+  overrides: Partial<NotificationData> = {}
+): NotificationData {
+  return {
+    id: overrides.id ?? "notif-1",
+    icon: overrides.icon ?? "heart_icon",
+    message: overrides.message ?? "Test notification",
+    url: overrides.url ?? "https://x.com/notification",
+    timestamp: overrides.timestamp ?? "2024-01-01T00:00:00Z",
+    sortIndex: overrides.sortIndex ?? "1700000000000",
+  };
+}
+
+function getNotificationItemId(notificationId: string): string {
+  return `notification-${notificationId}`;
+}
+
+describe("NotificationList", () => {
+  describe("getNotificationItemId", () => {
+    it("generates correct element ID for notification", () => {
+      expect(getNotificationItemId("123")).toBe("notification-123");
+    });
+
+    it("handles complex notification IDs", () => {
+      expect(getNotificationItemId("DrwTuwcW4AAA")).toBe(
+        "notification-DrwTuwcW4AAA"
+      );
+    });
+
+    it("handles notification IDs with special characters", () => {
+      expect(getNotificationItemId("notif-123-abc")).toBe(
+        "notification-notif-123-abc"
+      );
+    });
+  });
+
+  describe("empty state detection", () => {
+    it("detects empty notifications array", () => {
+      const notifications: NotificationData[] = [];
+      const isEmpty = notifications.length === 0;
+      expect(isEmpty).toBe(true);
+    });
+
+    it("detects non-empty notifications array", () => {
+      const notifications = [createNotification()];
+      const isEmpty = notifications.length === 0;
+      expect(isEmpty).toBe(false);
+    });
+  });
+
+  describe("list navigation", () => {
+    it("initial selection is index 0", () => {
+      const selectedIndex = 0;
+      expect(selectedIndex).toBe(0);
+    });
+
+    it("selection increments on j key (down)", () => {
+      const notifications = [
+        createNotification({ id: "1" }),
+        createNotification({ id: "2" }),
+        createNotification({ id: "3" }),
+      ];
+      let selectedIndex = 0;
+
+      // Simulate j key press
+      selectedIndex = Math.min(selectedIndex + 1, notifications.length - 1);
+      expect(selectedIndex).toBe(1);
+
+      selectedIndex = Math.min(selectedIndex + 1, notifications.length - 1);
+      expect(selectedIndex).toBe(2);
+    });
+
+    it("selection decrements on k key (up)", () => {
+      // Start at last item (index 2)
+      let selectedIndex = 2;
+
+      // Simulate k key press
+      selectedIndex = Math.max(selectedIndex - 1, 0);
+      expect(selectedIndex).toBe(1);
+
+      selectedIndex = Math.max(selectedIndex - 1, 0);
+      expect(selectedIndex).toBe(0);
+    });
+
+    it("selection stays at 0 when pressing k at top", () => {
+      let selectedIndex = 0;
+      selectedIndex = Math.max(selectedIndex - 1, 0);
+      expect(selectedIndex).toBe(0);
+    });
+
+    it("selection stays at last when pressing j at bottom", () => {
+      const notifications = [
+        createNotification({ id: "1" }),
+        createNotification({ id: "2" }),
+        createNotification({ id: "3" }),
+      ];
+      let selectedIndex = 2;
+      selectedIndex = Math.min(selectedIndex + 1, notifications.length - 1);
+      expect(selectedIndex).toBe(2);
+    });
+
+    it("g key goes to first item", () => {
+      let selectedIndex = 5;
+      // Simulate g key press
+      selectedIndex = 0;
+      expect(selectedIndex).toBe(0);
+    });
+
+    it("G key goes to last item", () => {
+      const notifications = [
+        createNotification({ id: "1" }),
+        createNotification({ id: "2" }),
+        createNotification({ id: "3" }),
+        createNotification({ id: "4" }),
+        createNotification({ id: "5" }),
+      ];
+      let selectedIndex = 0;
+      // Simulate G key press
+      selectedIndex = notifications.length - 1;
+      expect(selectedIndex).toBe(4);
+    });
+  });
+
+  describe("notification selection callback", () => {
+    it("calls onNotificationSelect with correct notification", () => {
+      const notifications = [
+        createNotification({ id: "1", message: "First" }),
+        createNotification({ id: "2", message: "Second" }),
+        createNotification({ id: "3", message: "Third" }),
+      ];
+      const selectedIndex = 1;
+
+      const selectedNotification = notifications[selectedIndex];
+      expect(selectedNotification?.id).toBe("2");
+      expect(selectedNotification?.message).toBe("Second");
+    });
+
+    it("handles selection at first item", () => {
+      const notifications = [
+        createNotification({ id: "1", message: "First" }),
+        createNotification({ id: "2", message: "Second" }),
+      ];
+      const selectedIndex = 0;
+
+      const selectedNotification = notifications[selectedIndex];
+      expect(selectedNotification?.id).toBe("1");
+    });
+
+    it("handles selection at last item", () => {
+      const notifications = [
+        createNotification({ id: "1", message: "First" }),
+        createNotification({ id: "2", message: "Second" }),
+      ];
+      const selectedIndex = 1;
+
+      const selectedNotification = notifications[selectedIndex];
+      expect(selectedNotification?.id).toBe("2");
+    });
+  });
+
+  describe("scroll position management", () => {
+    it("calculates top margin as 10% of viewport", () => {
+      const viewportHeight = 40;
+      const topMargin = Math.max(1, Math.floor(viewportHeight / 10));
+      expect(topMargin).toBe(4);
+    });
+
+    it("enforces minimum top margin of 1", () => {
+      const viewportHeight = 5;
+      const topMargin = Math.max(1, Math.floor(viewportHeight / 10));
+      expect(topMargin).toBe(1);
+    });
+
+    it("calculates bottom margin as 33% of viewport", () => {
+      const viewportHeight = 30;
+      const bottomMargin = Math.max(4, Math.floor(viewportHeight / 3));
+      expect(bottomMargin).toBe(10);
+    });
+
+    it("enforces minimum bottom margin of 4", () => {
+      const viewportHeight = 9;
+      const bottomMargin = Math.max(4, Math.floor(viewportHeight / 3));
+      expect(bottomMargin).toBe(4);
+    });
+  });
+
+  describe("scroll behavior at boundaries", () => {
+    it("scrolls to top when selecting first item", () => {
+      const selectedIndex = 0;
+      const shouldScrollToTop = selectedIndex === 0;
+      expect(shouldScrollToTop).toBe(true);
+    });
+
+    it("scrolls to bottom when selecting last item", () => {
+      const notifications = [
+        createNotification({ id: "1" }),
+        createNotification({ id: "2" }),
+        createNotification({ id: "3" }),
+      ];
+      const selectedIndex = 2;
+      const shouldScrollToBottom = selectedIndex === notifications.length - 1;
+      expect(shouldScrollToBottom).toBe(true);
+    });
+
+    it("does not scroll to boundary for middle items", () => {
+      const notifications = [
+        createNotification({ id: "1" }),
+        createNotification({ id: "2" }),
+        createNotification({ id: "3" }),
+      ];
+      const selectedIndex: number = 1;
+
+      const shouldScrollToTop = selectedIndex <= 0;
+      const shouldScrollToBottom = selectedIndex >= notifications.length - 1;
+
+      expect(shouldScrollToTop).toBe(false);
+      expect(shouldScrollToBottom).toBe(false);
+    });
+  });
+
+  describe("scroll position restoration", () => {
+    it("saves scroll position before selection", () => {
+      let savedScrollTop = 0;
+      const currentScrollTop = 150;
+
+      // Simulate saving before navigation
+      savedScrollTop = currentScrollTop;
+      expect(savedScrollTop).toBe(150);
+    });
+
+    it("restores scroll position when gaining focus", () => {
+      const savedScrollTop = 150;
+      const wasFocused = false;
+      const focused = true;
+
+      const shouldRestore = !wasFocused && focused && savedScrollTop > 0;
+      expect(shouldRestore).toBe(true);
+    });
+
+    it("does not restore when already focused", () => {
+      const savedScrollTop = 150;
+      const wasFocused = true;
+      const focused = true;
+
+      const shouldRestore = !wasFocused && focused && savedScrollTop > 0;
+      expect(shouldRestore).toBe(false);
+    });
+
+    it("does not restore when scroll position is 0", () => {
+      const savedScrollTop = 0;
+      const wasFocused = false;
+      const focused = true;
+
+      const shouldRestore = !wasFocused && focused && savedScrollTop > 0;
+      expect(shouldRestore).toBe(false);
+    });
+  });
+
+  describe("focus state handling", () => {
+    it("navigation is disabled when not focused", () => {
+      const focused = false;
+      const navigationEnabled = focused;
+      expect(navigationEnabled).toBe(false);
+    });
+
+    it("navigation is enabled when focused", () => {
+      const focused = true;
+      const navigationEnabled = focused;
+      expect(navigationEnabled).toBe(true);
+    });
+  });
+
+  describe("notification ordering", () => {
+    it("notifications are displayed in provided order", () => {
+      const notifications = [
+        createNotification({ id: "a", sortIndex: "3" }),
+        createNotification({ id: "b", sortIndex: "2" }),
+        createNotification({ id: "c", sortIndex: "1" }),
+      ];
+
+      // Verify order is preserved
+      expect(notifications[0]?.id).toBe("a");
+      expect(notifications[1]?.id).toBe("b");
+      expect(notifications[2]?.id).toBe("c");
+    });
+
+    it("map produces correct indices", () => {
+      const notifications = [
+        createNotification({ id: "a" }),
+        createNotification({ id: "b" }),
+        createNotification({ id: "c" }),
+      ];
+
+      const indices = notifications.map((_, index) => index);
+      expect(indices).toEqual([0, 1, 2]);
+    });
+  });
+
+  describe("key prop generation", () => {
+    it("uses notification.id as key", () => {
+      const notification = createNotification({ id: "unique-123" });
+      const key = notification.id;
+      expect(key).toBe("unique-123");
+    });
+
+    it("keys are unique across notifications", () => {
+      const notifications = [
+        createNotification({ id: "1" }),
+        createNotification({ id: "2" }),
+        createNotification({ id: "3" }),
+      ];
+
+      const keys = notifications.map((n) => n.id);
+      const uniqueKeys = new Set(keys);
+
+      expect(uniqueKeys.size).toBe(keys.length);
+    });
+  });
+});

package/src/components/NotificationList.tsx

@@ -0,0 +1,157 @@
+/**
+ * NotificationList - Scrollable list of notifications with vim-style navigation
+ */
+
+import type { ScrollBoxRenderable } from "@opentui/core";
+
+import { useEffect, useRef } from "react";
+
+import type { NotificationData } from "@/api/types";
+
+import { NotificationItem } from "@/components/NotificationItem";
+import { useListNavigation } from "@/hooks/useListNavigation";
+import { colors } from "@/lib/colors";
+
+interface NotificationListProps {
+  notifications: NotificationData[];
+  focused?: boolean;
+  onNotificationSelect?: (notification: NotificationData) => void;
+  onLoadMore?: () => void;
+  loadingMore?: boolean;
+  hasMore?: boolean;
+}
+
+/**
+ * Generate element ID from notification ID for scroll targeting
+ */
+function getNotificationItemId(notificationId: string): string {
+  return `notification-${notificationId}`;
+}
+
+export function NotificationList({
+  notifications,
+  focused = false,
+  onNotificationSelect,
+  onLoadMore,
+  loadingMore = false,
+  hasMore = true,
+}: NotificationListProps) {
+  const scrollRef = useRef<ScrollBoxRenderable>(null);
+  const savedScrollTop = useRef(0);
+  const wasFocused = useRef(focused);
+
+  // Restore scroll position when gaining focus
+  useEffect(() => {
+    const scrollbox = scrollRef.current;
+    if (!scrollbox) return;
+
+    if (!wasFocused.current && focused && savedScrollTop.current > 0) {
+      scrollbox.scrollTo(savedScrollTop.current);
+    }
+
+    wasFocused.current = focused;
+  }, [focused]);
+
+  const { selectedIndex } = useListNavigation({
+    itemCount: notifications.length,
+    enabled: focused,
+    onSelect: (index) => {
+      const notification = notifications[index];
+      if (notification) {
+        if (scrollRef.current) {
+          savedScrollTop.current = scrollRef.current.scrollTop;
+        }
+        onNotificationSelect?.(notification);
+      }
+    },
+  });
+
+  // Scroll to keep selected item visible
+  useEffect(() => {
+    const scrollbox = scrollRef.current;
+    if (!scrollbox || notifications.length === 0) return;
+
+    const selectedNotification = notifications[selectedIndex];
+    if (!selectedNotification) return;
+
+    const targetId = getNotificationItemId(selectedNotification.id);
+    const target = scrollbox
+      .getChildren()
+      .find((child) => child.id === targetId);
+    if (!target) return;
+
+    const relativeY = target.y - scrollbox.y;
+    const viewportHeight = scrollbox.viewport.height;
+
+    const topMargin = Math.max(1, Math.floor(viewportHeight / 10));
+    const bottomMargin = Math.max(4, Math.floor(viewportHeight / 3));
+
+    if (selectedIndex === 0) {
+      scrollbox.scrollTo(0);
+      return;
+    }
+
+    if (selectedIndex === notifications.length - 1) {
+      scrollbox.scrollTo(scrollbox.scrollHeight);
+      return;
+    }
+
+    if (relativeY + target.height > viewportHeight - bottomMargin) {
+      scrollbox.scrollBy(
+        relativeY + target.height - viewportHeight + bottomMargin
+      );
+    } else if (relativeY < topMargin) {
+      scrollbox.scrollBy(relativeY - topMargin);
+    }
+  }, [selectedIndex, notifications.length]);
+
+  // Trigger load more when approaching the end of the list
+  useEffect(() => {
+    if (!onLoadMore || loadingMore || !hasMore || notifications.length === 0)
+      return;
+
+    // Load more when within 5 items of the end
+    const threshold = 5;
+    if (selectedIndex >= notifications.length - threshold) {
+      onLoadMore();
+    }
+  }, [selectedIndex, notifications.length, onLoadMore, loadingMore, hasMore]);
+
+  if (notifications.length === 0) {
+    return (
+      <box style={{ padding: 2 }}>
+        <text fg={colors.muted}>No notifications</text>
+      </box>
+    );
+  }
+
+  return (
+    <scrollbox
+      ref={scrollRef}
+      focused={focused}
+      style={{
+        flexGrow: 1,
+        height: "100%",
+      }}
+    >
+      {notifications.map((notification, index) => (
+        <NotificationItem
+          key={notification.id}
+          id={getNotificationItemId(notification.id)}
+          notification={notification}
+          isSelected={index === selectedIndex}
+        />
+      ))}
+      {loadingMore ? (
+        <box style={{ padding: 1, paddingLeft: 2 }}>
+          <text fg={colors.muted}>Loading more...</text>
+        </box>
+      ) : null}
+      {!hasMore && notifications.length > 0 ? (
+        <box style={{ padding: 1, paddingLeft: 2 }}>
+          <text fg={colors.dim}>No more notifications</text>
+        </box>
+      ) : null}
+    </scrollbox>
+  );
+}

package/src/components/PostCard.tsx

@@ -0,0 +1,186 @@
+/**
+ * PostCard - Individual post display component
+ */
+
+import type { TweetData } from "@/api/types";
+
+import { colors } from "@/lib/colors";
+import { formatCount, formatRelativeTime, truncateText } from "@/lib/format";
+
+import { QuotedPostCard } from "./QuotedPostCard";
+import { ReplyPreviewCard } from "./ReplyPreviewCard";
+
+const MAX_TEXT_LINES = 3;
+
+/**
+ * Strip leading @mention from reply text if it matches the parent author.
+ * This removes redundant mentions when viewing replies in a thread context.
+ *
+ * Only strips if:
+ * - The mention is at the very beginning of the text
+ * - It's a single mention (not @user1 @user2 text)
+ */
+function stripLeadingMention(text: string, username: string): string {
+  // Match @username at start, followed by optional whitespace
+  // But NOT followed by another @mention (to preserve multi-mention replies)
+  const pattern = new RegExp(`^@${username}\\s+(?!@)`, "i");
+  return text.replace(pattern, "");
+}
+
+interface PostCardProps {
+  post: TweetData;
+  isSelected: boolean;
+  id?: string;
+  /** Whether the tweet is liked by the current user */
+  isLiked?: boolean;
+  /** Whether the tweet is bookmarked by the current user */
+  isBookmarked?: boolean;
+  /** True briefly after liking (for visual pulse feedback) */
+  isJustLiked?: boolean;
+  /** True briefly after bookmarking (for visual pulse feedback) */
+  isJustBookmarked?: boolean;
+  /** Parent post author username - if provided, strips leading @mention matching this user */
+  parentAuthorUsername?: string;
+  /** Main post author username (for nested reply mention stripping) */
+  mainPostAuthorUsername?: string;
+}
+
+// Unicode symbols for like/bookmark states
+const HEART_EMPTY = "\u2661"; // ♡
+const HEART_FILLED = "\u2665"; // ♥
+const FLAG_EMPTY = "\u2690"; // ⚐
+const FLAG_FILLED = "\u2691"; // ⚑
+
+export function PostCard({
+  post,
+  isSelected,
+  id,
+  isLiked,
+  isBookmarked,
+  isJustLiked,
+  isJustBookmarked,
+  parentAuthorUsername,
+  mainPostAuthorUsername,
+}: PostCardProps) {
+  const textToDisplay = parentAuthorUsername
+    ? stripLeadingMention(post.text, parentAuthorUsername)
+    : post.text;
+  const displayText = truncateText(textToDisplay, MAX_TEXT_LINES);
+  const timeAgo = formatRelativeTime(post.createdAt);
+  const hasMedia = post.media && post.media.length > 0;
+
+  return (
+    <box
+      id={id}
+      style={{
+        flexDirection: "column",
+        marginBottom: 1,
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingTop: 1,
+        backgroundColor: isSelected ? colors.selectedBg : undefined,
+      }}
+    >
+      {/* Author line with selection indicator */}
+      <box style={{ flexDirection: "row" }}>
+        <text fg={colors.primary}>{isSelected ? "> " : "  "}</text>
+        <text>
+          <b fg={colors.primary}>{post.author.name}</b>
+        </text>
+        <text fg={colors.handle}> @{post.author.username}</text>
+        <text fg={colors.dim}>{timeAgo ? ` · ${timeAgo}` : ""}</text>
+      </box>
+
+      {/* Post text */}
+      <box style={{ marginTop: 1, paddingLeft: 2 }}>
+        <text fg="#ffffff">{displayText}</text>
+      </box>
+
+      {/* Quoted tweet (if present) */}
+      {post.quotedTweet ? (
+        <box style={{ paddingLeft: 2 }}>
+          <QuotedPostCard post={post.quotedTweet} />
+        </box>
+      ) : null}
+
+      {/* Stats line with action indicators */}
+      <box style={{ flexDirection: "row", marginTop: 1, paddingLeft: 2 }}>
+        <text fg={colors.muted}>
+          {formatCount(post.replyCount)} replies {"  "}
+          {formatCount(post.retweetCount)} reposts {"  "}
+          {formatCount(post.likeCount)} likes
+        </text>
+        {/* Like indicator - always visible, filled/empty based on state */}
+        <text
+          fg={
+            isJustLiked
+              ? colors.success // Bright green flash
+              : isLiked
+                ? colors.error // Red when liked
+                : colors.muted // Muted when not liked (more visible than dim)
+          }
+        >
+          {"  "}
+          {isLiked ? HEART_FILLED : <b>{HEART_EMPTY}</b>}
+        </text>
+        {/* Bookmark indicator - always visible, filled/empty based on state */}
+        <text
+          fg={
+            isJustBookmarked
+              ? colors.success // Bright green flash
+              : isBookmarked
+                ? colors.primary // Blue when bookmarked
+                : colors.muted // Muted when not bookmarked (more visible than dim)
+          }
+        >
+          {"  "}
+          {isBookmarked ? FLAG_FILLED : <b>{FLAG_EMPTY}</b>}
+        </text>
+      </box>
+
+      {/* Media indicators - colored labels */}
+      {hasMedia && (
+        <box style={{ flexDirection: "row", marginTop: 1, paddingLeft: 2 }}>
+          {post.media?.map((item) => {
+            const dims =
+              item.width && item.height
+                ? ` (${item.width}x${item.height})`
+                : "";
+            const typeLabel =
+              item.type === "photo"
+                ? "Image"
+                : item.type === "video"
+                  ? "Video"
+                  : "GIF";
+            const typeColor =
+              item.type === "photo"
+                ? colors.warning
+                : item.type === "video"
+                  ? colors.warning
+                  : colors.success;
+            return (
+              <text key={item.id} fg={typeColor}>
+                • {typeLabel}
+                {dims}
+                {"  "}
+              </text>
+            );
+          })}
+        </box>
+      )}
+
+      {/* Nested reply preview (if present) */}
+      {post.nestedReplyPreview && (
+        <box style={{ paddingLeft: 2 }}>
+          <ReplyPreviewCard
+            reply={post.nestedReplyPreview}
+            stripMentions={[
+              post.author.username,
+              ...(mainPostAuthorUsername ? [mainPostAuthorUsername] : []),
+            ]}
+          />
+        </box>
+      )}
+    </box>
+  );
+}