meta-sovereign 0.53.2 → 0.53.3

package/js/src/web/app.css

@@ -514,6 +514,7 @@ main[data-view='chat'] > .web-mode-banner {
   font-size: 0.65rem;
 }
 .chat-main {
+  container: conversation / inline-size;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -535,6 +536,52 @@ main[data-view='chat'] > .web-mode-banner {
   flex: 1 1 auto;
   min-width: 0;
 }
+.chat-header-actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: var(--control-gap);
+}
+.chat-header-title > .meta,
+.chat-title-row > strong {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+@container conversation (max-width: 650px) {
+  .chat-header {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    min-height: 6.5rem;
+    gap: var(--control-gap);
+  }
+  .chat-header-actions {
+    grid-column: 1 / -1;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+  .chat-header-actions .chat-automation-label {
+    display: none;
+  }
+  .chat-header-actions .chat-menu-toggle {
+    padding-inline: 0.5rem;
+  }
+  .person-panel {
+    top: 6.5rem;
+  }
+}
+.chat-header {
+  flex-shrink: 0;
+}
+@media (max-width: 720px) {
+  .chat-header {
+    grid-template-columns: auto auto minmax(0, 1fr);
+  }
+  .chat-embedded .chat-header {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+}
 .typing {
   color: var(--chat-accent);
   font-style: italic;
@@ -632,6 +679,9 @@ main[data-view='chat'] > .web-mode-banner {
   border-bottom: 1px solid var(--border);
 }
 .person-panel-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--control-gap);
   flex: 1;
   overflow-y: auto;
   padding: 0.6rem 1rem 1rem;
@@ -4199,6 +4249,100 @@ button.primary .recommended-tag {
   margin: 0;
   border-width: 2px;
 }
+/* Loading belongs to the media's reserved box, including before URL resolution. */
+.media-loading {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--control-gap);
+  color: #fff;
+  pointer-events: none;
+  text-align: center;
+}
+.media-loading > .spinner,
+.media-load-error {
+  box-sizing: content-box;
+  padding: 0.5rem;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 55%);
+}
+.media-loading.is-failed button {
+  pointer-events: auto;
+}
+.media-loading.is-small {
+  position: static;
+  display: inline-flex;
+}
+.media-loading.is-small > .spinner {
+  padding: 0;
+  background: transparent;
+}
+img[data-media-ready='false'] {
+  opacity: 0;
+}
+.loading-image,
+.loading-player {
+  position: relative;
+  display: inline-grid;
+  max-width: 100%;
+  min-width: min(10rem, 100%);
+  min-height: 6rem;
+  overflow: hidden;
+}
+.loading-image > img {
+  grid-area: 1 / 1;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.loading-image.media-poster {
+  position: absolute;
+  min-width: 0;
+  min-height: 0;
+}
+.loading-image.is-compact {
+  min-width: 0;
+  min-height: 0;
+}
+.loading-image.is-compact .spinner,
+.peer-avatar .media-loading .spinner {
+  width: 1rem;
+  height: 1rem;
+  padding: 0.125rem;
+}
+.loading-image.media-poster.blurred {
+  filter: none;
+  transform: none;
+}
+.loading-image.media-poster.blurred > img {
+  filter: blur(10px);
+}
+.loading-player.loading-audio {
+  min-height: 3.5rem;
+}
+.media-poster .media-loading {
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: 0.5rem;
+}
+.media-poster .media-loading > .spinner {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+:is(.bubble-video, .bubble-round):has(> video) > .media-poster {
+  display: none;
+}
+.bubble-sticker {
+  position: relative;
+}
+.bubble-sticker .loading-image {
+  width: 100%;
+  height: 100%;
+}
 @keyframes media-spin {
   to {
     transform: rotate(360deg);
@@ -4238,10 +4382,11 @@ button.primary .recommended-tag {
   align-items: flex-end;
   gap: 2px;
   height: 1.4rem;
+  overflow: hidden;
 }
 .audio-wave i {
   flex: 1;
-  min-width: 2px;
+  min-width: 0;
   border-radius: 2px;
   background: currentColor;
   opacity: 0.35;
@@ -4640,9 +4785,20 @@ button.primary .recommended-tag {
   flex: 1 1 auto;
   align-items: center;
   justify-content: center;
-  min-height: 60vh;
+  min-height: 12rem;
   animation: loading-appear 0.25s ease-out 0.2s both;
 }
+/* A page loader uses the whole available view; pane loaders use their pane. */
+main:has(> .page-loading) {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100dvh - var(--topbar-h));
+}
+.app-shell-compact main:has(> .page-loading) {
+  min-height: calc(
+    100dvh - var(--topbar-h) - var(--bottom-nav-h) - var(--safe-bottom)
+  );
+}
 @keyframes loading-appear {
   from {
     opacity: 0;
@@ -6121,7 +6277,35 @@ button[aria-busy='true']::before {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: 0.25rem;
+  gap: var(--control-gap);
+}
+.person-panel-body > * {
+  flex-shrink: 0;
+  min-width: 0;
+}
+.person-panel-body > :is(.person-section, .admin-actions) {
+  margin-block: 0;
+}
+.person-panel-body > .person-section > button {
+  width: 100%;
+}
+.person-panel-body > :is(button, a.button),
+.person-panel-body .peer-actions > button,
+.person-panel-body .peer-action {
+  width: 100%;
+}
+.person-panel-body .contact-extras,
+.person-panel-body .contact-photo,
+.person-panel-body .contact-birthday,
+.person-panel-body .contact-note {
+  gap: var(--control-gap);
+}
+.person-panel-body :is(.contact-photo, .contact-birthday, .contact-note) {
+  flex-direction: column;
+  align-items: stretch;
+}
+.telegram-open-hint {
+  margin: var(--control-gap) 0 0;
 }
 .peer-action,
 .peer-reason {
@@ -8670,6 +8854,16 @@ span.bubble-effect {
   background: var(--bg-elev);
   pointer-events: none;
 }
+.web-app-loading.is-failed {
+  flex-direction: column;
+  gap: var(--control-gap);
+  padding: 1.25rem;
+  text-align: center;
+  pointer-events: auto;
+}
+.web-app-loading.is-failed .row {
+  justify-content: center;
+}
 .web-app-spinner {
   display: inline-block;
   width: 1.4rem;
@@ -12932,8 +13126,28 @@ audio.remote-player {
   scrollbar-width: thin;
 }
 .calls-content {
+  display: flex;
+  flex-direction: column;
+  min-height: min(56vh, 460px);
+  gap: var(--control-gap);
+}
+.calls-state {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
   min-height: 12rem;
 }
+.person-panel-body
+  :is(
+    .admin-actions,
+    .peer-actions,
+    .contact-photo,
+    .contact-note,
+    .contact-birthday
+  ) {
+  gap: var(--control-gap);
+}
 .my-profile-btn {
   display: inline-flex;
   align-items: center;
@@ -12975,7 +13189,9 @@ audio.remote-player {
   color: #fff;
 }
 :root[data-theme='dark'][data-skin='t3'] .composer-send,
-:root[data-theme='dark'][data-skin='t3'] button.primary {
+:root[data-theme='dark'][data-skin='t3'] button.primary,
+:root[data-theme='dark'][data-skin='t3'] .audio-play,
+:root[data-theme='dark'][data-skin='t3'] .reader-tab.active {
   background: #2c2d30;
   color: #fff;
 }
@@ -13032,7 +13248,12 @@ main[data-view='operator']:has(> .operator-workspace) {
   display: none;
 }
 .operator-empty {
-  margin: auto;
+  display: flex;
+  flex: 1;
+  min-height: 12rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   text-align: center;
 }
 .nav-icon {
@@ -13119,3 +13340,10 @@ main[data-view='operator']:has(> .operator-workspace) {
 :root[data-theme='dark'][data-skin='t3'] .bubble-check.is-checked {
   color: #000;
 }
+
+.app-start-loading {
+  display: flex;
+  min-height: 100dvh;
+  align-items: stretch;
+  justify-content: center;
+}

package/js/src/web/app.js

@@ -2,13 +2,7 @@
 // ./dom.js keeps the offline-first storage, discovery, WebRTC sync,
 // and server fallback contracts stable.
 
-import React, {
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { api } from './dom.js';
 import { installClientLog } from './client-log.js';
@@ -42,7 +36,9 @@ import { AddthemeHost, useApplyCloudTheme } from './cloud-themes.js';
 import { ContactLinkHost } from './contact-links.js';
 import { AppNotifications } from './app-notify.js';
 import { LockScreen, useLocalLock } from './passcode.js';
+import { useAppNavigation } from './app-navigation.js';
 import { useNavigationCounts } from './navigation-counts.js';
+import { PageLoading } from './spinner.js';
 
 // Browser e2e tests reach the booted api here: in the bundled build the
 // source modules are not each served, so `import('/dom.js')` fails.
@@ -95,7 +91,8 @@ const ViewNotifications = ({ active, t, onOpen }) =>
     : el(AppNotifications, { api, t, onOpen });
 
 const App = () => {
-  const [active, setActive] = useState('chat');
+  const [route, navigate] = useAppNavigation();
+  const active = route.view;
   const counts = useNavigationCounts(api, active);
   const online = useOnlineMode();
   useApplyAppearance();
@@ -126,40 +123,12 @@ const App = () => {
     }
   }, [connected]);
 
-  // Listen for cross-component "switch to view N and scroll to anchor"
-  // events fired by the per-section "Connect first" CTAs (R-O7).
-  useEffect(() => {
-    const onNavigate = (event) => {
-      const detail = event.detail ?? {};
-      if (typeof detail.view === 'string') {
-        setActive(detail.view);
-      }
-      if (typeof detail.anchor === 'string') {
-        // Update the URL hash so the Connections view can open the
-        // matching `id="conn-{provider}"` detail on first paint.
-        if (globalThis.location) {
-          globalThis.location.hash = detail.anchor;
-        }
-      }
-    };
-    globalThis.addEventListener('meta-sovereign:navigate', onNavigate);
-    return () =>
-      globalThis.removeEventListener('meta-sovereign:navigate', onNavigate);
-  }, []);
   const openTutorial = () => {
     tutorial.reopen();
     setTutorialOpen(true);
   };
   const closeTutorial = () => setTutorialOpen(false);
   const View = useMemo(() => views[active] ?? views.chat, [active]);
-  // Another section starts at its top, not at the old one's scroll.
-  const shownView = useRef(active);
-  useLayoutEffect(() => {
-    if (shownView.current !== active) {
-      shownView.current = active;
-      globalThis.scrollTo?.(0, 0);
-    }
-  }, [active]);
 
   return el(LocaleContext.Provider, { value: localeApi }, [
     el(React.Fragment, { key: 'shell' }, [
@@ -207,7 +176,7 @@ const App = () => {
           key: 'shell-nav',
           width,
           active,
-          onSelect: setActive,
+          onSelect: (view) => navigate({ view }),
           counts,
         },
         el(
@@ -248,7 +217,7 @@ const App = () => {
         key: 'notify',
         active,
         t,
-        onOpen: () => setActive('chat'),
+        onOpen: () => navigate({ view: 'chat' }),
       }),
       el(TutorialOverlay, {
         key: 'tutorial-overlay',
@@ -269,7 +238,13 @@ const Root = () => {
   const lock = useLocalLock(api);
   return lock.phase === 'locked'
     ? el(LocaleContext.Provider, { value: localeApi }, el(LockScreen, { api }))
-    : el(App);
+    : lock.phase === 'loading'
+      ? el(
+          LocaleContext.Provider,
+          { value: localeApi },
+          el('div', { className: 'app-start-loading' }, el(PageLoading))
+        )
+      : el(App);
 };
 
 const mount = document.getElementById('app');