From 299a3c73b55518fd0dba869e18a15849c3879a27 Mon Sep 17 00:00:00 2001
From: wendybujalski <wendydbujalski@gmail.com>
Date: Tue, 25 Jun 2024 18:18:56 -0400
Subject: [PATCH 1/2] ui improvements and bug fixes pt 4

---
 app/web/src/components/AssetCard.vue          |   7 +-
 app/web/src/components/AssetFuncListPanel.vue |   4 +-
 app/web/src/components/AssetListPanel.vue     |   2 +-
 app/web/src/components/FilterPill.vue         |  12 +-
 .../src/components/FuncEditor/FuncDetails.vue | 453 +++++++++---------
 .../src/components/FuncEditor/FuncTest.vue    |   6 +-
 app/web/src/components/IconButton.vue         |  14 +-
 .../src/components/SidebarSubpanelTitle.vue   |  30 +-
 .../Workspace/WorkspaceCustomizeAssets.vue    |  18 +-
 .../design-system/general/ErrorMessage.vue    |  30 +-
 .../src/design-system/icons/icon_set.ts       |   5 +
 11 files changed, 319 insertions(+), 262 deletions(-)

diff --git a/app/web/src/components/AssetCard.vue b/app/web/src/components/AssetCard.vue
index 93df9689f6..1b7d434876 100644
--- a/app/web/src/components/AssetCard.vue
+++ b/app/web/src/components/AssetCard.vue
@@ -1,12 +1,7 @@
 <template>
   <div
     v-if="asset"
-    :class="
-      clsx(
-        'p-xs border-l-4 border relative',
-        titleCard ? 'mb-xs' : 'rounded-md',
-      )
-    "
+    :class="clsx('p-xs border-l-4 border relative', !titleCard && 'rounded-md')"
     :style="{
       borderColor: asset.color,
       backgroundColor: `#${bodyBg.toHex()}`,
diff --git a/app/web/src/components/AssetFuncListPanel.vue b/app/web/src/components/AssetFuncListPanel.vue
index 629e95ddc8..3ba293d4bc 100644
--- a/app/web/src/components/AssetFuncListPanel.vue
+++ b/app/web/src/components/AssetFuncListPanel.vue
@@ -29,8 +29,8 @@
         <EmptyStateCard
           v-if="assetStore.selectedAssets.length > 1"
           iconName="funcs"
-          primaryText=""
-          secondaryText="You have selected multiple assets above"
+          primaryText="Cannot Select Functions"
+          secondaryText="You have selected multiple assets above. To select a function, select one asset."
         />
         <EmptyStateCard
           v-else
diff --git a/app/web/src/components/AssetListPanel.vue b/app/web/src/components/AssetListPanel.vue
index 22a356cfb3..16611fd8db 100644
--- a/app/web/src/components/AssetListPanel.vue
+++ b/app/web/src/components/AssetListPanel.vue
@@ -27,7 +27,7 @@
             @click="() => newAssetModalRef?.modal?.open()"
           />
           <IconButton
-            v-if="canContribute || true"
+            v-if="canContribute"
             class="hover:scale-125"
             icon="cloud-upload"
             size="sm"
diff --git a/app/web/src/components/FilterPill.vue b/app/web/src/components/FilterPill.vue
index db630807ac..58391d2bf7 100644
--- a/app/web/src/components/FilterPill.vue
+++ b/app/web/src/components/FilterPill.vue
@@ -13,7 +13,7 @@
       v-if="filter.iconName"
       :name="filter.iconName"
       size="sm"
-      :class="clsx(iconClasses, filter.iconName.includes('logo') && 'mx-2xs')"
+      :class="clsx(iconClasses, extraPadding && 'mx-2xs')"
       :style="filter.iconColor && !selected ? { color: filter.iconColor } : {}"
     />
     <div class="pr-2xs">
@@ -41,4 +41,14 @@ const iconClasses = computed(() => {
     return getToneTextColorClass(props.filter.iconTone);
   } else return "";
 });
