From 9b837087e059ddbc1e3357e8ba5cd4b6d674e11f Mon Sep 17 00:00:00 2001
From: Izaak Kuipers <izaak.kuipers@gmail.com>
Date: Fri, 3 Oct 2025 15:02:26 +0200
Subject: [PATCH 1/3] Do some taskbar positioning

---
 src/css/apps/components/shell.css             |  5 +
 src/css/apps/components/shell/startmenu.css   |  8 ++
 src/css/apps/components/shell/taskbar.css     |  1 +
 .../components/shell/taskbar/position.css     | 91 +++++++++++++++++++
 src/css/apps/components/shell/workspaces.css  | 12 +++
 src/css/window.css                            | 19 +---
 src/css/window/maximization.css               | 54 +++++++++++
 src/ts/server/user/daemon.ts                  |  1 +
 src/ts/server/user/default.ts                 |  3 +-
 src/types/user.ts                             |  1 +
 10 files changed, 176 insertions(+), 19 deletions(-)
 create mode 100644 src/css/apps/components/shell/taskbar/position.css
 create mode 100644 src/css/window/maximization.css

diff --git a/src/css/apps/components/shell.css b/src/css/apps/components/shell.css
index 540de4f56..31029588a 100755
--- a/src/css/apps/components/shell.css
+++ b/src/css/apps/components/shell.css
@@ -42,6 +42,11 @@
   position: relative;
 }
 
+.tb-vertical-left #arcShell div.shell div.primary,
+.tb-vertical-right #arcShell div.shell div.primary {
+  align-items: start;
+}
+
 #arcShell div.shell div.secondary {
   z-index: 10000;
   position: relative;
diff --git a/src/css/apps/components/shell/startmenu.css b/src/css/apps/components/shell/startmenu.css
index 7a1b30eba..bdf96a5cb 100755
--- a/src/css/apps/components/shell/startmenu.css
+++ b/src/css/apps/components/shell/startmenu.css
@@ -35,6 +35,14 @@ div.shell div.startmenu:not(.opened) {
   visibility: hidden !important;
 }
 
