Function TableHeader

app/src/components/requestLogs/TableRow.tsx:37–92

({ showOptions }: { showOptions?: boolean })

type LoggedCall = RouterOutputs["loggedCalls"]["list"]["calls"][0];

export const TableHeader = ({ showOptions }: { showOptions?: boolean }) => {
  const loggedCallsCount = useLoggedCallsCount();
  const deselectedLogIds = useAppStore((s) => s.selectedLogs.deselectedLogIds);
  const defaultToSelected = useAppStore((s) => s.selectedLogs.defaultToSelected);
  const toggleAllSelected = useAppStore((s) => s.selectedLogs.toggleAllSelected);
  const tagNames = useSelectedProject().data?.tagNames;
  const visibleColumns = useAppStore((s) => s.columnVisibility.visibleColumns);

  const totalNumLogsSelected = useTotalNumLogsSelected();

  const isClientInitialized = useIsClientInitialized();
  if (!isClientInitialized) return null;

  return (
    <Thead>
      <Tr>
        {showOptions && (
          <Th pr={0}>
            <HStack minW={16}>
              <Checkbox
                isChecked={defaultToSelected && !deselectedLogIds.size && totalNumLogsSelected > 0}
                onChange={toggleAllSelected}
                _hover={{ borderColor: "gray.300" }}
              />
              <Skeleton
                startColor="gray.100"
                endColor="gray.300"
                isLoaded={!loggedCallsCount.isLoading}
                minW={16}
              >
                <Text>
                  ({totalNumLogsSelected ? `${totalNumLogsSelected.toLocaleString()}/` : ""}
                  {(loggedCallsCount.data?.count ?? 0).toLocaleString()})
                </Text>
              </Skeleton>
            </HStack>
          </Th>
        )}
        {visibleColumns.has(StaticColumnKeys.SENT_AT) && <Th>Sent At</Th>}
        {visibleColumns.has(StaticColumnKeys.MODEL) && <Th>Model</Th>}
        {tagNames
          ?.filter((tagName) => visibleColumns.has(tagName))
          .map((tagName) => (
            <Th key={tagName} textTransform={"none"}>
              {tagName}
            </Th>
          ))}
        {visibleColumns.has(StaticColumnKeys.DURATION) && <Th isNumeric>Duration</Th>}
        {visibleColumns.has(StaticColumnKeys.INPUT_TOKENS) && <Th isNumeric>Input tokens</Th>}
        {visibleColumns.has(StaticColumnKeys.OUTPUT_TOKENS) && <Th isNumeric>Output tokens</Th>}
        {visibleColumns.has(StaticColumnKeys.COST) && <Th isNumeric>Cost</Th>}
        {visibleColumns.has(StaticColumnKeys.STATUS_CODE) && <Th isNumeric>Status</Th>}
      </Tr>
    </Thead>
  );
};

export const TableRow = ({