Page and card customization

// Replace default page sections
lynxAPI.customizePages.home.replace.searchAndFilter(Component: FC): void;
lynxAPI.customizePages.home.replace.searchResult(Component: FC<{searchValue: string}>): void;
lynxAPI.customizePages.home.replace.categories(Component: FC): void;

// Add elements around the main category grid
lynxAPI.customizePages.home.add.top(Component: FC): void;
lynxAPI.customizePages.home.add.bottom(Component: FC): void;
lynxAPI.customizePages.home.add.scrollTop(Component: FC): void;
lynxAPI.customizePages.home.add.scrollBottom(Component: FC): void;

// Append elements to categories sections
lynxAPI.customizePages.home.add.pinCategory(Component: FC): void;
lynxAPI.customizePages.home.add.recentlyCategory(Component: FC): void;
lynxAPI.customizePages.home.add.allCategory(Component: FC<CardDataProps>): void;

// Available for: audio | image | text | agents | others | tools | games
lynxAPI.customizePages.tools.add.top(Component: FC): void;
lynxAPI.customizePages.tools.add.bottom(Component: FC): void;
lynxAPI.customizePages.tools.add.scrollTop(Component: FC): void;
lynxAPI.customizePages.tools.add.scrollBottom(Component: FC): void;
lynxAPI.customizePages.tools.add.cardsContainer(Component: FC): void;

import ToolsPageSettings from './components/ToolsPageSettings';

export function InitialExtensions(lynxAPI) {
  // Adds a container settings block on the Tools category feed page
  lynxAPI.customizePages.tools.add.cardsContainer(ToolsPageSettings);
}

// Settings Page customization
lynxAPI.customizePages.settings.add.navButton(Component: FC): void;
lynxAPI.customizePages.settings.add.content(Component: FC): void;

// Dashboard Page customization
lynxAPI.customizePages.dashboard.add.navButton(Component: FC): void;
lynxAPI.customizePages.dashboard.add.content(Component: FC): void;

import {CardData, LoadedCardData} from '@lynx_common/types/plugins/modules';

// Replace the entire cards grid list view
lynxAPI.cards.replace(Component: FC<{cards: LoadedCardData[]}>): void;

// Replace individual card layout cards
type CardDataProps = {
  useCardStore: UseCardStoreType;
  useCardOverlayState: typeof useCardOverlayState;
};
lynxAPI.cards.replaceComponent(Component: FC<CardDataProps>): void;

// Replace layout sections of default cards
lynxAPI.cards.customize.header(Component: FC<CardDataProps>): void;
lynxAPI.cards.customize.body(Component: FC<CardDataProps>): void;
lynxAPI.cards.customize.footer(Component: FC<CardDataProps>): void;

// Replace the entire options dropdown menu
lynxAPI.cards.customize.menu.replace(Component: FC<CardDataProps>): void;

// Append a menu item section at a specific index
type AddMenuType = {
  index: number;
  components: FC<CardDataProps>[];
};
lynxAPI.cards.customize.menu.addSection(sections: AddMenuType[]): void;

// Register custom options modal handlers
type AddModalType = {
  key: string;
  component: FC<CardDataProps>;
};
lynxAPI.cards.customize.menu.addModal(modals: AddModalType[]): void;

import CardMenuOption from './components/CardMenuOption';
import CardMenuModal from './components/CardMenuModal';

const DEPS_MODAL_KEY = 'python-toolkit-deps-modal';

export function InitialExtensions(lynxAPI) {
  // Add menu button
  lynxAPI.cards.customize.menu.addSection([
    {
      index: 1,
      components: [CardMenuOption],
    },
  ]);

  // Link button modal action key with the modal component
  lynxAPI.cards.customize.menu.addModal([
    {
      key: DEPS_MODAL_KEY,
      component: CardMenuModal,
    },
  ]);
}

lynxAPI.cards.registerToolsCard?.(config: {
  id: string;
  title: string;
  description: string;
  icon?: string | ReactNode;
  onPress?: () => void;
  component?: ComponentType;
  where?: string;
}): void;

import PythonToolkitCard from './components/ToolsPage';

export function InitialExtensions(lynxAPI) {
  lynxAPI.cards.registerToolsCard?.({
    id: 'python-toolkit',
    title: 'Python Toolkit',
    description: 'Manage Python versions, virtual environments, packages, requirements and more.',
    component: PythonToolkitCard,
    where: 'tools_page',
  });
}