lazyreview 0.1.4

package/src/components/pr/PRTabs.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Box } from 'ink'
+import { Tab, Tabs } from 'ink-tab'
+import { useTheme } from '../../theme/index'
+
+export const PR_TAB_NAMES = ['Conversations', 'Commits', 'Files'] as const
+export type PRTabName = (typeof PR_TAB_NAMES)[number]
+
+interface PRTabsProps {
+  readonly activeIndex: number
+  readonly onChange: (index: number) => void
+}
+
+export function PRTabs({ activeIndex, onChange }: PRTabsProps): React.ReactElement {
+  const theme = useTheme()
+
+  return (
+    <Box
+      flexDirection="row"
+      paddingX={1}
+      paddingY={1}
+      borderStyle="single"
+      borderColor={theme.colors.border}
+    >
+      <Tabs
+        key={activeIndex}
+        defaultValue={PR_TAB_NAMES[activeIndex]}
+        onChange={(name) => {
+          const index = PR_TAB_NAMES.indexOf(name as PRTabName)
+          if (index >= 0) onChange(index)
+        }}
+        showIndex={true}
+        isFocused={true}
+        colors={{
+          activeTab: {
+            color: theme.colors.accent,
+            backgroundColor: theme.colors.bg,
+          },
+        }}
+        keyMap={{ useNumbers: true, useTab: true }}
+      >
+        {PR_TAB_NAMES.map((name) => (
+          <Tab key={name} name={name}>
+            {name}
+          </Tab>
+        ))}
+      </Tabs>
+    </Box>
+  )
+}

package/src/components/pr/index.ts

@@ -0,0 +1,8 @@
+export { PRListItem } from './PRListItem'
+export { PRHeader } from './PRHeader'
+export { PRTabs, PR_TAB_NAMES } from './PRTabs'
+export type { PRTabName } from './PRTabs'
+export { FilesTab } from './FilesTab'
+export { CommentsTab } from './CommentsTab'
+export { ConversationsTab } from './ConversationsTab'
+export { CommitsTab } from './CommitsTab'

package/src/hooks/index.ts

@@ -0,0 +1,12 @@
+export { useAuth } from './useAuth'
+export { useConfig } from './useConfig'
+export { useGitHub } from './useGitHub'
+export { useLoading, setLoadingService, getLoadingService } from './useLoading'
+export { useAppKeymap } from './useAppKeymap'
+export { useTheme } from '../theme/index'
+export { useListNavigation } from './useListNavigation'
+export { useActivePanel } from './useActivePanel'
+export { usePagination } from './usePagination'
+export { useFilter } from './useFilter'
+export type { Panel } from './useActivePanel'
+export type { SortField, SortDirection, FilterState } from './useFilter'

package/src/hooks/useActivePanel.ts

@@ -0,0 +1,54 @@
+import { useInput } from 'ink'
+import { useCallback, useEffect, useState } from 'react'
+
+export type Panel = 'sidebar' | 'list' | 'detail'
+
+interface UseActivePanelOptions {
+  readonly hasSelection: boolean
+}
+
+interface UseActivePanelResult {
+  readonly activePanel: Panel
+  readonly setActivePanel: (panel: Panel) => void
+}
+
+export function useActivePanel({
+  hasSelection,
+}: UseActivePanelOptions): UseActivePanelResult {
+  const [activePanel, setActivePanel] = useState<Panel>('sidebar')
+
+  // Reset to list when selection is lost
+  useEffect(() => {
+    if (!hasSelection && activePanel === 'detail') {
+      setActivePanel('list')
+    }
+  }, [hasSelection, activePanel])
+
+  const handleEscape = useCallback(() => {
+    if (activePanel === 'detail') {
+      setActivePanel('list')
+    } else if (activePanel === 'list') {
+      setActivePanel('sidebar')
+    }
+  }, [activePanel])
+
+  const handleTab = useCallback(() => {
+    if (activePanel === 'sidebar') {
+      setActivePanel('list')
+    } else if (activePanel === 'list' && hasSelection) {
+      setActivePanel('detail')
+    } else if (activePanel === 'detail') {
+      setActivePanel('sidebar')
+    }
+  }, [activePanel, hasSelection])
+
+  useInput((_input, key) => {
+    if (key.escape) {
+      handleEscape()
+    } else if (key.tab) {
+      handleTab()
+    }
+  })
+
+  return { activePanel, setActivePanel }
+}

