fix: docs, preferences, mobile nav

README.md

@@ -58,8 +58,8 @@ API server runs on http://localhost:8081
 
 ```bash
 cd web
-npm install
-npm run dev
+bun install
+bun run dev
 ```
 
 Dev server runs on http://localhost:4321 and proxies API requests to the backend.
@@ -70,9 +70,9 @@ Built with [WXT](https://wxt.dev):
 
 ```bash
 cd extension
-npm install
-npm run dev          # Chrome dev mode
-npm run dev:firefox  # Firefox dev mode
+bun install
+bun run dev          # Chrome dev mode
+bun run dev:firefox  # Firefox dev mode
 ```
 
 ## Architecture

backend/internal/firehose/ingester.go

@@ -794,6 +794,7 @@ func (i *Ingester) handlePreferences(event *FirehoseEvent) {
 		ExternalLinkSkippedHostnames []string        `json:"externalLinkSkippedHostnames"`
 		SubscribedLabelers           json.RawMessage `json:"subscribedLabelers"`
 		LabelPreferences             json.RawMessage `json:"labelPreferences"`
+		DisableExternalLinkWarning   *bool           `json:"disableExternalLinkWarning,omitempty"`
 		CreatedAt                    string          `json:"createdAt"`
 	}
 
@@ -837,6 +838,7 @@ func (i *Ingester) handlePreferences(event *FirehoseEvent) {
 		AuthorDID:                    event.Repo,
 		ExternalLinkSkippedHostnames: skippedHostnamesPtr,
 		SubscribedLabelers:           subscribedLabelersPtr,
+		DisableExternalLinkWarning:   record.DisableExternalLinkWarning,
 		LabelPreferences:             labelPrefsPtr,
 		CreatedAt:                    createdAt,
 		IndexedAt:                    time.Now(),

web/src/api/client.ts

@@ -1,14 +1,15 @@
 import { atom } from "nanostores";
 import type {
-  UserProfile,
-  FeedResponse,
   AnnotationItem,
   Collection,
+  FeedResponse,
+  HydratedLabel,
   NotificationItem,
-  Target,
   Selector,
-  HydratedLabel,
+  Target,
+  UserProfile,
 } from "../types";
+
 export type { Collection } from "../types";
 
 export const sessionAtom = atom<UserProfile | null>(null);
@@ -264,7 +265,9 @@ export async function getFeed({
     });
     if (!res.ok) throw new Error("Failed to fetch feed");
     const data = await res.json();
-    const normalizedItems = (data.items || []).map(normalizeItem);
+    const normalizedItems: AnnotationItem[] = (data.items || []).map(
+      normalizeItem,
+    );
 
     const groupedItems: AnnotationItem[] = [];
     if (normalizedItems.length > 0) {
@@ -292,7 +295,6 @@ export async function getFeed({
     }
 
     return {
-      cursor: data.cursor,
       items: groupedItems,
       hasMore: normalizedItems.length >= limit,
       fetchedCount: normalizedItems.length,
@@ -1046,10 +1048,11 @@ export async function getUserTargetItems(
     return { annotations: [], highlights: [] };
   }
 }
+
 import type {
+  LabelerInfo,
   LabelerSubscription,
   LabelPreference,
-  LabelerInfo,
 } from "../types";
 
 export interface PreferencesResponse {
@@ -1104,10 +1107,10 @@ export async function getLabelerInfo(): Promise<LabelerInfo | null> {
 }
 
 import type {
-  ModerationRelationship,
   BlockedUser,
-  MutedUser,
+  ModerationRelationship,
   ModerationReport,
+  MutedUser,
   ReportReasonType,
 } from "../types";
 

web/src/components/feed/MasonryFeed.tsx

@@ -1,14 +1,13 @@
+import { useStore as useNanoStore, useStore } from "@nanostores/react";
+import { Loader2 } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { getFeed } from "../../api/client";
-import Card from "../common/Card";
-import { Loader2 } from "lucide-react";
-import { useStore } from "@nanostores/react";
 import { $user } from "../../store/auth";
+import { $feedLayout } from "../../store/feedLayout";
 import type { AnnotationItem } from "../../types";
-import { Tabs, EmptyState } from "../ui";
+import Card from "../common/Card";
+import { EmptyState, Tabs } from "../ui";
 import LayoutToggle from "../ui/LayoutToggle";
-import { useStore as useNanoStore } from "@nanostores/react";
-import { $feedLayout } from "../../store/feedLayout";
 
 interface MasonryFeedProps {
   motivation?: string;
@@ -50,7 +49,7 @@ function MasonryContent({
     getFeed(params)
       .then((data) => {
         if (cancelled) return;
-        setItems(data?.items || []);
+        setItems(data.items);
         setLoading(false);
       })
       .catch((e) => {

web/src/components/navigation/MobileNav.tsx

@@ -1,22 +1,23 @@
-import React, { useState, useEffect } from "react";
-import { Link, useLocation } from "react-router-dom";
 import { useStore } from "@nanostores/react";
-import { $user, logout } from "../../store/auth";
-import { getUnreadNotificationCount } from "../../api/client";
 import {
-  Home,
-  Search,
+  Bell,
+  Bookmark,
   Folder,
-  User,
+  Highlighter,
+  Home,
+  LogOut,
+  MessageSquareText,
+  MoreHorizontal,
   PenSquare,
-  Bookmark,
+  Search,
   Settings,
-  MoreHorizontal,
-  LogOut,
-  Bell,
-  Highlighter,
+  User,
   X,
 } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { getUnreadNotificationCount } from "../../api/client";
+import { $user, logout } from "../../store/auth";
 import { AppleIcon } from "../common/Icons";
 
 export default function MobileNav() {
@@ -84,6 +85,15 @@ export default function MobileNav() {
 
                 <div className="h-px bg-surface-200 dark:bg-surface-700 my-2" />
 
+                <Link
+                  to="/annotations"
+                  className="flex items-center gap-3 p-3 rounded-xl hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors text-surface-700 dark:text-surface-200"
+                  onClick={closeMenu}
+                >
+                  <MessageSquareText size={20} />
+                  <span>Annotations</span>
+                </Link>
+
                 <Link
                   to="/highlights"
                   className="flex items-center gap-3 p-3 rounded-xl hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors text-surface-700 dark:text-surface-200"

web/src/components/ui/Tabs.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { clsx } from "clsx";
+import React from "react";
 
 interface Tab {
   id: string;
@@ -23,7 +23,7 @@ export default function Tabs({
   return (
     <div
       className={clsx(
-        "flex gap-1 bg-surface-100 dark:bg-surface-800 p-1 rounded-lg w-fit",
+        "flex max-w-full overflow-x-auto gap-1 bg-surface-100 dark:bg-surface-800 p-1 rounded-lg w-fit",
         className,
       )}
     >

web/src/lib/og.ts

@@ -195,7 +195,8 @@ export async function fetchBookmarkOG(uri: string): Promise<OGData | null> {
   const domain = extractDomain(source);
 
   const title = item.title || item.target?.title || "Bookmark on Margin";
-  let description = item.description || extractBody(item.body) || item.bodyValue || "";
+  let description =
+    item.description || extractBody(item.body) || item.bodyValue || "";
   if (!description) description = "A saved bookmark on Margin";
   if (domain) description += ` from ${domain}`;
   description = truncate(description, 200);

web/src/pages/og-image.ts

@@ -79,7 +79,8 @@ async function fetchRecordData(uri: string): Promise<RecordData | null> {
         : "";
       const selectorText =
         item.target?.selector?.exact || item.selector?.exact || "";
-      const bodyText = extractBody(item.body) || item.bodyValue || item.text || "";
+      const bodyText =
+        extractBody(item.body) || item.bodyValue || item.text || "";
       const motivation = item.motivation || "";
       const targetTitle = item.target?.title || item.title || "";
 

web/src/types.ts

@@ -93,10 +93,9 @@ export interface AnnotationItem {
 export type ActorSearchItem = UserProfile;
 
 export interface FeedResponse {
-  cursor?: string;
   items: AnnotationItem[];
-  hasMore?: boolean;
-  fetchedCount?: number;
+  hasMore: boolean;
+  fetchedCount: number;
 }
 
 export interface NotificationItem {

web/src/views/core/Feed.tsx

@@ -1,21 +1,21 @@
-import React, { useEffect, useState, useCallback } from "react";
-import { useSearchParams } from "react-router-dom";
-import { getFeed } from "../../api/client";
-import Card from "../../components/common/Card";
+import { useStore } from "@nanostores/react";
+import { clsx } from "clsx";
 import {
-  Loader2,
-  Clock,
   Bookmark,
+  Clock,
   Highlighter,
+  Loader2,
   MessageSquareText,
 } from "lucide-react";
-import { useStore } from "@nanostores/react";
-import { $user } from "../../store/auth";
-import type { AnnotationItem } from "../../types";
-import { Tabs, EmptyState, Button } from "../../components/ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { getFeed } from "../../api/client";
+import Card from "../../components/common/Card";
+import { Button, EmptyState, Tabs } from "../../components/ui";
 import LayoutToggle from "../../components/ui/LayoutToggle";
+import { $user } from "../../store/auth";
 import { $feedLayout } from "../../store/feedLayout";
-import { clsx } from "clsx";
+import type { AnnotationItem } from "../../types";
 
 interface FeedProps {
   initialType?: string;
@@ -51,14 +51,10 @@ function FeedContent({
     getFeed({ type, motivation, tag, limit: LIMIT, offset: 0 })
       .then((data) => {
         if (cancelled) return;
-        const fetched = data?.items || [];
+        const fetched = data.items;
         setItems(fetched);
-        if (data?.hasMore !== undefined) {
-          setHasMore(data.hasMore);
-        } else {
-          setHasMore(fetched.length >= LIMIT);
-        }
-        setOffset(data?.fetchedCount ?? fetched.length);
+        setHasMore(data.hasMore);
+        setOffset(data.fetchedCount);
         setLoading(false);
       })
       .catch((e) => {
@@ -86,12 +82,8 @@ function FeedContent({
       });
       const fetched = data?.items || [];
       setItems((prev) => [...prev, ...fetched]);
-      if (data?.hasMore !== undefined) {
-        setHasMore(data.hasMore);
-      } else {
-        setHasMore(fetched.length >= LIMIT);
-      }
-      setOffset((prev) => prev + (data?.fetchedCount ?? fetched.length));
+      setHasMore(data.hasMore);
+      setOffset((prev) => prev + data.fetchedCount);
     } catch (e) {
       console.error(e);
     } finally {