+.tb-vertical-left div.shell div.startmenu:not(.opened) {
+  translate: -50px 0;
+}
+
+.tb-vertical-right div.shell div.startmenu:not(.opened) {
+  translate: -50px 0;
+}
+
 div.shell div.startmenu div.top {
   display: flex;
   gap: 10px;
diff --git a/src/css/apps/components/shell/taskbar.css b/src/css/apps/components/shell/taskbar.css
index 357a6d77e..49a26101f 100755
--- a/src/css/apps/components/shell/taskbar.css
+++ b/src/css/apps/components/shell/taskbar.css
@@ -1,4 +1,5 @@
 @import url("./taskbar/openedapps.css");
+@import url("./taskbar/position.css");
 div.shell div.taskbar {
   display: flex;
   align-items: center;
diff --git a/src/css/apps/components/shell/taskbar/position.css b/src/css/apps/components/shell/taskbar/position.css
new file mode 100644
index 000000000..0526c086c
--- /dev/null
+++ b/src/css/apps/components/shell/taskbar/position.css
@@ -0,0 +1,91 @@
+.tb-horizontal-top #arcShell div.shell {
+  flex-direction: column-reverse;
+}
+
+.tb-vertical-left #arcShell div.shell {
+  flex-direction: row-reverse;
+}
+
+.tb-vertical-right #arcShell div.shell {
+  flex-direction: row;
+}
+
+.tb-vertical-left #arcShell div.shell div.primary,
+.tb-vertical-right #arcShell div.shell div.primary {
+  width: calc(100% - var(--taskbar-allocation));
+  max-width: calc(100% - var(--taskbar-allocation));
+  height: 100%;
+  max-height: 100%;
+}
+
+.tb-vertical-left #arcShell div.shell div.secondary,
+.tb-vertical-right #arcShell div.shell div.secondary {
+  width: var(--taskbar-allocation);
+  max-width: var(--taskbar-allocation);
+  height: 100%;
+  max-height: 100%;
+}
+
+.tb-vertical-left #arcShell div.taskbar,
+.tb-vertical-right #arcShell div.taskbar {
+  width: 51px;
+  height: calc(100% - 20px);
+  border-top: none;
+  flex-direction: column;
+  margin: 10px;
+}
+
+.tb-vertical-left #arcShell div.shell.docked div.taskbar,
+.tb-vertical-right #arcShell div.shell.docked div.taskbar {
+  width: 51px;
+  height: 100%;
+  border-top: none;
+  flex-direction: column;
+  margin: 0;
+}
+.tb-vertical-left #arcShell div.taskbar {
+  border-right: var(--border);
+}
+
+.tb-vertical-right #arcShell div.taskbar {
+  border-left: var(--border);
+}
+#appRenderer[class*="tb-vertical"] #arcShell div.taskbar div.pinned-apps {
+  height: 0;
+  flex-grow: 1;
+  overflow-y: scroll;
+  width: 40px;
+  max-width: 40px;
+}
+
+#appRenderer[class*="tb-vertical"] #arcShell div.taskbar div.pinned-apps::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+#appRenderer[class*="tb-vertical"] #arcShell div.taskbar button.pinned-app {
+  display: block;
+  margin-left: 0;
+}
+#appRenderer[class*="tb-vertical"] #arcShell div.taskbar button.pinned-app + button.pinned-app {
+  margin-top: 5px;
+}
+
+#appRenderer[class*="tb-vertical"] #arcShell div.taskbar div.opened-apps {
+  overflow-y: scroll;
+}
+
+#appRenderer[class*="tb-vertical"] #arcShell div.taskbar div.opened-apps button.opened-app {
+  flex-direction: column;
+  width: 40px;
+  height: 40px;
+  display: block;
+  margin-left: 0;
+  margin-bottom: 5px;
+  padding: 8px !important;
+}
+
+#appRenderer[class*="tb-vertical"] #arcShell div.taskbar > button {
+  min-height: 40px;
+}
diff --git a/src/css/apps/components/shell/workspaces.css b/src/css/apps/components/shell/workspaces.css
index 3b8ae8b0b..86d8247a5 100755
--- a/src/css/apps/components/shell/workspaces.css
+++ b/src/css/apps/components/shell/workspaces.css
@@ -129,3 +129,15 @@
 #arcShell div.virtual-desktops button.add:active {
   background-color: var(--button-glass-active-bg);
 }
+
+.tb-vertical-left #arcShell div.virtual-desktops {
+  width: calc(100% - var(--taskbar-allocation));
+  bottom: 0;
+  left: var(--taskbar-allocation);
+}
+
+.tb-vertical-right #arcShell div.virtual-desktops {
+  width: calc(100% - var(--taskbar-allocation));
+  bottom: 0;
+  left: 0;
+}
diff --git a/src/css/window.css b/src/css/window.css
index 69115c48f..61fcd63d7 100755
--- a/src/css/window.css
+++ b/src/css/window.css
@@ -13,6 +13,7 @@
 @import url("./window/proto.css");
 @import url("./window/userlink.css");
 @import url("./window/splitpanes.css");
