From a29a6b1416e66eb215d1e5f3362cde7751c12af2 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Fri, 7 Jul 2023 08:33:55 +0300
Subject: [PATCH] UBER-573,-574: updated button styles, fixed ListView (#3484)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 models/lead/src/index.ts                      |  2 +-
 models/recruit/src/index.ts                   |  2 +-
 models/tracker/src/index.ts                   | 24 ++++-----
 .../src/components/StyleButton.svelte         |  2 +-
 packages/theme/styles/_colors.scss            | 44 ++++++++--------
 packages/theme/styles/button.scss             | 16 ++++--
 packages/theme/styles/components.scss         |  7 ++-
 packages/ui/src/components/Button.svelte      |  7 ++-
 .../components/AttachmentsPresenter.svelte    | 37 +++++--------
 .../src/components/CommentsPresenter.svelte   | 37 +++++--------
 .../src/components/EditDoc.svelte             |  1 -
 .../src/components/PinPad.svelte              |  3 +-
 .../src/components/AppItem.svelte             |  5 +-
 .../src/components/ColorsPopup.svelte         |  7 ++-
 .../src/components/list/ListHeader.svelte     | 28 +++++-----
 .../src/components/list/ListItem.svelte       | 52 ++++++++++++-------
 16 files changed, 133 insertions(+), 141 deletions(-)

diff --git a/models/lead/src/index.ts b/models/lead/src/index.ts
index 384c09ace1..0c35675676 100644
--- a/models/lead/src/index.ts
+++ b/models/lead/src/index.ts
@@ -342,7 +342,7 @@ export function createModel (builder: Builder): void {
             size: 'small',
             kind: 'list'
           },
-          displayProps: { optional: true }
+          displayProps: { compression: true }
         },
         { key: 'modifiedOn', displayProps: { key: 'modified', fixed: 'right', dividerBefore: true } },
         {
diff --git a/models/recruit/src/index.ts b/models/recruit/src/index.ts
index 86b656baeb..75e3b6e6a8 100644
--- a/models/recruit/src/index.ts
+++ b/models/recruit/src/index.ts
@@ -723,7 +723,7 @@ export function createModel (builder: Builder): void {
             size: 'small',
             kind: 'list'
           },
-          displayProps: { optional: true }
+          displayProps: { compression: true }
         },
         { key: 'modifiedOn', displayProps: { key: 'modified', fixed: 'right', dividerBefore: true } },
         {
diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts
index 5494a020bc..fe1f970b20 100644
--- a/models/tracker/src/index.ts
+++ b/models/tracker/src/index.ts
@@ -486,7 +486,7 @@ export function createModel (builder: Builder): void {
         {
           key: 'labels',
           presenter: tags.component.LabelsPresenter,
-          displayProps: { optional: true },
+          displayProps: { compression: true },
           props: { kind: 'list', full: false }
         },
         {
@@ -501,8 +501,7 @@ export function createModel (builder: Builder): void {
           displayProps: {
             key: 'milestone',
             excludeByKey: 'milestone',
-            compression: true,
-            optional: true
+            compression: true
           }
         },
         {
@@ -517,15 +516,14 @@ export function createModel (builder: Builder): void {
           displayProps: {
             key: 'component',
             excludeByKey: 'component',
-            compression: true,
-            optional: true
+            compression: true
           }
         },
         {
           key: '',
           label: tracker.string.DueDate,
           presenter: tracker.component.DueDatePresenter,
-          displayProps: { key: 'dueDate', optional: true },
+          displayProps: { key: 'dueDate', compression: true },
           props: { kind: 'list' }
         },
         {
@@ -533,7 +531,7 @@ export function createModel (builder: Builder): void {
           label: tracker.string.Estimation,
           presenter: tracker.component.EstimationEditor,
           props: { kind: 'list', size: 'small' },
-          displayProps: { key: 'estimation', fixed: 'left', dividerBefore: true }
+          displayProps: { key: 'estimation', fixed: 'left', dividerBefore: true, optional: true }
         },
         {
           key: 'modifiedOn',
@@ -633,21 +631,21 @@ export function createModel (builder: Builder): void {
           },
           displayProps: {
             excludeByKey: 'milestone',
-            compression: true,
-            optional: true
+            compression: true
           }
         },
         {
           key: '',
           label: tracker.string.DueDate,
           presenter: tracker.component.DueDatePresenter,
-          displayProps: { key: 'dueDate', optional: true },
+          displayProps: { key: 'dueDate', compression: true },
           props: { kind: 'list', size: 'small' }
         },
         {
           key: '',
           label: tracker.string.Estimation,
           presenter: tracker.component.EstimationEditor,
+          displayProps: { optional: true },
           props: { kind: 'list', size: 'small' }
         },
         {
@@ -703,7 +701,7 @@ export function createModel (builder: Builder): void {
             size: 'small',
             shouldShowPlaceholder: false
           },
-          displayProps: { key: 'component', compression: true, optional: true }
+          displayProps: { key: 'component', compression: true }
         },
         {
           key: '',
@@ -714,7 +712,7 @@ export function createModel (builder: Builder): void {
             size: 'small',
             shouldShowPlaceholder: false
           },
-          displayProps: { key: 'milestone', compression: true, optional: true }
+          displayProps: { key: 'milestone', compression: true }
         },
         {
           key: '',
@@ -724,7 +722,7 @@ export function createModel (builder: Builder): void {
             kind: 'list',
             size: 'small'
           },
-          displayProps: { key: 'estimation', optional: true }
+          displayProps: { key: 'estimation', compression: true }
         },
         { key: '', displayProps: { grow: true } },
         {
diff --git a/packages/text-editor/src/components/StyleButton.svelte b/packages/text-editor/src/components/StyleButton.svelte
index 590877c1c7..9495a53873 100644
--- a/packages/text-editor/src/components/StyleButton.svelte
+++ b/packages/text-editor/src/components/StyleButton.svelte
@@ -50,7 +50,7 @@
     }
     &:focus {
       color: var(--theme-caption-color);
-      box-shadow: 0 0 0 2px var(--accented-button-focused-border);
+      box-shadow: 0 0 0 2px var(--accented-button-outline);
     }
     &.selected {
       background-color: var(--theme-button-pressed);
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 2724ada939..3b1f2a8af5 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -16,27 +16,27 @@
 /* Common Colors */
 * {
   --accented-button-color: #fff;
+  --accented-button-content-color: rgba(255, 255, 255, .8);
   --accented-button-border: rgba(255, 255, 255, .09);
-  --accented-button-focused-border: #fff;
   --accented-button-outline: #5190EC;
   --accented-button-transparent: rgba(43, 81, 144, 0.2);
 
   --accented-button-default: #2B5190;
   --accented-button-hovered: #325FA9;
   --accented-button-pressed: #284B86;
-  --accented-button-focused: #284B86;
+  --accented-button-focused: #2B5190;
   --brand-button-default: #4169E1;
   --brand-button-hovered: #587BE5;
   --brand-button-pressed: #2C58DE;
-  --brand-button-focused: #2C58DE;
+  --brand-button-focused: #4169E1;
   --positive-button-default: #26A869;
   --positive-button-hovered: #2BBB75;
   --positive-button-pressed: #21915B;
-  --positive-button-focused: #21915B;
+  --positive-button-focused: #26A869;
   --negative-button-default: #CA4242;
   --negative-button-hovered: #D05858;
   --negative-button-pressed: #BF3636;
-  --negative-button-focused: #BF3636;
+  --negative-button-focused: #CA4242;
 
   --white-color: #fff;
   --duotone-color: rgba(126, 134, 158, .25);
@@ -66,21 +66,21 @@
 
 /* Dark Theme */
 .theme-dark {
-  --accented-button-disabled: #12213B;
-  --accented-button-disabled-color: #5E88CF;
-  --brand-button-disabled: #111F4B;
-  --brand-button-disabled-color: #6585E7;
-  --positive-button-disabled: #092518;
-  --positive-button-disabled-color: #25A265;
-  --negative-button-disabled: #330F0F;
-  --negative-button-disabled-color: #D06262;
+  --accented-button-disabled: rgba(255, 255, 255, .12);
+  --accented-button-disabled-color: rgba(255, 255, 255, .4);
+  --brand-button-disabled: rgba(255, 255, 255, .12);
+  --brand-button-disabled-color: rgba(255, 255, 255, .4);
+  --positive-button-disabled: rgba(38, 168, 105, .2);
+  --positive-button-disabled-color: rgba(38, 168, 105, .6);
+  --negative-button-disabled: rgba(202, 66, 66, .2);
+  --negative-button-disabled-color: rgba(202, 66, 66, .6);
 
   --theme-button-default: rgba(255, 255, 255, .02);
   --theme-button-hovered: rgba(255, 255, 255, .04);
   --theme-button-pressed: rgba(255, 255, 255, .08);
   --theme-button-focused: rgba(255, 255, 255, .04);
   --theme-button-focused-border: rgba(255, 255, 255, .09);
-  --theme-button-disabled: rgba(255, 255, 255, .08);
+  --theme-button-disabled: transparent;
   --theme-button-border: rgba(255, 255, 255, .09);
 
   --theme-button-contrast-color: #000;
@@ -260,14 +260,14 @@
 
 /* Light Theme */
 .theme-light {
-  --accented-button-disabled: #E0E8F6;
-  --accented-button-disabled-color: #284B86;
-  --brand-button-disabled: #DCE3F9;
-  --brand-button-disabled-color: #2C58DE;
-  --positive-button-disabled: #DEF7EB;
-  --positive-button-disabled-color: #1A7046;
-  --negative-button-disabled: #F6E0E0;
-  --negative-button-disabled-color: #962C2C;
+  --accented-button-disabled: rgba(0, 0, 0, .12);
+  --accented-button-disabled-color: rgba(0, 0, 0, .4);
+  --brand-button-disabled: rgba(0, 0, 0, .12);
+  --brand-button-disabled-color: rgba(0, 0, 0, .4);
+  --positive-button-disabled: rgba(38, 168, 105, .2);
+  --positive-button-disabled-color: rgba(33, 145, 91, .6);
+  --negative-button-disabled: rgba(202, 66, 66, .2);
+  --negative-button-disabled-color: rgba(202, 66, 66, .6);
 
   --theme-button-default: rgba(0, 0, 0, .02);
   --theme-button-hovered: rgba(0, 0, 0, .04);
diff --git a/packages/theme/styles/button.scss b/packages/theme/styles/button.scss
index 547bedde04..88e5ad8120 100644
--- a/packages/theme/styles/button.scss
+++ b/packages/theme/styles/button.scss
@@ -185,16 +185,24 @@
     }
     &:not(.no-focus):focus { box-shadow: none; }
   }
+  &.accented, &.brand, &.positive, &.negative {
+    &:hover, &:active, &:focus {
+      color: var(--accented-button-color);
+      .btn-icon { color: var(--accented-button-color); }
+    }
+  }
+  &.regular, &.ghost {
+    &:hover, &:active, &:focus { color: var(--theme-caption-color); }
+  }
   &.accented,
   &.brand,
   &.positive,
   &.negative {
     padding: 0 1.5rem;
-    color: var(--accented-button-color);
+    color: var(--accented-button-content-color);
     border-color: var(--accented-button-border);
 
-    .btn-icon { color: var(--accented-button-color); }
-    &:focus { border-color: var(--accented-button-focused-border); }
+    .btn-icon { color: var(--accented-button-content-color); }
   }
   &.accented {
     background-color: var(--accented-button-default);
@@ -272,7 +280,7 @@
   }
 
   &:disabled {
-    color: var(--theme-trans-color);
+    color: var(--theme-darker-color);
     border-color: transparent;
     cursor: not-allowed;
 
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 22d2109d55..c205a76ca7 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -686,7 +686,6 @@
       border-color: transparent;
     }
     &:focus {
-      border-color: var(--accented-button-focused-border);
       box-shadow: 0 0 0 3px var(--accented-button-outline);
       & > .icon { color: var(--caption-color); }
     }
@@ -894,7 +893,7 @@
   .fix-margin { margin-left: .875rem; }
   .name { margin-left: .375rem; }
 
-  .optional-bar {
+  .compression-bar {
     overflow: hidden;
     display: flex;
     justify-content: flex-end;
@@ -913,7 +912,7 @@
       width: max-content;
     }
     & > *:not(:first-child) { margin-left: .25rem; }
-    & > * > * { min-width: fit-content; }
+    & > * > *:not(.only-icon) { min-width: fit-content; }
   }
 }
 // Labels on the ListView
@@ -956,7 +955,7 @@
 .kanban-container .card-container .card-labels .label { font-size: .8125rem !important; }
 
 /* ListView & Kanban */
-.list-container .optional-bar .label-wrapper,
+.list-container .compression-bar .label-wrapper,
 .kanban-container .card-container .card-labels .label-wrapper {
   display: flex;
   align-items: center;
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index 67810945f8..e38ca680d2 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -60,6 +60,7 @@
     label === undefined &&
     $$slots.content === undefined &&
     (icon !== undefined || iconRight !== undefined || $$slots.icon || $$slots.iconRight)
+  $: primary = ['accented', 'brand', 'positive', 'negative'].some((p) => p === kind)
 
   onMount(() => {
     if (focus && input) {
@@ -129,7 +130,11 @@
     </div>
   {/if}
   {#if loading}
-    <div class="btn-icon pointer-events-none caption-color spinner" class:resetIconSize>
+    <div
+      class="btn-icon pointer-events-none spinner"
+      class:resetIconSize
+      style:color={primary ? 'var(--accented-button-color)' : 'var(--theme-caption-color)'}
+    >
       <Spinner size={iconSize === 'inline' ? 'inline' : 'small'} />
     </div>
   {/if}
diff --git a/plugins/attachment-resources/src/components/AttachmentsPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentsPresenter.svelte
index babb48db93..0a484a7160 100644
--- a/plugins/attachment-resources/src/components/AttachmentsPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentsPresenter.svelte
@@ -35,32 +35,19 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <DocNavLink {object} {disabled} inline noUnderline shrink={0}>
     {#if kind === 'list'}
-      {#if compactMode}
-        <div
-          use:tooltip={{
-            component: AttachmentPopup,
-            props: popupProps
-          }}
-          class="sm-tool-icon"
-        >
-          <div class="icon halfcontent"><IconAttachment {size} /></div>
-          {#if showCounter}{value ?? 0}{/if}
+      <Button
+        {kind}
+        {size}
+        showTooltip={{
+          component: AttachmentPopup,
+          props: popupProps
+        }}
+      >
+        <div slot="icon"><IconAttachment {size} /></div>
+        <div slot="content" style:margin-left={showCounter && !compactMode ? '.375rem' : '0'}>
+          {#if showCounter && !compactMode}{value ?? 0}{/if}
         </div>
-      {:else}
-        <Button
-          {kind}
-          {size}
-          showTooltip={{
-            component: AttachmentPopup,
-            props: popupProps
-          }}
-        >
-          <div slot="icon"><IconAttachment {size} /></div>
-          <div slot="content" style:margin-left={showCounter ? '.375rem' : '0'}>
-            {#if showCounter}{value ?? 0}{/if}
-          </div>
-        </Button>
-      {/if}
+      </Button>
     {:else}
       <div
         use:tooltip={{
diff --git a/plugins/chunter-resources/src/components/CommentsPresenter.svelte b/plugins/chunter-resources/src/components/CommentsPresenter.svelte
index 4453126882..076080293c 100644
--- a/plugins/chunter-resources/src/components/CommentsPresenter.svelte
+++ b/plugins/chunter-resources/src/components/CommentsPresenter.svelte
@@ -32,32 +32,19 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <DocNavLink {object} inline noUnderline={true} shrink={0}>
     {#if kind === 'list'}
-      {#if compactMode}
-        <div
-          use:tooltip={{
-            component: CommentPopup,
-            props: { objectId: object._id, object, withInput }
-          }}
-          class="sm-tool-icon"
-        >
-          <div class="icon halfcontent"><IconThread {size} /></div>
-          {#if showCounter}{value ?? 0}{/if}
+      <Button
+        {kind}
+        {size}
+        showTooltip={{
+          component: CommentPopup,
+          props: { objectId: object._id, object, withInput }
+        }}
+      >
+        <div slot="icon"><IconThread {size} /></div>
+        <div slot="content" style:margin-left={showCounter && !compactMode ? '.375rem' : '0'}>
+          {#if showCounter && !compactMode}{value ?? 0}{/if}
         </div>
-      {:else}
-        <Button
-          {kind}
-          {size}
-          showTooltip={{
-            component: CommentPopup,
-            props: { objectId: object._id, object, withInput }
-          }}
-        >
-          <div slot="icon"><IconThread {size} /></div>
-          <div slot="content" style:margin-left={showCounter ? '.375rem' : '0'}>
-            {#if showCounter}{value ?? 0}{/if}
-          </div>
-        </Button>
-      {/if}
+      </Button>
     {:else}
       <div
         use:tooltip={{
diff --git a/plugins/document-resources/src/components/EditDoc.svelte b/plugins/document-resources/src/components/EditDoc.svelte
index 9725165249..51eda1e453 100644
--- a/plugins/document-resources/src/components/EditDoc.svelte
+++ b/plugins/document-resources/src/components/EditDoc.svelte
@@ -574,7 +574,6 @@
     transition: border-color 0.1s var(--timing-main), box-shadow 0.1s var(--timing-main);
 
     &:focus-within {
-      border-color: var(--accented-button-focused-border);
       box-shadow: 0 0 0 3px var(--accented-button-outline);
     }
   }
diff --git a/plugins/telegram-resources/src/components/PinPad.svelte b/plugins/telegram-resources/src/components/PinPad.svelte
index 9b9f5503df..ae0e98110b 100644
--- a/plugins/telegram-resources/src/components/PinPad.svelte
+++ b/plugins/telegram-resources/src/components/PinPad.svelte
@@ -116,8 +116,7 @@
     }
 
     &:focus {
-      border: 1px solid var(--accented-button-focused-border);
-      box-shadow: 0 0 0 3px var(--accented-button-outline);
+      box-shadow: 0 0 0 2px var(--accented-button-outline);
     }
   }
 
diff --git a/plugins/tracker-resources/src/components/AppItem.svelte b/plugins/tracker-resources/src/components/AppItem.svelte
index d397e81448..eb2c7a1eaa 100644
--- a/plugins/tracker-resources/src/components/AppItem.svelte
+++ b/plugins/tracker-resources/src/components/AppItem.svelte
@@ -60,8 +60,7 @@
       color: var(--caption-color);
     }
     &:focus {
-      border: 1px solid var(--accented-button-focused-border);
-      box-shadow: 0 0 0 3px var(--accented-button-outline);
+      box-shadow: 0 0 0 2px var(--accented-button-outline);
       .icon-container {
         color: var(--caption-color);
       }
@@ -70,7 +69,7 @@
     &.selected {
       background-color: var(--menu-bg-select);
       .icon-container {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
       }
     }
   }
diff --git a/plugins/view-resources/src/components/ColorsPopup.svelte b/plugins/view-resources/src/components/ColorsPopup.svelte
index fb0588eb3a..f023c97695 100644
--- a/plugins/view-resources/src/components/ColorsPopup.svelte
+++ b/plugins/view-resources/src/components/ColorsPopup.svelte
@@ -54,16 +54,15 @@
       cursor: pointer;
 
       &:hover {
-        border-color: var(--accented-button-focused-border);
-        box-shadow: 0 0 0 3px var(--accented-button-outline);
+        box-shadow: 0 0 0 2px var(--accented-button-outline);
       }
       &.selected {
         border-color: var(--caption-color);
-        box-shadow: 0 0 0 3px var(--trans-content-20);
+        box-shadow: 0 0 0 2px var(--trans-content-20);
 
         &:hover {
           border-color: var(--system-error-color);
-          box-shadow: 0 0 0 3px var(--trans-content-20);
+          box-shadow: 0 0 0 2px var(--trans-content-20);
         }
       }
     }
diff --git a/plugins/view-resources/src/components/list/ListHeader.svelte b/plugins/view-resources/src/components/list/ListHeader.svelte
index 12c42f38ba..b6556a694b 100644
--- a/plugins/view-resources/src/components/list/ListHeader.svelte
+++ b/plugins/view-resources/src/components/list/ListHeader.svelte
@@ -109,7 +109,7 @@
     }}
     on:click={() => dispatch('collapse')}
   >
-    <div class="flex-row-center clear-mins flex-grow">
+    <div class="flex-row-center flex-grow" style:color={headerComponent ? headerTextColor : 'inherit'}>
       {#if level === 0}
         <div class="chevron"><IconCollapseArrow size={'small'} /></div>
       {/if}
@@ -118,20 +118,18 @@
           <Label label={view.string.NoGrouping} />
         </span>
       {:else if headerComponent}
-        <span class="clear-mins" style:color={headerTextColor}>
-          <svelte:component
-            this={headerComponent.presenter}
-            value={category}
-            {space}
-            size={'small'}
-            kind={'list-header'}
-            colorInherit={!$themeStore.dark && level === 0}
-            accent={level === 0}
-            on:accent-color={(evt) => {
-              accentColor = evt.detail
-            }}
-          />
-        </span>
+        <svelte:component
+          this={headerComponent.presenter}
+          value={category}
+          {space}
+          size={'small'}
+          kind={'list-header'}
+          colorInherit={!$themeStore.dark && level === 0}
+          accent={level === 0}
+          on:accent-color={(evt) => {
+            accentColor = evt.detail
+          }}
+        />
       {/if}
 
       {#if selected.length > 0}
diff --git a/plugins/view-resources/src/components/list/ListItem.svelte b/plugins/view-resources/src/components/list/ListItem.svelte
index ec18feb31b..a1ea67f503 100644
--- a/plugins/view-resources/src/components/list/ListItem.svelte
+++ b/plugins/view-resources/src/components/list/ListItem.svelte
@@ -112,25 +112,24 @@
       />
     </div>
   </div>
-  {#each model.filter((p) => !(p.displayProps?.optional === true || p.displayProps?.suffix === true)) as attributeModel, i}
+  {#each model.filter((p) => !(p.displayProps?.optional === true || p.displayProps?.compression === true || p.displayProps?.suffix === true)) as attributeModel, i}
     {@const displayProps = attributeModel.displayProps}
     {#if !groupByKey || displayProps?.excludeByKey !== groupByKey}
       {#if displayProps?.grow}
-        {#if !compactMode}
-          {#each model.filter((p) => p.displayProps?.suffix === true) as attrModel}
-            <ListPresenter
-              {docObject}
-              attributeModel={attrModel}
-              {props}
-              value={getObjectValue(attrModel.key, docObject)}
-              onChange={getOnChange(docObject, attrModel)}
-            />
-          {/each}
-        {/if}
+        {#each model.filter((p) => p.displayProps?.suffix === true) as attrModel}
+          <ListPresenter
+            {docObject}
+            attributeModel={attrModel}
+            {props}
+            {compactMode}
+            value={getObjectValue(attrModel.key, docObject)}
+            onChange={getOnChange(docObject, attrModel)}
+          />
+        {/each}
         <GrowPresenter />
         {#if !compactMode}
-          <div class="optional-bar">
-            {#each model.filter((p) => p.displayProps?.optional === true) as attrModel}
+          <div class="compression-bar">
+            {#each model.filter((p) => p.displayProps?.compression === true) as attrModel}
               <ListPresenter
                 {docObject}
                 attributeModel={attrModel}
@@ -140,16 +139,13 @@
               />
             {/each}
           </div>
-        {:else}
-          <GrowPresenter />
-          {#each model.filter((p) => p.displayProps?.suffix === true) as attrModel}
+          {#each model.filter((p) => p.displayProps?.optional === true) as attrModel}
             <ListPresenter
               {docObject}
               attributeModel={attrModel}
               {props}
               value={getObjectValue(attrModel.key, docObject)}
               onChange={getOnChange(docObject, attrModel)}
-              compactMode
             />
           {/each}
         {/if}
@@ -180,7 +176,26 @@
         <IconCircles />
       </div>
       <div class="scroll-box gap-2">
+        <div class="compression-bar">
+          {#each model.filter((m) => m.displayProps?.compression) as attributeModel, j}
+            {@const displayProps = attributeModel.displayProps}
+            {@const value = getObjectValue(attributeModel.key, docObject)}
+            {#if displayProps?.excludeByKey !== groupByKey && value !== undefined}
+              <ListPresenter
+                {docObject}
+                {attributeModel}
+                {props}
+                value={getObjectValue(attributeModel.key, docObject)}
+                onChange={getOnChange(docObject, attributeModel)}
+                hideDivider={j === 0}
+              />
+            {/if}
+          {/each}
+        </div>
         {#each model.filter((m) => m.displayProps?.optional) as attributeModel, j}
+          {#if j === 0}
+            <GrowPresenter />
+          {/if}
           {@const displayProps = attributeModel.displayProps}
           {@const value = getObjectValue(attributeModel.key, docObject)}
           {#if displayProps?.excludeByKey !== groupByKey && value !== undefined}
@@ -190,7 +205,6 @@
               {props}
               value={getObjectValue(attributeModel.key, docObject)}
               onChange={getOnChange(docObject, attributeModel)}
-              hideDivider={j === 0}
             />
           {/if}
         {/each}