gerbil/src/components/settings/AboutTab.tsx

import icon from '/icon.png';
import { Badge, Button, Card, Center, Group, Image, rem, Stack, Text } from '@mantine/core';
import { useEffect, useState } from 'react';
import { SiGithub } from 'react-icons/si';

import { GITHUB_API, PRODUCT_NAME } from '@/constants';
import { useLogoClickSounds } from '@/hooks/useLogoClickSounds';
import type { SystemVersionInfo } from '@/types/electron';

export const AboutTab = () => {
  const [versionInfo, setVersionInfo] = useState<SystemVersionInfo | null>(null);
  const { handleLogoClick, getLogoStyles } = useLogoClickSounds();

  useEffect(() => {
    const loadVersionInfo = async () => {
      const info = await window.electronAPI.app.getVersionInfo();
      if (info) {
        setVersionInfo(info);
      }
    };

    void loadVersionInfo();
  }, []);

  if (!versionInfo) {
    return (
      <Center h="100%">
        <Text c="dimmed">Loading version information...</Text>
      </Center>
    );
  }

  const actionButtons = [
    {
      icon: SiGithub,
      label: 'GitHub',
      onClick: () => window.electronAPI.app.openExternal(GITHUB_API.GERBIL_GITHUB_URL),
    },
  ];

  return (
    <Stack gap="md">
      <Card withBorder radius="md" p="xs">
        <Group align="center" gap="lg" wrap="nowrap">
          <Image
            src={icon}
            alt={PRODUCT_NAME}
            w={64}
            h={64}
            onClick={() => void handleLogoClick()}
            style={{
              minHeight: 64,
              minWidth: 64,
              ...getLogoStyles(),
            }}
          />
          <div style={{ flex: 1, minWidth: 0 }}>
            <Group align="center" gap="md" wrap="nowrap">
              <Text size="xl" fw={600}>
                {PRODUCT_NAME}
              </Text>
              <Badge variant="light" color="brand" size="lg" style={{ textTransform: 'none' }}>
                v{versionInfo.appVersion}
              </Badge>
            </Group>
            <Text size="sm" c="dimmed" mt="xs">
              Run Large Language Models locally
            </Text>
            <Group gap="md" mt="md">
              {actionButtons.map((button) => (
                <Button
                  key={button.label}
                  variant="light"
                  size="compact-sm"
                  leftSection={<button.icon style={{ height: rem(16), width: rem(16) }} />}
                  onClick={() => void button.onClick()}
                  style={button.label === 'GitHub' ? { textDecoration: 'none' } : undefined}
                >
                  {button.label}
                </Button>
              ))}
            </Group>
          </div>
        </Group>
      </Card>

      <Stack gap="xs">
        <Text size="sm" fw={500} c="dimmed">
          About {PRODUCT_NAME}
        </Text>
        <Text size="sm" c="dimmed">
          {PRODUCT_NAME} is a user-friendly desktop application that makes it easy to run large
          language models locally on your machine. Whether you&apos;re looking to chat with AI
          models, generate images, or explore different interfaces like SillyTavern and Open WebUI,{' '}
          {PRODUCT_NAME} provides a streamlined experience for local AI.
        </Text>
      </Stack>
    </Stack>
  );
};