feat: More dynamic styling for placeholder

- Create global setAttributesAccordingToPosition
- Change style of placeholder to show snap side

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

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) {
+			setAttributesAccordingToPosition(this.placeholder, closestEdge, attributes);
-				case 'right':
-				case 'left':
-					this.placeholder.style.flexDirection = 'column';
-					break;
-				case 'top':
-				case 'bottom':
-				default:
-					this.placeholder.style.flexDirection = 'row';
-					break;
-			}
-
 			centerElementUnderCursor(event, this.placeholder);
 		}
 	}
@@ -139,15 +167,7 @@ class HippieTaskBar {
 			}
 		};
 
-		this.element.classList.remove(...Object.values(attributes).map(pos => pos.className));
+		setAttributesAccordingToPosition(this.element, position, attributes);
-		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;
-		});
 
 		switch (position) {
 			case 'right':