+
+// Add an icon to this list if it needs to have additional X padding to look right
+const extraPaddingIcons = ["cloud-upload", "code-deployed"];
+
+const extraPadding = computed(
+  () =>
+    props.filter.iconName &&
+    (props.filter.iconName.includes("logo") ||
+      extraPaddingIcons.includes(props.filter.iconName)),
+);
 </script>
diff --git a/app/web/src/components/FuncEditor/FuncDetails.vue b/app/web/src/components/FuncEditor/FuncDetails.vue
index 6abefa3fd1..8cd6f9e75c 100644
--- a/app/web/src/components/FuncEditor/FuncDetails.vue
+++ b/app/web/src/components/FuncEditor/FuncDetails.vue
@@ -15,247 +15,240 @@
   </LoadingMessage>
   <div
     v-else-if="selectedFuncId && editingFunc"
-    :class="
-      clsx(
-        singleModelScreen ? 'relative' : 'absolute',
-        'h-full w-full flex flex-col overflow-hidden',
-      )
-    "
+    :class="clsx('h-full w-full flex flex-col overflow-hidden')"
   >
-    <TabGroup
-      ref="funcDetailsTabGroupRef"
-      marginTop="2xs"
-      @update:selected-tab="expandTestPanel"
-    >
-      <TabGroupItem label="Properties" slug="properties">
-        <div
-          class="flex flex-col absolute inset-0 overflow-y-auto overflow-x-hidden"
-        >
-          <Stack class="p-2 border-b dark:border-neutral-600" spacing="xs">
-            <div class="flex gap-2xs flex-wrap">
-              <VButton
-                v-if="enableTestPanel"
-                class="--tone-action"
-                icon="save"
-                size="md"
-                label="Test"
-                @click="funcDetailsTabGroupRef.selectTab('test')"
-              />
-
-              <VButton
-                v-if="
-                  funcStore.selectedFuncDetails &&
-                  funcStore.selectedFuncDetails?.associations?.type !==
-                    'authentication'
-                "
-                class="--tone-success"
-                icon="save"
-                size="md"
-                loadingText="Executing..."
-                label="Execute"
-                :requestStatus="execFuncReqStatus"
-                successText="Finished"
-                @click="execFunc"
-              />
-
-              <VButton
-                v-if="schemaVariantId"
-                :loading="isDetaching"
-                tone="destructive"
-                icon="x"
-                label="Detach"
-                size="md"
-                loadingText="Detaching..."
-                @click="detachFunc"
-              />
-
-              <VButton
-                :loading="isDeleting"
-                tone="destructive"
-                :disabled="hasAssociations"
-                icon="x"
-                label="Delete"
-                size="md"
-                loadingText="Deleting..."
-                @click="deleteFunc"
-              />
-            </div>
-
-            <ErrorMessage
-              v-if="execFuncReqStatus.isError"
-              :requestStatus="execFuncReqStatus"
-            />
-            <ErrorMessage
-              v-if="editingFunc?.associations?.type === 'action'"
-              icon="alert-triangle"
-              tone="warning"
-              >Executing this will run on all attached components and may affect
-              your real-world resources!
-            </ErrorMessage>
-            <ErrorMessage
-              v-if="isConnectedToOtherAssetTypes"
-              icon="alert-triangle"
-              tone="warning"
-            >
-              This function is connected to other
-              {{
-                editingFunc?.associations &&
-                editingFunc?.associations?.type === "attribute"
-                  ? "attributes"
-                  : "assets"
-              }}.
-            </ErrorMessage>
-          </Stack>
-
-          <!-- <TreeNode
-            label="Logs"
-            defaultOpen
-            enableGroupToggle
-            alwaysShowArrow
-            indentationSize="none"
-            leftBorderSize="none"
-            labelClasses="border-b border-neutral-200 dark:border-neutral-600"
-            childrenContainerClasses="border-b border-neutral-200 dark:border-neutral-600"
-          >
-            {{ lastExecutionLog }}
-            <VButton @click="getLastExecution">Load</VButton>
-          </TreeNode> -->
-
-          <TreeNode
-            label="Attributes"
-            defaultOpen
-            enableGroupToggle
-            alwaysShowArrow
-            noIndentationOrLeftBorder
-            labelClasses="border-b border-neutral-200 dark:border-neutral-600"
-            childrenContainerClasses="border-b border-neutral-200 dark:border-neutral-600"
-          >
-            <Stack class="p-xs" spacing="none">
-              <VormInput
-                v-model="editingFunc.name"
-                label="Name"
-                required
-                compact
-                @blur="updateFunc"
-              />
-              <VormInput
-                v-model="editingFunc.displayName"
-                label="Display Name"
-                required
-                compact
-                @blur="updateFunc"
-              />
-              <VormInput
-                v-model="editingFunc.description"
-                type="textarea"
-                compact
-                label="Description"
-                @blur="updateFunc"
-              />
-            </Stack>
-          </TreeNode>
-
-          <ActionDetails
-            v-if="editingFunc.associations?.type === 'action'"
-            ref="detachRef"
-            v-model="editingFunc.associations"
-            :requestStatus="updateFuncReqStatus"
-            :schemaVariantId="schemaVariantId"
-            @change="updateFunc"
-          />
-          <AuthenticationDetails
-            v-if="editingFunc.associations?.type === 'authentication'"
-            ref="detachRef"
-            v-model="editingFunc.associations"
-            :schemaVariantId="schemaVariantId"
-            @change="updateFunc"
-          />
-          <CodeGenerationDetails
-            v-if="
-              editingFunc.associations &&
-              editingFunc.associations.type === 'codeGeneration'
-            "
-            ref="detachRef"
-            v-model="editingFunc.associations"
-            :schemaVariantId="schemaVariantId"
-            @change="updateFunc"
-          />
-          <QualificationDetails
-            v-if="
-              editingFunc.associations &&
-              editingFunc.associations.type === 'qualification'
-            "
-            ref="detachRef"
-            v-model="editingFunc.associations"
-            :schemaVariantId="schemaVariantId"
-            @change="updateFunc"
-          />
-
-          <TreeNode
-            v-if="editingFunc.kind === FuncKind.Attribute"
-            label="Arguments"
-            defaultOpen
-            enableGroupToggle
-            alwaysShowArrow
-            indentationSize="none"
-            leftBorderSize="none"
-            labelClasses="border-b border-neutral-200 dark:border-neutral-600"
-            childrenContainerClasses="border-b border-neutral-200 dark:border-neutral-600"
+    <div class="flex flex-col">
+      <ErrorMessage
+        v-if="editingFunc?.associations?.type === 'action'"
+        icon="alert-triangle"
+        tone="warning"
+        variant="block"
+        >Executing this will run on all attached components and may affect your
+        real-world resources!
+      </ErrorMessage>
+      <ErrorMessage
+        v-if="execFuncReqStatus.isError"
+        :requestStatus="execFuncReqStatus"
+        variant="block"
+      />
+      <ErrorMessage
+        v-if="isConnectedToOtherAssetTypes"
+        icon="alert-triangle"
+        variant="block"
+        tone="warning"
+      >
+        This function is connected to other
+        {{
+          editingFunc?.associations &&
+          editingFunc?.associations?.type === "attribute"
+            ? "attributes"
+            : "assets"
+        }}.
+      </ErrorMessage>
+
+      <SidebarSubpanelTitle
+        icon="func"
+        :label="selectedFuncSummary?.name"
+        variant="subtitle"
+      />
+
+      <div
+        class="flex flex-row gap-2xs items-center justify-evenly py-xs border-b border-neutral-200 dark:border-neutral-600"
+      >
+        <IconButton
+          icon="save"
+          loadingIcon="loader"
+          iconTone="success"
+          loadingTooltip="Executing..."
+          tooltip="Execute"
+          tooltipPlacement="top"
+          :requestStatus="execFuncReqStatus"
+          :disabled="
+            !(
+              funcStore.selectedFuncDetails &&
+              funcStore.selectedFuncDetails?.associations?.type !==
+                'authentication'
+            )
+          "
+          @click="execFunc"
+        />
+        <IconButton
+          tooltip="Test"
+          tooltipPlacement="top"
+          icon="test-tube"
+          iconTone="action"
+          :disabled="!enableTestPanel"
+          @click="funcDetailsTabGroupRef.selectTab('test')"
+        />
+        <IconButton
+          :loading="isDetaching"
+          iconTone="warning"
+          icon="unlink"
+          tooltip="Detach"
+          tooltipPlacement="top"
+          loadingTooltip="Detaching..."
+          :disabled="!schemaVariantId"
+          @click="detachFunc"
+        />
+        <IconButton
+          :loading="isDeleting"
+          iconTone="destructive"
+          :disabled="hasAssociations"
+          icon="trash"
+          tooltip="Delete"
+          tooltipPlacement="top"
+          loadingTooltip="Deleting..."
+          @click="deleteFunc"
+        />
+      </div>
+    </div>
+    <div class="flex-grow relative">
+      <TabGroup
+        ref="funcDetailsTabGroupRef"
+        growTabsToFillWidth
+        variant="fullsize"
+      >
+        <TabGroupItem label="Properties" slug="properties">
+          <div
+            class="flex flex-col absolute inset-0 overflow-y-auto overflow-x-hidden border-t border-neutral-200 dark:border-neutral-600"
           >
