From fd8c213b56be06e3838f8b4dd55c735e8e610268 Mon Sep 17 00:00:00 2001
From: Marius Andra <marius.andra@gmail.com>
Date: Sun, 5 Jan 2025 11:30:53 +0100
Subject: [PATCH] More UX improvements (#116)

---
 backend/app/tasks/worker.py                   |  1 +
 .../frame/panels/SceneState/SceneState.tsx    |  2 +-
 .../frame/panels/Templates/Templates.tsx      |  2 +-
 .../src/scenes/frame/panels/panelsLogic.ts    | 29 ++++++++++---------
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/backend/app/tasks/worker.py b/backend/app/tasks/worker.py
index d353c691..326ff541 100644
--- a/backend/app/tasks/worker.py
+++ b/backend/app/tasks/worker.py
@@ -55,4 +55,5 @@ class WorkerSettings:
     redis_settings = REDIS_SETTINGS
     keep_result = 3600  # Keep results for 1 hour
     max_jobs = 10
+    job_timeout = 7200
     allow_abort_jobs = True
diff --git a/frontend/src/scenes/frame/panels/SceneState/SceneState.tsx b/frontend/src/scenes/frame/panels/SceneState/SceneState.tsx
index 889dda0b..ebc854dc 100644
--- a/frontend/src/scenes/frame/panels/SceneState/SceneState.tsx
+++ b/frontend/src/scenes/frame/panels/SceneState/SceneState.tsx
@@ -45,7 +45,7 @@ export function SceneState(): JSX.Element {
   return (
     <Form logic={frameLogic} props={{ frameId }} formKey="frameForm">
       <Group name={['scenes', sceneIndex]}>
-        <div className="flex justify-between w-full items-center gap-2 mb-2 mt-4">
+        <div className="flex justify-between w-full items-center gap-2 mb-2">
           <H6>
             State fields{' '}
             <div className="inline-block align-text-top">
diff --git a/frontend/src/scenes/frame/panels/Templates/Templates.tsx b/frontend/src/scenes/frame/panels/Templates/Templates.tsx
index f1a169ca..e7098d3a 100644
--- a/frontend/src/scenes/frame/panels/Templates/Templates.tsx
+++ b/frontend/src/scenes/frame/panels/Templates/Templates.tsx
@@ -275,5 +275,5 @@ export function Templates() {
 }
 
 Templates.PanelTitle = function TemplatesPanelTitle() {
-  return <>Scenes to install</>
+  return <>Available scenes</>
 }
diff --git a/frontend/src/scenes/frame/panels/panelsLogic.ts b/frontend/src/scenes/frame/panels/panelsLogic.ts
index f84cdfc1..bfca73a1 100644
--- a/frontend/src/scenes/frame/panels/panelsLogic.ts
+++ b/frontend/src/scenes/frame/panels/panelsLogic.ts
@@ -14,20 +14,20 @@ export interface AnyBuiltLogic extends BuiltLogic {}
 const DEFAULT_LAYOUT: Record<Area, PanelWithMetadata[]> = {
   [Area.TopLeft]: [{ panel: Panel.Scenes, active: false, hidden: false }],
   [Area.TopRight]: [
-    { panel: Panel.Templates, active: false, hidden: false },
-    { panel: Panel.Apps, active: true, hidden: false },
+    { panel: Panel.SceneState, active: true, hidden: false },
+    { panel: Panel.Apps, active: false, hidden: false },
     { panel: Panel.Events, active: false, hidden: false },
-    { panel: Panel.SceneState, active: false, hidden: false },
-    { panel: Panel.FrameSettings, active: false, hidden: false },
+    { panel: Panel.Templates, active: false, hidden: false },
   ],
   [Area.BottomLeft]: [
     { panel: Panel.Logs, active: true, hidden: false },
     { panel: Panel.FrameDetails, active: false, hidden: false },
+    { panel: Panel.FrameSettings, active: false, hidden: false },
     { panel: Panel.Metrics, active: false, hidden: false },
     { panel: Panel.Terminal, active: false, hidden: false },
     { panel: Panel.Debug, active: false, hidden: false },
-    { panel: Panel.SceneSource, active: false, hidden: false },
     { panel: Panel.Assets, active: false, hidden: false },
+    { panel: Panel.SceneSource, active: false, hidden: false },
   ],
   [Area.BottomRight]: [{ panel: Panel.Image, active: true, hidden: false }],
 }
@@ -198,25 +198,26 @@ export const panelsLogic = kea<panelsLogicType>([
   }),
   selectors(() => ({
     id: [() => [(_, props) => props.id], (id) => id],
-    diagramOpen: [
+    scenesOpen: [
       (s) => [s.panels, s.fullScreenPanel],
       (panels, fullScreenPanel): boolean =>
-        fullScreenPanel?.panel === Panel.Diagram ||
-        !!panels[Area.TopLeft].find(
-          (p) => p.panel === Panel.Diagram && (p.active || panels[Area.TopLeft].length === 1)
-        ),
+        fullScreenPanel?.panel === Panel.Scenes ||
+        panels[Area.TopLeft].filter((p) => p.active).length === 0 ||
+        !!panels[Area.TopLeft].find((p) => p.panel === Panel.Scenes && p.active),
     ],
     panelsWithConditions: [
-      (s) => [s.panels, s.fullScreenPanel, s.diagramOpen],
-      (panels, fullScreenPanel, diagramOpen): Record<Area, PanelWithMetadata[]> => {
+      (s) => [s.panels, s.fullScreenPanel, s.scenesOpen],
+      (panels, fullScreenPanel, scenesOpen): Record<Area, PanelWithMetadata[]> => {
         if (!fullScreenPanel) {
           return {
             ...panels,
             [Area.TopRight]: panels[Area.TopRight].filter((p) =>
-              diagramOpen ? true : p.panel !== Panel.Apps && p.panel !== Panel.Events && p.panel !== Panel.SceneState
+              scenesOpen
+                ? [Panel.Templates].includes(p.panel)
+                : [Panel.Apps, Panel.Events, Panel.SceneState].includes(p.panel)
             ),
             [Area.BottomLeft]: panels[Area.BottomLeft].filter((p) =>
-              diagramOpen ? true : p.panel !== Panel.SceneSource
+              !scenesOpen ? true : p.panel !== Panel.SceneSource
             ),
           }
         }