From a18b42bb2a02687674976bc1bf3e78c024df3bc4 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 2 Nov 2025 12:22:08 +0100
Subject: [PATCH] feat: More dynamic styling for placeholder

- Create global setAttributesAccordingToPosition
- Change style of placeholder to show snap side
---
 source/code/hippie/app.js | 12 ++++++++
 source/code/windows.js    | 62 ++++++++++++++++++++++++++-------------
 2 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 607cc92..ed0f66d 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -370,6 +370,18 @@ function centerElementUnderCursor(event, element) {
 	element.style.top = `${y}px`;
 }
 
+function setAttributesAccordingToPosition(element, position, attributes) {
+	element.classList.remove(...Object.values(attributes).map(pos => pos.className));
+	Object.keys(attributes[position].styles).forEach(key => {
+		element.style[key] = '';
+	});
+
+	element.classList.add(attributes[position].className);
+	Object.entries(attributes[position].styles).forEach(([key, value]) => {
+		element.style[key] = value;
+	});
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen
diff --git a/source/code/windows.js b/source/code/windows.js
index 5ae07ef..2834619 100644
--- a/source/code/windows.js
+++ b/source/code/windows.js
@@ -52,19 +52,47 @@ class HippieTaskBar {
 			if (!this.isDragging) return;
 
 			const closestEdge = getClosestEdge(this.placeholder);
+			const borderRadius = '16px';
+			const attributes = {
+				top: {
+					styles: {
+						borderTopRightRadius: '',
+						borderBottomRightRadius: borderRadius,
+						borderBottomLeftRadius: borderRadius,
+						borderTopLeftRadius: '',
+						flexDirection: 'row'
+					}
+				},
+				right: {
+					styles: {
+						borderTopRightRadius: '',
+						borderBottomRightRadius: '',
+						borderBottomLeftRadius: borderRadius,
+						borderTopLeftRadius: borderRadius,
+						flexDirection: 'column'
+					}
+				},
+				bottom: {
+					styles: {
+						borderTopRightRadius: borderRadius,
+						borderBottomRightRadius: '',
+						borderBottomLeftRadius: '',
+						borderTopLeftRadius: borderRadius,
+						flexDirection: 'row'
+					}
+				},
+				left: {
+					styles: {
+						borderTopRightRadius: borderRadius,
+						borderBottomRightRadius: borderRadius,
+						borderBottomLeftRadius: '',
+						borderTopLeftRadius: '',
+						flexDirection: 'column'
+					}
+				}
+			};
 
-			switch (closestEdge) {
-				case 'right':
-				case 'left':
-					this.placeholder.style.flexDirection = 'column';
-					break;
-				case 'top':
-				case 'bottom':
-				default:
-					this.placeholder.style.flexDirection = 'row';
-					break;
-			}
-
+			setAttributesAccordingToPosition(this.placeholder, closestEdge, attributes);
 			centerElementUnderCursor(event, this.placeholder);
 		}
 	}
@@ -139,15 +167,7 @@ class HippieTaskBar {
 			}
 		};
 
-		this.element.classList.remove(...Object.values(attributes).map(pos => pos.className));
-		Object.keys(attributes[position].styles).forEach(key => {
-			this.element.style[key] = '';
-		});
-
-		this.element.classList.add(attributes[position].className);
-		Object.entries(attributes[position].styles).forEach(([key, value]) => {
-			this.element.style[key] = value;
-		});
+		setAttributesAccordingToPosition(this.element, position, attributes);
 
 		switch (position) {
 			case 'right':