package/src/hooks/useAppKeymap.ts

@@ -0,0 +1,22 @@
+import { useInput } from 'ink'
+
+interface AppKeymapActions {
+  readonly toggleSidebar: () => void
+  readonly toggleHelp: () => void
+  readonly quit: () => void
+  readonly switchFocus: () => void
+}
+
+export function useAppKeymap(actions: AppKeymapActions): void {
+  useInput((input, key) => {
+    if (input === 'b') {
+      actions.toggleSidebar()
+    } else if (input === '?') {
+      actions.toggleHelp()
+    } else if (input === 'q') {
+      actions.quit()
+    } else if (key.tab) {
+      actions.switchFocus()
+    }
+  })
+}

package/src/hooks/useAuth.ts

@@ -0,0 +1,131 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { Effect } from 'effect'
+import { Auth, AuthLive } from '../services/Auth'
+import type { TokenSource, TokenInfo } from '../services/Auth'
+import type { User } from '../models/user'
+
+interface UseAuthReturn {
+  readonly user: User | null
+  readonly isAuthenticated: boolean
+  readonly error: string | null
+  readonly loading: boolean
+  readonly saveToken: (token: string) => Promise<void>
+  readonly isSavingToken: boolean
+  readonly tokenInfo: TokenInfo | null
+  readonly availableSources: TokenSource[]
+  readonly setPreferredSource: (source: TokenSource) => Promise<void>
+  readonly clearManualToken: () => Promise<void>
+  readonly refetch: () => void
+}
+
+export function useAuth(): UseAuthReturn {
+  const queryClient = useQueryClient()
+
+  const { data, error, isLoading, refetch } = useQuery({
+    queryKey: ['auth'],
+    queryFn: () =>
+      Effect.runPromise(
+        Effect.gen(function* () {
+          const auth = yield* Auth
+          const authenticated = yield* auth.isAuthenticated()
+
+          if (!authenticated) {
+            return { user: null, isAuthenticated: false }
+          }
+
+          const currentUser = yield* auth.getUser()
+          return { user: currentUser, isAuthenticated: true }
+        }).pipe(Effect.provide(AuthLive)),
+      ),
+    staleTime: Infinity,
+  })
+
+  const { data: tokenInfoData } = useQuery({
+    queryKey: ['tokenInfo'],
+    queryFn: () =>
+      Effect.runPromise(
+        Effect.gen(function* () {
+          const auth = yield* Auth
+          return yield* auth.getTokenInfo()
+        }).pipe(Effect.provide(AuthLive)),
+      ),
+    staleTime: 0, // Always refetch
+  })
+
+  const { data: availableSourcesData } = useQuery({
+    queryKey: ['availableSources'],
+    queryFn: () =>
+      Effect.runPromise(
+        Effect.gen(function* () {
+          const auth = yield* Auth
+          return yield* auth.getAvailableSources()
+        }).pipe(Effect.provide(AuthLive)),
+      ),
+    staleTime: 0,
+  })
+
+  const saveTokenMutation = useMutation({
+    mutationFn: async (token: string) => {
+      await Effect.runPromise(
+        Effect.gen(function* () {
+          const auth = yield* Auth
+          yield* auth.setToken(token)
+        }).pipe(Effect.provide(AuthLive)),
+      )
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth'] })
+      queryClient.invalidateQueries({ queryKey: ['tokenInfo'] })
+      queryClient.invalidateQueries({ queryKey: ['availableSources'] })
+    },
+  })
+
+  const setPreferredSourceMutation = useMutation({
+    mutationFn: async (source: TokenSource) => {
+      await Effect.runPromise(
+        Effect.gen(function* () {
+          const auth = yield* Auth
+          yield* auth.setPreferredSource(source)
+        }).pipe(Effect.provide(AuthLive)),
+      )
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth'] })
+      queryClient.invalidateQueries({ queryKey: ['tokenInfo'] })
+    },
+  })
+
+  const clearManualTokenMutation = useMutation({
+    mutationFn: async () => {
+      await Effect.runPromise(
+        Effect.gen(function* () {
+          const auth = yield* Auth
+          yield* auth.clearManualToken()
+        }).pipe(Effect.provide(AuthLive)),
+      )
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth'] })
+      queryClient.invalidateQueries({ queryKey: ['tokenInfo'] })
+      queryClient.invalidateQueries({ queryKey: ['availableSources'] })
+    },
+  })
+
+  return {
+    user: data?.user ?? null,
+    isAuthenticated: data?.isAuthenticated ?? false,
+    error: error ? String(error) : null,
+    loading: isLoading,
+    saveToken: saveTokenMutation.mutateAsync,
+    isSavingToken: saveTokenMutation.isPending,
+    tokenInfo: tokenInfoData ?? null,
+    availableSources: availableSourcesData ?? [],
+    setPreferredSource: setPreferredSourceMutation.mutateAsync,
+    clearManualToken: clearManualTokenMutation.mutateAsync,
+    refetch: () => {
+      refetch()
+      queryClient.invalidateQueries({ queryKey: ['tokenInfo'] })
+      queryClient.invalidateQueries({ queryKey: ['availableSources'] })
+    },
+  }
+}

