feat(chat): add layout for shared auth logic, add marketplace route

apps/chat/src/components/Header/Header.tsx

@@ -16,6 +16,10 @@ import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 import { UIActions, UISelectors } from '@/src/store/ui/ui.reducers';
 
 import { CENTRAL_CHAT_MIN_WIDTH } from '@/src/constants/chat';
+import {
+  DEFAULT_HEADER_ICON_SIZE,
+  OVERLAY_HEADER_ICON_SIZE,
+} from '@/src/constants/default-ui-settings';
 
 import MoveLeftIcon from '../../../public/images/icons/move-left.svg';
 import MoveRightIcon from '../../../public/images/icons/move-right.svg';
@@ -27,9 +31,6 @@ import { User } from './User/User';
 import { Feature } from '@epam/ai-dial-shared';
 import cssEscape from 'css.escape';
 
-const DEFAULT_HEADER_ICON_SIZE = 24;
-const OVERLAY_HEADER_ICON_SIZE = 18;
-
 const Header = () => {
   const showChatbar = useAppSelector(UISelectors.selectShowChatbar);
   const showPromptbar = useAppSelector(UISelectors.selectShowPromptbar);

apps/chat/src/components/Header/MarketplaceHeader.tsx

@@ -0,0 +1,116 @@
+import { IconX } from '@tabler/icons-react';
+import { useCallback } from 'react';
+
+import classNames from 'classnames';
+
+import { ApiUtils } from '@/src/utils/server/api';
+
+import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
+import { UIActions, UISelectors } from '@/src/store/ui/ui.reducers';
+
+import {
+  DEFAULT_HEADER_ICON_SIZE,
+  OVERLAY_HEADER_ICON_SIZE,
+} from '@/src/constants/default-ui-settings';
+
+import { SettingDialog } from '@/src/components/Settings/SettingDialog';
+
+import MoveLeftIcon from '../../../public/images/icons/move-left.svg';
+import MoveRightIcon from '../../../public/images/icons/move-right.svg';
+import { User } from './User/User';
+
+import { Feature } from '@epam/ai-dial-shared';
+import cssEscape from 'css.escape';
+
+const MarketplaceHeader = () => {
+  const showFilterbar = useAppSelector(
+    UISelectors.selectShowMarketplaceFilterbar,
+  );
+  const isUserSettingsOpen = useAppSelector(
+    UISelectors.selectIsUserSettingsOpen,
+  );
+  const isOverlay = useAppSelector(SettingsSelectors.selectIsOverlay);
+  const customLogo = useAppSelector(UISelectors.selectCustomLogo);
+
+  const isCustomLogoFeatureEnabled: boolean = useAppSelector((state) =>
+    SettingsSelectors.isFeatureEnabled(state, Feature.CustomLogo),
+  );
+
+  const customLogoUrl =
+    isCustomLogoFeatureEnabled &&
+    customLogo &&
+    `api/${ApiUtils.encodeApiUrl(customLogo)}`;
+
+  const dispatch = useAppDispatch();
+
+  const handleToggleFilterbar = useCallback(() => {
+    dispatch(UIActions.setShowMarketplaceFilterbar(!showFilterbar));
+  }, [dispatch, showFilterbar]);
+
+  const onClose = () => {
+    dispatch(UIActions.setIsUserSettingsOpen(false));
+  };
+
+  const headerIconSize = isOverlay
+    ? OVERLAY_HEADER_ICON_SIZE
+    : DEFAULT_HEADER_ICON_SIZE;
+
+  return (
+    <div
+      className={classNames(
+        'z-40 flex w-full border-b border-tertiary bg-layer-3',
+        isOverlay ? 'min-h-[36px]' : 'min-h-[48px]',
+      )}
+      data-qa="header"
+    >
+      <div
+        className="flex h-full cursor-pointer items-center justify-center border-r border-tertiary px-3 md:px-5"
+        data-qa="marketplace-facet-panel-toggle"
+        onClick={handleToggleFilterbar}
+      >
+        {showFilterbar ? (
+          <>
+            <IconX
+              className="text-secondary md:hidden"
+              width={headerIconSize}
+              height={headerIconSize}
+            />
+
+            <MoveLeftIcon
+              className="text-secondary hover:text-accent-secondary max-md:hidden"
+              width={headerIconSize}
+              height={headerIconSize}
+            />
+          </>
+        ) : (
+          <MoveRightIcon
+            className="text-secondary hover:text-accent-secondary"
+            width={headerIconSize}
+            height={headerIconSize}
+          />
+        )}
+      </div>
+
+      <div className="flex grow justify-between">
+        <span
+          className={classNames(
+            'mx-auto min-w-[110px] bg-contain bg-center bg-no-repeat md:ml-5 lg:bg-left',
+          )}
+          style={{
+            backgroundImage: customLogoUrl
+              ? `url(${cssEscape(customLogoUrl)})`
+              : `var(--app-logo)`,
+          }}
+        ></span>
+        <div className="w-[48px] max-md:border-l max-md:border-tertiary md:w-auto">
+          <User />
+        </div>
+      </div>
+
+      <SettingDialog open={isUserSettingsOpen} onClose={onClose} />
+    </div>
+  );
+};
+
+export default MarketplaceHeader;

apps/chat/src/components/Marketplace/Marketplace.tsx

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+
+import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+import {
+  ModelsActions,
+  ModelsSelectors,
+} from '@/src/store/models/models.reducers';
+
+import { Spinner } from '@/src/components/Common/Spinner';
+
+const Marketplace = () => {
+  const dispatch = useAppDispatch();
+
+  const isModelsLoading = useAppSelector(ModelsSelectors.selectModelsIsLoading);
+  const isModelsLoaded = useAppSelector(ModelsSelectors.selectIsModelsLoaded);
+  const models = useAppSelector(ModelsSelectors.selectModels);
+
+  useEffect(() => {
+    if (!isModelsLoaded && !isModelsLoading) {
+      dispatch(ModelsActions.getModels());
+    }
+  }, [isModelsLoaded, isModelsLoading, dispatch]);
+
+  return (
+    <div className="grow overflow-auto px-6 py-4 xl:px-16">
+      {isModelsLoading ? (
+        <Spinner size={60} className="mx-auto" />
+      ) : (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 xl:gap-6">
+          {models.map((model) => (
+            <div
+              key={model.id}
+              className="h-[92px] rounded border border-primary bg-transparent p-4 md:h-[203px] xl:h-[207px]"
+            >
+              {model.name}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Marketplace;

apps/chat/src/components/Marketplace/MarketplaceFilterbar.tsx

@@ -0,0 +1,74 @@
+import { IconArrowLeft, IconHome, TablerIconsProps } from '@tabler/icons-react';
+import { JSX } from 'react';
+
+import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
+
+import classnames from 'classnames';
+
+import { Translation } from '@/src/types/translation';
+
+import { useAppSelector } from '@/src/store/hooks';
+import { UISelectors } from '@/src/store/ui/ui.reducers';
+
+interface ActionButtonProps {
+  isOpen: boolean;
+  onClick: () => void;
+  caption: string;
+  Icon: (props: TablerIconsProps) => JSX.Element;
+}
+
+const ActionButton = ({
+  isOpen,
+  onClick,
+  caption,
+  Icon,
+}: ActionButtonProps) => {
+  return (
+    <div className="flex px-2 py-1">
+      <button
+        onClick={onClick}
+        className="flex min-h-9 shrink-0 grow cursor-pointer select-none items-center gap-3 rounded px-4 py-2 transition-colors duration-200 hover:bg-accent-primary-alpha hover:disabled:bg-transparent"
+      >
+        <Icon className="text-secondary" width={18} height={18} />
+        {isOpen ? caption : ''}
+      </button>
+    </div>
+  );
+};
+
+const MarketplaceFilterbar = () => {
+  const router = useRouter();
+  const { t } = useTranslation(Translation.SideBar);
+  const showFilterbar = useAppSelector(
+    UISelectors.selectShowMarketplaceFilterbar,
+  );
+
+  const onHomeClick = () => {
+    // filler
+  };
+
+  return (
+    <div
+      className={classnames(
+        showFilterbar ? 'w-[284px]' : 'invisible md:visible md:w-[64px]',
+        'group/sidebar absolute left-0 top-0 h-full flex-col gap-px divide-y divide-tertiary bg-layer-3 md:sticky',
+      )}
+    >
+      <ActionButton
+        isOpen={showFilterbar}
+        onClick={() => router.push('/')}
+        caption={t('Back to chats')}
+        Icon={IconArrowLeft}
+      />
+      <ActionButton
+        isOpen={showFilterbar}
+        onClick={onHomeClick}
+        caption={t('Home page')}
+        Icon={IconHome}
+      />
+    </div>
+  );
+};
+
+export default MarketplaceFilterbar;

apps/chat/src/constants/default-ui-settings.ts

@@ -1,7 +1,8 @@
 export const SIDEBAR_MIN_WIDTH = 260;
 export const MOBILE_SIDEBAR_MIN_WIDTH = 320;
 export const HEADER_HEIGHT = 48;
-
+export const DEFAULT_HEADER_ICON_SIZE = 24;
+export const OVERLAY_HEADER_ICON_SIZE = 18;
 export const DEFAULT_CONVERSATION_NAME = 'New conversation';
 export const DEFAULT_PROMPT_NAME = 'Prompt';
 export const DEFAULT_FOLDER_NAME = 'New folder';