Introduce dynamic compact layout for Footer buttons using JavaScript-based footprint adjustment instead of media queries

Author: robertpiosik

packages/vscode/src/views/panel/frontend/components/Layout/Footer/Footer.module.scss

@@ -1,4 +1,5 @@
 .footer {
+  $self: &;
   --button-size: 24px;
   position: relative;
   z-index: -1; // Makes context menu of a preset appear above
@@ -53,6 +54,8 @@
   }
 
   &__action-button {
+    $btn: &;
+
     display: flex;
     align-items: center;
     flex-shrink: 0;
@@ -72,32 +75,22 @@
 
     &__text {
       display: inline;
+      #{$btn}--compact & {
+        display: none;
+      }
     }
 
     &__icon {
       display: none !important;
+      #{$btn}--compact & {
+        display: inline !important;
+      }
     }
 
-    @media (max-width: 293px) {
+    &--compact {
       padding: 0;
       width: var(--button-size);
       justify-content: center;
-
-      &__text {
-        display: none;
-      }
-
-      &__icon {
-        display: inline !important;
-      }
-    }
-
-    &--no-shrink {
-      @media (max-width: 293px) {
-        padding: 0 7px;
-        width: auto;
-        justify-content: initial;
-      }
     }
   }
 }

packages/vscode/src/views/panel/frontend/components/Layout/Footer/Footer.tsx

@@ -3,6 +3,7 @@ import cn from 'classnames'
 import { Icon } from '@ui/components/editor/common/Icon'
 import styles from './Footer.module.scss'
 import { LayoutContext } from '../../../contexts/LayoutContext'
+import { use_compacting } from './use-compacting'
 
 type Props = {
   on_donate_click: () => void
@@ -23,6 +24,8 @@ export const Footer: React.FC<Props> = ({ on_donate_click }) => {
   const [is_apply_disabled_temporarily, set_is_apply_disabled_temporarily] =
     useState(false)
 
+  const { container_ref, left_ref, right_ref, compact_step } = use_compacting()
+
   useEffect(() => {
     set_is_commit_disabled_temporarily(false)
   }, [commit_button_enabling_trigger_count])
@@ -50,18 +53,8 @@ export const Footer: React.FC<Props> = ({ on_donate_click }) => {
 
   return (
     <>
-      <div className={styles.footer}>
-        <div>
-          <a
-            className={cn(
-              styles['footer__icon-button'],
-              styles['footer__icon-button--cwc']
-            )}
-            href="https://codeweb.chat"
-            title="Visit website"
-          >
-            <Icon variant="CODE_WEB_CHAT_LOGO" />
-          </a>
+      <div className={styles.footer} ref={container_ref}>
+        <div ref={left_ref}>
           <a
             className={cn(
               styles['footer__icon-button'],
@@ -88,20 +81,28 @@ export const Footer: React.FC<Props> = ({ on_donate_click }) => {
           </a>
         </div>
 
-        <div>
+        <div ref={right_ref}>
           <button
-            className={cn(
-              styles['footer__action-button'],
-              styles['footer__action-button--no-shrink']
-            )}
+            className={cn(styles['footer__action-button'], {
+              [styles['footer__action-button--compact']]: compact_step >= 3
+            })}
             onClick={handle_apply_click}
             title={'Integrate copied chat response or a single code block'}
             disabled={is_apply_disabled_temporarily}
           >
-            Apply
+            <span className={styles['footer__action-button__text']}>Apply</span>
+            <span
+              className={cn(
+                styles['footer__action-button__icon'],
+                'codicon',
+                'codicon-check'
+              )}
+            />
           </button>
           <button
-            className={styles['footer__action-button']}
+            className={cn(styles['footer__action-button'], {
+              [styles['footer__action-button--compact']]: compact_step >= 2
+            })}
             onClick={on_undo_click}
             title={
               'Restore saved state of the codebase after chat/API response integration'
@@ -118,7 +119,9 @@ export const Footer: React.FC<Props> = ({ on_donate_click }) => {
             />
           </button>
           <button
-            className={styles['footer__action-button']}
+            className={cn(styles['footer__action-button'], {
+              [styles['footer__action-button--compact']]: compact_step >= 1
+            })}
             onClick={handle_commit_click}
             title={
               has_changes_to_commit && !is_commit_disabled_temporarily

packages/vscode/src/views/panel/frontend/components/Layout/Footer/use-compacting.ts

@@ -0,0 +1,63 @@
+import { useState, useLayoutEffect, useEffect, useRef } from 'react'
+
+export const use_compacting = () => {
+  const container_ref = useRef<HTMLDivElement>(null)
+  const left_ref = useRef<HTMLDivElement>(null)
+  const right_ref = useRef<HTMLDivElement>(null)
+  const [compact_step, set_compact_step] = useState(0)
+  const [thresholds, set_thresholds] = useState<{
+    step0: number
+    step1: number
+    step2: number
+  }>({ step0: 0, step1: 0, step2: 0 })
+
+  useLayoutEffect(() => {
+    if (left_ref.current && right_ref.current) {
+      const width =
+        left_ref.current.offsetWidth + right_ref.current.offsetWidth + 6
+
+      if (compact_step == 0)
+        set_thresholds((prev) => ({ ...prev, step0: width }))
+      else if (compact_step == 1)
+        set_thresholds((prev) => ({ ...prev, step1: width }))
+      else if (compact_step == 2)
+        set_thresholds((prev) => ({ ...prev, step2: width }))
+    }
+  }, [compact_step])
+
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0].contentRect.width
+      if (thresholds.step0 && width >= thresholds.step0) {
+        set_compact_step(0)
+      } else if (thresholds.step1 && width >= thresholds.step1) {
+        set_compact_step(1)
+      } else if (thresholds.step2 && width >= thresholds.step2) {
+        set_compact_step(2)
+      } else if (thresholds.step0 && width < thresholds.step0) {
+        if (compact_step == 0) set_compact_step(1)
+        else if (
+          compact_step == 1 &&
+          thresholds.step1 &&
+          width < thresholds.step1
+        )
+          set_compact_step(2)
+        else if (
+          compact_step == 2 &&
+          thresholds.step2 &&
+          width < thresholds.step2
+        )
+          set_compact_step(3)
+      }
+    })
+    if (container_ref.current) observer.observe(container_ref.current)
+    return () => observer.disconnect()
+  }, [thresholds, compact_step])
+
+  return {
+    container_ref,
+    left_ref,
+    right_ref,
+    compact_step
+  }
+}