feat(layouts): exact panes constraint (#2206)

* style(fmt): remove warnings

* fix(swap-layouts): introduce exact panes constraint

* fix(swap-layouts): improve floating pane swap layout ux

* style(fmt): rustfmt

3 files changed, 46 insertions, 28 deletions

diff --git a/zellij-utils/assets/layouts/compact.swap.kdl b/zellij-utils/assets/layouts/compact.swap.kdl
index da9fd593c..923a117c1 100644
--- a/zellij-utils/assets/layouts/compact.swap.kdl
+++ b/zellij-utils/assets/layouts/compact.swap.kdl
@@ -62,15 +62,15 @@ swap_floating_layout name="staggered" {
 
 swap_floating_layout name="enlarged" {
     floating_panes max_panes=10 {
-        pane { x 1; y 1; width "90%"; height "90%"; }
-        pane { x 2; y 2; width "90%"; height "90%"; }
-        pane { x 3; y 3; width "90%"; height "90%"; }
-        pane { x 4; y 4; width "90%"; height "90%"; }
-        pane { x 5; y 5; width "90%"; height "90%"; }
-        pane { x 6; y 6; width "90%"; height "90%"; }
-        pane { x 7; y 7; width "90%"; height "90%"; }
-        pane { x 8; y 8; width "90%"; height "90%"; }
-        pane { x 9; y 9; width "90%"; height "90%"; }
+        pane { x "5%"; y 1; width "90%"; height "90%"; }
+        pane { x "5%"; y 2; width "90%"; height "90%"; }
+        pane { x "5%"; y 3; width "90%"; height "90%"; }
+        pane { x "5%"; y 4; width "90%"; height "90%"; }
+        pane { x "5%"; y 5; width "90%"; height "90%"; }
+        pane { x "5%"; y 6; width "90%"; height "90%"; }
+        pane { x "5%"; y 7; width "90%"; height "90%"; }
+        pane { x "5%"; y 8; width "90%"; height "90%"; }
+        pane { x "5%"; y 9; width "90%"; height "90%"; }
         pane focus=true { x 10; y 10; width "90%"; height "90%"; }
     }
 }
@@ -88,4 +88,10 @@ swap_floating_layout name="spread" {
         pane { x "1%"; y "1%"; width "45%"; }
         pane { x "50%"; y "1%"; width "45%"; }
     }
+    floating_panes max_panes=4 {
+       pane { x "1%"; y "55%"; width "45%"; height "45%"; }
+       pane focus=true { x "50%"; y "55%"; width "45%"; height "45%"; }
+       pane { x "1%"; y "1%"; width "45%"; height "45%"; }
+       pane { x "50%"; y "1%"; width "45%"; height "45%"; }
+   }
 }
diff --git a/zellij-utils/assets/layouts/default.swap.kdl b/zellij-utils/assets/layouts/default.swap.kdl
index 014ce43fb..6d5cdb552 100644
--- a/zellij-utils/assets/layouts/default.swap.kdl
+++ b/zellij-utils/assets/layouts/default.swap.kdl
@@ -65,15 +65,15 @@ swap_floating_layout name="staggered" {
 
 swap_floating_layout name="enlarged" {
     floating_panes max_panes=10 {
-        pane { x 1; y 1; width "90%"; height "90%"; }
-        pane { x 2; y 2; width "90%"; height "90%"; }
-        pane { x 3; y 3; width "90%"; height "90%"; }
-        pane { x 4; y 4; width "90%"; height "90%"; }
-        pane { x 5; y 5; width "90%"; height "90%"; }
-        pane { x 6; y 6; width "90%"; height "90%"; }
-        pane { x 7; y 7; width "90%"; height "90%"; }
-        pane { x 8; y 8; width "90%"; height "90%"; }
-        pane { x 9; y 9; width "90%"; height "90%"; }
+        pane { x "5%"; y 1; width "90%"; height "90%"; }
+        pane { x "5%"; y 2; width "90%"; height "90%"; }
+        pane { x "5%"; y 3; width "90%"; height "90%"; }
+        pane { x "5%"; y 4; width "90%"; height "90%"; }
+        pane { x "5%"; y 5; width "90%"; height "90%"; }
+        pane { x "5%"; y 6; width "90%"; height "90%"; }
+        pane { x "5%"; y 7; width "90%"; height "90%"; }
+        pane { x "5%"; y 8; width "90%"; height "90%"; }
+        pane { x "5%"; y 9; width "90%"; height "90%"; }
         pane focus=true { x 10; y 10; width "90%"; height "90%"; }
     }
 }
@@ -91,4 +91,10 @@ swap_floating_layout name="spread" {
         pane { x "1%"; y "1%"; width "45%"; }
         pane { x "50%"; y "1%"; width "45%"; }
     }
+    floating_panes max_panes=4 {
+        pane { x "1%"; y "55%"; width "45%"; height "45%"; }
+        pane focus=true { x "50%"; y "55%"; width "45%"; height "45%"; }
+        pane { x "1%"; y "1%"; width "45%"; height "45%"; }
+        pane { x "50%"; y "1%"; width "45%"; height "45%"; }
+    }
 }
diff --git a/zellij-utils/assets/layouts/strider.swap.kdl b/zellij-utils/assets/layouts/strider.swap.kdl
index 95d219b23..579fcc8e9 100644
--- a/zellij-utils/assets/layouts/strider.swap.kdl
+++ b/zellij-utils/assets/layouts/strider.swap.kdl
@@ -61,7 +61,7 @@ swap_tiled_layout name="horizontal" {
 swap_tiled_layout name="stacked" {
     ui min_panes=6 {
         pane split_direction="vertical" {
-            pane focus=true
+            pane
             pane stacked=true { children; }
         }
     }
@@ -73,15 +73,15 @@ swap_floating_layout name="staggered" {
 
 swap_floating_layout name="enlarged" {
     floating_panes max_panes=10 {
-        pane { x 1; y 1; width "90%"; height "90%"; }
-        pane { x 2; y 2; width "90%"; height "90%"; }
-        pane { x 3; y 3; width "90%"; height "90%"; }
-        pane { x 4; y 4; width "90%"; height "90%"; }
-        pane { x 5; y 5; width "90%"; height "90%"; }
-        pane { x 6; y 6; width "90%"; height "90%"; }
-        pane { x 7; y 7; width "90%"; height "90%"; }
-        pane { x 8; y 8; width "90%"; height "90%"; }
-        pane { x 9; y 9; width "90%"; height "90%"; }
+        pane { x "5%"; y 1; width "90%"; height "90%"; }
+        pane { x "5%"; y 2; width "90%"; height "90%"; }
+        pane { x "5%"; y 3; width "90%"; height "90%"; }
+        pane { x "5%"; y 4; width "90%"; height "90%"; }
+        pane { x "5%"; y 5; width "90%"; height "90%"; }
+        pane { x "5%"; y 6; width "90%"; height "90%"; }
+        pane { x "5%"; y 7; width "90%"; height "90%"; }
+        pane { x "5%"; y 8; width "90%"; height "90%"; }
+        pane { x "5%"; y 9; width "90%"; height "90%"; }
         pane focus=true { x 10; y 10; width "90%"; height "90%"; }
     }
 }
@@ -99,4 +99,10 @@ swap_floating_layout name="spread" {
         pane { x "1%"; y "1%"; width "45%"; }
         pane { x "50%"; y "1%"; width "45%"; }
     }
+    floating_panes max_panes=4 {
+        pane { x "1%"; y "55%"; width "45%"; height "45%"; }
+        pane focus=true { x "50%"; y "55%"; width "45%"; height "45%"; }
+        pane { x "1%"; y "1%"; width "45%"; height "45%"; }
+        pane { x "50%"; y "1%"; width "45%"; height "45%"; }
+    }
 }