@lobehub/lobehub 2.0.0-next.13 → 2.0.0-next.14

package/src/features/InitClientDB/EnableModal.tsx

@@ -1,118 +0,0 @@
-import { Button, Icon } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { CpuIcon, LibraryBig, ShieldCheck } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
-
-import DataStyleModal from '@/components/DataStyleModal';
-import { useGlobalStore } from '@/store/global';
-import { useServerConfigStore } from '@/store/serverConfig';
-
-import PGliteIcon from './PGliteIcon';
-
-const useStyles = createStyles(({ css, token, isDarkMode, responsive }) => ({
-  desc: css`
-    width: 280px;
-    color: ${token.colorTextSecondary};
-
-    ${responsive.mobile} {
-      line-height: ${token.lineHeight};
-    }
-  `,
-  hint: css`
-    font-size: ${token.fontSizeSM}px;
-    color: ${token.colorTextTertiary};
-    text-align: center;
-  `,
-  icon: css`
-    color: ${isDarkMode ? token.blue : token.geekblue};
-  `,
-  iconCtn: css`
-    width: 72px;
-    height: 72px;
-    border-radius: 50%;
-    background: ${isDarkMode ? token.blue1 : token.geekblue1};
-  `,
-  intro: css`
-    ${responsive.mobile} {
-      width: 350px;
-      margin-block-start: 24px;
-      line-height: ${token.lineHeight};
-    }
-  `,
-
-  title: css`
-    margin-block-end: 0;
-    font-size: ${token.fontSizeLG}px;
-    font-weight: bold;
-  `,
-}));
-
-interface EnableClientDBModalProps {
-  open: boolean;
-}
-
-const EnableClientDBModal = memo<EnableClientDBModalProps>(({ open }) => {
-  const { t } = useTranslation('common');
-  const { styles } = useStyles();
-  const isMobile = useServerConfigStore((s) => s.isMobile);
-
-  const markPgliteEnabled = useGlobalStore((s) => s.markPgliteEnabled);
-  const features = [
-    {
-      avatar: PGliteIcon,
-      desc: t('clientDB.modal.features.pglite.desc'),
-      title: t('clientDB.modal.features.pglite.title'),
-    },
-    {
-      avatar: ShieldCheck,
-      desc: t('clientDB.modal.features.localFirst.desc'),
-      title: t('clientDB.modal.features.localFirst.title'),
-    },
-    {
-      avatar: LibraryBig,
-      desc: t('clientDB.modal.features.knowledgeBase.desc'),
-      title: t('clientDB.modal.features.knowledgeBase.title'),
-    },
-  ];
-
-  return (
-    <DataStyleModal
-      height={isMobile ? '80vh' : undefined}
-      icon={CpuIcon}
-      open={open}
-      title={t('clientDB.modal.title')}
-    >
-      <Center gap={48}>
-        <Flexbox>
-          <Flexbox className={styles.intro} style={{ textAlign: 'center' }} width={460}>
-            {t('clientDB.modal.desc')}
-          </Flexbox>
-        </Flexbox>
-        <Flexbox gap={32}>
-          {features.map((item) => (
-            <Flexbox align={'flex-start'} gap={24} horizontal key={item.title}>
-              <Center className={styles.iconCtn}>
-                <Icon className={styles.icon} icon={item.avatar} size={36} />
-              </Center>
-              <Flexbox gap={8}>
-                <p className={styles.title}>{item.title}</p>
-                <p className={styles.desc}>{item.desc}</p>
-              </Flexbox>
-            </Flexbox>
-          ))}
-        </Flexbox>
-        <Flexbox align={'center'} gap={16} style={{ paddingBottom: 16 }}>
-          <Flexbox gap={16} horizontal justify={'center'} style={{ flexWrap: 'wrap' }}>
-            <Button onClick={markPgliteEnabled} size={'large'} type={'primary'}>
-              {t('clientDB.modal.enable')}
-            </Button>
-          </Flexbox>
-        </Flexbox>
-      </Center>
-    </DataStyleModal>
-  );
-});
-
-export default EnableClientDBModal;

