diff --git a/VERSION.properties b/VERSION.properties index 3edb3292..d31849b1 100644 --- a/VERSION.properties +++ b/VERSION.properties @@ -1,2 +1,2 @@ -client.version=1.5.38 +client.version=1.5.39 server.version=1.4.12 diff --git a/shine-UI/js/app.js b/shine-UI/js/app.js index 7b93e921..bb1b2b17 100644 --- a/shine-UI/js/app.js +++ b/shine-UI/js/app.js @@ -1,4 +1,14 @@ -import { navigate, getRoute, PRE_AUTH_PAGES } from './router.js'; +import { + navigate, + getRoute, + parseRouteFromPath, + PRE_AUTH_PAGES, + getSwipeNavigationTarget, + syncTrackedRouteHistory, + rememberToolbarRoute, + resetRememberedToolbarRoutes, + resolveToolbarActive, +} from './router.js'; import { renderToolbar } from './components/toolbar.js'; import { captureClientError, setClientErrorSentNotifier, setClientErrorTransport } from './services/client-error-reporter.js'; import { initPwaInstallPromptHandling } from './services/pwa-install-service.js'; @@ -163,6 +173,14 @@ const SIGNED_DM_DECRYPT_CONTEXT_POLL_MS = 50; const UI_VERSION_PERIODIC_CHECK_MS = 5 * 60 * 1000; const CURRENT_BUILD_HASH = String(window.__SHINE_BUILD_HASH__ || '').trim(); const UI_BUILD_HASH_PATTERN = /window\.__SHINE_BUILD_HASH__\s*=\s*'([^']+)'/; +const KEEP_ALIVE_ROOTS = new Set(['messages-list', 'channels-list']); +const HORIZONTAL_SWIPE_MIN_DISTANCE_PX = 72; +const HORIZONTAL_SWIPE_MAX_VERTICAL_DRIFT_PX = 56; +const HORIZONTAL_SWIPE_DOMINANCE_RATIO = 1.35; +const HORIZONTAL_SWIPE_LOCK_DISTANCE_PX = 14; +const HORIZONTAL_SWIPE_COMMIT_RATIO = 0.32; +const HORIZONTAL_SWIPE_PREVIEW_EDGE_PX = 18; +const HORIZONTAL_SWIPE_MAX_DURATION_MS = 260; let currentCleanup = null; let pingIntervalId = null; @@ -184,6 +202,9 @@ let hiddenDmAudioUnlocked = false; let initialConnectionCompleted = false; let orientationLockInFlight = false; let currentChromeCleanup = null; +let currentMountState = null; +let activeSwipePreview = null; +const keepAliveEntries = new Map(); const CALL_PUSH_PENDING_ACTION_KEY = 'shine-ui-call-push-pending-action-v1'; const GUEST_ALLOWED_PAGES = new Set([ 'start-view', @@ -283,6 +304,13 @@ function createChromeController(showAppChrome) { composerNode = null; apply(); }, + suspend() { + clearSlot(topbarEl, '--topbar-height'); + clearSlot(composerEl, '--composer-height'); + }, + resume() { + apply(); + }, dispose() { disposed = true; clearSlot(topbarEl, '--topbar-height'); @@ -291,6 +319,403 @@ function createChromeController(showAppChrome) { }; } +function destroyMountState(entry) { + if (!entry) return; + if (entry.destroyed) return; + entry.destroyed = true; + try { + if (typeof entry.cleanup === 'function') { + entry.cleanup(); + } + } finally { + entry.chrome?.dispose?.(); + } +} + +function clearKeepAliveEntries() { + teardownSwipePreview({ cancelOnly: true }); + keepAliveEntries.forEach((entry) => destroyMountState(entry)); + keepAliveEntries.clear(); + resetRememberedToolbarRoutes(); + currentMountState = null; + currentCleanup = null; + currentChromeCleanup = null; +} + +function detachMountedScreen(entry) { + if (!entry) return; + entry.chrome?.suspend?.(); + if (entry.screen?.parentNode === screenEl) { + screenEl.removeChild(entry.screen); + } else { + screenEl.innerHTML = ''; + } +} + +function mountExistingEntry(entry, { showAppChrome, pageId }) { + teardownSwipePreview({ cancelOnly: true }); + screenEl.innerHTML = ''; + screenEl.append(entry.screen); + entry.chrome?.resume?.(); + currentMountState = entry; + currentCleanup = typeof entry.cleanup === 'function' ? entry.cleanup : null; + currentChromeCleanup = () => entry.chrome?.dispose?.(); + screenEl.classList.toggle('no-app-chrome', !showAppChrome); + screenEl.classList.toggle('preauth-flow', PRE_AUTH_PAGES.includes(pageId)); +} + +function cloneScreenForSwipe(screen) { + const clone = screen?.cloneNode?.(true); + if (!(clone instanceof Node)) return null; + return clone; +} + +function sanitizeSwipeClone(node) { + if (!(node instanceof Element)) return; + node.removeAttribute('id'); + node.querySelectorAll('[id]').forEach((el) => el.removeAttribute('id')); +} + +function cloneSlotChildForSwipe(slotEl) { + const child = slotEl?.firstElementChild; + if (!(child instanceof Node)) return null; + const clone = child.cloneNode(true); + if (clone instanceof Element) sanitizeSwipeClone(clone); + return clone; +} + +function createSwipeFrameSlot(className, contentNode = null) { + const slot = document.createElement('div'); + slot.className = className; + if (contentNode instanceof Node) { + slot.append(contentNode); + slot.hidden = false; + } else { + slot.hidden = true; + } + return slot; +} + +function buildSwipePane({ + topbarNode = null, + screenNode = null, + composerNode = null, + screenClassName = '', + screenScrollTop = 0, +}) { + const pane = document.createElement('div'); + pane.className = 'screen-swipe-pane'; + + const topbarSlot = createSwipeFrameSlot('topbar-slot screen-swipe-slot screen-swipe-slot--topbar', topbarNode); + const screenSlot = document.createElement('main'); + screenSlot.className = `${screenClassName || 'screen-content'} screen-swipe-slot screen-swipe-slot--content`; + if (screenNode instanceof Node) { + screenSlot.append(screenNode); + } + const composerSlot = createSwipeFrameSlot('composer-slot screen-swipe-slot screen-swipe-slot--composer', composerNode); + + pane.append(topbarSlot, screenSlot, composerSlot); + requestAnimationFrame(() => { + screenSlot.scrollTop = Math.max(0, Number(screenScrollTop || 0)); + }); + return pane; +} + +function createSwipePreviewTarget(targetPath) { + const route = parseRouteFromPath(`/${String(targetPath || '').replace(/^\/+/, '')}`); + const pageId = route.pageId || (state.session.isAuthorized ? 'messages-list' : 'start-view'); + const page = routes[pageId] || routes['start-view']; + const rootPageId = resolveToolbarActive(pageId); + const cachedEntry = keepAliveEntries.get(rootPageId); + if (cachedEntry && cachedEntry.routePath === `/${String(targetPath || '').replace(/^\/+/, '')}`) { + return { + screen: cloneScreenForSwipe(cachedEntry.screen), + cleanup: null, + }; + } + + let previewTopbarNode = null; + let previewComposerNode = null; + const chrome = { + setTopbar(node = null) { + previewTopbarNode = node instanceof Node ? node : null; + }, + setComposer(node = null) { + previewComposerNode = node instanceof Node ? node : null; + }, + clear() { + previewTopbarNode = null; + previewComposerNode = null; + }, + suspend() {}, + resume() {}, + dispose() {}, + }; + const screen = page.render({ route, navigate, chrome }); + if (!(screen instanceof Node)) { + chrome.dispose(); + throw new Error('Swipe preview render returned invalid node'); + } + const cleanup = typeof screen.cleanup === 'function' ? screen.cleanup : null; + return { + screen, + topbarNode: previewTopbarNode, + composerNode: previewComposerNode, + cleanup: () => { + try { + if (typeof cleanup === 'function') cleanup(); + } finally { + chrome.dispose(); + } + }, + }; +} + +function applySwipePreviewOffset(session, revealPx) { + if (!session) return; + const width = Math.max(1, session.width); + const clamped = Math.max(0, Math.min(width, revealPx)); + session.revealPx = clamped; + + const currentX = session.direction === 'left' ? -clamped : clamped; + const targetX = session.direction === 'left' + ? width - clamped + HORIZONTAL_SWIPE_PREVIEW_EDGE_PX + : -width + clamped - HORIZONTAL_SWIPE_PREVIEW_EDGE_PX; + const dividerX = session.direction === 'left' + ? width - clamped + : clamped; + + session.currentPane.style.transform = `translate3d(${currentX}px, 0, 0)`; + session.targetPane.style.transform = `translate3d(${targetX}px, 0, 0)`; + session.divider.style.transform = `translate3d(${dividerX}px, 0, 0)`; + + const overlayOpacity = Math.max(0.08, Math.min(0.24, (clamped / width) * 0.24)); + session.overlay.style.setProperty('--swipe-overlay-opacity', overlayOpacity.toFixed(3)); +} + +function teardownSwipePreview({ cancelOnly = false } = {}) { + const session = activeSwipePreview; + if (!session) return; + activeSwipePreview = null; + + appShellEl?.classList.remove('app-shell--swiping'); + topbarEl?.classList.remove('topbar-slot--swipe-hidden'); + screenEl.classList.remove('screen-content--swipe-hidden'); + composerEl?.classList.remove('composer-slot--swipe-hidden'); + session.overlay.remove(); + if (typeof session.targetCleanup === 'function') { + session.targetCleanup(); + } + if (!cancelOnly) { + session.onComplete?.(); + } +} + +function animateSwipePreviewTo(session, revealPx, { complete = false } = {}) { + const width = Math.max(1, session.width); + const currentReveal = Number(session.revealPx || 0); + const remaining = Math.abs(revealPx - currentReveal); + const duration = Math.max(140, Math.min(HORIZONTAL_SWIPE_MAX_DURATION_MS, Math.round((remaining / width) * HORIZONTAL_SWIPE_MAX_DURATION_MS))); + + [session.currentPane, session.targetPane, session.divider].forEach((node) => { + node.style.transition = `transform ${duration}ms cubic-bezier(0.22, 1, 0.36, 1)`; + }); + session.overlay.style.transition = `opacity ${duration}ms ease`; + + requestAnimationFrame(() => { + applySwipePreviewOffset(session, revealPx); + if (!complete) { + session.overlay.style.opacity = '0'; + } + }); + + window.setTimeout(() => { + teardownSwipePreview({ cancelOnly: !complete }); + }, duration + 24); +} + +function beginSwipePreview(direction, targetPath) { + if (!currentMountState?.screen || activeSwipePreview) return null; + const currentTopbarClone = cloneSlotChildForSwipe(topbarEl); + const currentScreenClone = cloneScreenForSwipe(currentMountState.screen); + const currentComposerClone = cloneSlotChildForSwipe(composerEl); + if (!(currentScreenClone instanceof Node)) return null; + if (currentTopbarClone instanceof Element) sanitizeSwipeClone(currentTopbarClone); + if (currentScreenClone instanceof Element) sanitizeSwipeClone(currentScreenClone); + if (currentComposerClone instanceof Element) sanitizeSwipeClone(currentComposerClone); + + const targetPreview = createSwipePreviewTarget(targetPath); + if (!(targetPreview?.screen instanceof Node)) { + targetPreview?.cleanup?.(); + return null; + } + if (targetPreview.topbarNode instanceof Element) sanitizeSwipeClone(targetPreview.topbarNode); + if (targetPreview.screen instanceof Element) sanitizeSwipeClone(targetPreview.screen); + if (targetPreview.composerNode instanceof Element) sanitizeSwipeClone(targetPreview.composerNode); + + const overlay = document.createElement('div'); + overlay.className = 'screen-swipe-overlay'; + + const currentPane = buildSwipePane({ + topbarNode: currentTopbarClone, + screenNode: currentScreenClone, + composerNode: currentComposerClone, + screenClassName: screenEl.className, + screenScrollTop: screenEl.scrollTop, + }); + currentPane.classList.add('screen-swipe-pane--current'); + + const targetPane = buildSwipePane({ + topbarNode: targetPreview.topbarNode || null, + screenNode: targetPreview.screen, + composerNode: targetPreview.composerNode || null, + screenClassName: screenEl.className, + screenScrollTop: 0, + }); + targetPane.classList.add('screen-swipe-pane--target', `screen-swipe-pane--${direction}`); + + const divider = document.createElement('div'); + divider.className = 'screen-swipe-divider'; + + overlay.append(currentPane, targetPane, divider); + appShellEl.append(overlay); + appShellEl?.classList.add('app-shell--swiping'); + topbarEl?.classList.add('topbar-slot--swipe-hidden'); + screenEl.classList.add('screen-content--swipe-hidden'); + composerEl?.classList.add('composer-slot--swipe-hidden'); + + const session = { + direction, + targetPath, + width: screenEl.clientWidth || 1, + overlay, + currentPane, + targetPane, + divider, + targetCleanup: targetPreview.cleanup || null, + revealPx: 0, + onComplete: () => navigate(targetPath), + }; + activeSwipePreview = session; + applySwipePreviewOffset(session, 0); + return session; +} + +function installHorizontalTabSwipe() { + if (!screenEl) return; + + let touchStartX = 0; + let touchStartY = 0; + let touchActive = false; + let touchBlocked = false; + let swipeLocked = false; + let swipeDirection = ''; + let swipeTargetPath = ''; + let swipeSession = null; + + const reset = () => { + touchActive = false; + touchBlocked = false; + swipeLocked = false; + swipeDirection = ''; + swipeTargetPath = ''; + swipeSession = null; + touchStartX = 0; + touchStartY = 0; + }; + + screenEl.addEventListener('touchstart', (event) => { + if (event.touches.length !== 1) { + reset(); + return; + } + const target = event.target instanceof Element ? event.target : null; + touchBlocked = Boolean(target?.closest('input, textarea, select, button, a, [contenteditable="true"]')); + touchActive = !touchBlocked; + touchStartX = Number(event.touches[0]?.clientX || 0); + touchStartY = Number(event.touches[0]?.clientY || 0); + }, { passive: true }); + + screenEl.addEventListener('touchmove', (event) => { + if (!touchActive || touchBlocked) return; + const touch = event.touches?.[0]; + const deltaX = Number(touch?.clientX || 0) - touchStartX; + const deltaY = Number(touch?.clientY || 0) - touchStartY; + const absX = Math.abs(deltaX); + const absY = Math.abs(deltaY); + + if (!swipeLocked) { + if (absX < HORIZONTAL_SWIPE_LOCK_DISTANCE_PX && absY < HORIZONTAL_SWIPE_LOCK_DISTANCE_PX) return; + if (absX <= absY * 1.05) { + touchBlocked = true; + return; + } + const currentPageId = getRoute().pageId || ''; + swipeDirection = deltaX < 0 ? 'left' : 'right'; + swipeTargetPath = getSwipeNavigationTarget(currentPageId, swipeDirection); + if (!swipeTargetPath) { + touchBlocked = true; + return; + } + swipeSession = beginSwipePreview(swipeDirection, swipeTargetPath); + if (!swipeSession) { + touchBlocked = true; + return; + } + swipeLocked = true; + } + + if (!swipeLocked || !swipeSession) return; + event.preventDefault(); + + const revealPx = swipeDirection === 'left' + ? Math.max(0, -deltaX) + : Math.max(0, deltaX); + applySwipePreviewOffset(swipeSession, revealPx); + }, { passive: false }); + + screenEl.addEventListener('touchcancel', reset, { passive: true }); + + screenEl.addEventListener('touchend', (event) => { + if (!touchActive || touchBlocked) { + if (swipeSession) { + animateSwipePreviewTo(swipeSession, 0, { complete: false }); + } + reset(); + return; + } + + const touch = event.changedTouches?.[0]; + const endX = Number(touch?.clientX || 0); + const endY = Number(touch?.clientY || 0); + const deltaX = endX - touchStartX; + const deltaY = endY - touchStartY; + const absX = Math.abs(deltaX); + const absY = Math.abs(deltaY); + const session = swipeSession; + const wasLocked = swipeLocked; + reset(); + + if (wasLocked && session) { + event.preventDefault(); + const revealRatio = Number(session.revealPx || 0) / Math.max(1, session.width); + const shouldCommit = revealRatio >= HORIZONTAL_SWIPE_COMMIT_RATIO; + animateSwipePreviewTo(session, shouldCommit ? session.width : 0, { complete: shouldCommit }); + return; + } + + if (absX < HORIZONTAL_SWIPE_MIN_DISTANCE_PX) return; + if (absY > HORIZONTAL_SWIPE_MAX_VERTICAL_DRIFT_PX) return; + if (absX <= absY * HORIZONTAL_SWIPE_DOMINANCE_RATIO) return; + + const currentPageId = getRoute().pageId || ''; + const direction = deltaX < 0 ? 'left' : 'right'; + const target = getSwipeNavigationTarget(currentPageId, direction); + if (!target) return; + navigate(target); + }, { passive: true }); +} + async function unlockHiddenDmAudio() { try { const Ctx = window.AudioContext || window.webkitAudioContext; @@ -971,6 +1396,7 @@ function renderPageFailureFallback(pageId, error) { }); screenEl.innerHTML = ''; + teardownSwipePreview({ cancelOnly: true }); const wrap = document.createElement('section'); wrap.className = 'stack'; @@ -1007,6 +1433,8 @@ function renderPageFailureFallback(pageId, error) { } function renderApp() { + teardownSwipePreview({ cancelOnly: true }); + syncTrackedRouteHistory(window.location.pathname || '/'); const route = getRoute(); const pageId = route.pageId || (state.session.isAuthorized ? 'messages-list' : 'start-view'); @@ -1021,19 +1449,61 @@ function renderApp() { } const page = routes[pageId] || routes['start-view']; + const showAppChrome = page.pageMeta?.showAppChrome !== false; + const rootPageId = resolveToolbarActive(pageId); + const keepAliveEligible = showAppChrome && KEEP_ALIVE_ROOTS.has(rootPageId); + const currentRoutePath = String(window.location.pathname || '/'); - if (typeof currentCleanup === 'function') { - currentCleanup(); - currentCleanup = null; + rememberToolbarRoute(pageId); + + if (currentMountState) { + const shouldPreserveCurrent = currentMountState.keepAlive && currentMountState.rootPageId !== rootPageId; + if (shouldPreserveCurrent) { + currentMountState.routePath = currentMountState.routePath || currentRoutePath; + keepAliveEntries.set(currentMountState.rootPageId, currentMountState); + detachMountedScreen(currentMountState); + currentMountState = null; + currentCleanup = null; + currentChromeCleanup = null; + } else { + destroyMountState(currentMountState); + if (currentMountState.keepAlive) { + keepAliveEntries.delete(currentMountState.rootPageId); + } + currentMountState = null; + currentCleanup = null; + currentChromeCleanup = null; + } + } else { + if (typeof currentCleanup === 'function') { + currentCleanup(); + currentCleanup = null; + } + if (typeof currentChromeCleanup === 'function') { + currentChromeCleanup(); + currentChromeCleanup = null; + } } - if (typeof currentChromeCleanup === 'function') { - currentChromeCleanup(); - currentChromeCleanup = null; + + const cachedEntry = keepAliveEligible ? keepAliveEntries.get(rootPageId) : null; + if (cachedEntry && cachedEntry.routePath === currentRoutePath) { + mountExistingEntry(cachedEntry, { showAppChrome, pageId }); + toolbarEl.innerHTML = ''; + if (showAppChrome) { + toolbarEl.append(renderToolbar(page.pageMeta.id, navigate)); + } + toolbarHeightObserver?.sync?.(); + refreshConnectionUi(); + return; + } + + if (cachedEntry) { + destroyMountState(cachedEntry); + keepAliveEntries.delete(rootPageId); } try { screenEl.innerHTML = ''; - const showAppChrome = page.pageMeta?.showAppChrome !== false; const chrome = createChromeController(showAppChrome); currentChromeCleanup = () => chrome.dispose(); const screen = page.render({ route, navigate, chrome }); @@ -1043,6 +1513,19 @@ function renderApp() { screenEl.append(screen); currentCleanup = typeof screen.cleanup === 'function' ? screen.cleanup : null; + currentMountState = { + pageId, + rootPageId, + keepAlive: keepAliveEligible, + routePath: currentRoutePath, + screen, + cleanup: currentCleanup, + chrome, + destroyed: false, + }; + if (keepAliveEligible) { + keepAliveEntries.set(rootPageId, currentMountState); + } screenEl.classList.toggle('no-app-chrome', !showAppChrome); screenEl.classList.toggle('preauth-flow', PRE_AUTH_PAGES.includes(pageId)); @@ -1163,6 +1646,7 @@ async function init() { setSessionResetHandler(() => { sessionRuntimeStarted = false; startConnectionMonitor(); + clearKeepAliveEntries(); if (reconnectIntervalId) { window.clearInterval(reconnectIntervalId); reconnectIntervalId = null; @@ -1524,6 +2008,7 @@ async function init() { })(); window.addEventListener('popstate', renderApp); + installHorizontalTabSwipe(); document.addEventListener('pointerdown', () => { void unlockHiddenDmAudio(); }, { passive: true }); diff --git a/shine-UI/js/components/toolbar.js b/shine-UI/js/components/toolbar.js index 38f15286..3f75b495 100644 --- a/shine-UI/js/components/toolbar.js +++ b/shine-UI/js/components/toolbar.js @@ -1,4 +1,4 @@ -import { resolveToolbarActive } from '../router.js'; +import { getToolbarNavigationTarget, resolveToolbarActive } from '../router.js'; import { state } from '../state.js'; import { openAuthRequiredModal } from '../services/auth-required-modal.js'; @@ -33,7 +33,7 @@ function getTotalUnreadMessages() { function navigateWithGuestRules(pageId, navigate) { if (state.session.isAuthorized) { - navigate(pageId); + navigate(getToolbarNavigationTarget(pageId)); return; } if (pageId === 'messages-list') { @@ -57,7 +57,7 @@ function navigateWithGuestRules(pageId, navigate) { }); return; } - navigate(pageId); + navigate(getToolbarNavigationTarget(pageId)); } export function renderToolbar(currentPageId, navigate) { @@ -93,7 +93,7 @@ export function renderToolbar(currentPageId, navigate) { btn.append(badge); } if (item.pageId === 'channels-list') { - btn.addEventListener('click', () => navigate('channels-list')); + btn.addEventListener('click', () => navigate(getToolbarNavigationTarget('channels-list'))); } else { btn.addEventListener('click', () => navigateWithGuestRules(item.pageId, navigate)); } diff --git a/shine-UI/js/pages/channel-thread-view.js b/shine-UI/js/pages/channel-thread-view.js index 8d68578d..f8a1cd56 100644 --- a/shine-UI/js/pages/channel-thread-view.js +++ b/shine-UI/js/pages/channel-thread-view.js @@ -10,7 +10,7 @@ import { showToast, softHaptic, } from '../services/channels-ux.js'; -import { navigateBack } from '../router.js'; +import { getPreviousTrackedPath, parseRouteFromPath } from '../router.js'; import { renderUserAvatar } from '../components/avatar-image.js'; import { markArweaveAttachmentPlaced, openArweaveAttachmentManager } from '../components/arweave-attachment-manager.js'; import { @@ -332,6 +332,25 @@ function buildChannelRouteFromThread(selector, resolvedChannelLabel = '') { }); } +function resolveThreadBackRoute(selector, resolvedChannelLabel = '') { + return buildChannelRouteFromThread(selector, resolvedChannelLabel) || 'channels-list'; +} + +function resolveThreadPreviousInChannels(selector, resolvedChannelLabel = '') { + const previousPath = String(getPreviousTrackedPath() || '').trim(); + if (previousPath) { + const previousRoute = parseRouteFromPath(previousPath); + const previousPageId = String(previousRoute?.pageId || '').trim(); + if ( + previousPageId === 'channel-thread-view' + || previousPageId === 'channel-view' + ) { + return previousPath; + } + } + return resolveThreadBackRoute(selector, resolvedChannelLabel); +} + function buildTargetFromNode(node) { const blockchainName = String(node?.authorBlockchainName || '').trim(); const blockNumber = Number(node?.messageRef?.blockNumber); @@ -1118,6 +1137,7 @@ export function render({ navigate, route, chrome }) { const selector = parseThreadSelector(route); const channelDisplayName = resolveChannelDisplayName(selector?.channel); const routeKey = `${selector?.message?.blockchainName || ''}:${selector?.message?.blockNumber || ''}:${selector?.message?.blockHash || ''}`; + let activeResolvedChannelLabel = channelDisplayName; const screen = document.createElement('section'); screen.className = 'stack channels-screen channels-screen--thread'; @@ -1126,13 +1146,28 @@ export function render({ navigate, route, chrome }) { const header = renderHeader({ title: '', - leftAction: { label: '<', onClick: () => navigateBack() }, - rightActions: [{ label: 'Тред в канале: ...', onClick: () => {} }], + leftAction: { label: '<', onClick: () => navigate(resolveThreadPreviousInChannels(selector, activeResolvedChannelLabel)) }, + rightActions: [], }); - const threadHeaderButton = header.querySelector('.header-actions .icon-btn'); - if (threadHeaderButton) { - threadHeaderButton.classList.add('channel-header-route-btn'); + header.classList.add('channel-thread-topbar'); + const headerLeft = header.querySelector('.header-left'); + let threadHeaderButton = null; + if (headerLeft) { + const channelsListButton = document.createElement('button'); + channelsListButton.type = 'button'; + channelsListButton.className = 'icon-btn'; + channelsListButton.textContent = '↑'; + channelsListButton.title = 'К списку каналов'; + channelsListButton.setAttribute('aria-label', 'К списку каналов'); + channelsListButton.addEventListener('click', () => navigate('channels-list')); + headerLeft.append(channelsListButton); + + threadHeaderButton = document.createElement('button'); + threadHeaderButton.type = 'button'; + threadHeaderButton.className = 'icon-btn channel-header-route-btn'; + threadHeaderButton.textContent = 'Тред в канале: ...'; threadHeaderButton.disabled = true; + headerLeft.append(threadHeaderButton); } chrome?.setTopbar(header); @@ -1418,6 +1453,7 @@ export function render({ navigate, route, chrome }) { if (!resolvedChannelLabel && selector?.channel?.ownerBlockchainName && selector?.channel?.channelRootBlockNumber != null) { resolvedChannelLabel = await resolveChannelDisplayNameFromServer(selector.channel); } + activeResolvedChannelLabel = resolvedChannelLabel; const fallbackChannel = String(selector?.channel?.ownerBlockchainName || '').trim() || 'неизвестно'; const resolvedChannelTitle = resolvedChannelLabel || fallbackChannel; if (threadHeaderButton) { diff --git a/shine-UI/js/pages/channel-view.js b/shine-UI/js/pages/channel-view.js index 3ed0af61..9344210d 100644 --- a/shine-UI/js/pages/channel-view.js +++ b/shine-UI/js/pages/channel-view.js @@ -16,7 +16,6 @@ import { showToast, softHaptic, } from '../services/channels-ux.js'; -import { navigateBack } from '../router.js'; import { renderUserAvatar } from '../components/avatar-image.js'; import { markArweaveAttachmentPlaced, openArweaveAttachmentManager } from '../components/arweave-attachment-manager.js'; import { @@ -2036,7 +2035,7 @@ export function render({ navigate, route, chrome }) { const header = renderHeader({ title: '', - leftAction: { label: '<', onClick: () => navigateBack() }, + leftAction: { label: '<', onClick: () => navigate('channels-list') }, rightActions: [ { label: 'Канал: ...', className: 'channel-header-route-btn', onClick: () => {} }, { label: 'Оглавление', className: 'channel-header-entrypoint-btn', onClick: () => {} }, diff --git a/shine-UI/js/pages/notifications-view.js b/shine-UI/js/pages/notifications-view.js index 3aed5941..27426c7e 100644 --- a/shine-UI/js/pages/notifications-view.js +++ b/shine-UI/js/pages/notifications-view.js @@ -26,11 +26,10 @@ function renderList(container) { container.append(card); } -export function render() { +export function render({ chrome } = {}) { const screen = document.createElement('section'); screen.className = 'stack notifications-screen'; - - screen.append(renderHeader({ title: 'Уведомления' })); + chrome?.setTopbar(renderHeader({ title: 'Уведомления' })); const tabs = document.createElement('div'); tabs.className = 'tabs'; diff --git a/shine-UI/js/router.js b/shine-UI/js/router.js index e251792b..0d0540e0 100644 --- a/shine-UI/js/router.js +++ b/shine-UI/js/router.js @@ -1,6 +1,10 @@ import { parseShineRouteParts } from './services/shine-routes.js'; const ROOT_PAGES = ['messages-list', 'channels-list', 'network-view', 'notifications-view', 'profile-view']; +const SWIPEABLE_ROOT_PAGES = ['messages-list', 'channels-list', 'notifications-view', 'profile-view']; +const lastVisitedRouteByRoot = new Map(); +let previousTrackedPath = ''; +let currentTrackedPath = String(window.location.pathname || '').trim() || '/'; const PRETTY_PATHS = new Map([ ['start-view', 'start'], ['entry-settings-view', 'entry-settings'], @@ -68,8 +72,8 @@ export const PRE_AUTH_PAGES = [ 'key-storage-view', ]; -export function getRoute() { - const currentPath = String(window.location.pathname || '').trim(); +export function parseRouteFromPath(pathname = '') { + const currentPath = String(pathname || '').trim(); const raw = currentPath .replace(/^\/+/, '') .replace(/^index\.html$/i, '') @@ -344,15 +348,29 @@ export function getRoute() { return { pageId, params: {} }; } +export function getRoute() { + return parseRouteFromPath(window.location.pathname || ''); +} + export function navigate(path) { const cleanPath = toPrettyPath(path); const nextPath = cleanPath ? `/${cleanPath}` : '/'; + if (window.location.pathname !== nextPath) { + previousTrackedPath = currentTrackedPath; + currentTrackedPath = nextPath; + } if (window.location.pathname !== nextPath) { window.history.pushState({}, '', nextPath); } window.dispatchEvent(new PopStateEvent('popstate')); } +function normalizeCurrentPath() { + return String(window.location.pathname || '') + .replace(/^\/+/, '') + .replace(/\/+$/, ''); +} + export function toPrettyPath(path) { const raw = String(path || '').replace(/^\/+/, '').replace(/\/+$/, ''); if (!raw) return ''; @@ -397,3 +415,45 @@ export function resolveToolbarActive(pageId) { if (pageId === 'user') return 'messages-list'; return 'profile-view'; } + +export function rememberToolbarRoute(pageId, explicitPath = '') { + const rootPageId = resolveToolbarActive(pageId); + if (!ROOT_PAGES.includes(rootPageId)) return; + const cleanPath = String(explicitPath || normalizeCurrentPath()).trim(); + lastVisitedRouteByRoot.set(rootPageId, cleanPath || toPrettyPath(rootPageId) || rootPageId); +} + +export function getToolbarNavigationTarget(pageId) { + const rootPageId = resolveToolbarActive(pageId); + return lastVisitedRouteByRoot.get(rootPageId) || toPrettyPath(rootPageId) || rootPageId; +} + +export function resetRememberedToolbarRoutes() { + lastVisitedRouteByRoot.clear(); + previousTrackedPath = ''; + currentTrackedPath = String(window.location.pathname || '').trim() || '/'; +} + +export function getSwipeNavigationTarget(currentPageId, direction) { + const rootPageId = resolveToolbarActive(currentPageId); + const index = SWIPEABLE_ROOT_PAGES.indexOf(rootPageId); + if (index === -1) return ''; + + const step = direction === 'left' ? 1 : direction === 'right' ? -1 : 0; + if (!step) return ''; + + const nextIndex = index + step; + if (nextIndex < 0 || nextIndex >= SWIPEABLE_ROOT_PAGES.length) return ''; + return getToolbarNavigationTarget(SWIPEABLE_ROOT_PAGES[nextIndex]); +} + +export function syncTrackedRouteHistory(pathname = '') { + const nextPath = String(pathname || '').trim() || '/'; + if (nextPath === currentTrackedPath) return; + previousTrackedPath = currentTrackedPath; + currentTrackedPath = nextPath; +} + +export function getPreviousTrackedPath() { + return previousTrackedPath; +} diff --git a/shine-UI/styles/components.css b/shine-UI/styles/components.css index 8452c55b..4d85613a 100644 --- a/shine-UI/styles/components.css +++ b/shine-UI/styles/components.css @@ -17,6 +17,8 @@ .topbar-slot .dm-head, .topbar-slot .channels-top-bar { margin-bottom: 0; + min-height: calc(68px + env(safe-area-inset-top)); + box-sizing: border-box; border-radius: 18px; background: rgba(14, 21, 35, 0.92); border: 1px solid rgba(212, 175, 55, 0.18); @@ -30,10 +32,22 @@ .topbar-slot .dm-head, .topbar-slot .channels-top-bar { + min-height: calc(68px + env(safe-area-inset-top)); padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 10px; } +.topbar-slot .dm-head { + position: relative; + top: auto; +} + +.topbar-slot .page-header, +.topbar-slot .dm-head, +.topbar-slot .channels-top-bar { + align-items: center; +} + .app-topbar-shell .page-title { flex: 1 1 auto; text-align: center; @@ -5759,6 +5773,25 @@ textarea.input { font-weight: 700; } +.channels-screen--thread .page-header.channel-thread-topbar { + display: flex; + align-items: center; + gap: 8px; +} + +.channels-screen--thread .page-header.channel-thread-topbar .page-title, +.channels-screen--thread .page-header.channel-thread-topbar .header-actions { + display: none; +} + +.channels-screen--thread .page-header.channel-thread-topbar .header-left { + min-width: 0; + width: 100%; + flex: 1 1 auto; + gap: 8px; + flex-wrap: nowrap; +} + .channels-screen--channel .page-header .icon-btn, .channels-screen--thread .page-header .icon-btn { border: none; @@ -5768,6 +5801,11 @@ textarea.input { transform: translateY(-40%); } +.channels-screen--thread .page-header.channel-thread-topbar .icon-btn { + transform: none; + flex: 0 0 auto; +} + .channels-screen--channel .page-header .channel-header-route-btn, .channels-screen--thread .page-header .channel-header-route-btn { border: 1px solid rgba(146, 173, 229, 0.38); @@ -5775,6 +5813,15 @@ textarea.input { color: #d9e6ff; } +.channels-screen--thread .page-header.channel-thread-topbar .channel-header-route-btn { + min-width: 0; + flex: 1 1 auto; + justify-content: flex-start; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .channels-screen--channel .page-header .channel-header-entrypoint-btn { border: 1px solid rgba(224, 190, 117, 0.38); background: linear-gradient(180deg, rgba(57, 74, 119, 0.34), rgba(18, 29, 54, 0.34)); diff --git a/shine-UI/styles/layout.css b/shine-UI/styles/layout.css index 9f33842b..921603f0 100644 --- a/shine-UI/styles/layout.css +++ b/shine-UI/styles/layout.css @@ -59,6 +59,124 @@ body::before { padding: 14px 14px 24px; } +.screen-swipe-overlay { + --swipe-overlay-opacity: 0.12; + position: absolute; + top: var(--call-minimized-bar-height, 0px); + left: 0; + right: 0; + bottom: calc(var(--toolbar-height, 78px) + env(safe-area-inset-bottom)); + z-index: 8; + overflow: hidden; + pointer-events: none; + opacity: 1; +} + +.screen-swipe-overlay::before { + content: ''; + position: absolute; + inset: 0; + background: + linear-gradient(180deg, rgba(5, 10, 20, 0.06) 0%, rgba(5, 10, 20, 0.16) 100%), + radial-gradient(circle at center, rgba(89, 165, 255, 0.06) 0%, transparent 70%); + opacity: var(--swipe-overlay-opacity, 0.12); +} + +.screen-swipe-pane { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + overflow: hidden; + backface-visibility: hidden; + will-change: transform; +} + +.screen-swipe-pane--current { + left: 0; + z-index: 1; +} + +.screen-swipe-pane--target { + left: 0; + z-index: 2; + filter: saturate(1.03); +} + +.screen-swipe-slot { + position: absolute; + left: 0; + right: 0; +} + +.screen-swipe-slot--topbar { + top: 0; + padding: 0 12px; + pointer-events: none; +} + +.screen-swipe-slot--topbar > * { + pointer-events: none; +} + +.screen-swipe-slot--content { + top: calc(var(--topbar-height, 0px)); + bottom: var(--composer-height, 0px); + overflow-y: auto; + padding: 14px 14px 24px; +} + +.screen-swipe-slot--composer { + bottom: 0; + padding: 0 12px 8px; + pointer-events: none; +} + +.screen-swipe-slot--composer > * { + pointer-events: none; +} + +.screen-swipe-pane--target::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(180deg, rgba(8, 14, 28, 0.05) 0%, rgba(8, 14, 28, 0.12) 100%); + pointer-events: none; +} + +.screen-swipe-pane--left { + box-shadow: -24px 0 34px rgba(3, 7, 18, 0.34); +} + +.screen-swipe-pane--right { + box-shadow: 24px 0 34px rgba(3, 7, 18, 0.34); +} + +.screen-swipe-divider { + position: absolute; + top: 0; + bottom: 0; + left: -1px; + width: 2px; + z-index: 3; + background: + linear-gradient(180deg, rgba(248, 251, 255, 0.68) 0%, rgba(137, 186, 255, 0.52) 48%, rgba(53, 90, 144, 0.34) 100%); + box-shadow: + 0 0 0 1px rgba(14, 24, 42, 0.08), + 0 0 18px rgba(80, 154, 255, 0.22); + pointer-events: none; +} + +.app-shell--swiping .toolbar-slot { + pointer-events: none; +} + +.topbar-slot--swipe-hidden, +.screen-content--swipe-hidden, +.composer-slot--swipe-hidden { + opacity: 0; +} + .screen-content.no-app-chrome { top: var(--call-minimized-bar-height, 0px); bottom: 0;