feat: add Linkat links tab to profile

Adds support for displaying Linkat board links on user profiles.
The Links tab appears when a user has configured a blue.linkat.board
record with link cards.

src/components/ProfileLinkatSection.tsx

···
+// This file has been moved to /src/screens/Profile/Sections/Linkat.tsx
+// Keeping this stub to prevent import errors
+export {}

src/screens/Profile/Sections/Linkat.tsx

···
+import React, {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+} from 'react'
+import {
+  findNodeHandle,
+  type ListRenderItemInfo,
+  useWindowDimensions,
+  View,
+} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useLinkatBoardQuery} from '#/state/queries/linkat'
+import {EmptyState} from '#/view/com/util/EmptyState'
+import {List, type ListRef} from '#/view/com/util/List'
+import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
+import {atoms as a, useTheme} from '#/alf'
+import {ChainLink_Stroke2_Corner0_Rounded as LinkIcon} from '#/components/icons/ChainLink'
+import {Link as InternalLink} from '#/components/Link'
+import {Text} from '#/components/Typography'
+import {IS_NATIVE} from '#/env'
+import {type SectionRef} from './types'
+
+const LOADING = {_reactKey: '__loading__'}
+const EMPTY = {_reactKey: '__empty__'}
+
+interface Props {
+  ref?: React.Ref<SectionRef>
+  did: string
+  headerHeight: number
+  isFocused: boolean
+  scrollElRef: ListRef
+  setScrollViewTag: (tag: number | null) => void
+}
+
+export function ProfileLinkatSection({
+  ref,
+  did,
+  headerHeight,
+  isFocused,
+  scrollElRef,
+  setScrollViewTag,
+}: Props) {
+  const {_} = useLingui()
+  const {height} = useWindowDimensions()
+  const {data: linkatBoard, isLoading} = useLinkatBoardQuery(did)
+
+  const items = useMemo(() => {
+    let listItems: any[] = []
+
+    if (isLoading) {
+      listItems = listItems.concat([LOADING])
+    } else if (
+      !linkatBoard ||
+      !linkatBoard.cards ||
+      linkatBoard.cards.length === 0
+    ) {
+      listItems = listItems.concat([EMPTY])
+    } else {
+      listItems = listItems.concat(
+        linkatBoard.cards.map((card, index) => ({
+          ...card,
+          _reactKey: `link-${index}`,
+        })),
+      )
+    }
+
+    return listItems
+  }, [linkatBoard, isLoading])
+
+  const onScrollToTop = useCallback(() => {
+    scrollElRef.current?.scrollToOffset({
+      animated: true,
+      offset: -headerHeight,
+    })
+  }, [scrollElRef, headerHeight])
+
+  useImperativeHandle(ref, () => ({
+    scrollToTop: onScrollToTop,
+  }))
+
+  const renderItem = useCallback(
+    ({item}: ListRenderItemInfo<any>) => {
+      if (item === EMPTY) {
+        return (
+          <View
+            style={[
+              a.flex_1,
+              a.align_center,
+              {
+                minHeight: height - headerHeight,
+                paddingTop: headerHeight,
+              },
+            ]}>
+            <EmptyState
+              icon={LinkIcon}
+              iconSize="3xl"
+              message={_(msg`No links yet`)}
+            />
+          </View>
+        )
+      } else if (item === LOADING) {
+        return (
+          <View style={{paddingTop: headerHeight}}>
+            <FeedLoadingPlaceholder />
+          </View>
+        )
+      }
+
+      return <LinkatCard card={item} />
+    },
+    [_, height, headerHeight],
+  )
+
+  useEffect(() => {
+    if (IS_NATIVE && isFocused && scrollElRef.current) {
+      const nativeTag = findNodeHandle(scrollElRef.current)
+      setScrollViewTag(nativeTag)
+    }
+  }, [isFocused, scrollElRef, setScrollViewTag])
+
+  return (
+    <View testID="linkatSection">
+      <List
+        testID="linkatList"
+        ref={scrollElRef}
+        data={items}
+        keyExtractor={(item: any) => item._reactKey}
+        renderItem={renderItem}
+        contentContainerStyle={{
+          paddingTop: headerHeight,
+          minHeight: height,
+        }}
+        style={{flex: 1}}
+        // @ts-ignore web only -prf
+        desktopFixedHeight={IS_NATIVE ? undefined : height}
+      />
+    </View>
+  )
+}
+
+function LinkatCard({
+  card,
+}: {
+  card: {url: string; text: string; emoji?: string}
+}) {
+  const t = useTheme()
+
+  return (
+    <InternalLink
+      to={card.url}
+      label={card.text}
+      style={[
+        a.flex_row,
+        a.align_center,
+        a.gap_md,
+        a.px_lg,
+        a.py_lg,
+        a.border_b,
+        t.atoms.border_contrast_low,
+        t.atoms.bg,
+      ]}
+      hoverStyle={[t.atoms.bg_contrast_25]}>
+      {card.emoji && (
+        <View
+          style={[
+            a.justify_center,
+            a.align_center,
+            {
+              width: 48,
+              height: 48,
+            },
+          ]}>
+          <Text style={[{fontSize: 32}]} selectable={false}>
+            {card.emoji}
+          </Text>
+        </View>
+      )}
+      <View style={[a.flex_1, {minWidth: 0}]}>
+        <Text
+          style={[a.text_md, a.font_semibold, a.leading_snug, t.atoms.text]}
+          numberOfLines={1}>
+          {card.text}
+        </Text>
+        <Text
+          style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}
+          numberOfLines={1}>
+          {new URL(card.url).hostname}
+        </Text>
+      </View>
+      <View style={[a.justify_center, a.align_center, {width: 24, height: 24}]}>
+        <LinkIcon size="md" style={t.atoms.text_contrast_medium} />
+      </View>
+    </InternalLink>
+  )
+}