package/src/hooks/useConfig.ts

@@ -0,0 +1,52 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { Effect } from 'effect'
+import { Config, ConfigLive, type AppConfig } from '../services/Config'
+
+interface UseConfigReturn {
+  readonly config: AppConfig | null
+  readonly error: string | null
+  readonly loading: boolean
+  readonly updateConfig: (updates: Partial<AppConfig>) => void
+}
+
+export function useConfig(): UseConfigReturn {
+  const queryClient = useQueryClient()
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ['config'],
+    queryFn: () =>
+      Effect.runPromise(
+        Effect.gen(function* () {
+          const configService = yield* Config
+          return yield* configService.load()
+        }).pipe(Effect.provide(ConfigLive)),
+      ),
+  })
+
+  const mutation = useMutation({
+    mutationFn: (newConfig: AppConfig) =>
+      Effect.runPromise(
+        Effect.gen(function* () {
+          const configService = yield* Config
+          yield* configService.save(newConfig)
+        }).pipe(Effect.provide(ConfigLive)),
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['config'] })
+    },
+  })
+
+  const updateConfig = (updates: Partial<AppConfig>) => {
+    if (!data) return
+    const newConfig = { ...data, ...updates } as AppConfig
+    queryClient.setQueryData(['config'], newConfig)
+    mutation.mutate(newConfig)
+  }
+
+  return {
+    config: data ?? null,
+    error: error ? String(error) : null,
+    loading: isLoading,
+    updateConfig,
+  }
+}

package/src/hooks/useFilter.ts

