Dock multipage animation updated

htdguide · htdguide · commit 3d1b529d2619 · 2025-06-27T11:26:42.000+12:00
diff --git a/src/webOS/components/Dock/Dock.jsx b/src/webOS/components/Dock/Dock.jsx
@@ -1,3 +1,5 @@
+// src/components/Dock/Dock.jsx
+
 import React, { useState, useEffect, useLayoutEffect } from 'react';
 import { useDock } from '../../interactions/useDock/useDock.jsx';
 import { AppsContext } from '../../contexts/AppsContext/AppsContext.jsx';
@@ -16,9 +18,45 @@ import {
   getTooltipArrowStyle,
   getOpenIndicatorStyle,
 } from './DockStyle';
-import disabledOverlay from '../../media/icons/disable.png'; // <- your 30%-opacity overlay image
+import disabledOverlay from '../../media/icons/disable.png'; // your 30%-opacity overlay image
 
 export default function Dock() {
+  // 1) Synchronously detect portrait-mobile on first render:
+  const [isMobilePortrait, setIsMobilePortrait] = useState(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+      return false;
+    }
+    return window.matchMedia(
+      '(max-width: 768px) and (orientation: portrait)'
+    ).matches;
+  });
+
+  // 2) Keep it up-to-date on resize/orientation changes:
+  useEffect(() => {
+    if (!window.matchMedia) return;
+    const mql = window.matchMedia('(max-width: 768px) and (orientation: portrait)');
+    const handler = (e) => setIsMobilePortrait(e.matches);
+
+    if (mql.addEventListener) {
+      mql.addEventListener('change', handler);
+    } else {
+      mql.addListener(handler);
+    }
+    return () => {
+      if (mql.removeEventListener) {
+        mql.removeEventListener('change', handler);
+      } else {
+        mql.removeListener(handler);
+      }
+    };
+  }, []);
+
+  // 3) Choose the effective config each render:
+  const effectiveConfig = isMobilePortrait
+    ? { ...DOCK_CONFIG, ...DOCK_CONFIG.vertical }
+    : DOCK_CONFIG;
+
+  // 4) Always call the hook in the same place:
   const {
     outerRef,
     iconsContainerRef,
@@ -56,18 +94,21 @@ export default function Dock() {
     openApp,
     handleIconMouseEnter,
     handleIconMouseLeave,
-    setCurrentPage,
+    setCurrentPage, // now our animated changer
   } = useDock({
     AppsContext,
-    DOCK_CONFIG,
+    DOCK_CONFIG: effectiveConfig,
     useDeviceInfo,
     useStateManager,
     useLogger,
   });
 
+  // rest of your state+effects unchanged:
+
   const [fadeVisible, setFadeVisible] = useState(isDockVisible);
   const [toolbarOffset, setToolbarOffset] = useState(0);
 
+  // adjust for on-screen keyboard
   useLayoutEffect(() => {
     const updateOffset = () => {
       if (window.visualViewport) {
@@ -84,6 +125,7 @@ export default function Dock() {
     };
   }, []);
 
+  // fade in/out
   useEffect(() => {
     let timer;
     if (isDockVisible) {
@@ -94,6 +136,7 @@ export default function Dock() {
     return () => clearTimeout(timer);
   }, [isDockVisible]);
 
+  // compute outer style
   const outerStyle = {
     ...getOuterContainerStyle(DOCK_POSITION, DOCK_MARGIN, isDockVisible),
     opacity: fadeVisible ? 1 : 0,
@@ -103,14 +146,23 @@ export default function Dock() {
     outerStyle.bottom = `calc(${toolbarOffset + DOCK_MARGIN}px + env(safe-area-inset-bottom))`;
   }
 
+  const DOT_SIZE = 8;
+
   return (
     <div
       ref={outerRef}
       style={outerStyle}
       onTouchStart={paginationEnabled ? handleTouchStart : null}
       onTouchEnd={paginationEnabled ? handleTouchEnd : null}
     >
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          position: 'relative',
+        }}
+      >
         <div
           ref={iconsContainerRef}
           style={getIconsContainerStyle(isVerticalDock, DOCK_POSITION, ICON_SIZE, containerDimension)}
@@ -138,7 +190,7 @@ export default function Dock() {
                   NO_TRANSITION,
                   DOCK_POSITION,
                 }),
-                position: 'relative', // allow overlay
+                position: 'relative',
               }}
               onClick={() => openApp(app)}
               onMouseEnter={() => handleIconMouseEnter(app.id)}
@@ -160,10 +212,8 @@ export default function Dock() {
                 </div>
               )}
 
-              {/* App icon */}
               <img src={app.icon} alt={app.name} style={iconImageStyle} />
 
-              {/* Disabled-overlay */}
               {!app.available && (
                 <img
                   src={disabledOverlay}
@@ -179,25 +229,31 @@ export default function Dock() {
                 />
               )}
 
-              {/* Open-indicator dot (disabled by default) */}
-              {/*
-                {openedApps.includes(app.id) && (
-                  <div style={getOpenIndicatorStyle(DOCK_POSITION)} />
-                )}
-              */}
+              {activeApp === app.id && (
+                <div style={getOpenIndicatorStyle(DOCK_POSITION)} />
+              )}
             </div>
           ))}
         </div>
 
         {paginationEnabled && totalPages > 1 && (
-          <div style={{ marginTop: `${DOTS_MARGIN_BOTTOM}px`, display: 'flex', justifyContent: 'center' }}>
+          <div
+            style={{
+              position: 'absolute',
+              bottom: `-${DOTS_MARGIN_BOTTOM + DOT_SIZE}px`,
+              left: 0,
+              right: 0,
+              display: 'flex',
+              justifyContent: 'center',
+            }}
+          >
             {Array.from({ length: totalPages }).map((_, idx) => (
               <div
                 key={idx}
                 onClick={() => setCurrentPage(idx)}
                 style={{
-                  width: '8px',
-                  height: '8px',
+                  width: `${DOT_SIZE}px`,
+                  height: `${DOT_SIZE}px`,
                   borderRadius: '50%',
                   margin: '0 4px',
                   background: idx === currentPage ? 'white' : 'black',
diff --git a/src/webOS/components/Dock/DockStyle.jsx b/src/webOS/components/Dock/DockStyle.jsx
@@ -1,7 +1,7 @@
 // src/components/Dock/DockStyle/DockStyle.jsx
 
-// make sure the CSS variables are loaded
-import '../../configs/CSSConfigs/animations.css';
+// flattened cubic-bezier easing used everywhere
+const FLATTENED_EASING = 'cubic-bezier(0.4, 0.0, 0.2, 1.0)';
 
 /**
  * Safely include both modern and legacy iOS bottom safe-area insets.
@@ -12,41 +12,43 @@ const SAFE_BOTTOM_CONSTANT = 'constant(safe-area-inset-bottom)';
 const withSafeBottom = (marginPx) =>
   `calc(${marginPx}px + ${SAFE_BOTTOM_CONSTANT} + ${SAFE_BOTTOM_ENV})`;
 
-// slide-only transition, no opacity here
+/**
+ * Returns the outer container style, including only positioning—
+ * all animations now come exclusively from useDock's INITIAL_TRANSITION.
+ */
 export const getOuterContainerStyle = (
   DOCK_POSITION,
   DOCK_MARGIN,
   isDockVisible
 ) => {
   const style = {
-    // 🔑 fixed to viewport so Safari toolbar doesn’t cover it
     position: 'fixed',
     zIndex: 200,
-    transition: 'transform 0.3s var(--easing-flattened)',
+    // no transition here—use only useDock’s INITIAL_TRANSITION
   };
 
   if (DOCK_POSITION === 'bottom') {
-    style.bottom = withSafeBottom(DOCK_MARGIN);
-    style.left   = '50%';
+    style.bottom    = withSafeBottom(DOCK_MARGIN);
+    style.left      = '50%';
     style.transform = isDockVisible
       ? 'translateX(-50%)'
       : 'translateX(-50%) translateY(calc(150% + 10px))';
   } else if (DOCK_POSITION === 'left') {
-    style.left   = `${DOCK_MARGIN}px`;
-    style.top    = '50%';
+    style.left      = `${DOCK_MARGIN}px`;
+    style.top       = '50%';
     style.transform = isDockVisible
       ? 'translateY(-50%)'
       : 'translateX(calc(-150% - 10px)) translateY(-50%)';
   } else if (DOCK_POSITION === 'right') {
-    style.right  = `${DOCK_MARGIN}px`;
-    style.top    = '50%';
+    style.right     = `${DOCK_MARGIN}px`;
+    style.top       = '50%';
     style.transform = isDockVisible
       ? 'translateY(-50%)'
       : 'translateX(calc(150% + 10px)) translateY(-50%)';
   } else {
-    // fallback: bottom
-    style.bottom = withSafeBottom(DOCK_MARGIN);
-    style.left   = '50%';
+    // fallback to bottom
+    style.bottom    = withSafeBottom(DOCK_MARGIN);
+    style.left      = '50%';
     style.transform = isDockVisible
       ? 'translateX(-50%)'
       : 'translateX(-50%) translateY(calc(150% + 10px))';
@@ -55,61 +57,44 @@ export const getOuterContainerStyle = (
   return style;
 };
 
+/**
+ * Returns the icons container style. We add a width transition here
+ * so horizontal docks animate their width smoothly.
+ */
 export const getIconsContainerStyle = (
   isVerticalDock,
   DOCK_POSITION,
   ICON_SIZE,
   containerDimension
 ) => {
   if (isVerticalDock) {
-    switch (DOCK_POSITION) {
-      case 'left':
-        return {
-          position: 'relative',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'flex-start',
-          width: `${ICON_SIZE}px`,
-          height: `${containerDimension}px`,
-          transition:
-            'width 0.3s var(--easing-flattened), height 0.3s var(--easing-flattened)',
-        };
-      case 'right':
-        return {
-          position: 'relative',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'flex-end',
-          width: `${ICON_SIZE}px`,
-          height: `${containerDimension}px`,
-          transition:
-            'width 0.3s var(--easing-flattened), height 0.3s var(--easing-flattened)',
-        };
-      default:
-        return {
-          position: 'relative',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          width: `${ICON_SIZE}px`,
-          height: `${containerDimension}px`,
-          transition:
-            'width 0.3s var(--easing-flattened), height 0.3s var(--easing-flattened)',
-        };
+    // vertical docks still resize height instantly, but width is fixed
+    const base = {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      width: `${ICON_SIZE}px`,
+      height: `${containerDimension}px`,
+      // no width transition needed in vertical mode
+    };
+    if (DOCK_POSITION === 'left') {
+      return { ...base, alignItems: 'flex-start' };
+    } else if (DOCK_POSITION === 'right') {
+      return { ...base, alignItems: 'flex-end' };
+    } else {
+      return { ...base, alignItems: 'center' };
     }
   } else {
+    // horizontal dock: width changes as containerDimension updates
     return {
       position: 'relative',
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'flex-end',
       width: `${containerDimension}px`,
       height: `${ICON_SIZE}px`,
-      transition:
-        'width 0.3s var(--easing-flattened), height 0.3s var(--easing-flattened)',
+      transition: `width 0.3s ${FLATTENED_EASING}`,
     };
   }
 };
@@ -190,7 +175,7 @@ export const getIconContainerStyle = ({
     width: `${ICON_SIZE}px`,
     height: `${ICON_SIZE}px`,
     transition: shouldTransition
-      ? `${INITIAL_TRANSITION}, opacity 0.3s var(--easing-flattened)`
+      ? `${INITIAL_TRANSITION}, opacity 0.3s ${FLATTENED_EASING}`
       : NO_TRANSITION,
     transform: `scale(${scale})`,
     cursor: 'pointer',
diff --git a/src/webOS/configs/DockConfig/DockConfig.jsx b/src/webOS/configs/DockConfig/DockConfig.jsx
@@ -34,7 +34,7 @@ const DOCK_CONFIG = {
     INITIAL_TRANSITION: 'all 0.15s ease',
     NO_TRANSITION: 'none',
     DOCK_POSITION: 'bottom',
-    DOCK_MARGIN: 20,        // ← was 5, bumped to 20 to avoid shift
+    DOCK_MARGIN: 30,        // ← was 5, bumped to 20 to avoid shift
     DOTS_MARGIN_BOTTOM: 20,
     APP_NAME_TOOLTIP_OFFSET: 25,
     APP_NAME_BACKGROUND_PADDING: '5px 15px',
diff --git a/src/webOS/interactions/useDock/useDock.jsx b/src/webOS/interactions/useDock/useDock.jsx
