feat: implement Time Machine, modern Tab Bar v4, and UI harmonization

Author: realtomchuk-source

web/src/components/home/InteractiveTimeline.tsx

@@ -39,11 +39,11 @@ export const InteractiveTimeline: React.FC<InteractiveTimelineProps> = ({ queues
     setIsDragging(false);
     (e.target as HTMLElement).releasePointerCapture(e.pointerId);
 
-    // Auto-return after 3 seconds of idle time
+    // Auto-return after 5 seconds of idle time
     setTimeout(() => {
       setSelectedSlot(null);
       if (onScrub) onScrub(null);
-    }, 3000);
+    }, 5000);
   };
 
   const updatePosition = (clientX: number) => {
@@ -161,13 +161,20 @@ export const InteractiveTimeline: React.FC<InteractiveTimelineProps> = ({ queues
         >
           {Array.from({ length: 48 }).map((_, i) => {
             const isAvailable = queuesStr[Math.floor(i / 2)] === '1';
+            const realSlot = getCurrentSlot();
+            const isPast = i < realSlot;
+            
+            // Muted colors for history (fixed to real time)
+            const availableColor = isPast ? '#FFB380' : '#FF7A00'; 
+            const unavailableColor = isPast ? 'rgba(232, 232, 237, 0.4)' : 'transparent';
+
             return (
               <div 
                 key={i} 
                 className={clsx("track__segment", isAvailable ? "track__segment--available" : "track__segment--unavailable")}
                 style={{ 
                   flex: 1, 
-                  background: isAvailable ? '#FF7A00' : 'transparent',
+                  background: isAvailable ? availableColor : unavailableColor,
                   height: '100%' 
                 }} 
               />

web/src/components/home/SubqueueSelector.tsx

@@ -128,7 +128,7 @@ export const SubqueueSelector: React.FC<SubqueueSelectorProps> = ({
                 style={{
                   flex: `0 0 ${cardWidth}px`,
                   height: `${cardWidth}px`, // Perfectly square
-                  borderRadius: '4px',
+                  borderRadius: '8px',
                   display: 'flex',
                   flexDirection: 'column',
                   alignItems: 'center',
@@ -144,7 +144,7 @@ export const SubqueueSelector: React.FC<SubqueueSelectorProps> = ({
                 }}
               >
                 <span style={{ 
-                  fontSize: isActive ? '22px' : '18px', 
+                  fontSize: isActive ? '22px' : '20px', 
                   fontWeight: isActive ? 800 : 700, 
                   color: isActive ? '#111' : '#6B7280',
                   lineHeight: 1
@@ -153,17 +153,19 @@ export const SubqueueSelector: React.FC<SubqueueSelectorProps> = ({
                 </span>
 
                 {/* Preserve space for the label even if inactive to maintain geometry */}
-                <span style={{ 
-                  fontSize: '8px', 
-                  fontWeight: 600, 
-                  color: '#888', 
-                  marginTop: '2px', 
-                  letterSpacing: '0.2px',
-                  opacity: isActive ? 1 : 0,
-                  transition: 'opacity 0.2s'
-                }}>
-                  підчерга
-                </span>
+                {isActive && (
+                  <span style={{ 
+                    fontSize: '8px', 
+                    fontWeight: 600, 
+                    color: '#888', 
+                    marginTop: '2px', 
+                    letterSpacing: '0.2px',
+                    opacity: 1,
+                    transition: 'opacity 0.2s'
+                  }}>
+                    підчерга
+                  </span>
+                )}
               </div>
             );
           })}

web/src/components/navigation/BottomNav.tsx

@@ -7,49 +7,59 @@ interface NavItemProps {
   to: string;
   label: string;
   active: boolean;
-  icon: React.ReactNode;
+  icon: React.ReactElement;
 }
 
-const NavItem: React.FC<NavItemProps> = ({ to, label, active, icon }) => (
-  <Link to={to} className={clsx("nav-item", active && "active")}>
-    <span className="icon">
-      {icon}
-    </span>
-    <span className="nav-text">{label}</span>
-  </Link>
-);
+const NavItem: React.FC<NavItemProps> = ({ to, label, active, icon }) => {
+  // Clone icon to apply dynamic styling based on active state
+  const styledIcon = React.cloneElement(icon as React.ReactElement<any>, {
+    size: 20,
+    strokeWidth: active ? 2.5 : 2,
+    fill: active ? 'currentColor' : 'none',
+    className: clsx("nav-icon", active && "active")
+  });
+
+  return (
+    <Link to={to} className={clsx("nav-item-v4", active && "active")}>
+      <div className="pill-bg">
+        {styledIcon}
+        {active && <span className="nav-text-v4">{label}</span>}
+      </div>
+    </Link>
+  );
+};
 
 export const BottomNav: React.FC = () => {
   const location = useLocation();
 
   return (
-    <nav className="glass-nav">
+    <nav className="floating-nav-v4">
       <NavItem 
         to="/" 
-        label="Home" 
+        label="Головна" 
         active={location.pathname === '/'} 
-        icon={<Home size={20} />} 
+        icon={<Home />} 
       />
 
       <NavItem 
         to="/archive" 
-        label="Archive" 
+        label="Архів" 
         active={location.pathname === '/archive'} 
-        icon={<Calendar size={20} />} 
+        icon={<Calendar />} 
       />
 
       <NavItem 
         to="/apps" 
         label="Apps" 
         active={location.pathname === '/apps'} 
-        icon={<LayoutGrid size={20} />} 
+        icon={<LayoutGrid />} 
       />
 
       <NavItem 
         to="/cabinet" 
-        label="Profile" 
+        label="Кабінет" 
         active={location.pathname === '/cabinet'} 
-        icon={<User size={20} />} 
+        icon={<User />} 
       />
     </nav>
   );

web/src/index.css

@@ -30,6 +30,7 @@
   --radius-pill: 20px;
   --gap-main: 6px;
   --gap-small: 8px;
+  --page-top-gap: 20px;
   --color-orange: #EE7221;
   --color-dark: #374151;
   --color-bg-gray: #f4f4f5;

web/src/pages/Cabinet/Cabinet.module.css

@@ -16,8 +16,8 @@
     display: flex;
     flex-direction: column;
     gap: 6px;
-    padding: 12px 16px 100px 16px;
-    max-width: 480px;
+    padding: 0 16px 100px 16px;
+    max-width: 450px;
     margin: 0 auto;
     width: 100%;
     box-sizing: border-box;
@@ -40,9 +40,9 @@
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: #71717a;
-    padding: 0 16px; /* Align with internal card content (16px from card edge) */
-    margin-top: 12px;
-    margin-bottom: 2px;
+    padding: 0 12px; /* Align with internal card content (12px from card edge) */
+    margin-top: 8px;
+    margin-bottom: 0px;
 }
 
 /* ============================================
@@ -63,7 +63,7 @@
     display: flex;
     align-items: center;
     gap: 16px;
-    padding: 16px; /* Standard 16px padding */
+    padding: 12px; /* Standard 12px padding */
 }
 
 .avatarWrap {
@@ -122,10 +122,10 @@
    NOTIFICATION SLOTS
    ============================================ */
 .slotCard {
-    padding: 16px; /* Unified internal padding */
+    padding: 12px; /* Unified internal padding */
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 6px;
 }
 
 /* This wrapper creates the 'Phantom Gap' to align text with the icons below */
@@ -186,10 +186,10 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 16px; /* Unified 16px padding */
+    padding: 12px; /* Unified 12px padding */
     cursor: pointer;
     position: relative;
-    min-height: 64px;
+    min-height: 52px;
     box-sizing: border-box;
     width: 100%;
 }

web/src/pages/Cabinet/Cabinet.tsx

@@ -9,6 +9,7 @@ import { NotificationEditorSheet } from './components/NotificationEditorSheet';
 import { AuthPromptSheet } from './components/AuthPromptSheet';
 import { AboutSheet } from './components/AboutSheet';
 import type { Slot } from '@/schemas/user';
+import { clsx } from 'clsx';
 import styles from './Cabinet.module.css';
 
 export const Cabinet: React.FC = () => {
@@ -84,7 +85,7 @@ export const Cabinet: React.FC = () => {
     };
 
     return (
-        <div className={styles.cabinetRoot}>
+        <div className={clsx(styles.cabinetRoot, 'page-cabinet')}>
             <ProfileCard user={profile} onClick={() => setAuthSheetOpen(true)} />
 
             <NotificationSlots 

web/src/pages/Home.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { clsx } from 'clsx';
 import { useStore } from '@/store/useStore';
 import { getStatusInfo } from '@/services/scheduleService';
 import { HeroCard } from '@/components/home/HeroCard';
@@ -28,19 +29,29 @@ export const Home: React.FC = () => {
     return () => clearInterval(timer);
   }, []);
 
-  // REAL TIME STATUS (Always facts for now)
-  const currentHour = realTime.getHours();
-  const isOn = currentQueuesStr[currentHour] === '1';
-  
-  let nextChangeHour = 24;
-  for (let i = currentHour + 1; i < 24; i++) {
-    if (currentQueuesStr[i] !== (isOn ? '1' : '0')) {
-      nextChangeHour = i;
-      break;
+  // CENTRALIZED DISPLAY CONTEXT (The 'Time Machine' Hub)
+  const displayContext = React.useMemo(() => {
+    // Determine the reference time (Real or Virtual)
+    let referenceDate = new Date(realTime);
+    
+    if (scrubSlot !== null) {
+      // Set to virtual time (slot 0 = 00:00, slot 1 = 00:30, etc.)
+      const vHour = Math.floor(scrubSlot / 2);
+      const vMin = (scrubSlot % 2) * 30;
+      referenceDate.setHours(vHour, vMin, 0, 0);
     }
-  }
 
-  const { h: timeH, m: timeM } = getStatusInfo(currentQueuesStr);
+    const info = getStatusInfo(currentQueuesStr, referenceDate);
+    
+    return {
+      referenceDate,
+      isVirtual: scrubSlot !== null,
+      isOn: info.isCurrentlyOn,
+      timeH: info.h,
+      timeM: info.m,
+      nextChangeHour: info.nextChangeHour
+    };
+  }, [realTime, scrubSlot, currentQueuesStr]);
 
   // VIRTUAL POINTER PERCENT
   // Use SLOTS_COUNT - 1 (47) to perfectly align 100% with the right edge
@@ -49,21 +60,21 @@ export const Home: React.FC = () => {
     : ((realTime.getHours() * 60 + realTime.getMinutes()) / 1440) * 100;
 
   return (
-    <div className="page-home">
+    <div className={clsx("page-home", !displayContext.isOn && "status-off")}>
       <section id="home-section" className="animate-in fade-in duration-700">
-        <div style={{ height: '16px' }} />
-
-
         <HeroCard 
-          isOn={isOn}
-          timeH={timeH}
-          timeM={timeM}
-          nextChangeHour={nextChangeHour}
+          isOn={displayContext.isOn}
+          timeH={displayContext.timeH}
+          timeM={displayContext.timeM}
+          nextChangeHour={displayContext.nextChangeHour}
           queuesStr={currentQueuesStr}
           currentTimePercent={pointerPercent}
         />
 
-        <DashboardBar isOn={isOn} realTime={realTime} />
+        <DashboardBar 
+          isOn={displayContext.isOn} 
+          realTime={displayContext.referenceDate} 
+        />
 
         <InteractiveTimeline 
           queuesStr={currentQueuesStr} 
@@ -74,9 +85,6 @@ export const Home: React.FC = () => {
           selectedGroup={selectedGroup}
           onSelect={setSelectedGroup}
         />
-        
-        {/* Spacer for bottom nav */}
-        <div style={{ height: '100px' }} />
       </section>
     </div>
   );

web/src/services/scheduleService.ts

@@ -35,11 +35,12 @@ export const convertToIntervals = (scheduleString: string): TimeInterval[] => {
 };
 
 /**
- * Calculates current status and time until next change
+ * Calculates status and time until next change relative to a reference date.
+ * Useful for 'Time Machine' scrubbing.
  */
-export const getStatusInfo = (scheduleString: string) => {
-  const now = new Date();
-  const currentHour = now.getHours();
+export const getStatusInfo = (scheduleString: string, referenceDate?: Date) => {
+  const baseTime = referenceDate || new Date();
+  const currentHour = baseTime.getHours();
   const isCurrentlyOn = scheduleString[currentHour] === '1';
 
   let nextChangeHour = 24;
@@ -50,9 +51,11 @@ export const getStatusInfo = (scheduleString: string) => {
     }
   }
 
-  const nextTime = new Date();
+  const nextTime = new Date(baseTime);
   nextTime.setHours(nextChangeHour, 0, 0, 0);
-  const diffMs = nextTime.getTime() - now.getTime();
+  
+  // Calculate difference in minutes from the reference point
+  const diffMs = nextTime.getTime() - baseTime.getTime();
   const minutesRemaining = Math.max(0, Math.floor(diffMs / 60000));
 
   return {