@@ -0,0 +1,192 @@
+import { useState, useMemo, useCallback } from 'react'
+import type { PullRequest } from '../models/pull-request'
+
+export type SortField = 'updated' | 'created' | 'repo' | 'author' | 'title'
+export type SortDirection = 'asc' | 'desc'
+
+export interface FilterState {
+  readonly search: string
+  readonly repo: string | null
+  readonly author: string | null
+  readonly label: string | null
+  readonly sortBy: SortField
+  readonly sortDirection: SortDirection
+}
+
+const defaultFilter: FilterState = {
+  search: '',
+  repo: null,
+  author: null,
+  label: null,
+  sortBy: 'updated',
+  sortDirection: 'desc',
+}
+
+function extractRepoFromUrl(url: string): string | null {
+  const match = url.match(/github\.com\/([^/]+\/[^/]+)\/pull/)
+  return match?.[1] ?? null
+}
+
+function matchesSearch(pr: PullRequest, search: string): boolean {
+  if (!search) return true
+  const lowerSearch = search.toLowerCase()
+  return (
+    pr.title.toLowerCase().includes(lowerSearch) ||
+    pr.user.login.toLowerCase().includes(lowerSearch) ||
+    String(pr.number).includes(lowerSearch)
+  )
+}
+
+function matchesRepo(pr: PullRequest, repo: string | null): boolean {
+  if (!repo) return true
+  const prRepo = extractRepoFromUrl(pr.html_url)
+  return prRepo?.toLowerCase().includes(repo.toLowerCase()) ?? false
+}
+
+function matchesAuthor(pr: PullRequest, author: string | null): boolean {
+  if (!author) return true
+  return pr.user.login.toLowerCase().includes(author.toLowerCase())
+}
+
+function matchesLabel(pr: PullRequest, label: string | null): boolean {
+  if (!label) return true
+  const lowerLabel = label.toLowerCase()
+  return pr.labels.some((l) => l.name.toLowerCase().includes(lowerLabel))
+}
+
+function comparePRs(
+  a: PullRequest,
+  b: PullRequest,
+  sortBy: SortField,
+  sortDirection: SortDirection,
+): number {
+  let comparison = 0
+
+  switch (sortBy) {
+    case 'updated':
+      comparison =
+        new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
+      break
+    case 'created':
+      comparison =
+        new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+      break
+    case 'repo': {
+      const repoA = extractRepoFromUrl(a.html_url) ?? ''
+      const repoB = extractRepoFromUrl(b.html_url) ?? ''
+      comparison = repoA.localeCompare(repoB)
+      break
+    }
+    case 'author':
+      comparison = a.user.login.localeCompare(b.user.login)
+      break
+    case 'title':
+      comparison = a.title.localeCompare(b.title)
+      break
+  }
+
+  return sortDirection === 'asc' ? -comparison : comparison
+}
+
+interface UseFilterResult {
+  readonly filter: FilterState
+  readonly filteredItems: readonly PullRequest[]
+  readonly setSearch: (search: string) => void
+  readonly setRepo: (repo: string | null) => void
+  readonly setAuthor: (author: string | null) => void
+  readonly setLabel: (label: string | null) => void
+  readonly setSortBy: (sortBy: SortField) => void
+  readonly toggleSortDirection: () => void
+  readonly clearFilters: () => void
+  readonly hasActiveFilters: boolean
+  readonly availableRepos: readonly string[]
+  readonly availableAuthors: readonly string[]
+  readonly availableLabels: readonly string[]
+}
+
+export function useFilter(items: readonly PullRequest[]): UseFilterResult {
+  const [filter, setFilter] = useState<FilterState>(defaultFilter)
+
+  const availableRepos = useMemo(() => {
+    const repos = new Set<string>()
+    items.forEach((pr) => {
+      const repo = extractRepoFromUrl(pr.html_url)
+      if (repo) repos.add(repo)
+    })
+    return Array.from(repos).sort()
+  }, [items])
+
+  const availableAuthors = useMemo(() => {
+    const authors = new Set<string>()
+    items.forEach((pr) => authors.add(pr.user.login))
+    return Array.from(authors).sort()
+  }, [items])
+
+  const availableLabels = useMemo(() => {
+    const labels = new Set<string>()
+    items.forEach((pr) => pr.labels.forEach((l) => labels.add(l.name)))
+    return Array.from(labels).sort()
+  }, [items])
+
+  const filteredItems = useMemo(() => {
+    return items
+      .filter((pr) => matchesSearch(pr, filter.search))
+      .filter((pr) => matchesRepo(pr, filter.repo))
+      .filter((pr) => matchesAuthor(pr, filter.author))
+      .filter((pr) => matchesLabel(pr, filter.label))
+      .sort((a, b) => comparePRs(a, b, filter.sortBy, filter.sortDirection))
+  }, [items, filter])
+
+  const setSearch = useCallback((search: string) => {
+    setFilter((prev) => ({ ...prev, search }))
+  }, [])
+
+  const setRepo = useCallback((repo: string | null) => {
+    setFilter((prev) => ({ ...prev, repo }))
+  }, [])
+
+  const setAuthor = useCallback((author: string | null) => {
+    setFilter((prev) => ({ ...prev, author }))
+  }, [])
+
+  const setLabel = useCallback((label: string | null) => {
+    setFilter((prev) => ({ ...prev, label }))
+  }, [])
+
+  const setSortBy = useCallback((sortBy: SortField) => {
+    setFilter((prev) => ({ ...prev, sortBy }))
+  }, [])
+
+  const toggleSortDirection = useCallback(() => {
+    setFilter((prev) => ({
+      ...prev,
+      sortDirection: prev.sortDirection === 'asc' ? 'desc' : 'asc',
+    }))
+  }, [])
+
+  const clearFilters = useCallback(() => {
+    setFilter(defaultFilter)
+  }, [])
+
+  const hasActiveFilters =
+    filter.search !== '' ||
+    filter.repo !== null ||
+    filter.author !== null ||
+    filter.label !== null
+
+  return {
+    filter,
+    filteredItems,
+    setSearch,
+    setRepo,
+    setAuthor,
+    setLabel,
+    setSortBy,
+    toggleSortDirection,
+    clearFilters,
+    hasActiveFilters,
+    availableRepos,
+    availableAuthors,
+    availableLabels,
+  }
+}