UI: свайпы вкладок и навигация тредов

2026-08-12 19:37:29 +04:00
parent b4b23afc10
commit e8a4713f6e
9 changed files with 770 additions and 26 deletions
@@ -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));
@@ -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;