-            <FuncArguments
+            <TreeNode
+              label="Attributes"
+              defaultOpen
+              enableGroupToggle
+              alwaysShowArrow
+              noIndentationOrLeftBorder
+              labelClasses="border-b border-neutral-200 dark:border-neutral-600"
+              childrenContainerClasses="border-b border-neutral-200 dark:border-neutral-600"
+            >
+              <Stack class="p-xs" spacing="none">
+                <VormInput
+                  v-model="editingFunc.name"
+                  label="Name"
+                  required
+                  compact
+                  @blur="updateFunc"
+                />
+                <VormInput
+                  v-model="editingFunc.displayName"
+                  label="Display Name"
+                  required
+                  compact
+                  @blur="updateFunc"
+                />
+                <VormInput
+                  v-model="editingFunc.description"
+                  type="textarea"
+                  compact
+                  label="Description"
+                  @blur="updateFunc"
+                />
+              </Stack>
+            </TreeNode>
+
+            <ActionDetails
+              v-if="editingFunc.associations?.type === 'action'"
+              ref="detachRef"
+              v-model="editingFunc.associations"
+              :requestStatus="updateFuncReqStatus"
+              :schemaVariantId="schemaVariantId"
+              @change="updateFunc"
+            />
+            <AuthenticationDetails
+              v-if="editingFunc.associations?.type === 'authentication'"
+              ref="detachRef"
+              v-model="editingFunc.associations"
+              :schemaVariantId="schemaVariantId"
+              @change="updateFunc"
+            />
+            <CodeGenerationDetails
               v-if="
                 editingFunc.associations &&
