Add island right-dock feature

celstomp/css/components/island.css

@@ -419,3 +419,51 @@
 #islandSidePanel #clearAllBtn.danger:hover{
   background: rgba(255,107,107,0.10);
 }
+
+/* Custom scrollbar for layers */
+#islandLayersSlot {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255,255,255,0.22) rgba(0,0,0,0.18);
+}
+
+#islandLayersSlot::-webkit-scrollbar {
+  width: 8px;
+}
+
+#islandLayersSlot::-webkit-scrollbar-track {
+  background: rgba(0,0,0,0.18);
+  border-radius: 4px;
+}
+
+#islandLayersSlot::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.20);
+  border-radius: 4px;
+}
+
+#islandLayersSlot::-webkit-scrollbar-thumb:hover {
+  background: rgba(255,255,255,0.30);
+}
+
+/* Custom scrollbar for side panel */
+.islandSideBody {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255,255,255,0.22) rgba(0,0,0,0.18);
+}
+
+.islandSideBody::-webkit-scrollbar {
+  width: 8px;
+}
+
+.islandSideBody::-webkit-scrollbar-track {
+  background: rgba(0,0,0,0.18);
+  border-radius: 4px;
+}
+
+.islandSideBody::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.20);
+  border-radius: 4px;
+}
+
+.islandSideBody::-webkit-scrollbar-thumb:hover {
+  background: rgba(255,255,255,0.30);
+}

celstomp/js/ui/island-helper.js

@@ -213,7 +213,6 @@ function wireFloatingIslandDrag() {
           });
       }
   } catch {}
-
   let dragging = false;
   let pid = null;
   let offX = 0;
@@ -225,6 +224,7 @@ function wireFloatingIslandDrag() {
   let cachedW = 0;
   let cachedH = 0;
   const pad = 8;
+
   const updateCache = () => {
       cachedHeaderH = typeof nowCSSVarPx === "function" ? nowCSSVarPx("--header-h", 48) : 48;
       cachedVW = window.innerWidth;
@@ -233,28 +233,31 @@ function wireFloatingIslandDrag() {
       cachedW = r.width;
       cachedH = r.height;
   };
+  const normalizeUnlockedPosition = () => {
+      const r = dock.getBoundingClientRect();
+      if (dock.classList.contains("right-locked")) {
+          setRightLocked(false, {
+              persist: false
+          });
+          dock.style.left = `${Math.round(r.left)}px`;
+          dock.style.top = `${Math.round(r.top)}px`;
+          dock.style.right = "auto";
+          dock.style.bottom = "auto";
+      }
+      return r;
+  };
+
   const clampPos = (x, y) => {
-      // O(1) calculation using cached values to prevent Layout Thrashing
       x = Math.max(pad, Math.min(cachedVW - cachedW - pad, x));
       y = Math.max(cachedHeaderH + pad, Math.min(cachedVH - cachedH - pad, y));
       return { x, y };
   };
+
   head.addEventListener("pointerdown", e => {
       if (e.pointerType === "mouse" && e.button !== 0) return;
       if (e.target.closest(".islandBtn, .islandBtns, .islandResizeHandle")) return;
-
-      if (dock.classList.contains("right-locked")) {
-          const rLocked = dock.getBoundingClientRect();
-          setRightLocked(false, {
-              persist: false
-          });
-          dock.style.left = Math.round(rLocked.left) + "px";
-          dock.style.top = Math.round(rLocked.top) + "px";
-      }
-
+      const r = normalizeUnlockedPosition();
       updateCache();
-
-      const r = dock.getBoundingClientRect();
       offX = e.clientX - r.left;
       offY = e.clientY - r.top;
       dragging = true;
@@ -267,18 +270,22 @@ function wireFloatingIslandDrag() {
   }, {
       passive: false
   });
+
   window.addEventListener("pointermove", e => {
       if (!dragging || e.pointerId !== pid) return;
       const pos = clampPos(e.clientX - offX, e.clientY - offY);
       dock.style.left = pos.x + "px";
       dock.style.top = pos.y + "px";
+      dock.style.right = "auto";
+      dock.style.bottom = "auto";
       lockCandidate = e.clientX >= window.innerWidth - LOCK_THRESHOLD;
       dock.classList.toggle("drag-lock-candidate", lockCandidate);
       lockHint.classList.toggle("active", lockCandidate);
       e.preventDefault();
   }, {
       passive: false
   });
+
   const end = e => {
       if (!dragging || pid != null && e.pointerId !== pid) return;
       dragging = false;