Restore original tablet platform UI

Author: bomberfish

package-lock.json

@@ -15,6 +15,7 @@
 	"homepage": "https://github.com/MercuryWorkshop/AnuraOS#readme",
 	"dependencies": {
 		"@mercuryworkshop/bare-mux": "^1.1.4",
+		"@mercuryworkshop/wisp-js": "^0.4.0",
 		"@titaniumnetwork-dev/ultraviolet": "3.1.5",
 		"autoprefixer": "^10.4.21",
 		"comlink": "^4.4.2",
@@ -30,16 +31,16 @@
 		"typescript": "^5.9.2"
 	},
 	"devDependencies": {
-		"eslint": "^9.35.0",
-		"eslint-plugin-html": "^8.1.3",
-		"eslint-plugin-jsdoc": "^60.5.0",
-		"@typescript-eslint/eslint-plugin": "^8.43.0",
-		"@typescript-eslint/parser": "^8.43.0",
 		"@eslint/eslintrc": "^3.3.1",
 		"@eslint/js": "^9.35.0",
 		"@types/node": "^22.13.4",
 		"@types/wicg-file-system-access": "^2023.10.6",
+		"@typescript-eslint/eslint-plugin": "^8.43.0",
+		"@typescript-eslint/parser": "^8.43.0",
 		"dreamland": "^0.0.25",
+		"eslint": "^9.35.0",
+		"eslint-plugin-html": "^8.1.3",
+		"eslint-plugin-jsdoc": "^60.5.0",
 		"globals": "^16.3.0",
 		"prettier": "^3.6.2",
 		"rollup": "^4.50.1",

package.json

@@ -28,6 +28,10 @@
 	height: 12px;
 }
 
+body.platform-tablet .aliceWMwin svg {
+	height: 12px;
+}
+
 .scaletransition {
 	transition:
 		visibility 0s,
@@ -119,7 +123,7 @@ body.platform-mobile .aliceWMwin .title {
 	height: 21px; /* just big enough to hide behind taskbar */
 }
 body.platform-tablet .aliceWMwin .title {
-	height: 21px; /* just big enough to hide behind taskbar */
+	height: 40px;
 }
 
 .aliceWMwin .titleContent {
@@ -157,6 +161,14 @@ body.platform-tablet .aliceWMwin .title {
 	flex-shrink: 0;
 	transition: background-color 0.2s ease-in-out;
 	z-index: 2;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+body.platform-tablet .aliceWMwin .windowButton {
+	margin: 4px;
 }
 
 body.platform-mobile .aliceWMwin .windowButton.maximize {

src/AliceWM.css

@@ -146,7 +146,7 @@ class WMWindow extends EventTarget implements Process {
 				style={`
                     width: ${wininfo.width};
                     height: ${wininfo.height};
-                    ${anura.platform.type === "mobile" || anura.platform.type === "tablet" ? "top: 5px!important; left: 5px!important;" : ""}
+                    ${anura.platform.type === "mobile" ? "top: 5px!important; left: 5px!important;" : ""}
                 `}
 				on:pointerover={() => {
 					this.mouseover = true;
@@ -175,10 +175,7 @@ class WMWindow extends EventTarget implements Process {
 					on:pointerdown={(evt: PointerEvent) => {
 						deactivateFrames();
 
-						if (
-							anura.platform.type !== "mobile" &&
-							anura.platform.type !== "tablet"
-						) {
+						if (anura.platform.type !== "mobile") {
 							this.dragging = true;
 							this.originalLeft = this.element.offsetLeft;
 							this.originalTop = this.element.offsetTop;
@@ -345,11 +342,7 @@ class WMWindow extends EventTarget implements Process {
 			const currentResizer = resizers[i];
 			currentResizer.addEventListener("pointerdown", (e: PointerEvent) => {
 				e.preventDefault();
-				if (
-					anura.platform.type === "mobile" ||
-					anura.platform.type === "tablet"
-				)
-					return;
+				if (anura.platform.type === "mobile") return;
 				original_width = parseFloat(
 					getComputedStyle(this.element, null)
 						.getPropertyValue("width")
@@ -502,7 +495,7 @@ class WMWindow extends EventTarget implements Process {
 		if (!anura.settings.get("disable-animation"))
 			this.element.classList.add("scaletransition");
 
-		if (anura.platform.type === "mobile" || anura.platform.type === "tablet") {
+		if (anura.platform.type === "mobile") {
 			this.maximize();
 		}
 
@@ -1222,7 +1215,7 @@ let AliceWM = {
 		const win = new WMWindow(wininfo, app);
 		document.body.appendChild(win.element);
 		win.focus();
-		if (anura.platform.type !== "mobile" && anura.platform.type !== "tablet") {
+		if (anura.platform.type !== "mobile") {
 			center(win.element);
 		}
 		return win;

src/AliceWM.tsx

@@ -131,7 +131,7 @@ window.addEventListener("load", async () => {
 		LocalFS.newOPFS("/opfs"); // mount opfs on boot
 	}
 
-	if (anura.platform.type === "mobile" || anura.platform.type === "tablet") {
+	if (anura.platform.type !== "desktop") {
 		splashToRemove = bootsplashMobile;
 		document.body.appendChild(bootsplashMobile);
 	} else {
@@ -573,41 +573,6 @@ document.addEventListener("anura-login-completed", async () => {
 		launcher.state.active = true;
 	}
 
-	if (anura.platform.type === "tablet") {
-		// Adjust styles for Taskbar right
-		const tright: HTMLDivElement =
-			taskbar.element.querySelector("#taskbar-right")!;
-		tright.style.backgroundColor = "black";
-		tright.style.top = "0";
-		tright.style.right = "0";
-		tright.style.height = "25px";
-		tright.style.transform = "translateY(0%)";
-		tright.style.width = "100%";
-		tright.style.zIndex = "1000000";
-
-		// Adjust styles taskinfo-container (has date and battery)
-		const tinfocont: HTMLDivElement = tright.querySelector(
-			"#taskinfo-container",
-		)!;
-		tinfocont.style.background = "black";
-		tinfocont.style.right = "0";
-		tinfocont.style.position = "absolute";
-
-		// Adjust styles for date container
-		const tdatecon: HTMLDivElement = tright.querySelector("#date-container")!;
-		tdatecon.style.background = "black";
-
-		document.body.appendChild(tright);
-
-		// Adjust launcher CSS
-		launcher.element.style.left = "0";
-		launcher.element.style.top = "25px";
-		launcher.element.style.borderRadius = "0";
-		const aview: HTMLDivElement = launcher.element.querySelector(".appsView")!;
-		aview.style.gridTemplateColumns = "1fr 1fr 1fr 1fr 1fr 1fr";
-		launcher.state.active = true;
-	}
-
 	document.body.appendChild(launcher.element);
 	document.body.appendChild(launcher.clickoffChecker);
 	document.body.appendChild(quickSettings.quickSettingsElement);