-                editingFunc.associations.type === 'attribute'
+                editingFunc.associations.type === 'codeGeneration'
               "
-              :funcId="editingFunc.id"
+              ref="detachRef"
+              v-model="editingFunc.associations"
+              :schemaVariantId="schemaVariantId"
+              @change="updateFunc"
             />
-          </TreeNode>
-
-          <TreeNode
-            v-if="editingFunc.kind === FuncKind.Attribute && schemaVariantId"
-            label="Bindings"
-            defaultOpen
-            enableGroupToggle
-            alwaysShowArrow
-            indentationSize="none"
-            leftBorderSize="none"
-            labelClasses="border-b border-neutral-200 dark:border-neutral-600"
-            childrenContainerClasses="border-b border-neutral-200 dark:border-neutral-600"
-          >
-            <AttributeBindings
+            <QualificationDetails
               v-if="
                 editingFunc.associations &&
-                editingFunc.associations.type === 'attribute'
+                editingFunc.associations.type === 'qualification'
               "
               ref="detachRef"
               v-model="editingFunc.associations"
               :schemaVariantId="schemaVariantId"
               @change="updateFunc"
             />
-          </TreeNode>
-        </div>
-      </TabGroupItem>
 
-      <TabGroupItem
-        v-if="editingFunc.kind === FuncKind.Attribute"
-        label="Bindings"
-        slug="bindings"
-      >
-        <AttributeBindings
-          v-if="
-            editingFunc.associations &&
-            editingFunc.associations.type === 'attribute'
-          "
-          ref="detachRef"
-          v-model="editingFunc.associations"
-          @change="updateFunc"
-        />
-      </TabGroupItem>
+            <TreeNode
+              v-if="editingFunc.kind === FuncKind.Attribute"
+              label="Arguments"
+              defaultOpen
+              enableGroupToggle
+              alwaysShowArrow
+              indentationSize="none"
+              leftBorderSize="none"
+              labelClasses="border-b border-neutral-200 dark:border-neutral-600"
+              childrenContainerClasses="border-b border-neutral-200 dark:border-neutral-600"
+            >
+              <FuncArguments
+                v-if="
+                  editingFunc.associations &&
+                  editingFunc.associations.type === 'attribute'
+                "
+                :funcId="editingFunc.id"
+              />
+            </TreeNode>
+
+            <TreeNode
+              v-if="editingFunc.kind === FuncKind.Attribute && schemaVariantId"
+              label="Bindings"
+              defaultOpen
+              enableGroupToggle
+              alwaysShowArrow
+              indentationSize="none"
+              leftBorderSize="none"
+              labelClasses="border-b border-neutral-200 dark:border-neutral-600"
+              childrenContainerClasses="border-b border-neutral-200 dark:border-neutral-600"
+            >
+              <AttributeBindings
+                v-if="
+                  editingFunc.associations &&
+                  editingFunc.associations.type === 'attribute'
+                "
+                ref="detachRef"
+                v-model="editingFunc.associations"
+                :schemaVariantId="schemaVariantId"
+                @change="updateFunc"
+              />
+            </TreeNode>
+          </div>
+        </TabGroupItem>
+
+        <TabGroupItem
+          v-if="editingFunc.kind === FuncKind.Attribute"
+          label="Bindings"
+          slug="bindings"
+        >
+          <AttributeBindings
+            v-if="
+              editingFunc.associations &&
+              editingFunc.associations.type === 'attribute'
+            "
+            ref="detachRef"
+            v-model="editingFunc.associations"
+            class="border-t border-neutral-200 dark:border-neutral-600"
+            @change="updateFunc"
+          />
+        </TabGroupItem>
 
