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

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));