AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-15 00:45:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix/explore darkmode (#14751)

Browse Source
This commit is contained in:
NFish 2025-03-03 16:06:28 +08:00 committed by GitHub
parent bb4e7da720
commit 931d704612
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 42 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/app/components/explore/app-card/index.tsx
View File

@ -5,8 +5,7 @@ import Button from '../../base/button'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import type { App } from '@/models/explore' import type { App } from '@/models/explore'
import AppIcon from '@/app/components/base/app-icon' import AppIcon from '@/app/components/base/app-icon'
import { AiText, ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/solid/communication' import { AppTypeIcon } from '../../app/type-selector'
import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
export type AppCardProps = { export type AppCardProps = {
app: App app: App
canCreate: boolean canCreate: boolean
@ -23,7 +22,7 @@ const AppCard = ({
const { t } = useTranslation() const { t } = useTranslation()
const { app: appBasicInfo } = app const { app: appBasicInfo } = app
return ( return (
<div className={cn('relative overflow-hidden pb-2 group col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}> <div className={cn('relative overflow-hidden pb-2 group col-span-1 bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border rounded-lg shadow-sm flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
<div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'> <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
<div className='relative shrink-0'> <div className='relative shrink-0'>
<AppIcon <AppIcon
@ -33,23 +32,8 @@ const AppCard = ({
background={appBasicInfo.icon_background} background={appBasicInfo.icon_background}
imageUrl={appBasicInfo.icon_url} imageUrl={appBasicInfo.icon_url}
/> />
<span className='absolute bottom-[-3px] right-[-3px] w-4 h-4 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm'> <AppTypeIcon wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[4px] border border-divider-regular outline outline-components-panel-on-panel-item-bg'
{appBasicInfo.mode === 'advanced-chat' && ( className='w-3 h-3' type={appBasicInfo.mode} />
<ChatBot className='w-3 h-3 text-[#1570EF]' />
)}
{appBasicInfo.mode === 'agent-chat' && (
<CuteRobot className='w-3 h-3 text-indigo-600' />
)}
{appBasicInfo.mode === 'chat' && (
<ChatBot className='w-3 h-3 text-[#1570EF]' />
)}
{appBasicInfo.mode === 'completion' && (
<AiText className='w-3 h-3 text-[#0E9384]' />
)}
{appBasicInfo.mode === 'workflow' && (
<Route className='w-3 h-3 text-[#f79009]' />
)}
</span>
</div> </div>
<div className='grow w-0 py-[1px]'> <div className='grow w-0 py-[1px]'>
<div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'> <div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
@ -64,14 +48,14 @@ const AppCard = ({
</div> </div>
</div> </div>
</div> </div>
<div className="description-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary "> <div className="description-wrapper h-[90px] px-[14px] system-xs-regular text-text-tertiary">
<div className='line-clamp-4 group-hover:line-clamp-2'> <div className='line-clamp-4 group-hover:line-clamp-2'>
{app.description} {app.description}
</div> </div>
</div> </div>
{isExplore && canCreate && ( {isExplore && canCreate && (
<div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] bg-white group-hover:flex absolute bottom-0 left-0 right-0')}> <div className={cn('hidden absolute bottom-0 left-0 right-0 p-4 pt-8 group-hover:flex bg-gradient-to-t from-[60.27%] from-components-panel-gradient-2 to-transparent')}>
<div className={cn('flex items-center w-full space-x-2')}> <div className={cn('flex items-center w-full space-x-2 h-8')}>
<Button variant='primary' className='grow h-7' onClick={() => onCreate()}> <Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
<PlusIcon className='w-4 h-4 mr-1' /> <PlusIcon className='w-4 h-4 mr-1' />
<span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span> <span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
@ -79,16 +63,6 @@ const AppCard = ({
</div> </div>
</div> </div>
)} )}
{!isExplore && (
<div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] bg-white group-hover:flex absolute bottom-0 left-0 right-0')}>
<div className={cn('flex items-center w-full space-x-2')}>
<Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
<PlusIcon className='w-4 h-4 mr-1' />
<span className='text-xs'>{t('app.newApp.useTemplate')}</span>
</Button>
</div>
</div>
)}
</div> </div>
) )
} }

37
web/app/components/explore/app-list/index.tsx
View File

@ -17,7 +17,6 @@ import { fetchAppDetail, fetchAppList } from '@/service/explore'
import { importDSL } from '@/service/apps' import { importDSL } from '@/service/apps'
import { useTabSearchParams } from '@/hooks/use-tab-searchparams' import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
import CreateAppModal from '@/app/components/explore/create-app-modal' import CreateAppModal from '@/app/components/explore/create-app-modal'
import AppTypeSelector from '@/app/components/app/type-selector'
import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal' import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
import Loading from '@/app/components/base/loading' import Loading from '@/app/components/base/loading'
import { NEED_REFRESH_APP_LIST_KEY } from '@/config' import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
@ -28,7 +27,6 @@ import { DSLImportMode } from '@/models/app'
import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks' import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
type AppsProps = { type AppsProps = {
pageType?: PageType
onSuccess?: () => void onSuccess?: () => void
} }
@ -38,7 +36,6 @@ export enum PageType {
} }
const Apps = ({ const Apps = ({
pageType = PageType.EXPLORE,
onSuccess, onSuccess,
}: AppsProps) => { }: AppsProps) => {
const { t } = useTranslation() const { t } = useTranslation()
@ -62,7 +59,7 @@ const Apps = ({
const [currentType, setCurrentType] = useState<string>('') const [currentType, setCurrentType] = useState<string>('')
const [currCategory, setCurrCategory] = useTabSearchParams({ const [currCategory, setCurrCategory] = useTabSearchParams({
defaultTab: allCategoriesEn, defaultTab: allCategoriesEn,
disableSearchParams: pageType !== PageType.EXPLORE, disableSearchParams: false,
}) })
const { const {
@ -166,26 +163,18 @@ const Apps = ({
return ( return (
<div className={cn( <div className={cn(
'flex flex-col', 'flex flex-col h-full border-l-[0.5px] border-divider-regular',
pageType === PageType.EXPLORE ? 'h-full border-l border-gray-200' : 'h-[calc(100%-56px)]',
)}> )}>
{pageType === PageType.EXPLORE && (
<div className='shrink-0 pt-6 px-12'> <div className='shrink-0 pt-6 px-12'>
<div className={`mb-1 ${s.textGradient} text-xl font-semibold`}>{t('explore.apps.title')}</div> <div className={`mb-1 ${s.textGradient} text-xl font-semibold`}>{t('explore.apps.title')}</div>
<div className='text-gray-500 text-sm'>{t('explore.apps.description')}</div> <div className='text-text-tertiary text-sm'>{t('explore.apps.description')}</div>
</div> </div>
)}
<div className={cn( <div className={cn(
'flex items-center justify-between mt-6', 'flex items-center justify-between mt-6 px-12',
pageType === PageType.EXPLORE ? 'px-12' : 'px-8',
)}> )}>
<> <>
{pageType !== PageType.EXPLORE && (
<>
<AppTypeSelector value={currentType} onChange={setCurrentType}/>
<div className='mx-2 w-[1px] h-3.5 bg-gray-200'/>
</>
)}
<Category <Category
list={categories} list={categories}
value={currCategory} value={currCategory}
@ -205,19 +194,17 @@ const Apps = ({
</div> </div>
<div className={cn( <div className={cn(
'relative flex flex-1 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow', 'relative flex flex-1 pb-6 flex-col overflow-auto shrink-0 grow mt-4',
pageType === PageType.EXPLORE ? 'mt-4' : 'mt-0 pt-2',
)}> )}>
<nav <nav
className={cn( className={cn(
s.appList, s.appList,
'grid content-start shrink-0', 'grid content-start shrink-0 gap-4 px-6 sm:px-12',
pageType === PageType.EXPLORE ? 'gap-4 px-6 sm:px-12' : 'gap-3 px-8 sm:!grid-cols-2 md:!grid-cols-3 lg:!grid-cols-4',
)}> )}>
{searchFilteredList.map(app => ( {searchFilteredList.map(app => (
<AppCard <AppCard
key={app.app_id} key={app.app_id}
isExplore={pageType === PageType.EXPLORE} isExplore
app={app} app={app}
canCreate={hasEditPermission} canCreate={hasEditPermission}
onCreate={() => { onCreate={() => {

2
web/app/components/explore/index.tsx
View File

@ -40,7 +40,7 @@ const Explore: FC<IExploreProps> = ({
}, [isCurrentWorkspaceDatasetOperator]) }, [isCurrentWorkspaceDatasetOperator])
return ( return (
<div className='flex h-full bg-gray-100 border-t border-gray-200 overflow-hidden'> <div className='flex h-full bg-background-body border-t border-divider-regular overflow-hidden'>
<ExploreContext.Provider <ExploreContext.Provider
value={ value={
{ {

16
web/app/components/explore/item-operation/index.tsx
View File

@ -52,33 +52,33 @@ const ItemOperation: FC<IItemOperationProps> = ({
<PortalToFollowElemTrigger <PortalToFollowElemTrigger
onClick={() => setOpen(v => !v)} onClick={() => setOpen(v => !v)}
> >
<div className={cn(className, s.btn, 'h-6 w-6 rounded-md border-none py-1', (isItemHovering || open) && `${s.open} !bg-gray-100 !shadow-none`)}></div> <div className={cn(className, s.btn, 'h-6 w-6 rounded-md border-none py-1', (isItemHovering || open) && `${s.open} !bg-components-actionbar-bg !shadow-none`)}></div>
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent <PortalToFollowElemContent
className="z-50" className="z-50"
> >
<div <div
ref={ref} ref={ref}
className={'min-w-[120px] p-1 bg-white rounded-lg border border--gray-200 shadow-lg'} className={'min-w-[120px] p-1 bg-components-panel-bg-blur backdrop-blur-[5px] rounded-lg border border-components-panel-border shadow-lg'}
onMouseEnter={setIsHovering} onMouseEnter={setIsHovering}
onMouseLeave={setNotHovering} onMouseLeave={setNotHovering}
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
}} }}
> >
<div className={cn(s.actionItem, 'hover:bg-gray-50 group')} onClick={togglePin}> <div className={cn(s.actionItem, 'hover:bg-state-base-hover group')} onClick={togglePin}>
<Pin02 className='shrink-0 w-4 h-4 text-gray-500' /> <Pin02 className='shrink-0 w-4 h-4 text-text-secondary' />
<span className={s.actionName}>{isPinned ? t('explore.sidebar.action.unpin') : t('explore.sidebar.action.pin')}</span> <span className={s.actionName}>{isPinned ? t('explore.sidebar.action.unpin') : t('explore.sidebar.action.pin')}</span>
</div> </div>
{isShowRenameConversation && ( {isShowRenameConversation && (
<div className={cn(s.actionItem, 'hover:bg-gray-50 group')} onClick={onRenameConversation}> <div className={cn(s.actionItem, 'hover:bg-state-base-hover group')} onClick={onRenameConversation}>
<RiEditLine className='shrink-0 w-4 h-4 text-gray-500' /> <RiEditLine className='shrink-0 w-4 h-4 text-text-secondary' />
<span className={s.actionName}>{t('explore.sidebar.action.rename')}</span> <span className={s.actionName}>{t('explore.sidebar.action.rename')}</span>
</div> </div>
)} )}
{isShowDelete && ( {isShowDelete && (
<div className={cn(s.actionItem, s.deleteActionItem, 'hover:bg-gray-50 group')} onClick={onDelete} > <div className={cn(s.actionItem, s.deleteActionItem, 'hover:bg-state-base-hover group')} onClick={onDelete} >
<RiDeleteBinLine className={cn(s.deleteActionItemChild, 'shrink-0 w-4 h-4 stroke-current text-gray-500 stroke-2')} /> <RiDeleteBinLine className={cn(s.deleteActionItemChild, 'shrink-0 w-4 h-4 stroke-current text-text-secondary stroke-2')} />
<span className={cn(s.actionName, s.deleteActionItemChild)}>{t('explore.sidebar.action.delete')}</span> <span className={cn(s.actionName, s.deleteActionItemChild)}>{t('explore.sidebar.action.delete')}</span>
</div> </div>
)} )}

6
web/app/components/explore/item-operation/style.module.css
View File

@ -3,7 +3,7 @@
} }
.actionName { .actionName {
@apply text-gray-700 text-sm; @apply text-text-secondary text-sm;
} }
.commonIcon { .commonIcon {
@ -29,5 +29,5 @@ body .btn:hover {
} }
.deleteActionItem:hover .deleteActionItemChild { .deleteActionItem:hover .deleteActionItemChild {
@apply text-red-500; @apply text-red-500;
} }

7
web/app/components/explore/sidebar/app-nav-item/index.tsx
View File

@ -3,7 +3,6 @@ import React, { useRef } from 'react'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { useHover } from 'ahooks' import { useHover } from 'ahooks'
import s from './style.module.css'
import cn from '@/utils/classnames' import cn from '@/utils/classnames'
import ItemOperation from '@/app/components/explore/item-operation' import ItemOperation from '@/app/components/explore/item-operation'
import AppIcon from '@/app/components/base/app-icon' import AppIcon from '@/app/components/base/app-icon'
@ -46,10 +45,8 @@ export default function AppNavItem({
<div <div
ref={ref} ref={ref}
key={id} key={id}
className={cn( className={cn('text-components-menu-item-text system-sm-medium flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal',
s.item, isSelected ? 'bg-state-base-active text-components-menu-item-text-active' : 'hover:bg-state-base-hover hover:text-components-menu-item-text-hover',
isSelected ? s.active : 'hover:bg-gray-200',
'flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal',
)} )}
onClick={() => { onClick={() => {
router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation(). router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().

9
web/app/components/explore/sidebar/app-nav-item/style.module.css
View File

@ -1,9 +0,0 @@
/* .item:hover, */
.item.active {
border: 0.5px solid #EAECF0;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
background: #FFFFFF;
color: #344054;
font-weight: 500;
}

17
web/app/components/explore/sidebar/index.tsx
View File

@ -15,14 +15,14 @@ import Divider from '@/app/components/base/divider'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints' import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
const SelectedDiscoveryIcon = () => ( const SelectedDiscoveryIcon = () => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M13.4135 1.11725C13.5091 1.09983 13.6483 1.08355 13.8078 1.11745C14.0143 1.16136 14.2017 1.26953 14.343 1.42647C14.4521 1.54766 14.5076 1.67634 14.5403 1.76781C14.5685 1.84673 14.593 1.93833 14.6136 2.01504L15.5533 5.5222C15.5739 5.5989 15.5985 5.69049 15.6135 5.77296C15.6309 5.86852 15.6472 6.00771 15.6133 6.16722C15.5694 6.37378 15.4612 6.56114 15.3043 6.70245C15.1831 6.81157 15.0544 6.86706 14.9629 6.89975C14.884 6.92796 14.7924 6.95247 14.7157 6.97299L14.676 6.98364C14.3365 7.07461 14.0437 7.15309 13.7972 7.19802C13.537 7.24543 13.2715 7.26736 12.9946 7.20849C12.7513 7.15677 12.5213 7.06047 12.3156 6.92591L9.63273 7.64477C9.86399 7.97104 9.99992 8.36965 9.99992 8.80001C9.99992 9.2424 9.85628 9.65124 9.6131 9.98245L12.5508 14.291C12.7582 14.5952 12.6797 15.01 12.3755 15.2174C12.0713 15.4248 11.6566 15.3464 11.4492 15.0422L8.51171 10.7339C8.34835 10.777 8.17682 10.8 7.99992 10.8C7.82305 10.8 7.65155 10.777 7.48823 10.734L4.5508 15.0422C4.34338 15.3464 3.92863 15.4248 3.62442 15.2174C3.32021 15.01 3.24175 14.5952 3.44916 14.291L6.3868 9.98254C6.14358 9.65132 5.99992 9.24244 5.99992 8.80001C5.99992 8.73795 6.00274 8.67655 6.00827 8.61594L4.59643 8.99424C4.51973 9.01483 4.42813 9.03941 4.34567 9.05444C4.25011 9.07185 4.11092 9.08814 3.95141 9.05423C3.74485 9.01033 3.55748 8.90215 3.41618 8.74522C3.38535 8.71097 3.3588 8.67614 3.33583 8.64171L2.49206 8.8678C2.41536 8.88838 2.32376 8.91296 2.2413 8.92799C2.14574 8.94541 2.00655 8.96169 1.84704 8.92779C1.64048 8.88388 1.45311 8.77571 1.31181 8.61877C1.20269 8.49759 1.1472 8.3689 1.1145 8.27744C1.08629 8.1985 1.06177 8.10689 1.04125 8.03018L0.791701 7.09885C0.771119 7.02215 0.746538 6.93055 0.731508 6.84809C0.714092 6.75253 0.697808 6.61334 0.731712 6.45383C0.775619 6.24726 0.883793 6.0599 1.04073 5.9186C1.16191 5.80948 1.2906 5.75399 1.38206 5.72129C1.461 5.69307 1.55261 5.66856 1.62932 5.64804L2.47318 5.42193C2.47586 5.38071 2.48143 5.33735 2.49099 5.29237C2.5349 5.08581 2.64307 4.89844 2.80001 4.75714C2.92119 4.64802 3.04988 4.59253 3.14134 4.55983C3.22027 4.53162 3.31189 4.50711 3.3886 4.48658L11.1078 2.41824C11.2186 2.19888 11.3697 2.00049 11.5545 1.83406C11.7649 1.64462 12.0058 1.53085 12.2548 1.44183C12.4907 1.35749 12.7836 1.27904 13.123 1.18809L13.1628 1.17744C13.2395 1.15686 13.3311 1.13228 13.4135 1.11725ZM13.3642 2.5039C13.0648 2.58443 12.8606 2.64126 12.7036 2.69735C12.5325 2.75852 12.4742 2.80016 12.4467 2.82492C12.3421 2.91912 12.2699 3.04403 12.2407 3.18174C12.233 3.21793 12.2261 3.28928 12.2587 3.46805C12.2927 3.6545 12.3564 3.89436 12.4559 4.26563L12.5594 4.652C12.6589 5.02328 12.7236 5.26287 12.7874 5.44133C12.8486 5.61244 12.8902 5.67079 12.915 5.69829C13.0092 5.80291 13.1341 5.87503 13.2718 5.9043C13.308 5.91199 13.3793 5.91887 13.5581 5.88629C13.7221 5.85641 13.9273 5.80352 14.2269 5.72356L13.3642 2.5039Z" fill="#155EEF" /> <path fillRule="evenodd" clipRule="evenodd" d="M13.4135 1.11725C13.5091 1.09983 13.6483 1.08355 13.8078 1.11745C14.0143 1.16136 14.2017 1.26953 14.343 1.42647C14.4521 1.54766 14.5076 1.67634 14.5403 1.76781C14.5685 1.84673 14.593 1.93833 14.6136 2.01504L15.5533 5.5222C15.5739 5.5989 15.5985 5.69049 15.6135 5.77296C15.6309 5.86852 15.6472 6.00771 15.6133 6.16722C15.5694 6.37378 15.4612 6.56114 15.3043 6.70245C15.1831 6.81157 15.0544 6.86706 14.9629 6.89975C14.884 6.92796 14.7924 6.95247 14.7157 6.97299L14.676 6.98364C14.3365 7.07461 14.0437 7.15309 13.7972 7.19802C13.537 7.24543 13.2715 7.26736 12.9946 7.20849C12.7513 7.15677 12.5213 7.06047 12.3156 6.92591L9.63273 7.64477C9.86399 7.97104 9.99992 8.36965 9.99992 8.80001C9.99992 9.2424 9.85628 9.65124 9.6131 9.98245L12.5508 14.291C12.7582 14.5952 12.6797 15.01 12.3755 15.2174C12.0713 15.4248 11.6566 15.3464 11.4492 15.0422L8.51171 10.7339C8.34835 10.777 8.17682 10.8 7.99992 10.8C7.82305 10.8 7.65155 10.777 7.48823 10.734L4.5508 15.0422C4.34338 15.3464 3.92863 15.4248 3.62442 15.2174C3.32021 15.01 3.24175 14.5952 3.44916 14.291L6.3868 9.98254C6.14358 9.65132 5.99992 9.24244 5.99992 8.80001C5.99992 8.73795 6.00274 8.67655 6.00827 8.61594L4.59643 8.99424C4.51973 9.01483 4.42813 9.03941 4.34567 9.05444C4.25011 9.07185 4.11092 9.08814 3.95141 9.05423C3.74485 9.01033 3.55748 8.90215 3.41618 8.74522C3.38535 8.71097 3.3588 8.67614 3.33583 8.64171L2.49206 8.8678C2.41536 8.88838 2.32376 8.91296 2.2413 8.92799C2.14574 8.94541 2.00655 8.96169 1.84704 8.92779C1.64048 8.88388 1.45311 8.77571 1.31181 8.61877C1.20269 8.49759 1.1472 8.3689 1.1145 8.27744C1.08629 8.1985 1.06177 8.10689 1.04125 8.03018L0.791701 7.09885C0.771119 7.02215 0.746538 6.93055 0.731508 6.84809C0.714092 6.75253 0.697808 6.61334 0.731712 6.45383C0.775619 6.24726 0.883793 6.0599 1.04073 5.9186C1.16191 5.80948 1.2906 5.75399 1.38206 5.72129C1.461 5.69307 1.55261 5.66856 1.62932 5.64804L2.47318 5.42193C2.47586 5.38071 2.48143 5.33735 2.49099 5.29237C2.5349 5.08581 2.64307 4.89844 2.80001 4.75714C2.92119 4.64802 3.04988 4.59253 3.14134 4.55983C3.22027 4.53162 3.31189 4.50711 3.3886 4.48658L11.1078 2.41824C11.2186 2.19888 11.3697 2.00049 11.5545 1.83406C11.7649 1.64462 12.0058 1.53085 12.2548 1.44183C12.4907 1.35749 12.7836 1.27904 13.123 1.18809L13.1628 1.17744C13.2395 1.15686 13.3311 1.13228 13.4135 1.11725ZM13.3642 2.5039C13.0648 2.58443 12.8606 2.64126 12.7036 2.69735C12.5325 2.75852 12.4742 2.80016 12.4467 2.82492C12.3421 2.91912 12.2699 3.04403 12.2407 3.18174C12.233 3.21793 12.2261 3.28928 12.2587 3.46805C12.2927 3.6545 12.3564 3.89436 12.4559 4.26563L12.5594 4.652C12.6589 5.02328 12.7236 5.26287 12.7874 5.44133C12.8486 5.61244 12.8902 5.67079 12.915 5.69829C13.0092 5.80291 13.1341 5.87503 13.2718 5.9043C13.308 5.91199 13.3793 5.91887 13.5581 5.88629C13.7221 5.85641 13.9273 5.80352 14.2269 5.72356L13.3642 2.5039Z" fill="currentColor" />
</svg> </svg>
) )
const DiscoveryIcon = () => ( const DiscoveryIcon = () => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
<path d="M8.74786 9.89676L12.0003 14.6669M7.25269 9.89676L4.00027 14.6669M9.3336 8.80031C9.3336 9.53669 8.73665 10.1336 8.00027 10.1336C7.26389 10.1336 6.66694 9.53669 6.66694 8.80031C6.66694 8.06393 7.26389 7.46698 8.00027 7.46698C8.73665 7.46698 9.3336 8.06393 9.3336 8.80031ZM11.4326 3.02182L3.57641 5.12689C3.39609 5.1752 3.30593 5.19936 3.24646 5.25291C3.19415 5.30001 3.15809 5.36247 3.14345 5.43132C3.12681 5.5096 3.15097 5.59976 3.19929 5.78008L3.78595 7.96951C3.83426 8.14984 3.85842 8.24 3.91197 8.29947C3.95907 8.35178 4.02153 8.38784 4.09038 8.40248C4.16866 8.41911 4.25882 8.39496 4.43914 8.34664L12.2953 6.24158L11.4326 3.02182ZM14.5285 6.33338C13.8072 6.52665 13.4466 6.62328 13.1335 6.55673C12.8581 6.49819 12.6082 6.35396 12.4198 6.14471C12.2056 5.90682 12.109 5.54618 11.9157 4.82489L11.8122 4.43852C11.6189 3.71722 11.5223 3.35658 11.5889 3.04347C11.6474 2.76805 11.7916 2.51823 12.0009 2.32982C12.2388 2.11563 12.5994 2.019 13.3207 1.82573C13.501 1.77741 13.5912 1.75325 13.6695 1.76989C13.7383 1.78452 13.8008 1.82058 13.8479 1.87289C13.9014 1.93237 13.9256 2.02253 13.9739 2.20285L14.9057 5.68018C14.954 5.86051 14.9781 5.95067 14.9615 6.02894C14.9469 6.0978 14.9108 6.16025 14.8585 6.20736C14.799 6.2609 14.7088 6.28506 14.5285 6.33338ZM2.33475 8.22033L3.23628 7.97876C3.4166 7.93044 3.50676 7.90628 3.56623 7.85274C3.61854 7.80563 3.6546 7.74318 3.66924 7.67433C3.68588 7.59605 3.66172 7.50589 3.6134 7.32556L3.37184 6.42403C3.32352 6.24371 3.29936 6.15355 3.24581 6.09408C3.19871 6.04176 3.13626 6.00571 3.0674 5.99107C2.98912 5.97443 2.89896 5.99859 2.71864 6.04691L1.81711 6.28847C1.63678 6.33679 1.54662 6.36095 1.48715 6.4145C1.43484 6.4616 1.39878 6.52405 1.38415 6.59291C1.36751 6.67119 1.39167 6.76135 1.43998 6.94167L1.68155 7.8432C1.72987 8.02352 1.75402 8.11369 1.80757 8.17316C1.85467 8.22547 1.91713 8.26153 1.98598 8.27616C2.06426 8.2928 2.15442 8.26864 2.33475 8.22033Z" stroke="#344054" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" /> <path d="M8.74786 9.89676L12.0003 14.6669M7.25269 9.89676L4.00027 14.6669M9.3336 8.80031C9.3336 9.53669 8.73665 10.1336 8.00027 10.1336C7.26389 10.1336 6.66694 9.53669 6.66694 8.80031C6.66694 8.06393 7.26389 7.46698 8.00027 7.46698C8.73665 7.46698 9.3336 8.06393 9.3336 8.80031ZM11.4326 3.02182L3.57641 5.12689C3.39609 5.1752 3.30593 5.19936 3.24646 5.25291C3.19415 5.30001 3.15809 5.36247 3.14345 5.43132C3.12681 5.5096 3.15097 5.59976 3.19929 5.78008L3.78595 7.96951C3.83426 8.14984 3.85842 8.24 3.91197 8.29947C3.95907 8.35178 4.02153 8.38784 4.09038 8.40248C4.16866 8.41911 4.25882 8.39496 4.43914 8.34664L12.2953 6.24158L11.4326 3.02182ZM14.5285 6.33338C13.8072 6.52665 13.4466 6.62328 13.1335 6.55673C12.8581 6.49819 12.6082 6.35396 12.4198 6.14471C12.2056 5.90682 12.109 5.54618 11.9157 4.82489L11.8122 4.43852C11.6189 3.71722 11.5223 3.35658 11.5889 3.04347C11.6474 2.76805 11.7916 2.51823 12.0009 2.32982C12.2388 2.11563 12.5994 2.019 13.3207 1.82573C13.501 1.77741 13.5912 1.75325 13.6695 1.76989C13.7383 1.78452 13.8008 1.82058 13.8479 1.87289C13.9014 1.93237 13.9256 2.02253 13.9739 2.20285L14.9057 5.68018C14.954 5.86051 14.9781 5.95067 14.9615 6.02894C14.9469 6.0978 14.9108 6.16025 14.8585 6.20736C14.799 6.2609 14.7088 6.28506 14.5285 6.33338ZM2.33475 8.22033L3.23628 7.97876C3.4166 7.93044 3.50676 7.90628 3.56623 7.85274C3.61854 7.80563 3.6546 7.74318 3.66924 7.67433C3.68588 7.59605 3.66172 7.50589 3.6134 7.32556L3.37184 6.42403C3.32352 6.24371 3.29936 6.15355 3.24581 6.09408C3.19871 6.04176 3.13626 6.00571 3.0674 5.99107C2.98912 5.97443 2.89896 5.99859 2.71864 6.04691L1.81711 6.28847C1.63678 6.33679 1.54662 6.36095 1.48715 6.4145C1.43484 6.4616 1.39878 6.52405 1.38415 6.59291C1.36751 6.67119 1.39167 6.76135 1.43998 6.94167L1.68155 7.8432C1.72987 8.02352 1.75402 8.11369 1.80757 8.17316C1.85467 8.22547 1.91713 8.26153 1.98598 8.27616C2.06426 8.2928 2.15442 8.26864 2.33475 8.22033Z" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
</svg> </svg>
) )
@ -92,11 +92,12 @@ const SideBar: FC<IExploreSideBarProps> = ({
const pinnedAppsCount = installedApps.filter(({ is_pinned }) => is_pinned).length const pinnedAppsCount = installedApps.filter(({ is_pinned }) => is_pinned).length
return ( return (
<div className='w-fit sm:w-[216px] shrink-0 pt-6 px-4 border-gray-200 cursor-pointer'> <div className='w-fit sm:w-[216px] shrink-0 pt-6 px-4 border-r border-divider-burn cursor-pointer'>
<div> <div className={cn(isDiscoverySelected ? 'text-text-accent' : 'text-text-tertiary')}>
<Link <Link
href='/explore/apps' href='/explore/apps'
className={cn(isDiscoverySelected ? 'text-primary-600 bg-white font-semibold' : 'text-gray-700 font-medium hover:bg-gray-200', 'flex items-center pc:justify-start pc:w-full mobile:justify-center mobile:w-fit h-9 px-3 mobile:px-2 gap-2 rounded-lg')} className={cn(isDiscoverySelected ? ' bg-components-main-nav-nav-button-bg-active' : 'font-medium hover:bg-state-base-hover',
'flex items-center pc:justify-start pc:w-full mobile:justify-center mobile:w-fit h-9 px-3 mobile:px-2 gap-2 rounded-lg')}
style={isDiscoverySelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}} style={isDiscoverySelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}}
> >
{isDiscoverySelected ? <SelectedDiscoveryIcon /> : <DiscoveryIcon />} {isDiscoverySelected ? <SelectedDiscoveryIcon /> : <DiscoveryIcon />}
@ -105,7 +106,7 @@ const SideBar: FC<IExploreSideBarProps> = ({
</div> </div>
{installedApps.length > 0 && ( {installedApps.length > 0 && (
<div className='mt-10'> <div className='mt-10'>
<p className='pl-2 mobile:px-0 text-xs text-gray-500 break-all font-medium uppercase'>{t('explore.sidebar.workspace')}</p> <p className='pl-2 mobile:px-0 text-xs text-text-tertiary break-all font-medium uppercase'>{t('explore.sidebar.workspace')}</p>
<div className='mt-3 space-y-1 overflow-y-auto overflow-x-hidden' <div className='mt-3 space-y-1 overflow-y-auto overflow-x-hidden'
style={{ style={{
height: 'calc(100vh - 250px)', height: 'calc(100vh - 250px)',