-      <TabGroupItem v-if="enableTestPanel" label="Test" slug="test">
-        <FuncTest />
-      </TabGroupItem>
-    </TabGroup>
+        <TabGroupItem v-if="enableTestPanel" label="Test" slug="test">
+          <FuncTest />
+        </TabGroupItem>
+      </TabGroup>
+    </div>
   </div>
   <div
     v-else
@@ -276,7 +269,6 @@ import {
   TabGroup,
   TabGroupItem,
   TreeNode,
-  VButton,
   VormInput,
 } from "@si/vue-lib/design-system";
 import clsx from "clsx";
@@ -291,11 +283,12 @@ import CodeGenerationDetails from "./CodeGenerationDetails.vue";
 import QualificationDetails from "./QualificationDetails.vue";
 import FuncTest from "./FuncTest.vue";
 import EmptyStateCard from "../EmptyStateCard.vue";
+import IconButton from "../IconButton.vue";
+import SidebarSubpanelTitle from "../SidebarSubpanelTitle.vue";
 
 const props = defineProps<{
   funcId?: FuncId;
   schemaVariantId?: string;
-  singleModelScreen?: boolean;
   allowTestPanel?: boolean;
 }>();
 
@@ -437,12 +430,6 @@ const hasAssociations = computed(() => {
   return false;
 });
 
