feat: pos-tlaunch qa updates (#160)

src/app/(main)/[projectId]/page.tsx

@@ -25,9 +25,7 @@ export interface ProjectPageProps {
 
 export default function ProjectHomePage() {
   return (
-    <LayoutInitializer
-      layout={{ navbarProps: { title: 'Apps', type: 'common' } }}
-    >
+    <LayoutInitializer layout={{ navbarProps: { type: 'common' } }}>
       <AppsHome />
     </LayoutInitializer>
   );

src/components/OrderBySelect/OrderBySelect.module.scss

@@ -19,6 +19,7 @@
 .select {
   display: flex;
   align-items: center;
+  column-gap: $spacing-03;
 
   :global(.#{$prefix}--label) {
     @include type-style(body-01);
@@ -29,7 +30,7 @@
     block-size: rem(40px);
   }
   :global(.#{$prefix}--list-box__field) {
-    padding-inline-start: $spacing-02;
+    padding-inline-start: $spacing-04;
     padding-inline-end: $spacing-08;
     border: 0;
   }

src/layout/shell/CollapsibleGroup.module.scss

@@ -19,7 +19,6 @@
 .root {
   display: flex;
   flex-direction: column;
-  min-block-size: 0;
 }
 
 .header {

src/layout/shell/Navbar.tsx

@@ -74,12 +74,16 @@ export function Navbar({ sidebarId, sidebarOpen }: Props) {
           ]
         );
       case 'chat':
-        return [
-          {
-            title: navbarProps.assistant?.name ?? '',
-            icon: <AssistantIcon assistant={navbarProps.assistant ?? null} />,
-          },
-        ];
+        return navbarProps.assistant
+          ? [
+              {
+                title: navbarProps.assistant.name ?? '',
+                icon: (
+                  <AssistantIcon assistant={navbarProps.assistant ?? null} />
+                ),
+              },
+            ]
+          : undefined;
       default:
         return title ? [{ title }] : undefined;
     }

src/layout/shell/Sidebar.module.scss

@@ -75,38 +75,18 @@ $width: var(--sidebar-width);
   }
 }
 
-.content {
-  display: flex;
-  flex-direction: column;
-  row-gap: $spacing-05;
-  flex-grow: 1;
-  min-block-size: 0;
-}
-
-.agents,
-.history {
-  > div {
-    margin-inline: -$padding-x;
-  }
-}
-
-.agents {
-  flex-shrink: 0;
-  &[aria-expanded='true'] {
-    max-block-size: calc(100% - rem(50px));
-  }
-}
-
-.history {
-  flex-grow: 1;
-}
-
-.agentsScroll,
-.historyScroll {
+.scroll {
   @include scrollbar();
   overflow-y: auto;
+  scrollbar-gutter: stable;
   padding-inline: $padding-x;
-  max-block-size: 100%;
+  margin-inline: -$padding-x;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  row-gap: $spacing-05;
+  margin-block-end: -$spacing-05;
+  padding-block-end: $spacing-05;
 }
 
 .userNav {

src/layout/shell/Sidebar.tsx

@@ -49,25 +49,17 @@ export function Sidebar({ id, isOpen }: SidebarProps) {
       />
 
       <div id={id} aria-hidden={!isOpen} className={classes.panel}>
-        <MainNav />
+        <div className={classes.scroll}>
+          <MainNav />
 
-        <hr />
+          <hr />
 
-        <div className={classes.content}>
-          <CollapsibleGroup heading="Agents" className={classes.agents}>
-            <AssistantsNav
-              className={classes.agentsScroll}
-              enableFetch={Boolean(isOpen)}
-            />
-          </CollapsibleGroup>
+          <AssistantsNav enableFetch={Boolean(isOpen)} />
 
           <hr />
 
-          <CollapsibleGroup heading="Sessions" className={classes.history}>
-            <ThreadsHistory
-              enableFetch={Boolean(isOpen)}
-              className={classes.historyScroll}
-            />
+          <CollapsibleGroup heading="Sessions">
+            <ThreadsHistory enableFetch={Boolean(isOpen)} />
           </CollapsibleGroup>
         </div>
 

src/layout/shell/SidebarButton.module.scss

@@ -37,6 +37,15 @@
 .title {
   font-size: rem(16px);
   line-height: (18 / 16);
+  a {
+    color: inherit;
+    text-decoration: none;
+    border-radius: $spacing-02;
+    &:focus-visible {
+      @include focus-outline('outline');
+      outline-offset: 0;
+    }
+  }
 }
 
 @include breakpoint-down(lg) {

src/layout/shell/SidebarButton.tsx

@@ -14,13 +14,16 @@
  * limitations under the License.
  */
 
+import { Link } from '@/components/Link/Link';
 import { VersionTag } from '@/components/VersionTag/VersionTag';
+import { usePrefetchArtifacts } from '@/modules/apps/hooks/usePrefetchArtifacts';
 import { usePrefetchThreads } from '@/modules/chat/history/usePrefetchThreads';
 import { APP_NAME } from '@/utils/constants';
 import { Button, ButtonBaseProps } from '@carbon/react';
 import { Close, Menu } from '@carbon/react/icons';
 import { MouseEvent } from 'react';
 import { UserSetting } from '../hooks/useUserSetting';
+import { useProjectContext } from '../providers/ProjectProvider';
 import { SidebarProps } from './Sidebar';
 import classes from './SidebarButton.module.scss';
 
@@ -35,7 +38,10 @@ export function SidebarButton({
   onMouseEnter,
   ...props
 }: Props) {
+  const { project } = useProjectContext();
+
   const prefetchThreads = usePrefetchThreads();
+  const prefetchArtifacts = usePrefetchArtifacts({ useDefaultParams: true });
 
   return (
     <div className={classes.root}>
@@ -56,7 +62,11 @@ export function SidebarButton({
         <Close />
       </Button>
 
-      <p className={classes.title}>{APP_NAME}</p>
+      <p className={classes.title}>
+        <Link href={`/${project.id}`} onMouseEnter={() => prefetchArtifacts()}>
+          {APP_NAME}
+        </Link>
+      </p>
 
       <VersionTag />
     </div>

src/modules/apps/builder/ArtifactSharedIframe.module.scss

@@ -50,7 +50,7 @@
   svg {
     max-block-size: 80%;
     max-inline-size: rem(600px);
-    inline-size: auto;
+    inline-size: 100%;
 
     [data-fill='layer'] {
       fill: $layer-02;

src/modules/apps/builder/ArtifactSharedIframe.tsx

@@ -15,17 +15,16 @@
  */
 
 'use client';
+import { createChatCompletion, modulesToPackages } from '@/app/api/apps';
+import { ChatCompletionCreateBody } from '@/app/api/apps/types';
+import { ApiError } from '@/app/api/errors';
+import { useProjectContext } from '@/layout/providers/ProjectProvider';
 import { Theme, useTheme } from '@/layout/providers/ThemeProvider';
 import { USERCONTENT_SITE_URL } from '@/utils/constants';
 import { removeTrailingSlash } from '@/utils/helpers';
 import { Loading } from '@carbon/react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import classes from './ArtifactSharedIframe.module.scss';
-import { createChatCompletion, modulesToPackages } from '@/app/api/apps';
-import { ChatCompletionCreateBody } from '@/app/api/apps/types';
-import { ApiError } from '@/app/api/errors';
-import Bee from '@/modules/assistants/icons/BeeMain.svg';
-import { useProjectContext } from '@/layout/providers/ProjectProvider';
 import AppPlaceholder from './Placeholder.svg';
 
 interface Props {

src/modules/assistants/AssistantsNav.module.scss

@@ -38,18 +38,26 @@
 }
 
 .root {
-  min-block-size: 0;
+  display: flex;
+  flex-direction: column;
 }
 
-.item {
-  @include item();
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: $spacing-03;
+  padding-inline: $spacing-03;
+  margin-block-end: $spacing-03;
 }
 
-.bottom {
-  background-color: $layer;
-  position: sticky;
-  inset-block-end: 0;
-  inset-inline-start: 0;
+.heading {
+  @include type-style(label-02);
+  color: $text-muted-light;
+}
+
+.item {
+  @include item();
 }
 
 .button {
@@ -100,22 +108,6 @@
   }
 }
 
-.newButton {
-  @include button-reset.reset();
-  @include item();
-  color: $button-muted;
-  &:hover {
-    color: $text-dark;
-  }
-  &:focus-visible {
-    @include focus-outline('outline');
-  }
-
-  .icon {
-    border: 1px dashed currentColor;
-  }
-}
-
 .skeleton {
   @include item();
 
@@ -127,3 +119,12 @@
     margin-block-end: 0;
   }
 }
+
+.newButton {
+  &:global(.#{$prefix}--btn) {
+    inline-size: rem(24px);
+    block-size: rem(24px);
+    min-block-size: 0;
+    margin-inline-end: -$spacing-02;
+  }
+}