+@import url("./window/maximization.css");
 
 div.window:not(.core) {
   position: absolute;
@@ -36,24 +37,6 @@ div.window:not(.core).shell-colored.colored::before {
   transition: opacity 0.1s !important;
 }
 
-div.window:not(.core).maximized {
-  /* position: fixed !important; */
-  top: 0 !important;
-  left: 0 !important;
-  width: 100% !important;
-  min-width: 100% !important;
-  max-width: 100% !important;
-  height: calc(100% - var(--taskbar-allocation)) !important;
-  min-height: calc(100% - var(--taskbar-allocation)) !important;
-  max-height: calc(100% - var(--taskbar-allocation)) !important;
-  translate: 0 0 !important;
-  transform: none !important;
-  border-radius: 0 !important;
-  resize: none !important;
-  border: none !important;
-  transition: all 0.3s !important;
-}
-
 div.window:not(.core).maximized.no-shell {
   --taskbar-allocation: 0px;
 }
diff --git a/src/css/window/maximization.css b/src/css/window/maximization.css
new file mode 100644
index 000000000..8e5a9178d
--- /dev/null
+++ b/src/css/window/maximization.css
@@ -0,0 +1,54 @@
+div.window:not(.core).maximized {
+  translate: 0 0 !important;
+  transform: none !important;
+  border-radius: 0 !important;
+  resize: none !important;
+  border: none !important;
+  transition: all 0.3s !important;
+}
+
+.tb-horizontal-bottom div.window:not(.core).maximized {
+  /* position: fixed !important; */
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  min-width: 100% !important;
+  max-width: 100% !important;
+  height: calc(100% - var(--taskbar-allocation)) !important;
+  min-height: calc(100% - var(--taskbar-allocation)) !important;
+  max-height: calc(100% - var(--taskbar-allocation)) !important;
+}
+
+.tb-horizontal-top div.window:not(.core).maximized {
+  /* position: fixed !important; */
+  top: var(--taskbar-allocation) !important;
+  left: 0 !important;
+  width: 100% !important;
+  min-width: 100% !important;
+  max-width: 100% !important;
+  height: calc(100% - var(--taskbar-allocation)) !important;
+  min-height: calc(100% - var(--taskbar-allocation)) !important;
+  max-height: calc(100% - var(--taskbar-allocation)) !important;
+}
+.tb-vertical-left div.window:not(.core).maximized {
+  /* position: fixed !important; */
+  top: 0 !important;
+  left: var(--taskbar-allocation) !important;
+  width: calc(100% - var(--taskbar-allocation)) !important;
+  min-width: calc(100% - var(--taskbar-allocation)) !important;
+  max-width: calc(100% - var(--taskbar-allocation)) !important;
+  height: 100% !important;
+  min-height: 100% !important;
+  max-height: 100% !important;
+}
+.tb-vertical-right div.window:not(.core).maximized {
+  /* position: fixed !important; */
+  top: 0 !important;
+  left: 0 !important;
+  width: calc(100% - var(--taskbar-allocation)) !important;
+  min-width: calc(100% - var(--taskbar-allocation)) !important;
+  max-width: calc(100% - var(--taskbar-allocation)) !important;
+  height: 100% !important;
+  min-height: 100% !important;
+  max-height: 100% !important;
+}
diff --git a/src/ts/server/user/daemon.ts b/src/ts/server/user/daemon.ts
index 3f8c491c6..c4bbe4f23 100755
--- a/src/ts/server/user/daemon.ts
+++ b/src/ts/server/user/daemon.ts
@@ -1862,6 +1862,7 @@ export class UserDaemon extends Process {
     renderer.removeAttribute("class");
     renderer.setAttribute("style", style);
     renderer.classList.add(`theme-${theme}`);
+    renderer.classList.add(`tb-${v.shell.taskbar.position}`);
     renderer.classList.toggle("sharp", v.shell.visuals.sharpCorners);
     renderer.classList.toggle("noani", v.shell.visuals.noAnimations || this.safeMode);
     renderer.classList.toggle("noglass", v.shell.visuals.noGlass || this.safeMode);
diff --git a/src/ts/server/user/default.ts b/src/ts/server/user/default.ts
index bd16ee2c8..118c874d3 100755
--- a/src/ts/server/user/default.ts
+++ b/src/ts/server/user/default.ts
@@ -19,6 +19,7 @@ export const DefaultUserPreferences: UserPreferences = {
       clockDate: false,
       clockSecs: false,
       batteryPercentage: false,
+      position: "horizontal-bottom",
     },
     actionCenter: {
       weatherLocation: {
@@ -56,7 +57,7 @@ export const DefaultUserPreferences: UserPreferences = {
     cacheFilesystem: true,
     showHiddenApps: false,
     showThirdPartyApps: true,
-    excludeShortcuts: true
+    excludeShortcuts: true,
   },
   security: {
     lockdown: false,
diff --git a/src/types/user.ts b/src/types/user.ts
index 33eb2e3b4..a73ccb094 100755
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -96,6 +96,7 @@ export interface TaskbarPreferences {
   clockDate: boolean;
   clock12hr: boolean;
   batteryPercentage: boolean;
+  position: "horizontal-bottom" | "vertical-left" | "vertical-right" | "horizontal-top";
 }
 
 export interface DesktopPreferences {

From 2ffc2bf02d9c9140c382eddde00a859c790965bb Mon Sep 17 00:00:00 2001
From: Izaak Kuipers <izaak.kuipers@gmail.com>
Date: Thu, 8 Jan 2026 12:49:44 +0100
Subject: [PATCH 2/3] thing

---
 src/ts/server/user/daemon/contexts/apprenderer.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ts/server/user/daemon/contexts/apprenderer.ts b/src/ts/server/user/daemon/contexts/apprenderer.ts
index 6bb9ee5d2..bd74e9233 100644
--- a/src/ts/server/user/daemon/contexts/apprenderer.ts
+++ b/src/ts/server/user/daemon/contexts/apprenderer.ts
@@ -56,6 +56,7 @@ export class AppRendererUserContext extends UserContext {
     renderer.removeAttribute("class");
     renderer.setAttribute("style", style);
     renderer.classList.add(`theme-${theme}`);
+    renderer.classList.add(`tb-${v.shell.taskbar.position}`);
     renderer.classList.toggle("sharp", v.shell.visuals.sharpCorners);
     renderer.classList.toggle("noani", v.shell.visuals.noAnimations || this.safeMode);
     renderer.classList.toggle("noglass", v.shell.visuals.noGlass || this.safeMode);

From 2d430f54ddb8b53177ab787912173de94400efa9 Mon Sep 17 00:00:00 2001
From: Izaak Kuipers <izaak.kuipers@gmail.com>
Date: Thu, 8 Jan 2026 14:05:52 +0100
Subject: [PATCH 3/3] Continue the taskbar positioning

---
 src/apps/user/mediaplayer/runtime.ts          |  2 +-
 .../apps/components/shell/actioncenter.css    |  4 +++
 src/css/apps/components/shell/taskbar.css     | 36 ++++++++++++++++++-
 .../components/shell/taskbar/calendar.css     | 21 +++++++++--
 .../components/shell/taskbar/position.css     |  4 +--
 5 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/src/apps/user/mediaplayer/runtime.ts b/src/apps/user/mediaplayer/runtime.ts
index 84a49268a..aea4d1fa7 100755
--- a/src/apps/user/mediaplayer/runtime.ts
+++ b/src/apps/user/mediaplayer/runtime.ts
@@ -140,7 +140,7 @@ export class MediaPlayerRuntime extends AppProcess {
       icon: "MediaPlayerIcon",
       popup: {
         width: 250,
-        height: 280,
+        height: 185,
         component: TrayPopup as any,
       },
     });
diff --git a/src/css/apps/components/shell/actioncenter.css b/src/css/apps/components/shell/actioncenter.css
index fb101a430..9ab3555d1 100755
--- a/src/css/apps/components/shell/actioncenter.css
+++ b/src/css/apps/components/shell/actioncenter.css
@@ -66,3 +66,7 @@ div.shell div.actioncenter div.top > div {
 .theme-light div.shell div.actioncenter::before {
   opacity: 0.1;
 }
+
+.tb-vertical-right div.shell div.actioncenter {
+  right: 0;
+}
diff --git a/src/css/apps/components/shell/taskbar.css b/src/css/apps/components/shell/taskbar.css
index 408752080..0d69cc7c0 100755
--- a/src/css/apps/components/shell/taskbar.css
+++ b/src/css/apps/components/shell/taskbar.css
@@ -31,10 +31,20 @@ div.shell.docked div.taskbar.shell-colored::before {
   --taskbar-allocation: 72px;
 }
 
+:root #main:has(#arcShell div.shell) #appRenderer.tb-vertical-left,
+:root #main:has(#arcShell div.shell) #appRenderer.tb-vertical-right {
+  --taskbar-allocation: 70px;
+}
+
 :root #main:has(#arcShell div.shell.docked) {
   --taskbar-allocation: 51px;
 }
 
+:root #main:has(#arcShell div.shell.docked) #appRenderer.tb-vertical-left,
+:root #main:has(#arcShell div.shell.docked) #appRenderer.tb-vertical-right {
+  --taskbar-allocation: 50px;
+}
+
 div.shell.docked div.taskbar {
   width: 100%;
   margin: 0;
@@ -160,7 +170,7 @@ div.shell div.taskbar div.pinned-apps > button {
 }
 
 .theme-light #arcShell div.shell div.taskbar div.pinned-apps > button:active {
-opacity: 0.5;
+  opacity: 0.5;
   filter: brightness(0.9);
 }
 
@@ -181,6 +191,7 @@ div.shell div.taskbar div.pinned-apps > button + button {
   justify-content: center;
   align-items: center;
   background-color: transparent;
+  position: relative;
 }
 
 #arcShell div.taskbar div.tray-icons > div.icon > button.trigger:hover {
@@ -221,9 +232,25 @@ div.shell div.taskbar div.pinned-apps > button + button {
     opacity 0.2s;
 }
 
+.tb-vertical-left #arcShell div.taskbar div.tray-icons > div.icon > div.popup {
+  top: unset !important;
+  right: calc(0px - var(--w) - 10px) !important;
+  margin-top: 0;
+  margin-right: 20px;
+}
+
+.tb-vertical-right #arcShell div.taskbar div.tray-icons > div.icon > div.popup {
+  top: unset !important;
+  left: calc(0px - var(--w) - 20px) !important;
+  margin-top: 0;
+  margin-left: 20px;
+}
+
 #arcShell div.taskbar div.tray-icons > div.icon > div.popup.visible {
   opacity: 1;
   margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
   pointer-events: initial !important;
   scale: 1;
 }
@@ -294,3 +321,10 @@ div.shell div.shell div.taskbar button.clock-button.active span,
 .theme-light div.shell div.taskbar::before {
   opacity: 0.1;
 }
+
+[class*="tb-vertical"] div.shell div.taskbar button.clock-button {
+  width: 40px !important;
+  min-width: unset;
+  padding: 0;
+  justify-content: center;
+}
diff --git a/src/css/apps/components/shell/taskbar/calendar.css b/src/css/apps/components/shell/taskbar/calendar.css
index e57ff4de0..fb94de00c 100644
--- a/src/css/apps/components/shell/taskbar/calendar.css
+++ b/src/css/apps/components/shell/taskbar/calendar.css
@@ -20,6 +20,21 @@
   padding: 10px;
 }
 