src/state/queries/linkat.ts

···
+/**
+ * Linkat integration for Witchsky
+ * Fetches and caches blue.linkat.board records
+ */
+import {useQuery} from '@tanstack/react-query'
+
+import {useAgent} from '#/state/session'
+
+export interface LinkatCard {
+  url: string
+  text: string
+  emoji?: string
+}
+
+export interface LinkatBoard {
+  cards: LinkatCard[]
+}
+
+interface LinkatBoardRecord {
+  cards: Array<{
+    url?: string
+    text?: string
+    emoji?: string
+  }>
+}
+
+const LINKAT_COLLECTION = 'blue.linkat.board'
+const LINKAT_RKEY = 'self'
+const STALE_TIME = 5 * 60 * 1000 // 5 minutes
+const CACHE_TIME = 10 * 60 * 1000 // 10 minutes
+
+/**
+ * Hook to fetch a user's Linkat board
+ */
+export function useLinkatBoardQuery(did: string | undefined) {
+  const agent = useAgent()
+
+  return useQuery({
+    queryKey: ['linkat-board', did],
+    queryFn: async () => {
+      if (!did || !agent) return null
+
+      try {
+        const response = await agent.com.atproto.repo.getRecord({
+          repo: did,
+          collection: LINKAT_COLLECTION,
+          rkey: LINKAT_RKEY,
+        })
+
+        if (!response.data.value || typeof response.data.value !== 'object') {
+          return null
+        }
+
+        const value = response.data.value as LinkatBoardRecord
+        if (!Array.isArray(value.cards)) {
+          return null
+        }
+
+        return {
+          cards: value.cards.map(card => ({
+            url: card.url || '',
+            text: card.text || '',
+            emoji: card.emoji,
+          })),
+        }
+      } catch (error) {
+        // Return null if record not found or other error
+        return null
+      }
+    },
+    enabled: !!did && !!agent,
+    staleTime: STALE_TIME,
+    gcTime: CACHE_TIME,
+  })
+}

src/view/screens/Profile.tsx

···
 import {listenSoftReset} from '#/state/events'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useLabelerInfoQuery} from '#/state/queries/labeler'