-const expandTestPanel = (selectedTabSlug: string | undefined) => {
-  if (selectedTabSlug === "test") {
-    emit("expandPanel");
-  }
-};
-
 // The parent component can allow the test panel to be enabled, but we need to dynamically enable
 // it based on the func kind.
 const enableTestPanel = computed((): boolean => {
diff --git a/app/web/src/components/FuncEditor/FuncTest.vue b/app/web/src/components/FuncEditor/FuncTest.vue
index be43ea8f15..fd3a784ee4 100644
--- a/app/web/src/components/FuncEditor/FuncTest.vue
+++ b/app/web/src/components/FuncEditor/FuncTest.vue
@@ -2,13 +2,13 @@
   <ScrollArea>
     <template #top>
       <div
-        class="flex flex-row gap-xs items-center p-xs m-xs border dark:border-neutral-600 rounded justify-between"
+        class="flex flex-row gap-xs items-center p-xs justify-between border-y border-neutral-200 dark:border-neutral-600"
       >
         <div
-          class="font-bold text-xl text-center overflow-hidden text-ellipsis flex-grow"
+          class="font-bold text-xl text-center overflow-hidden text-ellipsis flex-grow break-words"
         >
           Test {{ funcStore.selectedFuncDetails?.kind + " " || "" }}Function
-          <span class="italic">{{ editingFunc?.name }}</span>
+          <span class="italic">"{{ editingFunc?.name }}"</span>
         </div>
         <StatusIndicatorIcon
           v-if="runningTest"
diff --git a/app/web/src/components/IconButton.vue b/app/web/src/components/IconButton.vue
index 9ecc6e5a38..1098267df5 100644
--- a/app/web/src/components/IconButton.vue
+++ b/app/web/src/components/IconButton.vue
@@ -11,12 +11,10 @@
         variant === 'classic' && [
           'rounded-md',
           disableClicking
-            ? 'border border-transparent p-[1px]'
+            ? 'border border-transparent p-[1px] opacity-50'
             : [
                 !noBorderOnHover && 'border border-transparent p-[1px]',
-                !noBorderOnHover &&
-                  !selectedOrActive &&
-                  'hover:border-action-500',
+                !noBorderOnHover && !selectedOrActive && borderHoverColorClass,
                 selectedOrActive
                   ? `text-shade-0 ${getToneBgColorClass(iconTone)}`
                   : iconIdleTone
@@ -59,6 +57,7 @@
 
 <script lang="ts" setup>
 import * as _ from "lodash-es";
+import { tw } from "@si/vue-lib";
 import {
   Icon,
   IconNames,
@@ -140,4 +139,11 @@ const iconShowing = computed(() => {
       ? props.iconHover
       : props.icon;
 });
+
+const borderHoverColorClass = computed(() => {
+  if (props.iconTone === "destructive") return tw`hover:border-destructive-500`;
+  else if (props.iconTone === "warning") return tw`hover:border-warning-500`;
+  else if (props.iconTone === "success") return tw`hover:border-success-500`;
+  else return tw`hover:border-action-500`;
+});
 </script>
diff --git a/app/web/src/components/SidebarSubpanelTitle.vue b/app/web/src/components/SidebarSubpanelTitle.vue
index c1e01a7787..c13ba20166 100644
--- a/app/web/src/components/SidebarSubpanelTitle.vue
+++ b/app/web/src/components/SidebarSubpanelTitle.vue
@@ -1,6 +1,13 @@
 <template>
   <div
-    class="flex text-neutral-500 dark:text-neutral-400 border-b dark:border-neutral-500 items-center px-xs py-2xs gap-xs"
+    :class="
+      clsx(
+        'flex text-neutral-500 dark:text-neutral-400 border-b items-center px-xs py-2xs gap-xs',
+        variant === 'title'
+          ? 'dark:border-neutral-500'
+          : 'border-neutral-200 dark:border-neutral-600',
+      )
+    "
   >
     <div class="flex-none empty:hidden">
       <slot name="icon">
@@ -8,9 +15,18 @@
       </slot>
     </div>
 
-    <div class="grow uppercase text-md font-bold leading-6">
+    <TruncateWithTooltip
+      :class="
+        clsx(
+          'grow font-bold',
+          variant === 'title'
+            ? 'uppercase text-md leading-6'
+            : 'text-sm break-words',
+        )
+      "
+    >
       <slot name="label">{{ label }}</slot>
-    </div>
+    </TruncateWithTooltip>
     <div class="flex-none empty:hidden">
       <slot />
     </div>
@@ -19,10 +35,18 @@
 
 <script setup lang="ts">
 import { Icon, IconNames } from "@si/vue-lib/design-system";
+import clsx from "clsx";
 import { PropType } from "vue";
+import TruncateWithTooltip from "./TruncateWithTooltip.vue";
+
+export type SidebarSubpanelTitleVariant = "title" | "subtitle";
 
 const props = defineProps({
   label: { type: String },
   icon: { type: String as PropType<IconNames> },
+  variant: {
+    type: String as PropType<SidebarSubpanelTitleVariant>,
+    default: "title",
+  },
 });
 </script>
diff --git a/app/web/src/components/Workspace/WorkspaceCustomizeAssets.vue b/app/web/src/components/Workspace/WorkspaceCustomizeAssets.vue
index 895896fae6..7306147b18 100644
--- a/app/web/src/components/Workspace/WorkspaceCustomizeAssets.vue
+++ b/app/web/src/components/Workspace/WorkspaceCustomizeAssets.vue
@@ -47,7 +47,6 @@
           v-if="funcStore.selectedFuncId"
           :funcId="funcStore.selectedFuncId"
           :schemaVariantId="assetStore.selectedAsset?.defaultSchemaVariantId"
-          singleModelScreen
           allowTestPanel
           @detached="onDetach"
           @expand-panel="rightResizablePanelRef?.maximize()"
@@ -95,7 +94,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, computed } from "vue";
+import { onBeforeUnmount, onMounted, ref, computed, watch } from "vue";
 import {
   ResizablePanel,
   ScrollArea,
@@ -119,8 +118,8 @@ import DetailsPanelMenuIcon from "../DetailsPanelMenuIcon.vue";
 const assetStore = useAssetStore();
 const funcStore = useFuncStore();
 
-const leftResizablePanelRef = ref();
-const rightResizablePanelRef = ref();
+const leftResizablePanelRef = ref<InstanceType<typeof ResizablePanel>>();
+const rightResizablePanelRef = ref<InstanceType<typeof ResizablePanel>>();
 
 const contextMenuRef = ref<InstanceType<typeof DropdownMenu>>();
 
@@ -191,4 +190,15 @@ const onDetach = async () => {
     assetStore.closeFunc(assetStore.selectedAssetId, funcStore.selectedFuncId);
   }
 };
+
+watch(
+  () => assetStore.selectedAssets.length,
+  (newVal, oldVal) => {
+    if (newVal > 1 && oldVal < 2 && leftResizablePanelRef.value) {
+      leftResizablePanelRef.value.subpanelCollapseSet(true);
+    } else if (newVal === 1 && oldVal > 1 && leftResizablePanelRef.value) {
+      leftResizablePanelRef.value.subpanelCollapseSet(false);
+    }
+  },
+);
 </script>
diff --git a/lib/vue-lib/src/design-system/general/ErrorMessage.vue b/lib/vue-lib/src/design-system/general/ErrorMessage.vue
index e037fa520f..6bc3663c54 100644
--- a/lib/vue-lib/src/design-system/general/ErrorMessage.vue
+++ b/lib/vue-lib/src/design-system/general/ErrorMessage.vue
@@ -3,10 +3,24 @@
     v-if="computedMessage || $slots.default"
     :class="
       clsx(
-        'border text-sm rounded-sm flex flex-row items-center',
-        !noPadding && 'p-xs',
-        tone === 'destructive' && 'border-destructive-500 text-destructive-400',
-        tone === 'warning' && 'border-warning-500 text-warning-400',
+        'flex flex-row items-center',
+        variant === 'classic' && [
+          'text-sm border rounded-sm',
+          !noPadding && 'p-xs',
+          tone === 'destructive' &&
+            'border-destructive-500 text-destructive-400',
+          tone === 'warning' && 'border-warning-500 text-warning-400',
+        ],
+        variant === 'block' && [
+          'p-2xs text-xs',
+          tone === 'warning' &&
+            themeClasses(
+              'bg-warning-300 text-warning-800',
+              'bg-warning-900 text-warning-200',
+            ),
+          tone === 'destructive' &&
+            'bg-destructive-300 text-destructive-900 dark:bg-destructive-900 dark:text-destructive-200',
+        ],
       )
     "
   >
@@ -22,13 +36,19 @@ import { computed, PropType } from "vue";
 import clsx from "clsx";
 import { ApiRequestStatus } from "../../pinia";
 import { Tones } from "../utils/color_utils";
-import { Icon } from "..";
+import { Icon, themeClasses } from "..";
+
+export type ErrorMessageVariant = "classic" | "block";
 
 const props = defineProps({
   message: { type: String },
   requestStatus: { type: Object as PropType<ApiRequestStatus> },
   tone: { type: String as PropType<Tones>, default: "destructive" },
   noPadding: { type: Boolean },
+  variant: {
+    type: String as PropType<ErrorMessageVariant>,
+    default: "classic",
+  },
 });
 
 const computedMessage = computed(() => {
diff --git a/lib/vue-lib/src/design-system/icons/icon_set.ts b/lib/vue-lib/src/design-system/icons/icon_set.ts
index 6430ede8fb..ae90a72955 100644
--- a/lib/vue-lib/src/design-system/icons/icon_set.ts
+++ b/lib/vue-lib/src/design-system/icons/icon_set.ts
@@ -95,6 +95,9 @@ import Frame from "~icons/iconamoon/frame-light";
 import MaterialSymbolsKeyboardDoubleArrowLeftRounded from "~icons/material-symbols/keyboard-double-arrow-left-rounded";
 import MaterialSymbolsStopCircleOutlineRounded from "~icons/material-symbols/stop-circle-outline-rounded";
 
+import TdesignLinkUnlink from '~icons/tdesign/link-unlink'
+import PhTestTubeFill from '~icons/ph/test-tube-fill'
+
 import BracketsCurly from "~icons/ph/brackets-curly";
 import BracketsSquare from "~icons/ph/brackets-square";
 import BracketsAngle from "~icons/ph/brackets-angle";
@@ -285,6 +288,7 @@ export const ICONS = Object.freeze({
   slash: SlashForward,
   star: Star,
   sun: Sun,
+  "test-tube": PhTestTubeFill,
   "thumbs-down": ThumbsDown,
   "thumbs-up": ThumbsUp,
   tilde: Tilde,
@@ -295,6 +299,7 @@ export const ICONS = Object.freeze({
   trash: Trash,
   "trash-restore": TrashRestore,
   "tree-parents": TreeParents,
+  unlink: TdesignLinkUnlink,
   "user-circle": UserCircle,
   x: X,
   "x-circle": XCircle,

From c1558e74df82c9e042ac95f6b814b9f561d20709 Mon Sep 17 00:00:00 2001
From: wendybujalski <wendydbujalski@gmail.com>
Date: Tue, 25 Jun 2024 18:24:09 -0400
Subject: [PATCH 2/2] fix lint

---
 lib/vue-lib/src/design-system/icons/icon_set.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/vue-lib/src/design-system/icons/icon_set.ts b/lib/vue-lib/src/design-system/icons/icon_set.ts
index ae90a72955..343692d339 100644
--- a/lib/vue-lib/src/design-system/icons/icon_set.ts
+++ b/lib/vue-lib/src/design-system/icons/icon_set.ts
@@ -95,8 +95,8 @@ import Frame from "~icons/iconamoon/frame-light";
 import MaterialSymbolsKeyboardDoubleArrowLeftRounded from "~icons/material-symbols/keyboard-double-arrow-left-rounded";
 import MaterialSymbolsStopCircleOutlineRounded from "~icons/material-symbols/stop-circle-outline-rounded";
 
-import TdesignLinkUnlink from '~icons/tdesign/link-unlink'
-import PhTestTubeFill from '~icons/ph/test-tube-fill'
+import TdesignLinkUnlink from "~icons/tdesign/link-unlink";
+import PhTestTubeFill from "~icons/ph/test-tube-fill";
 
 import BracketsCurly from "~icons/ph/brackets-curly";
 import BracketsSquare from "~icons/ph/brackets-square";