💄 style(ui): Adopt Arrows , Chevrons and Panel Icons with app directi…

…on config (#6016)
lobehub · Feb 11, 2025 · c3cae6c · c3cae6c
1 parent 3bf6bdc
commit c3cae6c
Show file tree

Hide file tree

Showing 24 changed files with 178 additions and 47 deletions.
diff --git a/...variants]/(main)/chat/(workspace)/@conversation/features/ChatList/ChatItem/ThreadItem.tsx b/...variants]/(main)/chat/(workspace)/@conversation/features/ChatList/ChatItem/ThreadItem.tsx
@@ -1,11 +1,12 @@
 import { Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import dayjs from 'dayjs';
-import { ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useDirection } from '@/hooks/useDirection';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
@@ -41,6 +42,7 @@ const Item = memo<ThreadItem>(({ id, title, lastActiveAt, sourceMessageId }) =>
     s.activeThreadId === id,
     chatSelectors.countMessagesByThreadId(id)(s),
   ]);
+  const direction = useDirection();
   const mobile = useIsMobile();
   return (
     <Flexbox
@@ -58,7 +60,7 @@ const Item = memo<ThreadItem>(({ id, title, lastActiveAt, sourceMessageId }) =>
       <Flexbox className={styles.extra} horizontal>
         {!!messageCount && t('thread.threadMessageCount', { messageCount })}
         {!mobile && ` · ${dayjs(lastActiveAt).format('YYYY-MM-DD')}`}
-        <Icon icon={ChevronRight} />
+        <Icon icon={direction === 'rtl' ? ChevronLeft : ChevronRight} />
       </Flexbox>
     </Flexbox>
   );

diff --git a/...rkspace)/@conversation/features/ChatList/WelcomeChatItem/InboxWelcome/QuestionSuggest.tsx b/...rkspace)/@conversation/features/ChatList/WelcomeChatItem/InboxWelcome/QuestionSuggest.tsx
@@ -3,7 +3,7 @@
 import { ActionIcon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { shuffle } from 'lodash-es';
-import { ArrowRight } from 'lucide-react';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +12,7 @@ import { Flexbox } from 'react-layout-kit';
 import { BRANDING_NAME } from '@/const/branding';
 import { USAGE_DOCUMENTS } from '@/const/url';
 import { useSendMessage } from '@/features/ChatInput/useSend';
+import { useDirection } from '@/hooks/useDirection';
 import { useChatStore } from '@/store/chat';
 
 const useStyles = createStyles(({ css, token, responsive }) => ({
@@ -67,14 +68,15 @@ const QuestionSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('welcome');
   const { styles } = useStyles();
   const { send: sendMessage } = useSendMessage();
+  const direction = useDirection();
 
   return (
     <Flexbox gap={8} width={'100%'}>
       <Flexbox align={'center'} horizontal justify={'space-between'}>
         <div className={styles.title}>{t('guide.questions.title')}</div>
         <Link href={USAGE_DOCUMENTS} target={'_blank'}>
           <ActionIcon
-            icon={ArrowRight}
+            icon={direction === 'rtl' ? ArrowLeft : ArrowRight}
             size={{ blockSize: 24, fontSize: 16 }}
             title={t('guide.questions.moreBtn')}
           />

diff --git a/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/HeaderAction.tsx b/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/HeaderAction.tsx
@@ -1,11 +1,12 @@
 'use client';
 
 import { ActionIcon } from '@lobehub/ui';
-import { PanelRightClose, PanelRightOpen } from 'lucide-react';
+import { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useDirection } from '@/hooks/useDirection';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
@@ -15,6 +16,7 @@ import ShareButton from '../../../features/ShareButton';
 
 const HeaderAction = memo(() => {
   const { t } = useTranslation('chat');
+  const direction = useDirection();
 
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     systemStatusSelectors.showChatSideBar(s),
@@ -27,7 +29,15 @@ const HeaderAction = memo(() => {
     <>
       <ShareButton />
       <ActionIcon
-        icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
+        icon={
+          showAgentSettings
+            ? direction === 'rtl'
+              ? PanelLeftClose
+              : PanelRightClose
+            : direction === 'rtl'
+              ? PanelLeftOpen
+              : PanelRightOpen
+        }
         onClick={() => toggleConfig()}
         size={DESKTOP_HEADER_ICON_SIZE}
         title={t('roleAndArchive')}

diff --git a/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Main.tsx b/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/Main.tsx
@@ -3,13 +3,14 @@
 import { ActionIcon, Avatar } from '@lobehub/ui';
 import { ChatHeaderTitle } from '@lobehub/ui/chat';
 import { Skeleton } from 'antd';
-import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from 'lucide-react';
 import { parseAsBoolean, useQueryState } from 'nuqs';
 import { Suspense, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useDirection } from '@/hooks/useDirection';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
@@ -21,6 +22,7 @@ import Tags from './Tags';
 
 const Main = memo(() => {
   const { t } = useTranslation('chat');
+  const direction = useDirection();
 
   useInitAgentConfig();
   const [isPinned] = useQueryState('pinned', parseAsBoolean);
@@ -55,7 +57,15 @@ const Main = memo(() => {
       {!isPinned && (
         <ActionIcon
           aria-label={t('agents')}
-          icon={showSessionPanel ? PanelLeftClose : PanelLeftOpen}
+          icon={
+            showSessionPanel
+              ? direction === 'rtl'
+                ? PanelRightClose
+                : PanelLeftClose
+              : direction === 'rtl'
+                ? PanelRightOpen
+                : PanelLeftOpen
+          }
           onClick={() => {
             updateSystemStatus({
               sessionsWidth: showSessionPanel ? 0 : 320,

diff --git a/src/app/[variants]/(main)/discover/(detail)/assistant/[slug]/features/Header.tsx b/src/app/[variants]/(main)/discover/(detail)/assistant/[slug]/features/Header.tsx
@@ -4,14 +4,15 @@ import { Avatar, Icon, Tag } from '@lobehub/ui';
 import { Button } from 'antd';
 import { createStyles } from 'antd-style';
 import { startCase } from 'lodash-es';
-import { ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import Link from 'next/link';
 import qs from 'query-string';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
+import { useDirection } from '@/hooks/useDirection';
 import { DiscoverAssistantItem } from '@/types/discover';
 
 import GitHubAvatar from '../../../../components/GitHubAvatar';
@@ -44,6 +45,7 @@ interface HeaderProps {
 const Header = memo<HeaderProps>(({ identifier, data, mobile }) => {
   const { styles, theme } = useStyles();
   const { t } = useTranslation('discover');
+  const direction = useDirection();
 
   return (
     <Flexbox gap={12} width={'100%'}>
@@ -82,7 +84,10 @@ const Header = memo<HeaderProps>(({ identifier, data, mobile }) => {
             </Link>
             {data.meta?.category && (
               <>
-                <Icon color={theme.colorTextSecondary} icon={ChevronRight} />
+                <Icon
+                  color={theme.colorTextSecondary}
+                  icon={direction === 'rtl' ? ChevronLeft : ChevronRight}
+                />
                 <Link href={urlJoin('/discover/assistants', data.meta.category)}>
                   <Button className={styles.tag} shape={'round'} size={'small'}>
                     {t(`category.assistant.${data.meta.category}`)}

diff --git a/src/app/[variants]/(main)/discover/(detail)/features/Block.tsx b/src/app/[variants]/(main)/discover/(detail)/features/Block.tsx
@@ -1,11 +1,13 @@
 import { Icon } from '@lobehub/ui';
 import { Button } from 'antd';
 import { createStyles } from 'antd-style';
-import { ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
+import { useDirection } from '@/hooks/useDirection';
+
 const useStyles = createStyles(({ css, token }) => ({
   more: css`
     display: flex;
@@ -28,6 +30,7 @@ interface BlockProps extends FlexboxProps {
 
 const Block = memo<BlockProps>(({ title, more, moreLink, children, ...rest }) => {
   const { styles } = useStyles();
+  const direction = useDirection();
 
   return (
     <Flexbox gap={16} style={{ position: 'relative' }} width={'100%'}>
@@ -37,7 +40,7 @@ const Block = memo<BlockProps>(({ title, more, moreLink, children, ...rest }) =>
           <Link href={moreLink} target={moreLink.startsWith('http') ? '_blank' : undefined}>
             <Button className={styles.more} type={'text'}>
               <span>{more}</span>
-              <Icon icon={ChevronRight} />
+              <Icon icon={direction === 'rtl' ? ChevronLeft : ChevronRight} />
             </Button>
           </Link>
         )}

diff --git a/...ariants]/(main)/discover/(detail)/model/[...slugs]/features/ProviderList/ProviderItem.tsx b/...ariants]/(main)/discover/(detail)/model/[...slugs]/features/ProviderList/ProviderItem.tsx
@@ -2,7 +2,7 @@ import { ModelTag, ProviderCombine } from '@lobehub/icons';
 import { ActionIcon, Grid, Icon, Tooltip } from '@lobehub/ui';
 import { Tag } from 'antd';
 import { createStyles, useResponsive } from 'antd-style';
-import { BadgeCheck, BookIcon, ChevronRightIcon, KeyIcon } from 'lucide-react';
+import { BadgeCheck, BookIcon, ChevronLeftIcon, ChevronRightIcon, KeyIcon } from 'lucide-react';
 import Link from 'next/link';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,6 +11,7 @@ import urlJoin from 'url-join';
 
 import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
 import { BASE_PROVIDER_DOC_URL } from '@/const/url';
+import { useDirection } from '@/hooks/useDirection';
 import { DiscoverProviderItem } from '@/types/discover';
 import { formatPriceByCurrency, formatTokenNumber } from '@/utils/format';
 
@@ -32,6 +33,7 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
   const { t } = useTranslation('discover');
   const { xl = true } = useResponsive();
   const { styles, theme } = useStyles();
+  const direction = useDirection();
   const isLobeHub = identifier === 'lobehub';
 
   const isMobile = mobile || !xl;
@@ -104,7 +106,10 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
 
   const button = (
     <Link href={urlJoin('/discover/provider', identifier)} style={{ color: 'inherit' }}>
-      <ActionIcon color={theme.colorTextDescription} icon={ChevronRightIcon} />
+      <ActionIcon
+        color={theme.colorTextDescription}
+        icon={direction === 'rtl' ? ChevronLeftIcon : ChevronRightIcon}
+      />
     </Link>
   );
 

diff --git a/src/app/[variants]/(main)/discover/(detail)/plugin/[slug]/features/Header.tsx b/src/app/[variants]/(main)/discover/(detail)/plugin/[slug]/features/Header.tsx
@@ -4,14 +4,15 @@ import { Avatar, Icon, Tag } from '@lobehub/ui';
 import { Button } from 'antd';
 import { createStyles } from 'antd-style';
 import { startCase } from 'lodash-es';
-import { ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import Link from 'next/link';
 import qs from 'query-string';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
+import { useDirection } from '@/hooks/useDirection';
 import { DiscoverPlugintem } from '@/types/discover';
 
 import Back from '../../../features/Back';
@@ -43,6 +44,7 @@ interface HeaderProps {
 const Header = memo<HeaderProps>(({ identifier, data, mobile }) => {
   const { styles, theme } = useStyles();
   const { t } = useTranslation('discover');
+  const direction = useDirection();
 
   return (
     <Flexbox gap={12} width={'100%'}>
@@ -78,7 +80,10 @@ const Header = memo<HeaderProps>(({ identifier, data, mobile }) => {
             </Link>
             {data.meta?.category && (
               <>
-                <Icon color={theme.colorTextSecondary} icon={ChevronRight} />
+                <Icon
+                  color={theme.colorTextSecondary}
+                  icon={direction === 'rtl' ? ChevronLeft : ChevronRight}
+                />
                 <Link href={urlJoin('/discover/plugins', data.meta?.category || '')}>
                   <Button className={styles.tag} shape={'round'} size={'small'}>
                     {t(`category.plugin.${data.meta?.category}` as any)}

diff --git a/src/app/[variants]/(main)/discover/(detail)/provider/[slug]/features/ModelList/ModelItem.tsx b/src/app/[variants]/(main)/discover/(detail)/provider/[slug]/features/ModelList/ModelItem.tsx
@@ -2,13 +2,14 @@ import { ModelIcon } from '@lobehub/icons';
 import { ActionIcon, Grid } from '@lobehub/ui';
 import { Typography } from 'antd';
 import { createStyles, useResponsive } from 'antd-style';
-import { ChevronRightIcon } from 'lucide-react';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
+import { useDirection } from '@/hooks/useDirection';
 import { DiscoverModelItem } from '@/types/discover';
 import { formatPriceByCurrency, formatTokenNumber } from '@/utils/format';
 
@@ -51,6 +52,7 @@ const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
   const { xl = true } = useResponsive();
   const { t } = useTranslation('discover');
   const { styles, theme } = useStyles();
+  const direction = useDirection();
 
   const isMobile = mobile || !xl;
 
@@ -104,7 +106,10 @@ const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
 
   const button = (
     <Link href={urlJoin('/discover/model', identifier)} style={{ color: 'inherit' }}>
-      <ActionIcon color={theme.colorTextDescription} icon={ChevronRightIcon} />
+      <ActionIcon
+        color={theme.colorTextDescription}
+        icon={direction === 'rtl' ? ChevronLeftIcon : ChevronRightIcon}
+      />
     </Link>
   );
 

diff --git a/src/app/[variants]/(main)/discover/components/Title.tsx b/src/app/[variants]/(main)/discover/components/Title.tsx
@@ -3,11 +3,13 @@
 import { Icon } from '@lobehub/ui';
 import { Button, Tag } from 'antd';
 import { createStyles } from 'antd-style';
-import { ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import Link from 'next/link';
 import { ReactNode, memo } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
+import { useDirection } from '@/hooks/useDirection';
+
 const useStyles = createStyles(({ css, responsive, token }) => ({
   more: css`
     display: flex;
@@ -48,6 +50,7 @@ interface TitleProps extends FlexboxProps {
 
 const Title = memo<TitleProps>(({ tag, children, moreLink, more }) => {
   const { styles } = useStyles();
+  const direction = useDirection();
   const title = <h2 className={styles.title}>{children}</h2>;
   return (
     <Flexbox align={'center'} gap={16} horizontal justify={'space-between'} width={'100%'}>
@@ -65,7 +68,7 @@ const Title = memo<TitleProps>(({ tag, children, moreLink, more }) => {
         <Link href={moreLink} target={moreLink.startsWith('http') ? '_blank' : undefined}>
           <Button className={styles.more} style={{ paddingInline: 6 }} type={'text'}>
             <span>{more}</span>
-            <Icon icon={ChevronRight} />
+            <Icon icon={direction === 'rtl' ? ChevronLeft : ChevronRight} />
           </Button>
         </Link>
       )}

diff --git a/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx b/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx
@@ -2,12 +2,13 @@ import { ModelIcon } from '@lobehub/icons';
 import { ActionIcon, Icon } from '@lobehub/ui';
 import { App, Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { LucideArrowRight, LucideSettings, LucideTrash2 } from 'lucide-react';
+import { LucideArrowLeft, LucideArrowRight, LucideSettings, LucideTrash2 } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { ModelInfoTags } from '@/components/ModelSelect';
+import { useDirection } from '@/hooks/useDirection';
 import { useUserStore } from '@/store/user';
 import { modelConfigSelectors, modelProviderSelectors } from '@/store/user/selectors';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
@@ -21,6 +22,7 @@ const CustomModelOption = memo<CustomModelOptionProps>(({ id, provider }) => {
   const { t } = useTranslation('common');
   const { t: s } = useTranslation('setting');
   const { modal } = App.useApp();
+  const direction = useDirection();
 
   const [dispatchCustomModelCards, toggleEditingCustomModelCard, removeEnabledModels] =
     useUserStore((s) => [
@@ -52,7 +54,7 @@ const CustomModelOption = memo<CustomModelOptionProps>(({ id, provider }) => {
             {id}
             {!!modelCard?.deploymentName && (
               <>
-                <Icon icon={LucideArrowRight} />
+                <Icon icon={direction === 'rtl' ? LucideArrowLeft : LucideArrowRight} />
                 {modelCard?.deploymentName}
               </>
             )}