Минимальная адаптация под мобилку

client-web/src/core/infrastructure/i18n.ts

@@ -248,6 +248,7 @@ const translations = {
     you: 'вы',
     // Stories Editor
     cropVideo: 'Обрезка видео',
+    cropTool: 'Обрезка',
     trimVideo: 'Обрезать видео',
     trim: 'Обрезать',
     reset: 'Сбросить',
@@ -279,6 +280,8 @@ const translations = {
     unmuteVideo: 'Включить звук',
     interactive: 'Интерактив',
     apply: 'Применить',
+    zoom: 'Масштаб',
+    rotation: 'Поворот',
     // User profile
     mediaTab: 'Медиа',
     gifs: 'GIF',
@@ -622,6 +625,7 @@ const translations = {
     you: 'you',
     // Stories Editor
     cropVideo: 'Video Crop',
+    cropTool: 'Crop',
     trimVideo: 'Trim Video',
     trim: 'Trim',
     reset: 'Reset',
@@ -653,6 +657,8 @@ const translations = {
     unmuteVideo: 'Unmute Video',
     interactive: 'Interactive',
     apply: 'Apply',
+    zoom: 'Zoom',
+    rotation: 'Rotation',
     // User profile
     mediaTab: 'Media',
     gifs: 'GIF',

client-web/src/core/presentation/components/ui/ImageLightbox.tsx

@@ -99,8 +99,16 @@ export default function ImageLightbox({ url, images, initialIndex = 0, onClose }
           animate={{ scale: 1, opacity: 1 }}
           exit={{ scale: 0.8, opacity: 0 }}
           transition={{ duration: 0.2 }}
+          drag={gallery && total > 1 ? "x" : false}
+          dragConstraints={{ left: 0, right: 0 }}
+          dragElastic={0.4}
+          onDragEnd={(_, info) => {
+            const swipeThreshold = 50;
+            if (info.offset.x > swipeThreshold) goPrev();
+            else if (info.offset.x < -swipeThreshold) goNext();
+          }}
           onClick={(e) => e.stopPropagation()}
-          className="absolute inset-x-0 inset-y-12 flex items-center justify-center p-4"
+          className="absolute inset-x-0 inset-y-12 flex items-center justify-center p-4 touch-none"
         >
           {(currentType === 'video' || currentType === 'gif') ? (
             <video

client-web/src/core/presentation/layouts/GlobalNavBar.tsx

@@ -16,41 +16,43 @@ export default function GlobalNavBar({ activeTab, onTabChange }: GlobalNavBarPro
   ];
 
   return (
-    <nav className="fixed left-0 top-0 h-full z-40 bg-surface-container w-20 flex flex-col items-center py-6 slide-on-ice border-none shadow-xl">
-      <div className="mb-10 flex flex-col items-center">
+    <nav
+      className="lg:fixed lg:left-0 lg:top-0 lg:h-[100dvh] lg:w-20 w-full h-16 fixed bottom-0 left-0 bg-surface-container-low border-t lg:border-t-0 lg:border-r border-white/5 flex lg:flex-col flex-row items-center justify-around lg:justify-start lg:py-8 lg:gap-4 z-50 transition-all safe-area-bottom"
+    >
+      <div className="hidden lg:flex mb-10 flex-col items-center">
         <span className="text-2xl font-black text-primary tracking-tighter italic knot-logo-spin">Knot</span>
       </div>
 
-      <div className="flex flex-col gap-6 w-full px-2">
+      <div className="flex flex-row lg:flex-col gap-2 lg:gap-6 w-full lg:px-2 items-center justify-around lg:justify-start">
         {menuItems.map((item) => (
           <button
             key={item.id}
             onClick={() => onTabChange(item.id)}
-            className={`flex flex-col items-center justify-center p-3 rounded-xl transition-all duration-300 scale-95 active:scale-90 ${
+            className={`flex flex-col items-center justify-center p-2 lg:p-3 rounded-xl transition-all duration-300 scale-95 lg:scale-100 active:scale-90 flex-1 lg:flex-none ${
               activeTab === item.id
                 ? 'bg-primary/10 text-primary'
                 : 'text-on-surface-variant hover:bg-surface-container-high hover:text-primary'
             }`}
           >
             <span 
-              className={`material-symbols-outlined mb-1 ${activeTab === item.id ? 'fill-1' : ''}`}
+              className={`material-symbols-outlined mb-0.5 lg:mb-1 ${activeTab === item.id ? 'fill-1' : ''}`}
               style={{ fontVariationSettings: `'FILL' ${activeTab === item.id ? 1 : 0}` }}
             >
               {item.icon}
             </span>
-            <span className="text-[10px] font-medium">{item.label}</span>
+            <span className="text-[9px] lg:text-[10px] font-bold uppercase tracking-wider">{item.label}</span>
           </button>
         ))}
       </div>
 
       <div 
-        className="mt-auto group cursor-pointer relative"
+        className="lg:mt-auto group cursor-pointer relative flex items-center justify-center px-4 lg:px-0"
         onClick={() => onTabChange('settings')}
       >
         <div className="absolute -inset-1 bg-primary/20 rounded-2xl opacity-0 group-hover:opacity-100 blur transition-opacity" />
         <img
           alt="User Profile"
-          className="relative w-10 h-10 rounded-2xl border-2 border-outline-variant/10 hover:border-primary/50 transition-colors object-cover"
+          className="relative w-8 h-8 lg:w-10 lg:h-10 rounded-2xl border-2 border-outline-variant/10 hover:border-primary/50 transition-colors object-cover"
           src={user?.avatar || `https://ui-avatars.com/api/?name=${user?.username || 'user'}&background=3096e5&color=fff`}
         />
       </div>

client-web/src/core/presentation/layouts/SideMenu.tsx

@@ -662,7 +662,7 @@ export default function SideMenu({ isOpen, onClose, onOpenProfile, onOpenTelegra
             animate={{ x: 0, opacity: 1 }}
             exit={{ x: -320, opacity: 0 }}
             transition={{ type: 'spring', damping: 25, stiffness: 300 }}
-            className="fixed left-3 top-3 bottom-3 w-[340px] max-w-[calc(100vw-24px)] bg-surface-secondary/95 backdrop-blur-3xl shadow-[0_0_100px_rgba(0,0,0,0.5)] border border-border/50 rounded-3xl z-50 flex flex-col overflow-hidden"
+            className="fixed inset-0 lg:left-3 lg:top-3 lg:bottom-3 w-full lg:w-[340px] lg:max-w-[calc(100vw-24px)] bg-surface-secondary/95 backdrop-blur-3xl shadow-[0_0_100px_rgba(0,0,0,0.5)] border-none lg:border lg:border-border/50 lg:rounded-3xl z-50 flex flex-col overflow-hidden"
           >
             <AnimatePresence mode="wait" custom={slideDir}>
               {view === 'main' && renderMain()}

client-web/src/core/presentation/layouts/Sidebar.tsx

@@ -200,7 +200,7 @@ export default function Sidebar() {
         </div>
 
         {/* Список чатов */}
-        <div className="flex-1 overflow-y-auto px-2 custom-scrollbar">
+        <div className="flex-1 overflow-y-auto px-2 custom-scrollbar pb-28 lg:pb-4">
           {filteredChats.length === 0 ? (
             <div className="flex flex-col items-center justify-center h-full text-on-surface-variant/40 gap-3 px-6">
               <span className="material-symbols-outlined text-5xl opacity-20">chat_bubble</span>
@@ -218,10 +218,10 @@ export default function Sidebar() {
         {/* Float Action Button equivalent for Web */}
         <button
           onClick={() => setShowNewChat(true)}
-          className="absolute bottom-6 right-6 w-14 h-14 rounded-2xl bg-primary text-black shadow-lg shadow-primary/20 flex items-center justify-center hover:scale-105 active:scale-95 transition-transform slide-on-ice"
+          className="absolute bottom-20 lg:bottom-10 right-4 lg:right-10 w-12 h-12 lg:w-16 lg:h-16 rounded-2xl lg:rounded-3xl bg-primary text-black shadow-[0_10px_30px_-5px_rgba(var(--primary-rgb),0.4)] flex items-center justify-center hover:scale-105 active:scale-95 transition-all slide-on-ice z-30"
           title={t('newChat')}
         >
-          <span className="material-symbols-outlined text-2xl">add</span>
+          <span className="material-symbols-outlined text-2xl lg:text-3xl">add</span>
         </button>
       </div>