From 179cb85669543b3426904706de66ed6673d8ccb9 Mon Sep 17 00:00:00 2001
From: Paul Knight <nickmc01@gmail.com>
Date: Sat, 7 Dec 2024 21:07:39 -0500
Subject: [PATCH 1/5] Updates to move to floating panels UI

Signed-off-by: Paul Knight <nickmc01@gmail.com>
---
 packages/theme/styles/_colors.scss                       | 2 ++
 packages/theme/styles/common.scss                        | 7 ++++++-
 packages/theme/styles/components.scss                    | 2 ++
 .../workbench-resources/src/components/Workbench.svelte  | 9 +++++++++
 .../src/components/sidebar/SidebarExpanded.svelte        | 1 -
 .../src/components/sidebar/widgets/WidgetsBar.svelte     | 4 ++--
 6 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index a78a677c6be..b3fa8b995c7 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -188,6 +188,7 @@
   --theme-popup-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
   --theme-popup-checkicon: #FFFFFF99;
   --theme-panel-color: #1A1A28;
+  --theme-workbench-color: #1A1A28;
   --theme-calendar-today-color: #fff;
   --theme-calendar-holiday-color: #eb5757;
   --theme-calendar-weekend-color: rgba(242, 153, 74, 1);
@@ -447,6 +448,7 @@
   --theme-popup-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
   --theme-popup-checkicon: #205DC2;
   --theme-panel-color: #FFFFFF;