package/src/features/InitClientDB/ErrorResult.tsx

@@ -1,143 +0,0 @@
-import { Alert, Button, Highlighter, Icon, Modal } from '@lobehub/ui';
-import { Spin } from 'antd';
-import { createStyles } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import { PenToolIcon, TriangleAlert } from 'lucide-react';
-import dynamic from 'next/dynamic';
-import { ReactNode, memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
-
-import { githubService } from '@/services/github';
-import { useGlobalStore } from '@/store/global';
-
-const DatabaseRepair = dynamic(() => import('./features/DatabaseRepair'), {
-  loading: () => <Spin fullscreen />,
-  ssr: false,
-});
-
-const useStyles = createStyles(({ css, token }) => ({
-  bg: css`
-    cursor: pointer;
-
-    padding-block: 8px;
-    padding-inline: 24px;
-    border-radius: 40px;
-
-    background: ${token.red6};
-
-    transition: transform 0.2s;
-
-    :hover {
-      transform: scale(1.05);
-    }
-
-    :active {
-      transform: scale(1);
-    }
-  `,
-  text: css`
-    font-size: 15px;
-    color: ${token.colorText};
-  `,
-}));
-
-interface MigrationError {
-  message: string;
-  stack: string;
-}
-
-interface FailedModalProps {
-  children?: (props: { setOpen: (open: boolean) => void }) => ReactNode;
-  error?: MigrationError;
-}
-
-const ErrorResult = memo<FailedModalProps>(({ children }) => {
-  const { t } = useTranslation('common');
-  const { styles } = useStyles();
-  const initializeClientDB = useGlobalStore((s) => s.initializeClientDB);
-  const error = useGlobalStore((s) => s.initClientDBError, isEqual);
-  const [open, setOpen] = useState(false);
-  const [showRepair, setShowRepair] = useState(true);
-
-  return (
-    <>
-      {children ? (
-        children({ setOpen })
-      ) : (
-        <Flexbox
-          align={'center'}
-          className={styles.bg}
-          gap={12}
-          horizontal
-          onClick={() => {
-            setOpen(true);
-          }}
-        >
-          <Center height={40} width={24}>
-            <Icon icon={TriangleAlert} size={20} />
-          </Center>
-          <span className={styles.text}>{t('clientDB.initing.error')}</span>
-        </Flexbox>
-      )}
-      <Modal
-        footer={null}
-        onCancel={() => {
-          setOpen(false);
-        }}
-        open={open}
-        title={t('clientDB.error.title')}
-      >
-        {showRepair ? (
-          <DatabaseRepair setShowRepair={setShowRepair} />
-        ) : (
-          <Center gap={24}>
-            <div>{t('clientDB.error.desc')}</div>
-            <Flexbox width={'100%'}>
-              <Alert
-                description={`[${error?.name}] ${error?.message}`}
-                extra={
-                  <Flexbox gap={8} style={{ marginTop: 8, overflow: 'scroll' }} width={'100%'}>
-                    <Highlighter actionIconSize={'small'} language={'json'}>
-                      {JSON.stringify(error, null, 2)}
-                    </Highlighter>
-                  </Flexbox>
-                }
-                message={t('clientDB.error.detailTitle')}
-                type={'error'}
-              />
-            </Flexbox>
-
-            <Flexbox horizontal justify={'space-between'}>
-              <Button
-                onClick={(e) => {
-                  e.preventDefault();
-                  githubService.submitPgliteInitError(error);
-                }}
-                target={'_blank'}
-                type={'text'}
-              >
-                {t('clientDB.error.report')}
-              </Button>
-              <Flexbox gap={8} horizontal>
-                <Button
-                  icon={<Icon icon={PenToolIcon} />}
-                  onClick={() => {
-                    setShowRepair(true);
-                  }}
-                >
-                  {t('clientDB.error.selfSolve')}
-                </Button>
-                <Button onClick={() => initializeClientDB()} type={'primary'}>
-                  {t('clientDB.error.retry')}
-                </Button>
-              </Flexbox>
-            </Flexbox>
-          </Center>
-        )}
-      </Modal>
-    </>
-  );
-});
-
-export default ErrorResult;

package/src/features/InitClientDB/InitIndicator.tsx

@@ -1,124 +0,0 @@
-'use client';
-
-import { Progress } from 'antd';
-import { createStyles } from 'antd-style';
-import { AnimatePresence, motion } from 'framer-motion';
-import { rgba } from 'polished';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
-
-import { useGlobalStore } from '@/store/global';
-import { ClientDatabaseInitStages, DatabaseLoadingState } from '@/types/clientDB';
-
-import ErrorResult from './ErrorResult';
-
-const useStyles = createStyles(({ css, token, prefixCls }) => ({
-  bg: css`
-    padding-block: 8px;
-    padding-inline: 8px 32px;
-    border-radius: 40px;
-    background: ${token.colorText};
-  `,
-  container: css`
-    position: fixed;
-    z-index: 1000;
-  `,
-  progress: css`
-    .${prefixCls}-progress-text {
-      font-size: 12px;
-      color: ${token.colorBgContainer} !important;
-    }
-  `,
-  progressReady: css`
-    .${prefixCls}-progress-text {
-      color: ${token.colorSuccessBorder} !important;
-    }
-  `,
-
-  text: css`
-    font-size: 15px;
-    color: ${token.colorBgContainer};
-  `,
-}));
-
-interface InitClientDBProps {
-  bottom?: number;
-  show: boolean;
-}
-
-const InitClientDB = memo<InitClientDBProps>(({ bottom = 80, show }) => {
-  const { styles, theme, cx } = useStyles();
-  const currentStage = useGlobalStore((s) => s.initClientDBStage || DatabaseLoadingState.Idle);
-  const { t } = useTranslation('common');
-  const useInitClientDB = useGlobalStore((s) => s.useInitClientDB);
-
-  useInitClientDB();
-
-  const getStateMessage = (state: DatabaseLoadingState) => {
-    switch (state) {
-      case DatabaseLoadingState.Finished:
-      case DatabaseLoadingState.Ready: {
-        return t('clientDB.initing.ready');
-      }
-
-      case DatabaseLoadingState.Idle: {
-        return t('clientDB.initing.idle');
-      }
-      case DatabaseLoadingState.Initializing: {
-        return t('clientDB.initing.initializing');
-      }
-      case DatabaseLoadingState.LoadingDependencies: {
-        return t('clientDB.initing.loadingDependencies');
-      }
-
-      case DatabaseLoadingState.LoadingWasm: {
-        return t('clientDB.initing.loadingWasmModule');
-      }
-
-      case DatabaseLoadingState.Migrating: {
-        return t('clientDB.initing.migrating');
-      }
-    }
-  };
-
-  const currentStageIndex = ClientDatabaseInitStages.indexOf(currentStage);
-  const isReady = currentStage === DatabaseLoadingState.Finished;
-  const isError = currentStage === DatabaseLoadingState.Error;
-  return (
-    <AnimatePresence>
-      {show && (
-        <Center className={styles.container} style={{ bottom }} width={'100%'}>
-          <motion.div
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: 30 }}
-            initial={{ opacity: 0, y: 30 }}
-            transition={{ duration: 0.3 }}
-          >
-            {isError ? (
-              <ErrorResult />
-            ) : (
-              <Flexbox align={'center'} className={styles.bg} gap={12} horizontal>
-                <Progress
-                  className={cx(styles.progress, isReady && styles.progressReady)}
-                  format={isReady ? undefined : (percent) => percent}
-                  percent={parseInt(
-                    ((currentStageIndex / (ClientDatabaseInitStages.length - 1)) * 100).toFixed(0),
-                  )}
-                  size={40}
-                  strokeColor={isReady ? theme.colorSuccessActive : theme.colorBgContainer}
-                  strokeLinecap={'round'}
-                  strokeWidth={10}
-                  trailColor={rgba(theme.colorBgContainer, 0.1)}
-                  type={'circle'}
-                />
-                <span className={styles.text}>{getStateMessage(currentStage)}</span>
-              </Flexbox>
-            )}
-          </motion.div>
-        </Center>
-      )}
-    </AnimatePresence>
-  );
-});
-export default InitClientDB;

