SEMOSS v5 UI Redesign WIP

[neelneelneel]

Description

SEMOSS v5 UI Redesign

Changes Made

How to Test

Notes

There will be further changes

[github-actions]

@CodiumAI-Agent /describe

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

Title

SEMOSS v5 UI Redesign WIP

---

User description

Description

SEMOSS v5 UI Redesign

Changes Made

How to Test

Notes

There will be further changes

---

PR Type

Enhancement

---

Description

• Add skeleton loader to AppTileCard component

• Split ImportPage into layout and content

• Revamp EngineIndexPage with filters and infinite scroll

• Update Sidebar navigation pin and dynamic menu

---

Changes diagram

flowchart LR
  A["AppTileCard: skeleton & lazy load"]
  B["ImportPage & ImportPageContent split"]
  C["EngineIndexPage: filters & infinite scroll"]
  D["Sidebar: dynamic nav & pin logic"]
  E["Chip: outlined variant & title"]

  A --> B
  B --> C
  C --> D
  D --> E

Loading

---

Changes walkthrough 📝

	Relevant files
Enhancement	6 files AppTileCard.tsx Add skeleton loader and lazy load image                                    +676/-243 ImportPage.tsx Refactor ImportPage into layout import                                      +18/-875 ImportPageContent.tsx Introduce ImportPageContent component                                        +768/-0  EngineIndexPage.tsx Revamp EngineIndexPage filters and scroll                                +679/-84 Sidebar.tsx Update Sidebar nav and pin behavior                                            +312/-0  Chip.tsx Allow outlined variant and title prop                                        +4/-2
Bug fix	1 files PlatformMessages.tsx Simplify PlatformMessages props and state                                +7/-30
Additional files	101 files LinkBlock.tsx +5/-8      LlmCard.tsx +0/-11    USAGE.md +0/-2      index.ts +0/-2      AppBar.stories.tsx +20/-0    AppBar.tsx +11/-0    index.ts +5/-0      Container.tsx +2/-0      Link.tsx +6/-11    Stack.tsx +4/-4      Switch.tsx +5/-4      Toolbar.stories.tsx +20/-0    Toolbar.tsx +11/-0    index.ts +5/-0      Typography.tsx +4/-1      index.ts +4/-0      theme.ts +4/-1      .eslintrc.json +10/-1    AppWrapper.tsx +17/-40  AppFilter.tsx +1/-1      AppTemplates.tsx +17/-66  BrowseTempateTitleCard.tsx +437/-0  NewAppStep.tsx +65/-59  BlocksWorkspace.tsx +106/-150 default-menu.ts +1/-1      LayersPanel.tsx +3/-3      NotebookExplorerPanel.tsx +4/-4      CodeWorkspace.tsx +64/-99  Sidebar.tsx +0/-16    SidebarItem.tsx +0/-33    SidebarText.tsx +0/-13    index.ts +0/-3      index.ts +0/-1      CookieWrapper.tsx +9/-17    PrivacyPreferenceCenterModal.tsx +24/-27  EditEngineDetails.tsx +358/-322 EngineAccessButton.tsx +15/-11  EngineHeader.tsx +236/-0  EngineShell.tsx +0/-294  GenericEngineCards.tsx +67/-52  index.ts +1/-1      Help.tsx +9/-38    BannerSection.tsx +91/-0    BusinessUserScreen.tsx +145/-0  CreateAppSection.tsx +164/-0  DeveloperUserScreen.tsx +148/-0  FanFavoritesSection.tsx +85/-0    FeaturedAppCard.tsx +155/-0  index.ts +2/-0      AddVariablePopover.tsx +0/-1      PromptBuilderConstraintsStep.tsx +1/-1      PromptBuilderContextStep.tsx +1/-1      PromptBuilderInputStep.tsx +1/-1      PromptBuilderInputTypeStep.tsx +1/-1      PromptBuilderPreviewStep.tsx +1/-1      prompt.helpers.ts +1/-1      PromptTokenChip.tsx +3/-7      PromptTokenTextButton.tsx +3/-7      LoginPopover.tsx +29/-11  Navbar.tsx +105/-0  NavbarHeader.tsx +72/-0    NavbarLeft.tsx +27/-0    NavbarRight.tsx +27/-0    Page.tsx +61/-0    Search.tsx +510/-0  index.ts +15/-0    Filterbox.tsx +180/-166 index.ts +0/-1      Navbar.tsx +0/-86    index.ts +0/-3      Page.tsx +0/-94    index.ts +0/-3      Settings.tsx +0/-16    index.ts +0/-1      index.ts +0/-3      WelcomeModal.tsx +0/-322  WelcomeStepActions.tsx +0/-77    WelcomeStepToolbar.tsx +0/-17    index.ts +0/-3      Workspace.tsx +87/-249 WorkspaceTabs.tsx +0/-66    FileEditorPanel.tsx +1/-1      FileExplorerPanel.tsx +4/-6      constants.ts +0/-1      EngineContext.tsx +18/-12  PageContext.tsx +18/-0    WorkspaceContext.tsx +4/-4      index.ts +5/-2      USAGE.md +0/-4      index.ts +2/-0      useCacheState.ts +18/-15  useEngine.tsx +1/-1      usePage.ts +54/-0    useWorkspace.ts +2/-2      HomePage.tsx +0/-561  LandingPage.tsx +72/-0    LoginPage.tsx +20/-46  NavigatorLayout.tsx +0/-174  PageLayout.tsx +36/-0    Router.tsx +41/-34  Additional files not shown

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 5 🔵🔵🔵🔵🔵

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing useEffect deps Several useEffect hooks reference props or state (e.g., isLoading) without listing them in the dependency array, which can lead to stale values or skipped updates. Ensure all external variables are declared in the dependency arrays. useEffect(() => { if (isLoading) { setLoading(true); } else { setLoading(false); } }, []); Potential memory leak The IntersectionObserver is created without options cleanup on component unmount if cardRef.current changes. Verify observer disconnect logic and consider cleaning up in all scenarios to avoid orphaned observers. useEffect(() => { const observer = new window.IntersectionObserver( (entries) => { entries.forEach((entry) => { // console.log(entry, 'entry'); if (entry.isIntersecting) { // console.log('Card is in view'); setIsInView(true); } }); }, { threshold: 0.1, // Adjust as needed }, ); if (cardRef.current) { observer.observe(cardRef.current); } return () => { if (cardRef.current) { observer.unobserve(cardRef.current); } }; }, []); High duplication The new ImportPage and ImportPageContent extract nearly identical markup and styled components. Consider consolidating to reduce duplication and simplify maintenance. /** * Page Documentation (10/10/2023) * * Different Connection types: * Model(LLM), Vector Databases, Functions, Traditional Dbs, Storage * * Steps and (props...) from the useStepper hook will give you the steps that * have been completed through the selection process. * * Steps is important for this page as based on the step in the process you will * see different steps in the connection process for all engines * * TODO seperate links: Just seperate the steps into * - /import * - /import/model * - /import/model/OpenAi */ import React, { useEffect, useRef } from 'react'; import { Breadcrumbs, Card, styled, Search, Typography,

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Add internal navigation call The internal navigation branch prevents default but never triggers a programmatic route change. Inject React Router’s navigation call after preventDefault to actually navigate in-app. Rename or separate hooks to avoid shadowing. libs/renderer/src/components/block-defaults/link-block/LinkBlock.tsx [34-43] -const navigate = (e: React.MouseEvent<HTMLAnchorElement>) => { +const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => { if (!data.href) { return; } const isFullUrl = /^(https?:)?\/\//.test(data.href); if (isFullUrl) { return; // External link, let default behavior happen } else if (data.href.startsWith("/")) { e.preventDefault(); + internalNavigate(data.href); // useNavigate hook call + } +}; Suggestion importance[1-10]: 9 __ Why: The navigate function handles preventDefault for internal links but never actually calls React Router’s navigation, so user clicks won’t change routes.	High
	Generate valid type array in query The nested brackets and manual .map in the template produce an invalid type argument. Use JSON.stringify on the array of types to build a proper array literal. packages/client/src/components/shared/Search.tsx [198-204] const result = usePixel(` - MyEngineProject(metaKeys = ${JSON.stringify( - [], - )}, metaFilters=[{}], filterWord=["${searchValue}"], type=[[${ - isAll ? '' : selectedCategories.map((x) => `"${x.type}"`) -}]]); - `); + MyEngineProject( + metaKeys = ${JSON.stringify([])}, + metaFilters=[{}], + filterWord=["${searchValue}"], + type=${JSON.stringify(isAll ? [] : selectedCategories.map((x) => x.type))} + ); +`); Suggestion importance[1-10]: 8 __ Why: Constructing the type parameter with JSON.stringify ensures a valid array literal instead of malformed nested brackets, preventing query errors.	Medium
General	Restore H5 font size The H5 font size was unintentionally changed to 4px, making text unreadable. Restore it to a sensible default such as 24px to match design standards. libs/ui/src/theme.ts [391] /* Typography/H5 */ -fontSize: "4px", +fontSize: "24px", Suggestion importance[1-10]: 9 __ Why: Changing the H5 fontSize to 4px breaks readability; restoring it to 24px aligns with design intent and fixes the regression.	High
	Delay loading reset until export finishes setExportLoading(false) runs immediately, so the loading indicator never shows. Move it into the .then and add a .catch to reset the flag after the request completes or fails. packages/client/src/components/engine/EngineHeader.tsx [79-88] const exportDB = () => { setExportLoading(true); const pixel = `META | ExportEngine(engine=["${active.id}"] );`; - monolithStore.runQuery(pixel).then((response) => { - const output = response.pixelReturn[0].output, - insightId = response.insightId; - - monolithStore.download(insightId, output); - }); - setExportLoading(false); + monolithStore.runQuery(pixel) + .then((response) => { + const { output } = response.pixelReturn[0]; + const { insightId } = response; + monolithStore.download(insightId, output); + }) + .catch(() => { + notification.add({ color: 'error', message: 'Export failed' }); + }) + .finally(() => { + setExportLoading(false); + }); }; Suggestion importance[1-10]: 8 __ Why: Calling setExportLoading(false) immediately negates the loading indicator; moving it into .finally ensures the flag is reset only after the query succeeds or fails.	Medium
	Correct randomCount filtering Returning without a React node can break rendering and the condition is off-by-one. Check randomCount !== undefined and use idx >= randomCount with return null to properly skip extra items. packages/client/src/components/app/AppTemplates.tsx [81-85] -if (randomCount) { - if (idx > randomCount) { - return; - } +if (randomCount !== undefined && idx >= randomCount) { + return null; } Suggestion importance[1-10]: 6 __ Why: The current check if (idx > randomCount) is off-by-one and returns undefined instead of null, so using idx >= randomCount and return null ensures proper skipping and valid JSX.	Low
	Remove debug text from description It looks like the string "nonono" was appended accidentally for debugging. Remove the extra text so the description renders correctly. packages/client/src/components/shared/Search.tsx [376] -description={option.description + 'nonono'} +description={option.description} Suggestion importance[1-10]: 6 __ Why: Removing the stray "nonono" fixes the unintended debug text in description, improving UI correctness and readability.	Low
	Forward props in renderOption You need to spread the props argument onto the root element in renderOption so that keyboard navigation and focus management work correctly. packages/client/src/components/shared/Search.tsx [326-334] renderOption={(props, option) => ( <Link + {...props} key={option.label} href={getEngineProjectHref(option)} rel="noopener noreferrer" color="inherit" underline="none" target="_blank" > Suggestion importance[1-10]: 6 __ Why: Spreading props onto the root <Link> is necessary for proper keyboard navigation and focus management in the Autocomplete renderOption.	Low
	Skip pixel query when unauthorized Passing an empty string as the query may trigger an invalid request. Use null to skip the query when editing is not allowed. packages/client/src/components/engine/EditEngineDetails.tsx [87-89] const getEngineMetaValues = usePixel< { METAVALUE: string; count: number }[] ->(canEdit ? `META | GetDatabaseMetaValues ( metaKeys = ['tags'] ) ;` : '', { +>(canEdit ? `META | GetDatabaseMetaValues ( metaKeys = ['tags'] ) ;` : null, { data: [], }); Suggestion importance[1-10]: 5 __ Why: Passing null instead of an empty string to usePixel more clearly signals to skip the request when canEdit is false, preventing unintended blank queries.	Low
	Guard against undefined date formatting If date is undefined or invalid, new Date(date) yields "Invalid Date". Guard against falsy date to avoid formatting errors. packages/client/src/components/engine/GenericEngineCards.tsx [349-355] -const formattedDate = new Date(date) - .toLocaleDateString('en-US', { - month: 'short', - day: 'numeric', - year: 'numeric', - }) - .replace(',', ''); +const formattedDate = date + ? new Date(date) + .toLocaleDateString('en-US', { + month: 'short', + day: 'numeric', + year: 'numeric', + }) + .replace(',', '') + : ''; Suggestion importance[1-10]: 5 __ Why: Wrapping the new Date(date) logic in a falsy check prevents the display of "Invalid Date" when date is undefined, making the UI more robust.	Low
	Fix filter label typo There's a typo in the filter label text. Change "Filter Byss" back to "Filter By" to correct the user-facing string. packages/client/src/components/app/AppFilter.tsx [52] -<Typography variant="h6">Filter Byss</Typography> +<Typography variant="h6">Filter By</Typography> Suggestion importance[1-10]: 4 __ Why: Correcting the user-facing string from "Filter Byss" to "Filter By" fixes a minor typo that affects usability.	Low

[github-actions]

@CodiumAI-Agent /update_changelog