From 24ef65227508472b3d29f00951306d0364d6062a Mon Sep 17 00:00:00 2001
From: ochenstarik <victor.trushenko@gmail.com>
Date: Mon, 21 Sep 2026 23:43:42 +0700
Subject: [PATCH] fix: unify shell theme and responsive workspace

---
 src/app/layouts/AppShell.tsx                  | 12 ++++++++---
 src/app/shell/Topbar.tsx                      | 16 ++++----------
 .../components/MessengersView.tsx             | 21 +++++++++++--------
 src/index.css                                 | 21 +++++++++++++++++++
 4 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/src/app/layouts/AppShell.tsx b/src/app/layouts/AppShell.tsx
index 79c9965..5c8aa2e 100644
--- a/src/app/layouts/AppShell.tsx
+++ b/src/app/layouts/AppShell.tsx
@@ -22,7 +22,7 @@ export const AppShell: React.FC = () => {
     activeLocation,
   } = useDemoStore();
 
-  const { isMobile, isTablet, isDesktop } = useResponsive();
+  const { width, isMobile, isTablet, isDesktop } = useResponsive();
   const profile = getActiveProfile();
   const location = useLocation();
   const isCommunicationsPage = location.pathname.startsWith('/communications');
@@ -36,7 +36,9 @@ export const AppShell: React.FC = () => {
       dark: 'graphite-forest-dark',
     }[theme];
     document.documentElement.setAttribute('data-krona-theme', kronaTheme);
-  }, [theme]);
+    document.documentElement.setAttribute('data-omni-theme', kronaTheme);
+    document.documentElement.setAttribute('data-omni-density', isMobile ? 'touch' : 'workspace');
+  }, [theme, isMobile]);
 
   // Layout resolution:
   // 1. Real screen size is paramount:
@@ -78,7 +80,11 @@ export const AppShell: React.FC = () => {
         {/* Main Shell Layout */}
         <div className="flex-1 flex overflow-hidden w-full h-full relative">
           {/* Left Sidebar: hidden on mobile, rendered on tablet & desktop */}
-          {!isEffectiveMobile && <Sidebar isTabletCompact={isEffectiveTablet} />}
+          {!isEffectiveMobile && (
+            <Sidebar
+              isTabletCompact={isEffectiveTablet || (!isEmulatedOnDesktop && width < 1366)}
+            />
+          )}
 
           {/* Center Work Area */}
           <div className="flex-1 flex flex-col min-w-0 overflow-hidden bg-krona-workspace">
diff --git a/src/app/shell/Topbar.tsx b/src/app/shell/Topbar.tsx
index 84612ae..86ae73a 100644
--- a/src/app/shell/Topbar.tsx
+++ b/src/app/shell/Topbar.tsx
@@ -180,7 +180,7 @@ export const Topbar: React.FC = () => {
 
           {/* Location Switcher */}
           {profile.locations.length > 1 && (
-            <div className="relative group hidden lg:block">
+            <div className="relative group hidden 2xl:block">
               <div className="flex items-center gap-1.5 bg-krona-surface border border-krona-border rounded-xl px-2.5 py-1.5 cursor-pointer hover:border-krona-gold/60 transition-colors shadow-xs">
                 <MapPin className="w-3.5 h-3.5 text-emerald-500 shrink-0" />
                 <span className="text-xs font-medium text-krona-primary max-w-[130px] truncate">
@@ -208,7 +208,7 @@ export const Topbar: React.FC = () => {
           )}
 
           {/* Role Badge (RBAC) */}
-          <div className="relative group hidden sm:block">
+          <div className="relative group hidden 2xl:block">
             <button
               type="button"
               data-testid="role-switcher-btn"
@@ -265,7 +265,7 @@ export const Topbar: React.FC = () => {
         </div>
 
         {/* Center: Command Search Palette Trigger */}
-        <div className="flex-1 max-w-sm mx-2">
+        <div className="flex-1 min-w-[220px] max-w-xl mx-2">
           <button
             onClick={() => setIsCommandPaletteOpen(true)}
             className="w-full flex items-center justify-between px-3 py-1.5 bg-krona-workspace border border-krona-border rounded-xl text-xs text-krona-secondary hover:text-krona-primary hover:border-krona-gold/60 transition-colors shadow-inner"
@@ -292,7 +292,7 @@ export const Topbar: React.FC = () => {
             title="Krona AI — Бизнес-оркестратор"
           >
             <Sparkles className="w-3.5 h-3.5 mr-1" />
-            <span className="hidden xl:inline">Krona AI</span>
+            <span className="hidden 2xl:inline">Krona AI</span>
           </Button>
 
           {/* Theme switcher (3 buttons) */}
@@ -352,14 +352,6 @@ export const Topbar: React.FC = () => {
         </div>
       </div>
 
-      {/* Communications owns its local tabs inside the module. Keep only the
-          module title here so the shell does not render a duplicate menu. */}
-      {isCommunicationsModule && (
-        <div className="hidden md:flex h-10 px-5 border-t border-krona-border/60 bg-krona-workspace/40 items-center shrink-0">
-          <span className="font-serif text-lg font-bold text-krona-primary">Коммуникации</span>
-        </div>
-      )}
-
       {/* Subheader / Subtabs Navigation Bar (Desktop & Tablet) */}
       {!isCommunicationsModule && activeSubtabs.length > 0 && (
         <div className="h-10 px-4 border-t border-krona-border/60 bg-krona-workspace/40 flex items-center overflow-x-auto gap-1 text-xs">
diff --git a/src/features/communications/components/MessengersView.tsx b/src/features/communications/components/MessengersView.tsx
index 354375d..1cb8d63 100644
--- a/src/features/communications/components/MessengersView.tsx
+++ b/src/features/communications/components/MessengersView.tsx
@@ -696,15 +696,18 @@ export function MessengersView({ onOpenConnectModal, onOpenAddContactModal }: Me
         </div>
 
         <div className="flex items-center gap-2 shrink-0">
-          {onOpenConnectModal && <Button
-            variant="secondary"
-            size="sm"
-            onClick={onOpenConnectModal}
-            leftIcon={<Plus className="w-3.5 h-3.5 text-[var(--krona-primary)]" />}
-            className="hidden sm:inline-flex"
-          >
-            Добавить мессенджер
-          </Button>}
+          {onOpenConnectModal && (
+            <div className="hidden sm:block">
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={onOpenConnectModal}
+                leftIcon={<Plus className="w-3.5 h-3.5 text-[var(--krona-primary)]" />}
+              >
+                Добавить мессенджер
+              </Button>
+            </div>
+          )}
           {onOpenConnectModal && <button
             type="button"
             onClick={onOpenConnectModal}
diff --git a/src/index.css b/src/index.css
index 3d60e12..38246ee 100644
--- a/src/index.css
+++ b/src/index.css
@@ -287,6 +287,27 @@ body {
   overflow-x: hidden;
 }
 
+/* The application shell and the shared component library use one semantic
+   surface. Keeping transitions here prevents each module from inventing its
+   own theme animation. */
+body,
+#root,
+[data-testid="app-shell-root"] {
+  transition:
+    background-color var(--omni-motion-theme),
+    color var(--omni-motion-theme);
+}
+
+::selection {
+  background: var(--krona-primary-soft);
+  color: var(--krona-text-primary);
+}
+
+:focus-visible {
+  outline: 2px solid var(--krona-border-focus);
+  outline-offset: 2px;
+}
+
 /* Custom scrollbars according to design system */
 ::-webkit-scrollbar {
   width: 6px;