Refine UI layout spacing across views and optimize compacting hook behavior

- while being in landscape, the cpu is highly occupied
- move [Fragment] to main view
- in landscape, the back button should be placed below ask/edit buttons

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       ├── Home
│                       │   ├── Home.module.scss
│                       │   ├── hooks
│                       │   │   ├── use-has-scrolled-past-mode-button.ts
│                       │   │   ├── use-keyboard-shortcuts.ts
│                       │   │   └── use-tasks.ts
│                       │   └── index.ts
│                       ├── Main
│                       │   ├── Main.tsx
│                       │   ├── MainView
│                       │   │   ├── MainView.module.scss
│                       │   │   ├── MainView.tsx
│                       │   │   ├── components
│                       │   │   │   ├── BrowserConnectionStatus
│                       │   │   │   │   └── index.ts
│                       │   │   │   ├── Header
│                       │   │   │   │   ├── Header.module.scss
│                       │   │   │   │   ├── Header.tsx
│                       │   │   │   │   └── index.ts
│                       │   │   │   └── PromptAttachments
│                       │   │   │       ├── PromptAttachments.tsx
│                       │   │   │       └── index.ts
│                       │   │   ├── hooks
│                       │   │   │   ├── use-invocation-counts.ts
│                       │   │   │   ├── use-keyboard-shortcuts.ts
│                       │   │   │   ├── use-last-choice-tooltip.ts
│                       │   │   │   └── use-re-render-on-interval.ts
│                       │   │   ├── index.ts
│                       │   │   └── prompt-type-labels.ts
│                       │   └── index.ts
│                       ├── components
│                       │   ├── Layout
│                       │   │   └── Footer
│                       │   │       └── Footer.tsx
│                       │   └── recent-donations
│                       │       └── RecentDonationsFooter
│                       │           └── RecentDonationsFooter.tsx
│                       └── hooks
│                           └── use-is-landscape.ts
└── packages
    ├── shared
    │   └── src
    │       └── hooks
    │           └── use-compacting.ts
    └── ui
        └── src
            └── components
                └── editor
                    └── prompt
                        ├── BrowserExtensionMessage
                        │   └── BrowserExtensionMessage.tsx
                        └── ResponsePreviewFooter
                            └── ResponsePreviewFooter.tsx

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Home/Home.tsx

@@ -335,7 +335,7 @@ export const Home: React.FC<Props> = (props) => {
           <UiScrollable on_scroll={handle_scroll} top_shadow>
             <div className={styles.content}>
               <div className={styles.inner}>
-                <UiSeparator height={4} />
+                <UiSeparator height={6} />
                 {targets_section}
               </div>
             </div>
@@ -347,7 +347,7 @@ export const Home: React.FC<Props> = (props) => {
           <UiScrollable top_shadow>
             <div className={styles.content}>
               <div className={styles.inner}>
-                <UiSeparator height={4} />
+                <UiSeparator height={6} />
                 {tasks_section}
               </div>
               {footer}

apps/editor/src/views/prompt/frontend/Main/MainView/MainView.tsx

@@ -274,7 +274,7 @@ export const MainView: React.FC<Props> = (props) => {
 
   const prompt_section = (
     <>
-      <UiSeparator height={is_landscape ? 4 : 2} />
+      <UiSeparator height={is_landscape ? 6 : 4} />
 
       <BrowserConnectionStatus
         is_visible={props.target == TARGET.WEB}
@@ -309,12 +309,10 @@ export const MainView: React.FC<Props> = (props) => {
                 }
               ]}
             />
-            <UiSeparator height={4} />
+            <UiSeparator height={6} />
           </>
         )}
 
-      <UiSeparator height={2} />
-
       {props.response_history.length > 0 &&
         (props.target == TARGET.WEB
           ? props.web_prompt_type

apps/editor/src/views/prompt/frontend/Main/MainView/components/BrowserConnectionStatus/BrowserConnectionStatus.tsx

@@ -75,7 +75,7 @@ export const BrowserConnectionStatus: React.FC<Props> = (props) => {
         }
         actions={actions}
       />
-      <UiSeparator height={4} />
+      <UiSeparator height={6} />
     </>
   )
 }

apps/editor/src/views/prompt/frontend/Main/MainView/components/Header/Header.module.scss

@@ -33,6 +33,10 @@
       flex-direction: column;
       align-items: flex-start;
       padding: 0;
+
+      > :first-child {
+        order: 1;
+      }
     }
   }
 }

packages/shared/src/hooks/use-compacting.ts

@@ -41,7 +41,7 @@ export const use_compacting = (options?: { is_disabled?: boolean }) => {
   useEffect(() => {
     if (is_disabled) {
       set_compact_step(0)
-      set_thresholds({})
+      set_thresholds((prev) => (Object.keys(prev).length == 0 ? prev : {}))
       return
     }