Merge pull request #2 from nicepkg/feat-form-title-component

Feature:: Add form-title component

packages/gpt-runner-web/client/src/components/form-title/form-title.styles.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+import type { CSSProperties } from 'react'
+
+export enum FormTitleSize {
+  Normal = 'normal',
+  Large = 'large',
+}
+
+const sizeFontSizeMap: Record<FormTitleSize, CSSProperties['fontSize']> = {
+  [FormTitleSize.Normal]: '1rem',
+  [FormTitleSize.Large]: '1.2rem',
+}
+
+export const FormTitleWrapper = styled.div<{ $size: `${FormTitleSize}` }>`
+  padding-left: 0.5rem;
+  margin: 1rem;
+  margin-bottom: 0;
+  font-size: ${({ $size }) => sizeFontSizeMap[$size]};
+  font-weight: bold;
+  border-left: 0.25rem solid var(--foreground);
+`

packages/gpt-runner-web/client/src/components/form-title/index.tsx

@@ -0,0 +1,25 @@
+import type { FC } from 'react'
+import { memo } from 'react'
+import { FormTitleSize, FormTitleWrapper } from './form-title.styles'
+
+export { FormTitleSize }
+
+type SizeValues = `${FormTitleSize}`
+
+export interface FormTitleProps {
+  size?: SizeValues
+  style?: React.CSSProperties
+  children: React.ReactNode
+}
+
+export const FormTitle: FC<FormTitleProps> = memo(({
+  size = FormTitleSize.Normal,
+  style,
+  children,
+}) => {
+  return (
+    <FormTitleWrapper style={style} $size={size}>
+      {children}
+    </FormTitleWrapper>
+  )
+})

packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/chat-panel.styles.ts