+  --theme-workbench-color: #FFFFFF;
   --theme-calendar-today-color: #000;
   --theme-calendar-holiday-color: #eb5757;
   --theme-calendar-weekend-color: rgba(242, 153, 74, 1);
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index edaa02262a2..5947dff9555 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -142,7 +142,12 @@
 .antiPanel-navigator {
   position: relative;
   
-  &:not(.second) { background-color: var(--theme-navpanel-color); }
+  &:not(.second) { 
+    background-color: var(--theme-workbench-color); 
+    margin: var(--spacing-2) 0 var(--spacing-2) var(--spacing-2);  // Changed from all sides to top, bottom, left only
+    border: 1px solid var(--theme-divider-color);
+    border-radius: var(--small-focus-BorderRadius);
+  }
   &:not(.right) {
     min-width: 12.5rem;
     max-width: 22.5rem;
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 924821fcdad..9512aa88c65 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -23,9 +23,11 @@
   min-width: 0;
   border: 1px solid var(--theme-divider-color); // var(--global-surface-02-BorderColor);
   border-radius: var(--small-focus-BorderRadius);
+  padding: var(--spacing-2);
 
   &:not(.modal) {
     background-color: var(--theme-panel-color); // var(--global-surface-02-BackgroundColor);
+    margin: var(--spacing-2);
   }
   &.modal {
     overflow: hidden;
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index 172131dc210..61e63caf256 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -941,6 +941,14 @@
         <div class="cover shown" on:click={() => ($deviceInfo.navigator.visible = false)} />
       {/if}
       {#if mainNavigator}
+        <Separator
+          name={'workbench'}
+          float={$deviceInfo.navigator.float}
+          index={0}
+          color={'transparent'}
+          separatorSize={0}
+          short
+        />
         <div
           class="antiPanel-navigator no-print {$deviceInfo.navigator.direction === 'horizontal'
             ? 'portrait'
@@ -1114,6 +1122,7 @@
     .antiPanel-application:not(.horizontal) {
       border-radius: var(--medium-BorderRadius) 0 0 var(--medium-BorderRadius);
       border-right: none;
+      background-color: var(--theme-panel-color);
     }
   }
 
diff --git a/plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte b/plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte
index fd4f44e38cd..761ab22580d 100644
--- a/plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte
+++ b/plugins/workbench-resources/src/components/sidebar/SidebarExpanded.svelte
@@ -158,7 +158,6 @@
     min-width: 0;
     min-height: 0;
     background-color: var(--theme-panel-color);
-
     border-left: none;
   }
 
diff --git a/plugins/workbench-resources/src/components/sidebar/widgets/WidgetsBar.svelte b/plugins/workbench-resources/src/components/sidebar/widgets/WidgetsBar.svelte
index e9640425e6b..fe0d5fd7b5e 100644
--- a/plugins/workbench-resources/src/components/sidebar/widgets/WidgetsBar.svelte
+++ b/plugins/workbench-resources/src/components/sidebar/widgets/WidgetsBar.svelte
@@ -98,10 +98,10 @@
     flex-direction: column;
     padding-block: var(--spacing-2);
     height: 100%;
-    width: 3.5rem;
+    width: var(--app-panel-width);
     min-width: 3.5rem;
     max-width: 3.5rem;
-    background-color: var(--theme-navpanel-color);
+    background-color: var(--theme-workbench-color);
     border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
     overflow-y: auto;
   }

From 8de97e38aa9dc8f31bcdf0507480178ef707dfd4 Mon Sep 17 00:00:00 2001
From: Paul Knight <nickmc01@gmail.com>
Date: Sat, 7 Dec 2024 21:26:08 -0500
Subject: [PATCH 2/5] Updates to plan view to support floating panels.

Signed-off-by: Paul Knight <nickmc01@gmail.com>
---
 packages/theme/styles/common.scss               |  1 -
 packages/theme/styles/components.scss           |  2 +-
 .../src/components/PlanView.svelte              | 17 +++++++++++++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 5947dff9555..c34e33730b6 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -130,7 +130,6 @@
 .antiPanel-navigator,
 .antiPanel-component {
   display: flex;
-  height: 100%;
   min-height: 0;
   
   &.header { background-color: var(--theme-comp-header-color); }
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 9512aa88c65..9a308d77826 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -18,9 +18,9 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  height: 100%;
   min-height: 0;
   min-width: 0;
+  margin: var(--spacing-2);
   border: 1px solid var(--theme-divider-color); // var(--global-surface-02-BorderColor);
   border-radius: var(--small-focus-BorderRadius);
   padding: var(--spacing-2);
diff --git a/plugins/time-resources/src/components/PlanView.svelte b/plugins/time-resources/src/components/PlanView.svelte
index 260432bd1f6..fbc914563a1 100644
--- a/plugins/time-resources/src/components/PlanView.svelte
+++ b/plugins/time-resources/src/components/PlanView.svelte
@@ -86,10 +86,10 @@
 
 {#if $deviceInfo.navigator.visible}
   <ToDosNavigator bind:mode bind:tag bind:currentDate />
-  <Separator name={'time'} float={$deviceInfo.navigator.float} index={0} color={'var(--theme-divider-color)'} />
+  <Separator name={'time'} float={$deviceInfo.navigator.float} index={0} separatorSize={0} />
 {/if}
 <div
-  class="flex-col w-full clear-mins mobile-wrapper"
+  class="antiPanel-PlanView flex-col clear-mins"
   class:left-divider={!$deviceInfo.navigator.visible}
   bind:this={mainPanel}
 >
@@ -105,3 +105,16 @@
     on:dragDrop={drop}
   />
 {/if}
+
+<style lang="scss">
+  .antiPanel-PlanView {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    background-color: var(--theme-workbench-color);
+    margin: var(--spacing-2) 0 var(--spacing-2) var(--spacing-2);
+    border: 1px solid var(--theme-divider-color);
+    border-radius: var(--small-focus-BorderRadius);
+    min-width: 320px;
+  }
+</style>

From 7d6a1b8b10e402e33cddd15ad94591b588ce6723 Mon Sep 17 00:00:00 2001
From: Paul Knight <nickmc01@gmail.com>
Date: Sat, 7 Dec 2024 22:10:07 -0500
Subject: [PATCH 3/5] Adjustments to support floating side panels and fixes for
 panel gaps

Signed-off-by: Paul Knight <nickmc01@gmail.com>
---
 packages/theme/styles/_colors.scss                         | 2 +-
 packages/theme/styles/common.scss                          | 7 ++++---
 packages/theme/styles/components.scss                      | 3 +--
 plugins/time-resources/src/components/PlanView.svelte      | 1 -
 .../time-resources/src/components/PlanningCalendar.svelte  | 2 +-
 .../workbench-resources/src/components/Workbench.svelte    | 7 ++-----
 6 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index b3fa8b995c7..19e4f1cf8d4 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -124,7 +124,7 @@
   --theme-refinput-border: rgba(255, 255, 255, .1);
 
   // Be aware to update defineAlpha() function in colors.ts
-  --theme-bg-color: #1A1A28;
+  --theme-bg-color: #14141f;
   --theme-bg-accent-color: rgba(0, 0, 0, .08);
   --theme-bg-dark-color: rgba(0, 0, 0, .2);
   --theme-back-color: #0f0f18;
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index c34e33730b6..fc46e94b509 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -113,8 +113,9 @@
     flex-direction: column;
     min-width: var(--app-panel-width);
     width: var(--app-panel-width);
-    height: 100%;
-    border-right: 1px solid var(--theme-navpanel-divider);
+    margin: var(--spacing-1);
+    border: 1px solid var(--theme-divider-color);
+    border-radius: var(--medium-BorderRadius) !important;
   }
   &.horizonatl {
     min-height: var(--app-panel-width);
@@ -143,7 +144,7 @@
   
   &:not(.second) { 
     background-color: var(--theme-workbench-color); 
-    margin: var(--spacing-2) 0 var(--spacing-2) var(--spacing-2);  // Changed from all sides to top, bottom, left only
+    margin-right: var(--spacing-2);
     border: 1px solid var(--theme-divider-color);
     border-radius: var(--small-focus-BorderRadius);
   }
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 9a308d77826..f7790fd43e9 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -20,18 +20,17 @@
   flex-grow: 1;
   min-height: 0;
   min-width: 0;
-  margin: var(--spacing-2);
   border: 1px solid var(--theme-divider-color); // var(--global-surface-02-BorderColor);
   border-radius: var(--small-focus-BorderRadius);
   padding: var(--spacing-2);
 
   &:not(.modal) {
     background-color: var(--theme-panel-color); // var(--global-surface-02-BackgroundColor);
-    margin: var(--spacing-2);
   }
   &.modal {
     overflow: hidden;
     background-color: var(--theme-comp-header-color); // var(--global-surface-02-BackgroundColor);
+    margin-left: var(--spacing-2);
   }
   &.beforeAside {
     border-right: none;
diff --git a/plugins/time-resources/src/components/PlanView.svelte b/plugins/time-resources/src/components/PlanView.svelte
index fbc914563a1..05bed7cc776 100644
--- a/plugins/time-resources/src/components/PlanView.svelte
+++ b/plugins/time-resources/src/components/PlanView.svelte
@@ -112,7 +112,6 @@
     flex-direction: column;
     flex-grow: 1;
     background-color: var(--theme-workbench-color);
-    margin: var(--spacing-2) 0 var(--spacing-2) var(--spacing-2);
     border: 1px solid var(--theme-divider-color);
     border-radius: var(--small-focus-BorderRadius);
     min-width: 320px;
diff --git a/plugins/time-resources/src/components/PlanningCalendar.svelte b/plugins/time-resources/src/components/PlanningCalendar.svelte
index 3a03fd7e1b1..77f222b447b 100644
--- a/plugins/time-resources/src/components/PlanningCalendar.svelte
+++ b/plugins/time-resources/src/components/PlanningCalendar.svelte
@@ -175,7 +175,7 @@
 </script>
 
 <div
-  class="hulyComponent modal"
+  class="hulyComponent modal margin-left-2"
   bind:this={element}
   use:resizeObserver={(element) => {
     showLabel = showLabel ? element.clientWidth > rem(3.5) + 399 : element.clientWidth > rem(3.5) + 400
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index 61e63caf256..f29abeb7ee5 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -1096,23 +1096,20 @@
     min-width: 0;
     min-height: 0;
     width: 100%;
-    height: 100%;
-    background-color: var(--theme-panel-color);
     touch-action: none;
+    margin: var(--spacing-1);
 
     &.inner {
       background-color: var(--theme-navpanel-color);
 
       &.rounded {
-        border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
+        border-radius: var(--medium-BorderRadius);
       }
     }
     &:not(.inner)::after {
       position: absolute;
       content: '';
       inset: 0;
-      border: 1px solid var(--theme-divider-color);
-      border-radius: var(--medium-BorderRadius);
       pointer-events: none;
     }
     .antiPanel-application.horizontal {

From f588b1bb9402e07f8422c76ef792b63ee1cdf2b0 Mon Sep 17 00:00:00 2001
From: Paul Knight <nickmc01@gmail.com>
Date: Sat, 7 Dec 2024 22:14:30 -0500
Subject: [PATCH 4/5] Removed residual background from workbench

Signed-off-by: Paul Knight <nickmc01@gmail.com>
---
 packages/theme/styles/panel.scss                            | 1 -
 plugins/workbench-resources/src/components/Workbench.svelte | 2 --
 2 files changed, 3 deletions(-)

diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
index 0702583cd8d..5b95bf77996 100644
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@@ -20,7 +20,6 @@
   height: 100%;
   min-width: 0;
   min-height: 0;
-  background-color: var(--theme-navpanel-color); // var(--global-surface-01-BackgroundColor);
   border-radius: 0 var(--small-focus-BorderRadius) var(--small-focus-BorderRadius) 0;
 
   // .antiPanel-navigator {
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index f29abeb7ee5..e678c4545c5 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -1100,8 +1100,6 @@
     margin: var(--spacing-1);
 
     &.inner {
-      background-color: var(--theme-navpanel-color);
-
       &.rounded {
         border-radius: var(--medium-BorderRadius);
       }

From c91bf115faa626343db0d9ec27abf7cd83cc4ded Mon Sep 17 00:00:00 2001
From: Paul Knight <nickmc01@gmail.com>
Date: Sat, 7 Dec 2024 22:45:19 -0500
Subject: [PATCH 5/5] Updates for top status bar

Signed-off-by: Paul Knight <nickmc01@gmail.com>
---
 packages/theme/styles/global.scss               | 2 +-
 packages/ui/src/components/internal/Root.svelte | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index 801bf1d7f01..10693f35a31 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -77,7 +77,7 @@
   scrollbar-color: var(--theme-navpanel-divider) transparent;
   scrollbar-width: none;
   --body-font-size: .875rem;
-  --status-bar-height: 36px;
+  --status-bar-height: 42px;
   --status-bar-normal-height: 36px;
   --panel-aside-width: 25rem; // 20rem;
   --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte
index ccdfc624868..4418d112ed2 100644
--- a/packages/ui/src/components/internal/Root.svelte
+++ b/packages/ui/src/components/internal/Root.svelte
@@ -280,6 +280,8 @@
       font-size: 0.75rem;
       line-height: 150%;
       background-color: var(--theme-statusbar-color);
+      margin: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
+      border-radius: var(--medium-focus-BorderRadius);
       // border-bottom: 1px solid var(--theme-navpanel-divider);
 
       .history-box {