@lobehub/chat 1.18.1 → 1.19.0

package/src/app/(main)/discover/(detail)/features/DetailLayout.tsx

@@ -5,7 +5,6 @@ import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import Footer from '@/features/Setting/Footer';
-import { useInterceptingRoutes } from '@/hooks/useInterceptingRoutes';
 
 import SidebarContainer from './SidebarContainer';
 
@@ -20,10 +19,9 @@ interface DetailLayoutProps {
 
 const DetailLayout = memo<DetailLayoutProps>(
   ({ statistics, mobile, header, sidebar, children, actions }) => {
-    const { md = true, xl = true } = useResponsive();
-    const { isIntercepted } = useInterceptingRoutes();
+    const { md = true } = useResponsive();
 
-    if (mobile || !md || (isIntercepted && !xl))
+    if (mobile || !md)
       return (
         <>
           {header}
@@ -37,36 +35,6 @@ const DetailLayout = memo<DetailLayoutProps>(
         </>
       );
 
-    if (isIntercepted) {
-      return (
-        <>
-          <Flexbox flex={1} gap={24} style={{ overflow: 'hidden', position: 'relative' }}>
-            <Flexbox style={{ paddingRight: 16 }}>{header}</Flexbox>
-            <Flexbox
-              gap={24}
-              style={{
-                overflowX: 'hidden',
-                overflowY: 'auto',
-                paddingBottom: 48,
-                paddingRight: 16,
-                position: 'relative',
-              }}
-            >
-              {children}
-              <Footer />
-            </Flexbox>
-          </Flexbox>
-          <SidebarContainer style={{ position: 'sticky', top: '0' }}>
-            <Flexbox gap={16} width={'100%'}>
-              {actions}
-              {statistics}
-            </Flexbox>
-            {sidebar}
-          </SidebarContainer>
-        </>
-      );
-    }
-
     return (
       <>
         {header}

package/src/app/(main)/discover/(detail)/model/[...slugs]/features/InfoSidebar/index.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { Skeleton } from 'antd';
+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 InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverModelItem } from '@/types/discover';
 
 import Block from '../../../../features/Block';
@@ -31,12 +31,9 @@ const InfoSidebar = memo<InfoSidebarProps>(({ data, ...rest }) => {
       >
         {data?.suggestions?.length > 0 ? (
           data?.suggestions.map((item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/model', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/model', item.identifier)} key={item.identifier}>
               <SuggestionItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))
         ) : (
           <Skeleton active paragraph={{ rows: 5 }} title={false} />

package/src/app/(main)/discover/(detail)/model/[...slugs]/features/ProviderList/ProviderItem.tsx

@@ -1,7 +1,7 @@
 import { ModelTag, ProviderCombine } from '@lobehub/icons';
 import { ActionIcon, Grid, Icon, Tooltip } from '@lobehub/ui';
 import { Tag } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
 import { BadgeCheck, BookIcon, ChevronRightIcon, KeyIcon } from 'lucide-react';
 import Link from 'next/link';
 import { memo, useMemo } from 'react';
@@ -9,7 +9,6 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
 import { BASE_PROVIDER_DOC_URL } from '@/const/url';
 import { DiscoverProviderItem } from '@/types/discover';
@@ -31,9 +30,12 @@ interface ProviderItemProps extends DiscoverProviderItem {
 
 const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) => {
   const { t } = useTranslation('discover');
+  const { xl = true } = useResponsive();
   const { styles, theme } = useStyles();
   const isLobeHub = identifier === 'lobehub';
 
+  const isMobile = mobile || !xl;
+
   const model = useMemo(() => {
     const prividerItem = DEFAULT_MODEL_PROVIDER_LIST.find((v) => v.id === identifier);
     if (!prividerItem) return;
@@ -70,13 +72,10 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
 
   const header = (
     <Flexbox gap={4} style={{ minWidth: 240 }}>
-      <InterceptingLink
-        href={urlJoin('/discover/provider', identifier)}
-        style={{ color: 'inherit' }}
-      >
+      <Link href={urlJoin('/discover/provider', identifier)} style={{ color: 'inherit' }}>
         <ProviderCombine provider={identifier} size={24} />
-      </InterceptingLink>
-      <Flexbox align={'center'} gap={6} horizontal>
+      </Link>
+      <Flexbox align={'center'} gap={6} horizontal wrap={'wrap'}>
         <ModelTag model={modelId} style={{ background: theme.colorFillQuaternary, margin: 0 }} />
         {isLobeHub && (
           <Tooltip title={t('models.providerInfo.officialTooltip')}>
@@ -103,9 +102,9 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
   );
 
   const button = (
-    <InterceptingLink href={urlJoin('/discover/provider', identifier)} style={{ color: 'inherit' }}>
+    <Link href={urlJoin('/discover/provider', identifier)} style={{ color: 'inherit' }}>
       <ActionIcon color={theme.colorTextDescription} icon={ChevronRightIcon} />
-    </InterceptingLink>
+    </Link>
   );
 
   return (
@@ -117,7 +116,7 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
       padding={16}
       wrap={'wrap'}
     >
-      {mobile && (
+      {isMobile && (
         <Flexbox align={'center'} horizontal justify={'space-between'}>
           {header}
           {button}
@@ -129,13 +128,13 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
         gap={16}
         horizontal
         maxItemWidth={100}
-        rows={mobile ? 2 : items.length + 1}
+        rows={isMobile ? 2 : items.length + 1}
         style={{ minWidth: 240 }}
       >
-        {!mobile && header}
+        {!isMobile && header}
         {items.map((item, index) => (
           <Statistic
-            align={mobile ? 'flex-start' : 'center'}
+            align={isMobile ? 'flex-start' : 'center'}
             gap={4}
             key={index}
             valuePlacement={'bottom'}
@@ -144,7 +143,7 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
           />
         ))}
       </Grid>
-      {!mobile && button}
+      {!isMobile && button}
     </Flexbox>
   );
 });

package/src/app/(main)/discover/(detail)/plugin/[slug]/features/InfoSidebar/index.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { Skeleton } from 'antd';
+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 InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverPlugintem } from '@/types/discover';
 
 import Block from '../../../../features/Block';
@@ -31,12 +31,9 @@ const InfoSidebar = memo<InfoSidebarProps>(({ data, ...rest }) => {
       >
         {data?.suggestions?.length > 0 ? (
           data?.suggestions.map((item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/plugin', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/plugin', item.identifier)} key={item.identifier}>
               <SuggestionItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))
         ) : (
           <Skeleton active paragraph={{ rows: 5 }} title={false} />

package/src/app/(main)/discover/(detail)/provider/[slug]/features/InfoSidebar/index.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { Skeleton } from 'antd';
+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 InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverProviderItem } from '@/types/discover';
 
 import Block from '../../../../features/Block';
@@ -31,12 +31,9 @@ const InfoSidebar = memo<InfoSidebarProps>(({ data, ...rest }) => {
       >
         {data?.suggestions?.length > 0 ? (
           data?.suggestions.map((item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/provider', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/provider', item.identifier)} key={item.identifier}>
               <SuggestionItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))
         ) : (
           <Skeleton active paragraph={{ rows: 5 }} title={false} />

package/src/app/(main)/discover/(detail)/provider/[slug]/features/ModelList/ModelItem.tsx

@@ -1,14 +1,14 @@
 import { ModelIcon } from '@lobehub/icons';
 import { ActionIcon, Grid } from '@lobehub/ui';
 import { Typography } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
 import { 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 InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverModelItem } from '@/types/discover';
 import { formatPriceByCurrency, formatTokenNumber } from '@/utils/format';
 
@@ -48,9 +48,12 @@ export interface SuggestionItemProps
 
 const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
   const { title, tokens, vision, functionCall } = meta;
+  const { xl = true } = useResponsive();
   const { t } = useTranslation('discover');
   const { styles, theme } = useStyles();
 
+  const isMobile = mobile || !xl;
+
   const items: StatisticProps[] = [
     {
       title: t('models.contentLength'),
@@ -81,7 +84,7 @@ const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
 
   const header = (
     <Flexbox gap={12}>
-      <InterceptingLink href={urlJoin('/discover/model', identifier)} style={{ color: 'inherit' }}>
+      <Link href={urlJoin('/discover/model', identifier)} style={{ color: 'inherit' }}>
         <Flexbox align={'center'} gap={12} horizontal width={'100%'}>
           <ModelIcon model={identifier} size={36} type={'avatar'} />
           <Flexbox style={{ overflow: 'hidden' }}>
@@ -93,15 +96,15 @@ const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
             </Paragraph>
           </Flexbox>
         </Flexbox>
-      </InterceptingLink>
+      </Link>
       <ModelFeatureTags functionCall={functionCall} tokens={tokens} vision={vision} />
     </Flexbox>
   );
 
   const button = (
-    <InterceptingLink href={urlJoin('/discover/model', identifier)} style={{ color: 'inherit' }}>
+    <Link href={urlJoin('/discover/model', identifier)} style={{ color: 'inherit' }}>
       <ActionIcon color={theme.colorTextDescription} icon={ChevronRightIcon} />
-    </InterceptingLink>
+    </Link>
   );
 
   return (
@@ -113,7 +116,7 @@ const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
       padding={16}
       wrap={'wrap'}
     >
-      {mobile && (
+      {isMobile && (
         <Flexbox align={'center'} horizontal justify={'space-between'}>
           {header}
           {button}
@@ -125,13 +128,13 @@ const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
         gap={16}
         horizontal
         maxItemWidth={100}
-        rows={mobile ? 2 : items.length + 1}
+        rows={isMobile ? 2 : items.length + 1}
         style={{ minWidth: 240 }}
       >
-        {!mobile && header}
+        {!isMobile && header}
         {items.map((item, index) => (
           <Statistic
-            align={mobile ? 'flex-start' : 'center'}
+            align={isMobile ? 'flex-start' : 'center'}
             gap={4}
             key={index}
             valuePlacement={'bottom'}
@@ -140,7 +143,7 @@ const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
           />
         ))}
       </Grid>
-      {!mobile && button}
+      {!isMobile && button}
     </Flexbox>
   );
 });

package/src/app/(main)/discover/(list)/(home)/features/AssistantList.tsx

@@ -1,8 +1,8 @@
 import { Grid } from '@lobehub/ui';
+import Link from 'next/link';
 import { memo } from 'react';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverAssistantItem } from '@/types/discover';
 
 import Card from '../../assistants/features/Card';
@@ -11,20 +11,14 @@ const AssistantList = memo<{ data: DiscoverAssistantItem[] }>(({ data }) => {
   return (
     <Grid maxItemWidth={280} rows={4}>
       {data.slice(0, 8).map((item) => (
-        <InterceptingLink
-          href={urlJoin('/discover/assistant/', item.identifier)}
-          key={item.identifier}
-        >
+        <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
           <Card showCategory {...item} />
-        </InterceptingLink>
+        </Link>
       ))}
       {data.slice(8, 16).map((item) => (
-        <InterceptingLink
-          href={urlJoin('/discover/assistant/', item.identifier)}
-          key={item.identifier}
-        >
+        <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
           <Card showCategory variant={'compact'} {...item} />
-        </InterceptingLink>
+        </Link>
       ))}
     </Grid>
   );

package/src/app/(main)/discover/(list)/(home)/features/ModelList.tsx

@@ -1,8 +1,8 @@
 import { Grid } from '@lobehub/ui';
+import Link from 'next/link';
 import { memo } from 'react';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverModelItem } from '@/types/discover';
 
 import Card from '../../models/features/Card';
@@ -11,9 +11,9 @@ const ModelList = memo<{ data: DiscoverModelItem[] }>(({ data }) => {
   return (
     <Grid maxItemWidth={280} rows={4}>
       {data.map((item) => (
-        <InterceptingLink href={urlJoin('/discover/model/', item.identifier)} key={item.identifier}>
+        <Link href={urlJoin('/discover/model/', item.identifier)} key={item.identifier}>
           <Card {...item} />
-        </InterceptingLink>
+        </Link>
       ))}
     </Grid>
   );

package/src/app/(main)/discover/(list)/(home)/features/PluginList.tsx

@@ -1,8 +1,8 @@
 import { Grid } from '@lobehub/ui';
+import Link from 'next/link';
 import { memo } from 'react';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverPlugintem } from '@/types/discover';
 
 import Card from '../../plugins/features/Card';
@@ -11,12 +11,9 @@ const PluginList = memo<{ data: DiscoverPlugintem[] }>(({ data }) => {
   return (
     <Grid maxItemWidth={280} rows={4}>
       {data.map((item) => (
-        <InterceptingLink
-          href={urlJoin('/discover/plugin/', item.identifier)}
-          key={item.identifier}
-        >
+        <Link href={urlJoin('/discover/plugin/', item.identifier)} key={item.identifier}>
           <Card showCategory variant={'compact'} {...item} />
-        </InterceptingLink>
+        </Link>
       ))}
     </Grid>
   );

package/src/app/(main)/discover/(list)/assistants/features/List.tsx

@@ -2,11 +2,11 @@
 
 import { Grid } from '@lobehub/ui';
 import { Empty } from 'antd';
+import Link from 'next/link';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverAssistantItem } from '@/types/discover';
 
 import SearchResultCount from '../../../components/SearchResultCount';
@@ -42,12 +42,9 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
           data={all}
           initialItemCount={24}
           itemContent={(_, item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/assistant/', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
               <Card showCategory variant={'compact'} {...item} />
-            </InterceptingLink>
+            </Link>
           )}
           style={{
             minHeight: '75vh',
@@ -62,12 +59,9 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
       <Title>{t('assistants.recentSubmits')}</Title>
       <Grid maxItemWidth={280} rows={4}>
         {recent.map((item) => (
-          <InterceptingLink
-            href={urlJoin('/discover/assistant/', item.identifier)}
-            key={item.identifier}
-          >
+          <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
             <Card showCategory={!category} {...item} />
-          </InterceptingLink>
+          </Link>
         ))}
       </Grid>
       {last && last?.length > 0 && (
@@ -77,12 +71,9 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
             data={last}
             initialItemCount={12}
             itemContent={(_, item) => (
-              <InterceptingLink
-                href={urlJoin('/discover/assistant/', item.identifier)}
-                key={item.identifier}
-              >
+              <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
                 <Card showCategory={!category} variant={'compact'} {...item} />
-              </InterceptingLink>
+              </Link>
             )}
             style={{
               minHeight: '75vh',

package/src/app/(main)/discover/(list)/models/features/List.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { Empty } from 'antd';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverModelItem } from '@/types/discover';
 
 import SearchResultCount from '../../../components/SearchResultCount';
@@ -32,12 +32,9 @@ const List = memo<ListProps>(({ category, searchKeywords, items = [] }) => {
           data={items}
           initialItemCount={24}
           itemContent={(_, item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/model/', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/model/', item.identifier)} key={item.identifier}>
               <Card showCategory {...item} />
-            </InterceptingLink>
+            </Link>
           )}
           style={{
             minHeight: '75vh',
@@ -54,12 +51,9 @@ const List = memo<ListProps>(({ category, searchKeywords, items = [] }) => {
         data={items}
         initialItemCount={24}
         itemContent={(_, item) => (
-          <InterceptingLink
-            href={urlJoin('/discover/model/', item.identifier)}
-            key={item.identifier}
-          >
+          <Link href={urlJoin('/discover/model/', item.identifier)} key={item.identifier}>
             <Card showCategory={!category} {...item} />
-          </InterceptingLink>
+          </Link>
         )}
         style={{
           minHeight: '75vh',

package/src/app/(main)/discover/(list)/plugins/features/List.tsx

@@ -2,11 +2,11 @@
 
 import { Grid } from '@lobehub/ui';
 import { Empty } from 'antd';
+import Link from 'next/link';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverPlugintem } from '@/types/discover';
 
 import SearchResultCount from '../../../components/SearchResultCount';
@@ -41,12 +41,9 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
           data={all}
           initialItemCount={24}
           itemContent={(_, item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/plugin/', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/plugin/', item.identifier)} key={item.identifier}>
               <Card showCategory variant={'compact'} {...item} />
-            </InterceptingLink>
+            </Link>
           )}
           style={{
             minHeight: '75vh',
@@ -61,12 +58,9 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
       <Title>{t('plugins.recentSubmits')}</Title>
       <Grid maxItemWidth={280} rows={4}>
         {recent.map((item) => (
-          <InterceptingLink
-            href={urlJoin('/discover/plugin/', item.identifier)}
-            key={item.identifier}
-          >
+          <Link href={urlJoin('/discover/plugin/', item.identifier)} key={item.identifier}>
             <Card showCategory={!category} {...item} />
-          </InterceptingLink>
+          </Link>
         ))}
       </Grid>
       {last && last?.length > 0 && (
@@ -76,12 +70,9 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
             data={last}
             initialItemCount={12}
             itemContent={(_, item) => (
-              <InterceptingLink
-                href={urlJoin('/discover/plugin/', item.identifier)}
-                key={item.identifier}
-              >
+              <Link href={urlJoin('/discover/plugin/', item.identifier)} key={item.identifier}>
                 <Card showCategory={!category} variant={'compact'} {...item} />
-              </InterceptingLink>
+              </Link>
             )}
             style={{
               minHeight: '75vh',

package/src/app/(main)/discover/(list)/providers/features/List.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { Empty } from 'antd';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverProviderItem } from '@/types/discover';
 
 import SearchResultCount from '../../../components/SearchResultCount';
@@ -31,12 +31,9 @@ const List = memo<ListProps>(({ searchKeywords, items = [], mobile }) => {
           data={items}
           initialItemCount={6}
           itemContent={(_, item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/provider/', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/provider/', item.identifier)} key={item.identifier}>
               <Card {...item} mobile={mobile} style={{ minHeight: 'unset' }} />
-            </InterceptingLink>
+            </Link>
           )}
           style={{
             minHeight: '75vh',
@@ -53,12 +50,9 @@ const List = memo<ListProps>(({ searchKeywords, items = [], mobile }) => {
         data={items}
         initialItemCount={6}
         itemContent={(_, item) => (
-          <InterceptingLink
-            href={urlJoin('/discover/provider/', item.identifier)}
-            key={item.identifier}
-          >
+          <Link href={urlJoin('/discover/provider/', item.identifier)} key={item.identifier}>
             <Card {...item} mobile={mobile} style={{ minHeight: 'unset' }} />
-          </InterceptingLink>
+          </Link>
         )}
         style={{
           minHeight: '75vh',

package/src/app/(main)/discover/_layout/Desktop/index.tsx

@@ -1,11 +1,14 @@
 import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import NProgress from '@/components/NProgress';
+
 import Header from './Header';
 
 const Layout = ({ children }: PropsWithChildren) => {
   return (
     <>
+      <NProgress />
       <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
         <Header />
         {children}

package/src/app/(main)/discover/_layout/Mobile/index.tsx

@@ -1,7 +1,14 @@
 import { PropsWithChildren } from 'react';
 
+import NProgress from '@/components/NProgress';
+
 const Layout = ({ children }: PropsWithChildren) => {
-  return children;
+  return (
+    <>
+      <NProgress />
+      {children}
+    </>
+  );
 };
 
 Layout.displayName = 'MobileDiscoverStoreLayout';