@@ -17,12 +17,3 @@ export const ChatPanelWrapper = styled.div`
 export const ChatPanelPopoverTreeWrapper = styled.div`
   height: 100%;
 `
-
-export const ConfigFormTitle = styled.div`
-  padding-left: 0.5rem;
-  margin: 1rem;
-  margin-bottom: 0;
-  font-size: 1rem;
-  font-weight: bold;
-  border-left: 0.25rem solid var(--foreground);
-`

packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/index.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { toast } from 'react-hot-toast'
 import { copyToClipboard } from '@nicepkg/gpt-runner-shared/browser'
 import type { ChatMessagePanelProps } from '../../../../components/chat-message-panel'
+import { FormTitle } from '../../../../components/form-title'
 import { ChatMessagePanel } from '../../../../components/chat-message-panel'
 import { ChatMessageInput } from '../../../../components/chat-message-input'
 import { IconButton } from '../../../../components/icon-button'
@@ -24,7 +25,7 @@ import { emitter } from '../../../../helpers/emitter'
 import { ModelSettings } from '../settings/components/model-settings'
 import { ContentWrapper } from '../../chat.styles'
 import { ContextSettings } from '../settings/components/context-settings'
-import { ChatPanelPopoverTreeWrapper, ChatPanelWrapper, ConfigFormTitle } from './chat-panel.styles'
+import { ChatPanelPopoverTreeWrapper, ChatPanelWrapper } from './chat-panel.styles'
 import { createRemarkOpenEditorPlugin } from './remark-plugin'
 
 export interface ChatPanelProps {
@@ -363,14 +364,14 @@ export const ChatPanel: FC<ChatPanelProps> = memo((props) => {
           return <ContentWrapper $isPopoverContent style={{
             maxWidth: '400px',
           }}>
-            <ConfigFormTitle>
+            <FormTitle>
               <ModelSettings rootPath={rootPath} singleFilePath={chatInstance?.singleFilePath} viewType='title'></ModelSettings>
               {` ${t('chat_page.override_settings')}`}
-            </ConfigFormTitle>
+            </FormTitle>
             <ModelSettings rootPath={rootPath} singleFilePath={chatInstance?.singleFilePath} viewType='model'></ModelSettings>
-            <ConfigFormTitle>
+            <FormTitle>
               {t('chat_page.context_settings')}
-            </ConfigFormTitle>
+            </FormTitle>
             <ContextSettings rootPath={rootPath}></ContextSettings>
           </ContentWrapper>
         }}

packages/gpt-runner-web/client/src/pages/chat/components/settings/index.tsx

@@ -2,6 +2,7 @@ import { type CSSProperties, type FC, memo, useEffect, useMemo, useState } from
 import { VSCodePanelTab, VSCodePanelView } from '@vscode/webview-ui-toolkit/react'
 import { useTranslation } from 'react-i18next'
 import { StyledVSCodePanels } from '../../chat.styles'
+import { FormTitle } from '../../../../components/form-title'
 import type { MessageCodeBlockTheme } from '../../../../components/chat-message-code-block'
 import { MessageCodeBlock } from '../../../../components/chat-message-code-block'
 import { useGlobalStore } from '../../../../store/zustand/global'
@@ -11,7 +12,7 @@ import { LoadingView } from '../../../../components/loading-view'
 import { useConfetti } from '../../../../hooks/use-confetti.hook'
 import { useElementVisible } from '../../../../hooks/use-element-visible.hook'
 import { useUserConfig } from '../../../../hooks/use-user-config.hook'
-import { ConfigInfoTitle, ConfigInfoWrapper } from './settings.styles'
+import { ConfigInfoWrapper } from './settings.styles'
 import { GeneralSettings } from './components/general-settings'
 import { About } from './components/about'
 import { ProxySettings } from './components/proxy-settings'
@@ -71,32 +72,36 @@ export const Settings: FC<SettingsProps> = memo((props) => {
 
   const renderOverrideSetting = () => {
     return <ConfigInfoWrapper>
-      <ConfigInfoTitle>{t('chat_page.settings_general')}</ConfigInfoTitle>
+      <FormTitle size="large">
+        {t('chat_page.settings_general')}
+      </FormTitle>
       <GeneralSettings></GeneralSettings>
-      <ConfigInfoTitle>{t('chat_page.settings_proxy')}</ConfigInfoTitle>
+      <FormTitle size="large">
+        {t('chat_page.settings_proxy')}
+      </FormTitle>
       <ProxySettings></ProxySettings>
-      <ConfigInfoTitle>
+      <FormTitle size="large">
         <ModelSettings userConfig={userConfig} singleFileConfig={singleFileConfig} viewType='title'></ModelSettings>
         {` ${t('chat_page.settings_config')}`}
-      </ConfigInfoTitle>
+      </FormTitle>
       <ModelSettings userConfig={userConfig} singleFileConfig={singleFileConfig} viewType='secrets'></ModelSettings>
     </ConfigInfoWrapper>
   }
 
   const renderGlobalConfigInfo = () => {
     return <ConfigInfoWrapper>
-      <ConfigInfoTitle>
+      <FormTitle size="large">
         gptr.config.json
-      </ConfigInfoTitle>
+      </FormTitle>
       <MessageCodeBlock theme={codeBlockTheme} language='json' contents={globalConfigInfo}></MessageCodeBlock>
     </ConfigInfoWrapper>
   }
 
   const renderSingleFileConfigInfo = () => {
     return <ConfigInfoWrapper>
-      <ConfigInfoTitle>
+      <FormTitle size="large">
         {gptFileName}
-      </ConfigInfoTitle>
+      </FormTitle>
       <MessageCodeBlock theme={codeBlockTheme} language='json' contents={singleFileConfigInfo}></MessageCodeBlock>
     </ConfigInfoWrapper>
   }

packages/gpt-runner-web/client/src/pages/chat/components/settings/settings.styles.ts

@@ -25,15 +25,6 @@ export const ConfigInfoWrapper = styled.div`
   }
 `
 
-export const ConfigInfoTitle = styled.div`
-  margin: 1rem;
-  margin-bottom: 0;
-  padding-left: 0.5rem;
-  font-size: 1.2rem;
-  font-weight: bold;
-  border-left: 0.25rem solid var(--foreground);
-`
-
 export const StyledForm = styled.form`
   display: flex;
   flex-direction: column;