package/src/features/InitClientDB/PGliteIcon.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import type { IconType } from '@lobehub/icons';
-import { forwardRef } from 'react';
-
-const PGliteIcon: IconType = forwardRef(({ size = '1em', style }, ref) => {
-  return (
-    <svg
-      fill="currentColor"
-      fillRule="evenodd"
-      height={size}
-      ref={ref}
-      style={{ flex: 'none', lineHeight: 1, ...style }}
-      viewBox="0 0 1024 1024"
-      width={size}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>PGlite</title>
-      <path
-        clipRule="evenodd"
-        d="M941.581 335.737v460.806c0 15.926-12.913 28.836-28.832 28.818l-115.283-.137c-15.243-.018-27.706-11.88-28.703-26.877.011-.569.018-1.138.018-1.711l-.004-172.904c0-47.745-38.736-86.451-86.454-86.451-46.245 0-84.052-36.359-86.342-82.068V191.496l201.708.149c79.484.058 143.892 64.553 143.892 144.092zm-576-144.281v201.818c0 47.746 38.682 86.456 86.4 86.456h86.4v-5.796c0 66.816 54.13 120.98 120.902 120.98 28.617 0 51.815 23.213 51.815 51.848v149.644c0 .688.011 1.372.025 2.057-.943 15.065-13.453 26.992-28.746 26.992l-144.982-.007.986-201.586c.079-15.915-12.755-28.88-28.66-28.959-15.904-.079-28.861 12.763-28.94 28.678l-.986 201.741v.118l-172.174-.01V623.722c0-15.915-12.895-28.819-28.8-28.819-15.906 0-28.8 12.904-28.8 28.819v201.704l-143.642-.007c-15.905-.004-28.798-12.904-28.798-28.819V335.547c0-79.58 64.471-144.093 144.001-144.092l143.999.001zm446.544 173.693c0-23.874-19.343-43.228-43.2-43.228-23.861 0-43.2 19.354-43.2 43.228 0 23.875 19.339 43.226 43.2 43.226 23.857 0 43.2-19.351 43.2-43.226z"
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-});
-
-export default PGliteIcon;

package/src/features/InitClientDB/features/DatabaseRepair/Backup.tsx

@@ -1,75 +0,0 @@
-import { Alert, Button, Text } from '@lobehub/ui';
-import { App, Card } from 'antd';
-import { createStyles } from 'antd-style';
-import { AlertCircle } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { resetClientDatabase } from '@/database/client/db';
-
-const useStyles = createStyles(({ css, token }) => ({
-  card: css`
-    border-radius: ${token.borderRadiusLG}px;
-  `,
-}));
-
-const Backup = () => {
-  const { t } = useTranslation('common');
-  const { styles } = useStyles();
-
-  const { modal } = App.useApp();
-  return (
-    <Flexbox gap={24}>
-      <Card
-        className={styles.card}
-        extra={<Text type="secondary">{t('clientDB.solve.backup.desc')}</Text>}
-        title={t('clientDB.solve.backup.title')}
-      >
-        <Text as={'p'}>{t('clientDB.solve.backup.exportDesc')}</Text>
-        <Button block type={'primary'}>
-          {t('clientDB.solve.backup.export')}
-        </Button>
-      </Card>
-
-      <Card
-        className={styles.card}
-        extra={<Text type="secondary">{t('clientDB.solve.backup.reset.desc')}</Text>}
-        title={t('clientDB.solve.backup.reset.title')}
-      >
-        <Flexbox gap={24}>
-          <Alert
-            description={t('clientDB.solve.backup.reset.alertDesc')}
-            icon={<AlertCircle size={16} />}
-            message={t('clientDB.solve.backup.reset.alert')}
-            showIcon
-            type="error"
-            variant={'borderless'}
-          />
-
-          <Button
-            block
-            danger
-            onClick={() => {
-              modal.confirm({
-                content: t('clientDB.solve.backup.reset.confirm.desc'),
-                okButtonProps: {
-                  danger: true,
-                },
-                onOk: async () => {
-                  await resetClientDatabase();
-
-                  location.reload();
-                },
-                title: t('clientDB.solve.backup.reset.confirm.title'),
-              });
-            }}
-          >
-            {t('clientDB.solve.backup.reset.button')}
-          </Button>
-        </Flexbox>
-      </Card>
-    </Flexbox>
-  );
-};
-
-export default Backup;

package/src/features/InitClientDB/features/DatabaseRepair/Diagnosis.tsx

@@ -1,98 +0,0 @@
-import { Highlighter, Tag } from '@lobehub/ui';
-import { Card, List, Popover } from 'antd';
-import { createStyles } from 'antd-style';
-import dayjs from 'dayjs';
-import isEqual from 'fast-deep-equal';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useGlobalStore } from '@/store/global';
-import { clientDBSelectors } from '@/store/global/selectors';
-
-const useStyles = createStyles(({ css, token }) => ({
-  card: css`
-    margin-block-end: ${token.marginMD}px;
-    border-radius: ${token.borderRadiusLG}px;
-  `,
-  hash: css`
-    font-family: ${token.fontFamilyCode};
-  `,
-  sql: css`
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-
-    font-size: 12px;
-  `,
-  time: css`
-    font-size: 12px;
-    color: ${token.colorTextTertiary};
-  `,
-}));
-
-const Diagnosis = () => {
-  const { t } = useTranslation('common');
-  const { styles, cx } = useStyles();
-
-  const migrations = useGlobalStore(clientDBSelectors.displayMigrationStatus, isEqual);
-
-  return (
-    <Card
-      className={styles.card}
-      styles={{ body: { padding: 0 } }}
-      title={t('clientDB.solve.diagnosis.title')}
-    >
-      <List
-        dataSource={migrations}
-        renderItem={(migration) => (
-          <List.Item
-            key={migration.id}
-            style={{ display: 'flex', gap: 12, justifyContent: 'space-between' }}
-          >
-            <Flexbox gap={4} horizontal>
-              <Flexbox style={{ minWidth: 20 }} width={20}>
-                {migration.index}
-              </Flexbox>
-              <Popover
-                content={
-                  <Flexbox gap={8}>
-                    <div className={styles.hash}>Hash: {migration.id}</div>
-                    <Highlighter
-                      language={'sql'}
-                      style={{ maxHeight: '30vh', maxWidth: '70vw', overflow: 'scroll' }}
-                    >
-                      {migration.sql.join('\n')}
-                    </Highlighter>
-                  </Flexbox>
-                }
-                title={t('clientDB.solve.diagnosis.sql')}
-              >
-                <Flexbox gap={8}>
-                  <Flexbox
-                    className={cx(styles.sql, migration.status === 'success' && styles.time)}
-                  >
-                    {migration.desc}
-                  </Flexbox>
-                  <Flexbox>
-                    <Flexbox className={styles.time}>
-                      {t('clientDB.solve.diagnosis.createdAt')}
-                      {dayjs(migration.createdAt).format('YYYY-MM-DD hh:mm:ss')} ·{' '}
-                      {t('clientDB.solve.diagnosis.migratedAt')}{' '}
-                      {dayjs(migration.migratedAt).format('YYYY-MM-DD hh:mm:ss')}
-                    </Flexbox>
-                  </Flexbox>
-                </Flexbox>
-              </Popover>
-            </Flexbox>
-            <Tag bordered={false} color={migration.status}>
-              {migration.status}
-            </Tag>
-          </List.Item>
-        )}
-        size="small"
-      />
-    </Card>
-  );
-};
-export default Diagnosis;