wiki: Add Workspaces page

6 files changed, 936 insertions, 0 deletions

diff --git a/wiki/Workspaces.md b/wiki/Workspaces.md
new file mode 100644
index 00000000..5bb60319
--- /dev/null
+++ b/wiki/Workspaces.md
@@ -0,0 +1,61 @@
+### Overview
+
+Niri has dynamic workspaces that can move between monitors.
+
+Each monitor contains an independent set of workspaces arranged vertically.
+You can switch between workspaces on a monitor with `focus-workspace-down` and `focus-workspace-up`.
+Empty workspaces "in the middle" automatically disappear when you switch away from them.
+
+There's always one empty workspace at the end (at the bottom) of every monitor.
+When you open a window on this empty workspace, a new empty workspace will immediately appear further below it.
+
+You can move workspaces up and down on the monitor with `move-workspace-up/down`.
+The way to put a window on a new workspace "in the middle" is to put it on the last (empty) workspace, then move the workspace up to where you need.
+
+Here's a visual representation that shows two monitors and their workspaces.
+The left monitor has three workspaces (two with windows, plus one empty), and the right monitor has two workspaces (one with windows, plus one empty).
+
+<picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./img/workspaces-dark.png">
+    <img alt="Two monitors. First with three workspaces, second with two workspaces." src="./img/workspaces-light.png">
+</picture>
+
+You can move a workspace to a different monitor using binds like `move-workspace-to-monitor-left/right/up/down` and `move-workspace-to-monitor-next/previous`.
+
+When you disconnect a monitor, its workspaces will automatically move to a different monitor.
+But, they will also "remember" their original monitor, so when you reconnect it, the workspaces will automatically move back to it.
+
+> [!TIP]
+> From other tiling WMs, you may be used to thinking about workspaces like this: "These are all of my workspaces. I can show workspace X on my first monitor, and workspace Y on my second monitor."
+> In niri, instead, think like this: "My first monitor contains these workspaces, including X and Y, and my second monitor contains these other workspaces. I can switch my first monitor to workspace X or Y. I can move workspace Y to my second monitor to show it there."
+
+### Addressing workspaces by index
+
+Several actions in niri can address workspaces "by index": `focus-workspace 2`, `move-column-to-workspace 4`.
+This index refers to whichever workspace *currently happens to be* at this position on the focused monitor.
+So, `focus-workspace 2` will always put you on the second workspace of the monitor, whichever workspace that currently is.
+
+This is an important distinction from WMs with static workspace systems.
+In niri, workspaces *do not have indices on their own*.
+If you take the first workspace and move it further down on the monitor, `focus-workspace 1` will now put you on a different workspace (the one that was below the first workspace before you moved it).
+
+When you want to have a more permanent workspace in niri, you can create a [named workspace](./Configuration:-Named-Workspaces.md) in the config.
+You can refer to named workspaces by name, e.g. `focus-workspace "browser"`, and they won't disappear when they become empty.
+
+> [!TIP]
+> You can try to emulate static workspaces by creating workspaces named "one", "two", "three", ..., and binding keys to `focus-workspace "one"`, `focus-workspace "two"`, ...
+> This can work to some extent, but it can become somewhat confusing, since you can still move these workspaces up and down and between monitors.
+>
+> If you're coming from a static workspace WM, I suggest *not* doing that, but instead trying the "niri way" with dynamic workspaces, focusing and moving up/down instead of by index.
+> Thanks to scrollable tiling, you generally need fewer workspaces than on a traditional tiling WM.
+
+### Example workflow
+
+This is how I like to use workspaces.
+
+I will usually have my browser on the topmost workspace, then one workspace per project (or a "thing") I'm working on.
+On a single workspace I have 1–2 windows that fit inside a monitor that I switch between frequently, and maybe extra windows scrolled outside the view, usually either ones I need rarely, or temporary windows that I quickly close.
+When I need another permanent window, I'll put it on a new workspace.
+
+I actively move workspaces up and down as I'm working on things to make what I need accessible in one motion.
+For example, I usually frequently switch between the browser and whatever I'm doing, so I always move whatever I'm currently doing to right below the browser, so a single `focus-workspace-up/down` gets me where I want.
diff --git a/wiki/_Sidebar.md b/wiki/_Sidebar.md
index 8a7cfd90..d06003e0 100644
--- a/wiki/_Sidebar.md
+++ b/wiki/_Sidebar.md
@@ -2,6 +2,7 @@
 * [Getting Started](./Getting-Started.md)
 * [Example systemd Setup](./Example-systemd-Setup.md)
 * [Important Software](./Important-Software.md)