+.tb-vertical-right #arcShell div.taskbar div.calendar-popup {
+  top: var(--h);
+  left: calc(0px - var(--w) - 10px);
+  margin-top: 0;
+  margin-left: 20px;
+}
+
+
+.tb-vertical-left #arcShell div.taskbar div.calendar-popup {
+  top: var(--h);
+  right: calc(0px - var(--w) - 10px);
+  margin-top: 0;
+  margin-right: 20px;
+}
+
 .theme-light div.taskbar div.calendar-popup::before {
   opacity: 0.1;
 }
@@ -52,7 +67,7 @@
 #arcShell div.taskbar div.calendar-popup div.top h1.date {
   font-size: 28px;
   white-space: nowrap;
-  overflow:hidden;
+  overflow: hidden;
   text-overflow: ellipsis;
 }
 
@@ -62,7 +77,7 @@
   font-family: "fredoka";
   font-weight: 500;
   white-space: nowrap;
-  overflow:hidden;
+  overflow: hidden;
   text-overflow: ellipsis;
 }
 
@@ -74,6 +89,8 @@
 #arcShell div.taskbar div.calendar-popup.opened {
   opacity: 1;
   margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
   pointer-events: initial !important;
   /** Don't remove the below scale call, it glitches out otherwise. */
   scale: 1;
diff --git a/src/css/apps/components/shell/taskbar/position.css b/src/css/apps/components/shell/taskbar/position.css
index 0526c086c..b4d6a134f 100644
--- a/src/css/apps/components/shell/taskbar/position.css
+++ b/src/css/apps/components/shell/taskbar/position.css
@@ -28,7 +28,7 @@
 
 .tb-vertical-left #arcShell div.taskbar,
 .tb-vertical-right #arcShell div.taskbar {
-  width: 51px;
+  width: 50px;
   height: calc(100% - 20px);
   border-top: none;
   flex-direction: column;
@@ -37,7 +37,7 @@
 
 .tb-vertical-left #arcShell div.shell.docked div.taskbar,
 .tb-vertical-right #arcShell div.shell.docked div.taskbar {
-  width: 51px;
+  width: 50px;
   height: 100%;
   border-top: none;
   flex-direction: column;