+import {useLinkatBoardQuery} from '#/state/queries/linkat'
 import {resetProfilePostsQueries} from '#/state/queries/post-feed'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useResolveDidQuery} from '#/state/queries/resolve-uri'
···
 import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header'
 import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed'
 import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels'
+import {ProfileLinkatSection} from '#/screens/Profile/Sections/Linkat'
 import {atoms as a} from '#/alf'
 import {Circle_And_Square_Stroke1_Corner0_Rounded_Filled as CircleAndSquareIcon} from '#/components/icons/CircleAndSquare'
 import {Heart2_Stroke1_Corner0_Rounded as HeartIcon} from '#/components/icons/Heart2'
···
   const listsSectionRef = React.useRef<SectionRef>(null)
   const starterPacksSectionRef = React.useRef<SectionRef>(null)
   const labelsSectionRef = React.useRef<SectionRef>(null)
+  const linksSectionRef = React.useRef<SectionRef>(null)
 
   useSetTitle(combinedDisplayName(profile))
 
···
   // subtract starterpack count from list count, since starterpacks are a type of list
   const listCount = (profile.associated?.lists || 0) - starterPackCount
   const showListsTab = hasSession && (isMe || listCount > 0)
+  // Check if user has Linkat board
+  const {data: linkatBoard} = useLinkatBoardQuery(profile.did)
+  const showLinksTab = Boolean(linkatBoard?.cards?.length)
 
   const sectionTitles = [
     showFiltersTab ? _(msg`Labels`) : undefined,
···
     showMediaTab ? _(msg`Media`) : undefined,
     showVideosTab ? _(msg`Videos`) : undefined,
     showLikesTab ? _(msg`Likes`) : undefined,
+    showLinksTab ? _(msg`Links`) : undefined,
     showFeedsTab ? _(msg`Feeds`) : undefined,
     showStarterPacksTab ? _(msg`Starter Packs`) : undefined,
     showListsTab && !hasLabeler ? _(msg`Lists`) : undefined,
···
   let mediaIndex: number | null = null
   let videosIndex: number | null = null
   let likesIndex: number | null = null
+  let linksIndex: number | null = null
   let feedsIndex: number | null = null
   let starterPacksIndex: number | null = null
   let listsIndex: number | null = null
   if (showFiltersTab) {
     filtersIndex = nextIndex++
   }
+  if (showListsTab && hasLabeler) {
+    listsIndex = nextIndex++
+  }
   if (showPostsTab) {
     postsIndex = nextIndex++
   }
···
   if (showLikesTab) {
     likesIndex = nextIndex++
   }
+  if (showLinksTab) {
+    linksIndex = nextIndex++
+  }
   if (showFeedsTab) {
     feedsIndex = nextIndex++
   }
   if (showStarterPacksTab) {
     starterPacksIndex = nextIndex++
   }
-  if (showListsTab) {
+  if (showListsTab && !hasLabeler) {
     listsIndex = nextIndex++
   }
 
···
         videosSectionRef.current?.scrollToTop()
       } else if (index === likesIndex) {
         likesSectionRef.current?.scrollToTop()
+      } else if (index === linksIndex) {
+        linksSectionRef.current?.scrollToTop()
       } else if (index === feedsIndex) {
         feedsSectionRef.current?.scrollToTop()
       } else if (index === starterPacksIndex) {
···
       mediaIndex,
       videosIndex,
       likesIndex,
+      linksIndex,
       feedsIndex,
       listsIndex,
       starterPacksIndex,
···
                 setScrollViewTag={setScrollViewTag}
                 emptyStateMessage={_(msg`No likes yet`)}
                 emptyStateIcon={HeartIcon}
+              />
+            )
+          : null}
+        {showLinksTab
+          ? ({headerHeight, isFocused, scrollElRef}) => (
+              <ProfileLinkatSection
+                ref={linksSectionRef}
+                did={profile.did}
+                headerHeight={headerHeight}
+                isFocused={isFocused}
+                scrollElRef={scrollElRef as ListRef}
+                setScrollViewTag={setScrollViewTag}
               />
             )
           : null}