+* [Workspaces](./Workspaces.md)
 * [Floating Windows](./Floating-Windows.md)
 * [Tabs](./Tabs.md)
 * [Screencasting](./Screencasting.md)
diff --git a/wiki/img/workspaces-dark.drawio.svg b/wiki/img/workspaces-dark.drawio.svg
new file mode 100644
index 00000000..06690881
--- /dev/null
+++ b/wiki/img/workspaces-dark.drawio.svg
@@ -0,0 +1,442 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Do not edit this file with editors other than draw.io -->
+
+<svg
+   version="1.1"
+   width="351.60999"
+   height="131"
+   viewBox="-0.5 -0.5 351.60999 131"
+   content="&lt;mxfile host=&quot;app.diagrams.net&quot; agent=&quot;Mozilla/5.0 (X11; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0&quot; version=&quot;26.0.16&quot; scale=&quot;1&quot; border=&quot;0&quot;&gt;&#10;  &lt;diagram name=&quot;Page-1&quot; id=&quot;eeUwl5a5gwcnClCdA54p&quot;&gt;&#10;    &lt;mxGraphModel dx=&quot;589&quot; dy=&quot;403&quot; grid=&quot;1&quot; gridSize=&quot;5&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;1169&quot; pageHeight=&quot;827&quot; math=&quot;0&quot; shadow=&quot;0&quot;&gt;&#10;      &lt;root&gt;&#10;        &lt;mxCell id=&quot;0&quot; /&gt;&#10;        &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot; /&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-21&quot; value=&quot;&quot; style=&quot;endArrow=none;dashed=1;html=1;rounded=0;entryX=0;entryY=1;entryDx=0;entryDy=0;strokeWidth=0.5;endSize=6;targetPerimeterSpacing=0;sourcePerimeterSpacing=0;curved=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; target=&quot;p8uehy9xxPkXcbn2s3VA-16&quot;&gt;&#10;          &lt;mxGeometry width=&quot;50&quot; height=&quot;50&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;165&quot; y=&quot;268&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;205&quot; y=&quot;195&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-20&quot; value=&quot;&quot; style=&quot;endArrow=none;dashed=1;html=1;rounded=0;entryX=0;entryY=0;entryDx=0;entryDy=0;strokeWidth=0.5;endSize=6;targetPerimeterSpacing=0;sourcePerimeterSpacing=0;curved=0;&quot; edge=&quot;1&quot; parent=&quot;1&quot; target=&quot;p8uehy9xxPkXcbn2s3VA-2&quot;&gt;&#10;          &lt;mxGeometry width=&quot;50&quot; height=&quot;50&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;165&quot; y=&quot;243&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;185&quot; y=&quot;215&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-2&quot; value=&quot;&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;aspect=fixed;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;200&quot; y=&quot;190&quot; width=&quot;71.11&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-3&quot; value=&quot;&quot; style=&quot;sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;fillColor=#333333;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.devices.lcd_monitor;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;120&quot; y=&quot;240&quot; width=&quot;48.33&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-5&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;strokeWidth=0.5;arcSize=4;absoluteArcSize=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;205&quot; y=&quot;195&quot; width=&quot;30&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-10&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;strokeWidth=0.5;arcSize=4;absoluteArcSize=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;240&quot; y=&quot;195&quot; width=&quot;15&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-11&quot; value=&quot;&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;aspect=fixed;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;200&quot; y=&quot;235&quot; width=&quot;71.11&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-12&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;strokeWidth=0.5;arcSize=4;absoluteArcSize=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;190&quot; y=&quot;240&quot; width=&quot;20&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-13&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;strokeWidth=0.5;arcSize=4;absoluteArcSize=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;215&quot; y=&quot;240&quot; width=&quot;45&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-14&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;strokeWidth=0.5;arcSize=4;absoluteArcSize=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;265&quot; y=&quot;240&quot; width=&quot;20&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-16&quot; value=&quot;&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;aspect=fixed;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;200&quot; y=&quot;280&quot; width=&quot;71.11&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-26&quot; value=&quot;&quot; style=&quot;endArrow=none;dashed=1;html=1;rounded=0;entryX=0;entryY=1;entryDx=0;entryDy=0;strokeWidth=0.5;endSize=6;targetPerimeterSpacing=0;sourcePerimeterSpacing=0;curved=0;&quot; edge=&quot;1&quot; target=&quot;p8uehy9xxPkXcbn2s3VA-36&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry width=&quot;50&quot; height=&quot;50&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;365&quot; y=&quot;268&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;405&quot; y=&quot;195&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-27&quot; value=&quot;&quot; style=&quot;endArrow=none;dashed=1;html=1;rounded=0;entryX=0;entryY=0;entryDx=0;entryDy=0;strokeWidth=0.5;endSize=6;targetPerimeterSpacing=0;sourcePerimeterSpacing=0;curved=0;&quot; edge=&quot;1&quot; target=&quot;p8uehy9xxPkXcbn2s3VA-28&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry width=&quot;50&quot; height=&quot;50&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;365&quot; y=&quot;243&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;385&quot; y=&quot;215&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-28&quot; value=&quot;&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;aspect=fixed;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;400&quot; y=&quot;212.5&quot; width=&quot;71.11&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-29&quot; value=&quot;&quot; style=&quot;sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;fillColor=#333333;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.devices.lcd_monitor;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;320&quot; y=&quot;240&quot; width=&quot;48.33&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-36&quot; value=&quot;&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;aspect=fixed;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;400&quot; y=&quot;257.5&quot; width=&quot;71.11&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-22&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;strokeWidth=0.5;arcSize=4;absoluteArcSize=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;445&quot; y=&quot;217.5&quot; width=&quot;40&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-23&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;strokeWidth=0.5;arcSize=4;absoluteArcSize=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;425&quot; y=&quot;217.5&quot; width=&quot;15&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-24&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;strokeWidth=0.5;arcSize=4;absoluteArcSize=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;405&quot; y=&quot;217.5&quot; width=&quot;15&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;      &lt;/root&gt;&#10;    &lt;/mxGraphModel&gt;&#10;  &lt;/diagram&gt;&#10;&lt;/mxfile&gt;&#10;"
+   id="svg41"
+   sodipodi:docname="dark.drawio.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   inkscape:export-filename="workspaces-dark.png"
+   inkscape:export-xdpi="300"
+   inkscape:export-ydpi="300"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview41"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#000000"
+     inkscape:zoom="3.1065574"
+     inkscape:cx="131.65699"
+     inkscape:cy="112.98681"
+     inkscape:window-width="2509"
+     inkscape:window-height="1385"
+     inkscape:window-x="20"
+     inkscape:window-y="20"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg41" />
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath44">
+      <path
+         id="path44"
+         d="m 80.5,45.5 v 39 h 70.10938 v -39 z" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath45">
+      <path
+         id="path45"
+         d="m 80.5,45.5 v 39 h 70.10938 v -39 z" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath47">
+      <path
+         id="path47"
+         d="m 280.5,23 v 39 h 70.10938 V 23 Z" />
+    </clipPath>
+  </defs>
+  <g
+     id="g41"
+     transform="translate(-0.5)">
+    <g
+       data-cell-id="0"
+       id="g40">
+      <g
+         data-cell-id="1"
+         id="g39">
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-21"
+           id="g2">
+          <g
+             id="g1">
+            <path
+               d="m 45,78 35,52"
+               fill="none"
+               stroke="#000000"
+               style="stroke:#7f7f7f;stroke-opacity:1"
+               stroke-width="0.5"
+               stroke-miterlimit="10"
+               stroke-dasharray="1.5, 1.5"
+               pointer-events="stroke"
+               id="path1" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-20"
+           id="g4">
+          <g
+             id="g3">
+            <path
+               d="M 45,53 80,0"
+               fill="none"
+               stroke="#000000"
+               style="stroke:#7f7f7f;stroke-opacity:1"
+               stroke-width="0.5"
+               stroke-miterlimit="10"
+               stroke-dasharray="1.5, 1.5"
+               pointer-events="stroke"
+               id="path2" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-2"
+           id="g6">
+          <g
+             id="g5">
+            <rect
+               x="80"
+               y="0"
+               width="71.110001"
+               height="40"
+               fill="#ffffff"
+               style="fill:#000000;fill-opacity:1;stroke:#7f7f7f;stroke-opacity:1"
+               stroke="#000000"
+               pointer-events="all"
+               id="rect4" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-3"
+           id="g8">
+          <g
+             id="g7">
+            <rect
+               x="0"
+               y="50"
+               width="48.330002"
+               height="40"
+               fill="none"
+               stroke="none"
+               pointer-events="all"
+               id="rect6" />
+            <path
+               d="m 3.14,78.13 h 42.05 v -25 H 3.14 Z M 2.41,81.25 C 1.32,81.25 0,80.2 0,78.79 V 52.51 C 0,51.17 1.19,50 2.38,50 h 43.55 c 1.27,0 2.4,1.23 2.4,2.44 v 26.33 c 0,1.13 -0.91,2.48 -2.49,2.48 H 29.69 c -0.27,0.92 -0.51,1.86 -0.52,2.78 0,1.55 0.9,2.14 2.25,2.49 1.66,0.38 3.43,0.38 5.19,0.41 0.72,0 1.55,0.62 1.55,1.59 0,0.8 -0.73,1.48 -1.4,1.48 H 11.52 c -0.71,0 -1.48,-0.66 -1.48,-1.45 0,-0.9 0.65,-1.62 1.51,-1.62 2.06,-0.05 4.73,-0.01 6.27,-0.73 0.69,-0.32 1.29,-0.84 1.32,-1.97 0.06,-0.98 -0.23,-1.99 -0.49,-2.98 z"
+               fill="#333333"
+               style="fill:#7f7f7f;fill-opacity:1"
+               stroke="none"
+               pointer-events="all"
+               id="path6" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-5"
+           id="g10">
+          <g
+             id="g9">
+            <rect
+               x="85"
+               y="5"
+               width="30"
+               height="30"
+               rx="2"
+               ry="2"
+               fill="#f5f5f5"
+               style="fill:#1a1a1a;stroke:#959595"
+               stroke="#666666"
+               stroke-width="0.5"
+               pointer-events="all"
+               id="rect8" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-10"
+           id="g12">
+          <g
+             id="g11">
+            <rect
+               x="120"
+               y="5"
+               width="15"
+               height="30"
+               rx="2"
+               ry="2"
+               fill="#f5f5f5"
+               style="fill:#1a1a1a;stroke:#959595"
+               stroke="#666666"
+               stroke-width="0.5"
+               pointer-events="all"
+               id="rect10" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-11"
+           id="g14">
+          <g
+             id="g13">
+            <rect
+               x="80"
+               y="45"
+               width="71.110001"
+               height="40"
+               fill="#ffffff"
+               style="fill:#000000;fill-opacity:1;stroke:#7f7f7f;stroke-opacity:1"
+               stroke="#000000"
+               pointer-events="all"
+               id="rect12" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-12"
+           id="g16">
+          <g
+             id="g15">
+            <rect
+               x="70"
+               y="50"
+               width="20"
+               height="30"
+               rx="2"
+               ry="2"
+               fill="#f5f5f5"
+               style="fill:#1a1a1a;stroke:#959595"
+               stroke="#666666"
+               stroke-width="0.5"
+               pointer-events="all"
+               id="rect14"
+               clip-path="url(#clipPath45)" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-13"
+           id="g18">
+          <g
+             id="g17">
+            <rect
+               x="95"
+               y="50"
+               width="45"
+               height="30"
+               rx="2"
+               ry="2"
+               fill="#f5f5f5"
+               style="fill:#1a1a1a;stroke:#959595"
+               stroke="#666666"
+               stroke-width="0.5"
+               pointer-events="all"
+               id="rect16" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-14"
+           id="g20">
+          <g
+             id="g19">
+            <rect
+               x="145"
+               y="50"
+               width="20"
+               height="30"
+               rx="2"
+               ry="2"
+               fill="#f5f5f5"
+               style="fill:#1a1a1a;stroke:#959595"
+               stroke="#666666"
+               stroke-width="0.5"
+               pointer-events="all"
+               id="rect18"
+               clip-path="url(#clipPath44)" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-16"
+           id="g22">
+          <g
+             id="g21">
+            <rect
+               x="80"
+               y="90"
+               width="71.110001"
+               height="40"
+               fill="#ffffff"
+               style="fill:#000000;fill-opacity:1;stroke:#7f7f7f;stroke-opacity:1"
+               stroke="#000000"
+               pointer-events="all"
+               id="rect20" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-26"
+           id="g24">
+          <g
+             id="g23">
+            <path
+               d="m 245,78 35,29.5"
+               fill="none"
+               stroke="#000000"
+               style="stroke:#7f7f7f;stroke-opacity:1"
+               stroke-width="0.5"
+               stroke-miterlimit="10"
+               stroke-dasharray="1.5, 1.5"
+               pointer-events="stroke"
+               id="path22" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-27"
+           id="g26">
+          <g
+             id="g25">
+            <path
+               d="M 245,53 280,22.5"
+               fill="none"
+               stroke="#000000"
+               style="stroke:#7f7f7f;stroke-opacity:1"
+               stroke-width="0.5"
+               stroke-miterlimit="10"
+               stroke-dasharray="1.5, 1.5"
+               pointer-events="stroke"
+               id="path24" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-28"
+           id="g28">
+          <g
+             id="g27">
+            <rect
+               x="280"
+               y="22.5"
+               width="71.110001"
+               height="40"
+               fill="#ffffff"
+               style="fill:#000000;fill-opacity:1;stroke:#7f7f7f;stroke-opacity:1"
+               stroke="#000000"
+               pointer-events="all"
+               id="rect26" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-29"
+           id="g30">
+          <g
+             id="g29">
+            <rect
+               x="200"
+               y="50"
+               width="48.330002"
+               height="40"
+               fill="none"
+               stroke="none"
+               pointer-events="all"
+               id="rect28" />
+            <path
+               d="m 203.14,78.13 h 42.05 v -25 h -42.05 z m -0.73,3.12 C 201.32,81.25 200,80.2 200,78.79 V 52.51 c 0,-1.34 1.19,-2.51 2.38,-2.51 h 43.55 c 1.27,0 2.4,1.23 2.4,2.44 v 26.33 c 0,1.13 -0.91,2.48 -2.49,2.48 h -16.15 c -0.27,0.92 -0.51,1.86 -0.52,2.78 0,1.55 0.9,2.14 2.25,2.49 1.66,0.38 3.43,0.38 5.19,0.41 0.72,0 1.55,0.62 1.55,1.59 0,0.8 -0.73,1.48 -1.4,1.48 h -25.24 c -0.71,0 -1.48,-0.66 -1.48,-1.45 0,-0.9 0.65,-1.62 1.51,-1.62 2.06,-0.05 4.73,-0.01 6.27,-0.73 0.69,-0.32 1.29,-0.84 1.32,-1.97 0.06,-0.98 -0.23,-1.99 -0.49,-2.98 z"
+               fill="#333333"
+               style="fill:#7f7f7f;fill-opacity:1"
+               stroke="none"
+               pointer-events="all"
+               id="path28" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-36"
+           id="g32">
+          <g
+             id="g31">
+            <rect
+               x="280"
+               y="67.5"
+               width="71.110001"
+               height="40"
+               fill="#ffffff"
+               style="fill:#000000;fill-opacity:1;stroke:#7f7f7f;stroke-opacity:1"
+               stroke="#000000"
+               pointer-events="all"
+               id="rect30" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-22"
+           id="g34">
+          <g
+             id="g33">
+            <rect
+               x="325"
+               y="27.5"
+               width="40"
+               height="30"
+               rx="2"
+               ry="2"
+               fill="#f5f5f5"
+               style="fill:#1a1a1a;stroke:#959595"
+               stroke="#666666"
+               stroke-width="0.5"
+               pointer-events="all"
+               id="rect32"
+               clip-path="url(#clipPath47)" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-23"
+           id="g36">
+          <g
+             id="g35">
+            <rect
+               x="305"
+               y="27.5"
+               width="15"
+               height="30"
+               rx="2"
+               ry="2"
+               fill="#f5f5f5"
+               style="fill:#1a1a1a;stroke:#959595"
+               stroke="#666666"
+               stroke-width="0.5"
+               pointer-events="all"
+               id="rect34" />
+          </g>
+        </g>
+        <g
+           data-cell-id="p8uehy9xxPkXcbn2s3VA-24"
+           id="g38">
+          <g
+             id="g37">
+            <rect
+               x="285"
+               y="27.5"
+               width="15"
+               height="30"
+               rx="2"
+               ry="2"
+               fill="#f5f5f5"
+               style="fill:#1a1a1a;stroke:#959595"
+               stroke="#666666"
+               stroke-width="0.5"
+               pointer-events="all"
+               id="rect36" />
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+  <g
+     id="rect41"
+     transform="translate(-0.5)" />
+  <g
+     id="rect45"
+     transform="translate(-0.5)" />
+</svg>
diff --git a/wiki/img/workspaces-dark.png b/wiki/img/workspaces-dark.png
new file mode 100644
index 00000000..9ef15a2f
--- /dev/null
+++ b/wiki/img/workspaces-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e387b2551923ebcf9a21e2e485c55195c817d64a3198bc8d38ee0808046b7a44
+size 16825
diff --git a/wiki/img/workspaces-light.drawio.svg b/wiki/img/workspaces-light.drawio.svg
new file mode 100644
index 00000000..9ace16b9
--- /dev/null
+++ b/wiki/img/workspaces-light.drawio.svg
@@ -0,0 +1,426 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Do not edit this file with editors other than draw.io -->
+
+<svg
+   version="1.1"
+   width="351.60999"
+   height="131"
+   viewBox="-0.5 -0.5 351.60999 131"
+   content="&lt;mxfile host=&quot;app.diagrams.net&quot; agent=&quot;Mozilla/5.0 (X11; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0&quot; version=&quot;26.0.16&quot;&gt;&#10;  &lt;diagram name=&quot;Page-1&quot; id=&quot;eeUwl5a5gwcnClCdA54p&quot;&gt;&#10;    &lt;mxGraphModel dx=&quot;589&quot; dy=&quot;403&quot; grid=&quot;1&quot; gridSize=&quot;5&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;1169&quot; pageHeight=&quot;827&quot; math=&quot;0&quot; shadow=&quot;0&quot;&gt;&#10;      &lt;root&gt;&#10;        &lt;mxCell id=&quot;0&quot; /&gt;&#10;        &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot; /&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-21&quot; value=&quot;&quot; style=&quot;endArrow=none;dashed=1;html=1;rounded=0;entryX=0;entryY=1;entryDx=0;entryDy=0;strokeWidth=0.5;endSize=6;targetPerimeterSpacing=0;sourcePerimeterSpacing=0;curved=0;fillColor=#f5f5f5;strokeColor=#666666;&quot; edge=&quot;1&quot; parent=&quot;1&quot; target=&quot;p8uehy9xxPkXcbn2s3VA-16&quot;&gt;&#10;          &lt;mxGeometry width=&quot;50&quot; height=&quot;50&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;165&quot; y=&quot;268&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;205&quot; y=&quot;195&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-20&quot; value=&quot;&quot; style=&quot;endArrow=none;dashed=1;html=1;rounded=0;entryX=0;entryY=0;entryDx=0;entryDy=0;strokeWidth=0.5;endSize=6;targetPerimeterSpacing=0;sourcePerimeterSpacing=0;curved=0;fillColor=#f5f5f5;strokeColor=#666666;&quot; edge=&quot;1&quot; parent=&quot;1&quot; target=&quot;p8uehy9xxPkXcbn2s3VA-2&quot;&gt;&#10;          &lt;mxGeometry width=&quot;50&quot; height=&quot;50&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;165&quot; y=&quot;243&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;185&quot; y=&quot;215&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-2&quot; value=&quot;&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;200&quot; y=&quot;190&quot; width=&quot;71.11&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-3&quot; value=&quot;&quot; style=&quot;sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;fillColor=#333333;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.devices.lcd_monitor;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;120&quot; y=&quot;240&quot; width=&quot;48.33&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-5&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;strokeWidth=0.5;arcSize=4;absoluteArcSize=1;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;205&quot; y=&quot;195&quot; width=&quot;30&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-10&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;strokeWidth=0.5;arcSize=4;absoluteArcSize=1;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;240&quot; y=&quot;195&quot; width=&quot;15&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-11&quot; value=&quot;&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;200&quot; y=&quot;235&quot; width=&quot;71.11&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-12&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;strokeWidth=0.5;arcSize=4;absoluteArcSize=1;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;190&quot; y=&quot;240&quot; width=&quot;20&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-13&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;strokeWidth=0.5;arcSize=4;absoluteArcSize=1;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;215&quot; y=&quot;240&quot; width=&quot;45&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-14&quot; value=&quot;&quot; style=&quot;rounded=1;whiteSpace=wrap;html=1;strokeWidth=0.5;arcSize=4;absoluteArcSize=1;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;265&quot; y=&quot;240&quot; width=&quot;20&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-16&quot; value=&quot;&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;200&quot; y=&quot;280&quot; width=&quot;71.11&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-26&quot; value=&quot;&quot; style=&quot;endArrow=none;dashed=1;html=1;rounded=0;entryX=0;entryY=1;entryDx=0;entryDy=0;strokeWidth=0.5;endSize=6;targetPerimeterSpacing=0;sourcePerimeterSpacing=0;curved=0;fillColor=#f5f5f5;strokeColor=#666666;&quot; edge=&quot;1&quot; target=&quot;p8uehy9xxPkXcbn2s3VA-36&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry width=&quot;50&quot; height=&quot;50&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;365&quot; y=&quot;268&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;405&quot; y=&quot;195&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-27&quot; value=&quot;&quot; style=&quot;endArrow=none;dashed=1;html=1;rounded=0;entryX=0;entryY=0;entryDx=0;entryDy=0;strokeWidth=0.5;endSize=6;targetPerimeterSpacing=0;sourcePerimeterSpacing=0;curved=0;fillColor=#f5f5f5;strokeColor=#666666;&quot; edge=&quot;1&quot; target=&quot;p8uehy9xxPkXcbn2s3VA-28&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry width=&quot;50&quot; height=&quot;50&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;365&quot; y=&quot;243&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;385&quot; y=&quot;215&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-28&quot; value=&quot;&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;400&quot; y=&quot;212.5&quot; width=&quot;71.11&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-29&quot; value=&quot;&quot; style=&quot;sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;fillColor=#333333;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;outlineConnect=0;align=center;shape=mxgraph.office.devices.lcd_monitor;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;320&quot; y=&quot;240&quot; width=&quot;48.33&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;p8uehy9xxPkXcbn2s3VA-36&quot; value=&quot;&quot; style=&quot;rounded=0;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#f5f5f5;fontColor