refactor: user positions table llamalend

apps/main/src/llamalend/features/market-list/LlamaMarketsList.tsx

@@ -52,7 +52,7 @@ export const LlamaMarketsList = () => {
   const loading = isReloading || (!data && (!isError || isLoading)) // on initial render isLoading is still false
   return (
     <ListPageWrapper footer={<LendTableFooter />}>
-      {data?.userHasPositions && <UserPositionsTabs result={data} loading={loading} />}
+      {data?.userHasPositions && <UserPositionsTabs onReload={onReload} result={data} loading={loading} />}
       <LlamaMarketsTable onReload={onReload} result={data} isError={isError} loading={loading} />
     </ListPageWrapper>
   )

apps/main/src/llamalend/features/market-list/LlamaMonitorBotButton.tsx

@@ -0,0 +1,22 @@
+import Button from '@mui/material/Button'
+import Link from '@mui/material/Link'
+import { t } from '@ui-kit/lib/i18n'
+import { ArrowTopRightIcon } from '@ui-kit/shared/icons/ArrowTopRightIcon'
+
+// TODO: move it to constants / links file
+const LLAMA_MONITOR_BOT_URL = 'https://t.me/LlamalendMonitorBot'
+
+export const LlamaMonitorBotButton = () => (
+    <Button
+      color="ghost"
+      size="extraSmall"
+      component={Link}
+      sx={{ textDecoration: 'underline', textUnderlineOffset: '2px', '&:hover': { textDecoration: 'underline' } }}
+      endIcon={<ArrowTopRightIcon />}
+      href={LLAMA_MONITOR_BOT_URL}
+      target="_blank"
+      rel="noreferrer noopener"
+    >
+      {t`Get notified with llamamonitorbot`}
+    </Button>
+  )

apps/main/src/llamalend/features/market-list/UserPositionTabs.tsx

@@ -1,27 +1,67 @@
-import { useState } from 'react'
-import type { LlamaMarketsResult } from '@/llamalend/entities/llama-markets'
+import { useMemo, useState } from 'react'
 import Stack from '@mui/material/Stack'
 import { t } from '@ui-kit/lib/i18n'
 import { TabsSwitcher, type TabOption } from '@ui-kit/shared/ui/TabsSwitcher'
 import { MarketRateType } from '@ui-kit/types/market'
+import { LlamaMonitorBotButton } from './LlamaMonitorBotButton'
 import { UserPositionsTable, type UserPositionsTableProps } from './UserPositionsTable'
 
-const tabs: TabOption<MarketRateType>[] = [
-  { value: MarketRateType.Borrow, label: t`Borrow` },
-  { value: MarketRateType.Supply, label: t`Supply` },
-]
+const getMarketCountLabel = (openPositions: number) => (openPositions > 0 ? '◼︎' + openPositions : '')
 
-/** Show the first tab that has user positions by default, or the first tab if none are found. */
-const getDefault = (userHasPositions: LlamaMarketsResult['userHasPositions'] | undefined) =>
-  tabs.find(({ value }) => userHasPositions?.Lend[value] || userHasPositions?.Mint[value]) ?? tabs[0]
+export const UserPositionsTabs = (props: Omit<UserPositionsTableProps, 'tab' | 'openPositionsByMarketType'>) => {
+  // Calculate total positions across all markets (independent of filters)
+  const openPositionsCount = useMemo((): Record<MarketRateType, number> => {
+    const markets = props.result?.markets ?? []
+    return {
+      [MarketRateType.Borrow]: markets.filter((market) => market.userHasPositions?.[MarketRateType.Borrow]).length,
+      [MarketRateType.Supply]: markets.filter((market) => market.userHasPositions?.[MarketRateType.Supply]).length,
+    }
+  }, [props.result?.markets])
+
+  // Define tabs with position counts
+  const tabs: TabOption<MarketRateType>[] = useMemo(
+    () => [
+      {
+        value: MarketRateType.Borrow,
+        label: `${t`Borrowing`} ${getMarketCountLabel(openPositionsCount[MarketRateType.Borrow])}`,
+      },
+      {
+        value: MarketRateType.Supply,
+        label: `${t`Lending`} ${getMarketCountLabel(openPositionsCount[MarketRateType.Supply])}`,
+      },
+    ],
+    [openPositionsCount],
+  )
+
+  // Show the first tab that has user positions by default, or the first tab if none are found
+  const defaultTab = useMemo(() => {
+    const userHasPositions = props.result?.userHasPositions
+    return tabs.find(({ value }) => userHasPositions?.Lend[value] || userHasPositions?.Mint[value]) ?? tabs[0]
+  }, [props.result?.userHasPositions, tabs])
+
+  const [tab, setTab] = useState<MarketRateType>(defaultTab.value)
 
-export const UserPositionsTabs = (props: Omit<UserPositionsTableProps, 'tab'>) => {
-  const defaultTab = getDefault(props.result?.userHasPositions).value
-  const [tab, setTab] = useState<MarketRateType>(defaultTab)
   return (
     <Stack>
-      <TabsSwitcher value={tab} onChange={setTab} variant="contained" size="medium" options={tabs} />
-      <UserPositionsTable {...props} tab={tab} />
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        // needed for the bottom border to be the same height as the tabs
+        alignItems="stretch"
+        sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}
+      >
+        <TabsSwitcher value={tab} onChange={setTab} variant="underlined" size="small" options={tabs} />
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="end"
+          sx={{ flexGrow: 1, borderBottom: (t) => `1px solid ${t.design.Layer[2].Outline}` }}
+        >
+          <LlamaMonitorBotButton />
+        </Stack>
+      </Stack>
+      {/* the key is needed to force a re-render when the tab changes, otherwise filters have stale state for few milliseconds */}
+      <UserPositionsTable key={tab} {...props} tab={tab} />
     </Stack>
   )
 }

apps/main/src/llamalend/features/market-list/UserPositionsTable.tsx

@@ -10,17 +10,20 @@ import { DataTable } from '@ui-kit/shared/ui/DataTable/DataTable'
 import { EmptyStateRow } from '@ui-kit/shared/ui/DataTable/EmptyStateRow'
 import { useColumnFilters } from '@ui-kit/shared/ui/DataTable/hooks/useColumnFilters'
 import { TableFilters } from '@ui-kit/shared/ui/DataTable/TableFilters'
-import { TableFiltersTitles } from '@ui-kit/shared/ui/DataTable/TableFiltersTitles'
+import { TableSearchField } from '@ui-kit/shared/ui/DataTable/TableSearchField'
 import { MarketRateType } from '@ui-kit/types/market'
 import { type LlamaMarketsResult } from '../../entities/llama-markets'
-import { UserPositionFilterChips } from './chips/UserPositionFilterChips'
+import { ChainFilterChip } from './chips/ChainFilterChip'
+import { LlamaListChips } from './chips/LlamaListChips'
 import { DEFAULT_SORT_BORROW, DEFAULT_SORT_SUPPLY, LLAMA_MARKET_COLUMNS } from './columns'
 import { LlamaMarketColumnId } from './columns.enum'
 import { useLlamaTableVisibility } from './hooks/useLlamaTableVisibility'
 import { useSearch } from './hooks/useSearch'
+import { LendingMarketsFilters } from './LendingMarketsFilters'
 import { LlamaMarketExpandedPanel } from './LlamaMarketExpandedPanel'
 
 const { isEqual } = lodash
+
 const LOCAL_STORAGE_KEYS = {
   // not using the t`` here as the value is used as a key in the local storage
   [MarketRateType.Borrow]: 'My Borrow Positions',
@@ -36,15 +39,17 @@ const useDefaultUserFilter = (type: MarketRateType) =>
   useMemo(() => [{ id: LlamaMarketColumnId.UserHasPositions, value: type }], [type])
 
 export type UserPositionsTableProps = {
+  onReload: () => void
   result: LlamaMarketsResult | undefined
   loading: boolean
   tab: MarketRateType
 }
 
 const migration: MigrationOptions<ColumnFiltersState> = { version: 1 }
 
-export const UserPositionsTable = ({ result, loading, tab }: UserPositionsTableProps) => {
+export const UserPositionsTable = ({ onReload, result, loading, tab }: UserPositionsTableProps) => {
   const { markets: data = [], userHasPositions } = result ?? {}
+  const userData = useMemo(() => data.filter((market) => market.userHasPositions?.[tab]), [data, tab])
   const defaultFilters = useDefaultUserFilter(tab)
   const title = LOCAL_STORAGE_KEYS[tab]
   const [columnFilters, columnFiltersById, setColumnFilter, resetFilters] = useColumnFilters(
@@ -53,19 +58,20 @@ export const UserPositionsTable = ({ result, loading, tab }: UserPositionsTableP
     defaultFilters,
   )
   const [sorting, onSortingChange] = useSortFromQueryString(DEFAULT_SORT[tab], 'userSort')
-  const { columnSettings, columnVisibility, sortField } = useLlamaTableVisibility(title, sorting, tab)
+  const { columnSettings, columnVisibility, sortField, toggleVisibility } = useLlamaTableVisibility(title, sorting, tab)
   const [expanded, onExpandedChange] = useState<ExpandedState>({})
   const [searchText, onSearch] = useSearch(columnFiltersById, setColumnFilter)
+  const filterProps = { columnFiltersById, setColumnFilter }
+
   const table = useReactTable({
     columns: LLAMA_MARKET_COLUMNS,
-    data,
+    data: userData,
     state: { expanded, sorting, columnVisibility, columnFilters },
     onSortingChange,
     onExpandedChange,
     ...getTableOptions(result),
   })
 
-  const showChips = userHasPositions?.Lend[tab] && userHasPositions?.Mint[tab]
   return (
     <DataTable
       table={table}
@@ -76,24 +82,31 @@ export const UserPositionsTable = ({ result, loading, tab }: UserPositionsTableP
     >
       <TableFilters<LlamaMarketColumnId>
         filterExpandedKey={title}
-        leftChildren={<TableFiltersTitles title={t`${title}`} />}
+        leftChildren={<TableSearchField value={searchText} onChange={onSearch} testId={`${title}-search`} isExpanded />}
         loading={loading}
-        hasSearchBar
+        onReload={onReload}
         visibilityGroups={columnSettings}
+        toggleVisibility={toggleVisibility}
         searchText={searchText}
         onSearch={onSearch}
+        collapsible={
+          <LendingMarketsFilters data={userData} columnFilters={columnFiltersById} setColumnFilter={setColumnFilter} />
+        }
         chips={
-          showChips && (
-            <UserPositionFilterChips
-              columnFiltersById={columnFiltersById}
-              setColumnFilter={setColumnFilter}
+          <>
+            <ChainFilterChip data={userData} {...filterProps} />
+            <LlamaListChips
+              hiddenMarketCount={result ? userData.length - table.getFilteredRowModel().rows.length : undefined}
+              hasFilters={columnFilters.length > 0 && !isEqual(columnFilters, defaultFilters)}
+              resetFilters={resetFilters}
               userHasPositions={userHasPositions}
-              tab={tab}
-              searchText={searchText}
-              onSearch={onSearch}
-              testId={title}
+              onSortingChange={onSortingChange}
+              sortField={sortField}
+              data={userData}
+              isUserPositions
+              {...filterProps}
             />
-          )
+          </>
         }
       />
     </DataTable>

apps/main/src/llamalend/features/market-list/chips/LlamaListChips.tsx

@@ -19,12 +19,13 @@ type LlamaListChipsProps = {
   resetFilters: () => void
   hasFilters: boolean
   children?: ReactNode
-  userHasPositions: LlamaMarketsResult['userHasPositions'] | undefined
-  hasFavorites: boolean | undefined
+  userHasPositions?: LlamaMarketsResult['userHasPositions']
+  hasFavorites?: boolean
   onSortingChange: OnChangeFn<SortingState>
   sortField: LlamaMarketColumnId
   data: LlamaMarket[]
-  minLiquidity: number
+  minLiquidity?: number
+  isUserPositions?: boolean
 } & FilterProps<string>
 
 export const LlamaListChips = ({
@@ -36,7 +37,8 @@ export const LlamaListChips = ({
   onSortingChange,
   sortField,
   data,
-  minLiquidity,
+  minLiquidity = 0,
+  isUserPositions,
   ...filterProps
 }: LlamaListChipsProps) => {
   const isMobile = useIsMobile()
@@ -58,6 +60,7 @@ export const LlamaListChips = ({
               hiddenMarketCount={hiddenMarketCount}
               resetFilters={resetFilters}
               hasFilters={hasFilters}
+              isUserPositions
               {...filterProps}
             />
           </Grid>
@@ -67,9 +70,11 @@ export const LlamaListChips = ({
           <Grid container columnSpacing={Spacing.xs} justifyContent="flex-end" size={{ mobile: 12, tablet: 'auto' }}>
             <LlamaListMarketChips {...filterProps} />
           </Grid>
-          <Grid container columnSpacing={Spacing.xs} justifyContent="flex-end" size={{ mobile: 12, tablet: 'auto' }}>
-            <LlamaListUserChips userHasPositions={userHasPositions} hasFavorites={hasFavorites} {...filterProps} />
-          </Grid>
+          {!isUserPositions && (
+            <Grid container columnSpacing={Spacing.xs} justifyContent="flex-end" size={{ mobile: 12, tablet: 'auto' }}>
+              <LlamaListUserChips userHasPositions={userHasPositions} hasFavorites={hasFavorites} {...filterProps} />
+            </Grid>
+          )}
         </>
       )}
       {hiddenMarketCount != null && !isMobile && (

apps/main/src/llamalend/features/market-list/drawers/MarketListFilterDrawer.tsx

@@ -24,6 +24,7 @@ type Props = {
   hiddenMarketCount?: number
   resetFilters: () => void
   hasFilters: boolean
+  isUserPositions?: boolean
 } & FilterProps<string>
 
 export const MarketListFilterDrawer = ({
@@ -34,6 +35,7 @@ export const MarketListFilterDrawer = ({
   hiddenMarketCount,
   resetFilters,
   hasFilters,
+  isUserPositions,
   ...filterProps
 }: Props) => {
   const [open, openDrawer, closeDrawer] = useSwitch(false)
@@ -65,7 +67,9 @@ export const MarketListFilterDrawer = ({
         <DrawerHeader title={t`Popular Filters`} />
         <Grid container spacing={Spacing.sm}>
           <LlamaListMarketChips {...filterProps} />
-          <LlamaListUserChips userHasPositions={userHasPositions} hasFavorites={hasFavorites} {...filterProps} />
+          {!isUserPositions && (
+            <LlamaListUserChips userHasPositions={userHasPositions} hasFavorites={hasFavorites} {...filterProps} />
+          )}
         </Grid>
         <DrawerHeader title={t`Extras Filters`} />
         <LendingMarketsFilters

apps/main/src/llamalend/features/market-list/hooks/useMarketTypeFilter.tsx

@@ -15,10 +15,9 @@ export function useMarketTypeFilter({ columnFiltersById, setColumnFilter }: Filt
   /** Helper function to toggle the market type filter by updating the column filter state */
   const toggleMarketType = useCallback(
     (type: LlamaMarketType) => {
-      setColumnFilter(
-        LlamaMarketColumnId.Type,
-        filter?.includes(type) ? filter.filter((f) => f !== type) : [...(filter || []), type],
-      )
+      const newFilter = filter?.includes(type) ? filter.filter((f) => f !== type) : [...(filter || []), type]
+      // Remove the filter entirely if the array is empty, otherwise comparaison with default filters is incorrect
+      setColumnFilter(LlamaMarketColumnId.Type, newFilter.length === 0 ? null : newFilter)
     },
     [filter, setColumnFilter],
   )

packages/curve-ui-kit/src/shared/ui/DataTable/TableFilters.tsx

@@ -59,7 +59,7 @@ export const TableFilters = <ColumnIds extends string>({
     <Stack paddingBlockEnd={{ mobile: Spacing.sm.tablet }} paddingBlockStart={{ mobile: Spacing.md.tablet }}>
       <Grid container spacing={Spacing.sm} paddingInline={Spacing.md} justifyContent="space-between">
         <Fade in={!hideTitle} timeout={Duration.Transition} mountOnEnter unmountOnExit>
-          <Grid size={{ mobile: 'auto', tablet: 6 }} sx={{ position: hideTitle ? 'absolute' : 'relative' }}>
+          <Grid size={{ mobile: 'grow', tablet: 6 }} sx={{ position: hideTitle ? 'absolute' : 'relative' }}>
             {leftChildren}
           </Grid>
         </Fade>

packages/curve-ui-kit/src/shared/ui/DataTable/TableSearchField.tsx

@@ -89,7 +89,7 @@ export const TableSearchField = ({ value, onChange, testId, toggleExpanded, isEx
   ) : (
     <Box
       sx={{
-        width: { mobile: '100%', tablet: '478px' },
+        width: '100%',
         maxWidth: '100%',
       }}
     >