Импорт из телеграм

2026-03-16 17:51:49 +03:00
parent 33007b3c72
commit 5600067f8d
20 changed files with 1362 additions and 144 deletions
@@ -102,12 +102,25 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal

  const typingInChat = typingUsers.filter((t) => t.chatId === activeChat && t.userId !== user?.id);

+  // Refs and logic for tracking session's first unread message to show the divider exactly once per load
+  const sessionUnreadRef = useRef<{ chatId: string, msgId: string | null }>({ chatId: '', msgId: null });
+
+  if (activeChat && activeChat !== sessionUnreadRef.current.chatId && !isLoadingMessages) {
+    const firstUnreadMsg = chatMessages.find(
+      (m) => m.senderId !== user?.id && !m.readBy?.some((r) => r.userId === user?.id)
+    );
+    sessionUnreadRef.current = { chatId: activeChat, msgId: firstUnreadMsg ? firstUnreadMsg.id : null };
+  }
+  const firstUnreadId = activeChat === sessionUnreadRef.current.chatId ? sessionUnreadRef.current.msgId : null;
+  const lastObservedMessageIdRef = useRef<string | null>(null);
+
  // Load muted state
  useEffect(() => {
    if (activeChat) {
      setMuted(isChatMuted(activeChat));
      setScrollReady(false);
      setActiveGroupCallParticipants([]);
+      lastObservedMessageIdRef.current = null;
    }
  }, [activeChat]);

@@ -167,7 +180,23 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
  // Первичная прокрутка при открытии чата или после загрузки (layout effect — до отрисовки)
  useLayoutEffect(() => {
    if (!isLoadingMessages && messagesContainerRef.current) {
-      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+      const container = messagesContainerRef.current;
+      const unreadId = sessionUnreadRef.current.msgId;
+
+      if (unreadId && activeChat === sessionUnreadRef.current.chatId) {
+        const dividerEl = document.getElementById('unread-divider');
+        const unreadEl = document.getElementById(`msg-${unreadId}`);
+        const targetEl = dividerEl || unreadEl;
+
+        if (targetEl) {
+          // Вычитаем отступ сверху, чтобы начало непрочитанных было под шапкой
+          container.scrollTop = targetEl.offsetTop - 60;
+        } else {
+          container.scrollTop = container.scrollHeight;
+        }
+      } else {
+        container.scrollTop = container.scrollHeight;
+      }
      setScrollReady(true);
    }
  }, [activeChat, isLoadingMessages]);
@@ -176,17 +205,25 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
  useEffect(() => {
    if (chatMessages.length > 0) {
      const lastMsg = chatMessages[chatMessages.length - 1];
-      if (lastMsg.senderId === user?.id) {
-        setTimeout(() => scrollToBottom(true), 50);
-      } else {
-        // Если пользователь внизу — прокрутить
-        const container = messagesContainerRef.current;
-        if (container) {
-          const isNearBottom =
-            container.scrollHeight - container.scrollTop - container.clientHeight < 250;
-          if (isNearBottom) setTimeout(() => scrollToBottom(true), 50);
+      const prevId = lastObservedMessageIdRef.current;
+      lastObservedMessageIdRef.current = lastMsg.id;
+
+      // Scroll ONLY if a genuinely new message was added (not during initial chat load)
+      if (prevId && prevId !== lastMsg.id) {
+        if (lastMsg.senderId === user?.id) {
+          setTimeout(() => scrollToBottom(true), 50);
+        } else {
+          // Если пользователь внизу — прокрутить
+          const container = messagesContainerRef.current;
+          if (container) {
+            const isNearBottom =
+              container.scrollHeight - container.scrollTop - container.clientHeight < 300;
+            if (isNearBottom) setTimeout(() => scrollToBottom(true), 50);
+          }
        }
      }
+    } else {
+      lastObservedMessageIdRef.current = null;
    }
  }, [chatMessages.length, user?.id, scrollToBottom]);

@@ -273,7 +310,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
    const container = messagesContainerRef.current;
    if (!container) return;
    const isNearBottom =
-      container.scrollHeight - container.scrollTop - container.clientHeight < 200;
+      container.scrollHeight - container.scrollTop - container.clientHeight < 300;
    setShowScrollDown(!isNearBottom);
  }, []);

@@ -321,29 +358,20 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
  if (!activeChat || !chat) {
    return (
      <div className="flex-1 h-full flex items-center justify-center bg-surface-secondary/50 rounded-[2rem] overflow-hidden border border-white/5 shadow-2xl relative z-0 backdrop-blur-3xl group">
-        {/* Slowly pulsing purple background as requested */}
-        <div className="absolute inset-0 pointer-events-none overflow-hidden transition-opacity duration-[10000ms]">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-accent/10 rounded-full blur-[120px] animate-[pulse_8s_ease-in-out_infinite]" />
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-purple-600/15 rounded-full blur-[100px] animate-[pulse_12s_ease-in-out_infinite_reverse]" />
-        </div>
-
-        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wMSkvPjwvc3ZnPg==')] [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_100%)] opacity-20 pointer-events-none" />
-
        <div className="text-center relative z-10 w-full max-w-sm px-6 mx-auto">
          <motion.div
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
-            className="w-28 h-28 mx-auto mb-8 rounded-[2rem] bg-gradient-to-br from-accent/20 to-purple-600/20 flex items-center justify-center shadow-[0_0_60px_-15px_var(--color-accent)] ring-1 ring-white/10 backdrop-blur-2xl relative"
+            className="w-24 h-24 mx-auto mb-6 rounded-full bg-surface-hover flex items-center justify-center border border-border/40 backdrop-blur-md relative"
          >
-            <div className="absolute inset-0 rounded-[2rem] bg-gradient-to-br from-white/[0.05] to-transparent pointer-events-none" />
-            <MessageSquare className="w-16 h-16 text-accent shadow-2xl transform hover:scale-105 transition-transform" />
+            <MessageSquare className="w-10 h-10 text-zinc-500 transform hover:scale-105 transition-transform" />
          </motion.div>
          <motion.h2
            initial={{ y: 20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.6, delay: 0.1, ease: [0.16, 1, 0.3, 1] }}
-            className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent via-fuchsia-400 to-indigo-400 mb-4 drop-shadow-lg tracking-tight"
+            className="text-2xl font-semibold text-white mb-2 tracking-tight"
          >
            Knot Messenger
          </motion.h2>
@@ -351,7 +379,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
            initial={{ y: 20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.6, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
-            className="text-sm font-medium text-zinc-300 bg-white/5 backdrop-blur-lg py-2.5 px-6 rounded-full inline-flex border border-white/10 shadow-lg"
+            className="text-sm text-zinc-400 bg-surface-hover backdrop-blur-lg py-2 px-4 rounded-full inline-flex border border-border/50"
          >
            {t('selectChat')}
          </motion.p>
@@ -743,8 +771,8 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
                  const el = document.getElementById(`msg-${msg.id}`);
                  if (el) {
                    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                    el.classList.add('bg-knot-500/20');
-                    setTimeout(() => el.classList.remove('bg-knot-500/20'), 2000);
+                    el.classList.add('highlight-message');
+                    setTimeout(() => el.classList.remove('highlight-message'), 3000);
                  }
                  setShowSearch(false);
                  setSearchText('');
@@ -790,8 +818,8 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
            const el = document.getElementById(`msg-${pinnedMsg.id}`);
            if (el) {
              el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-              el.classList.add('bg-knot-500/20');
-              setTimeout(() => el.classList.remove('bg-knot-500/20'), 2000);
+              el.classList.add('highlight-message');
+              setTimeout(() => el.classList.remove('highlight-message'), 3000);
            }
          }}
          className="flex items-center gap-3 px-4 py-2 border-b border-border bg-surface-secondary/60 hover:bg-surface-hover transition-colors text-left w-full flex-shrink-0"
@@ -839,6 +867,8 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
              const showDate =
                !prevMsg ||
                new Date(msg.createdAt).toDateString() !== new Date(prevMsg.createdAt).toDateString();
+              
+              const isFirstUnread = firstUnreadId === msg.id;

              return (
                <div
@@ -846,6 +876,15 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
                  data-message-id={msg.id}
                  className={`transition-colors duration-500 ${msg.senderId !== user?.id && !msg.readBy?.some(r => r.userId === user?.id) ? 'unread-detector' : ''}`}
                >
+                  {isFirstUnread && (
+                    <div id="unread-divider" className="flex items-center justify-center my-4 opacity-80 select-none">
+                      <div className="flex-1 h-px bg-border/50"></div>
+                      <span className="px-4 text-[11px] font-semibold tracking-wider uppercase text-zinc-400">
+                        {t('unreadMessages')}
+                      </span>
+                      <div className="flex-1 h-px bg-border/50"></div>
+                    </div>
+                  )}
                  {showDate && (
                    <div className="flex justify-center my-4">
                      <span className="px-3 py-1 rounded-full text-xs text-zinc-400 glass">
@@ -886,9 +925,9 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0, opacity: 0 }}
            onClick={() => scrollToBottom()}
-            className="absolute bottom-24 right-6 w-11 h-11 rounded-full bg-surface-tertiary/90 backdrop-blur-md border border-border shadow-2xl flex items-center justify-center text-zinc-400 hover:text-white hover:bg-surface-hover hover:scale-105 transition-all z-10"
+            className="absolute bottom-24 right-5 w-12 h-12 rounded-full bg-surface-secondary/95 backdrop-blur-md border border-border shadow-xl flex items-center justify-center text-zinc-400 hover:text-white hover:bg-surface-hover hover:scale-105 transition-all z-10"
          >
-            <ArrowDown size={20} />
+            <ArrowDown size={22} className="text-accent hover:text-accent-light transition-colors" />
            {unreadCount > 0 && (
              <motion.span
                initial={{ scale: 0 }}
@@ -923,8 +962,8 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
              const el = document.getElementById(`msg-${msgId}`);
              if (el) {
                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                el.classList.add('bg-knot-500/20');
-                setTimeout(() => el.classList.remove('bg-knot-500/20'), 2000);
+                el.classList.add('highlight-message');
+                setTimeout(() => el.classList.remove('highlight-message'), 3000);
                setProfileUserId(null);
              }
            }}
@@ -943,8 +982,8 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
              const el = document.getElementById(`msg-${msgId}`);
              if (el) {
                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                el.classList.add('bg-knot-500/20');
-                setTimeout(() => el.classList.remove('bg-knot-500/20'), 2000);
+                el.classList.add('highlight-message');
+                setTimeout(() => el.classList.remove('highlight-message'), 3000);
                setShowGroupSettings(false);
              }
            }}
@@ -141,28 +141,28 @@ export default function EmojiPicker({ onSelect, onSelectGif, onClose }: EmojiPic
        <>
          <div className="fixed inset-0 z-[9990]" onClick={onClose} />
          <div
-            className="fixed z-[9991] rounded-2xl shadow-2xl border border-white/10"
+            className="fixed z-[9991] rounded-xl shadow-2xl border border-border/40"
            style={{
              width: pickerWidth,
              height: tab === 'gif' ? 435 : undefined,
              bottom: pos ? `${window.innerHeight - pos.top}px` : undefined,
              left: pos ? pos.left : undefined,
-              background: 'rgb(17, 17, 19)',
+              background: '#17212b',
              visibility: pos ? 'visible' : 'hidden',
            }}
          >
            {/* Tabs */}
-            <div className="flex border-b border-white/10">
+            <div className="flex border-b border-border/40">
              <button
                onClick={() => setTab('emoji')}
-                className={`flex-1 py-2.5 text-xs font-semibold tracking-wide transition-colors ${tab === 'emoji' ? 'text-white border-b-2 border-accent' : 'text-zinc-500 hover:text-zinc-300'}`}
+                className={`flex-1 py-3 text-[14px] font-medium transition-colors ${tab === 'emoji' ? 'text-accent border-b-[2px] border-accent' : 'text-zinc-500 hover:text-zinc-300'}`}
              >
-                EMOJI
+                {lang === 'ru' ? 'Эмодзи' : 'Emoji'}
              </button>
              {config?.enableKlipy && onSelectGif && (
                <button
                  onClick={() => { setTab('gif'); setTimeout(() => gifSearchRef.current?.focus(), 100); }}
-                  className={`flex-1 py-2.5 text-xs font-semibold tracking-wide transition-colors ${tab === 'gif' ? 'text-white border-b-2 border-accent' : 'text-zinc-500 hover:text-zinc-300'}`}
+                  className={`flex-1 py-3 text-[14px] font-medium transition-colors ${tab === 'gif' ? 'text-accent border-b-[2px] border-accent' : 'text-zinc-500 hover:text-zinc-300'}`}
                >
                  GIF
                </button>
@@ -183,7 +183,7 @@ export default function EmojiPicker({ onSelect, onSelectGif, onClose }: EmojiPic
                emojiSize={28}
                emojiButtonSize={36}
                maxFrequentRows={2}
-                navPosition="bottom"
+                navPosition="top"
                dynamicWidth={false}
              />
            )}
@@ -733,14 +733,14 @@ export default function MessageInput({ chatId }: MessageInputProps) {
          </button>
        </div>
      ) : (
-        <div className="flex items-end gap-1.5 bg-white/[0.04] backdrop-blur-[40px] rounded-[2rem] border border-white/[0.08] p-2 w-full max-w-3xl mx-auto transition-all duration-300 hover:bg-white/[0.06] focus-within:bg-white/[0.08] shadow-[0_8px_32px_rgba(0,0,0,0.3)] focus-within:shadow-[0_8px_40px_rgba(99,102,241,0.15)] focus-within:border-knot-500/30 group">
+        <div className="flex items-end gap-1.5 bg-surface-secondary rounded-2xl border border-border/40 px-2 py-1.5 w-full max-w-4xl mx-auto transition-all duration-200 focus-within:border-border/80">
          {/* Attach */}
-          <div className="relative mb-0.5 ml-1 flex-shrink-0 self-center">
+          <div className="relative mb-0 flex-shrink-0 self-center">
            <button
              onClick={() => setShowAttachMenu(!showAttachMenu)}
-              className="p-2 rounded-full text-white/50 hover:text-white hover:bg-white/10 transition-colors group-focus-within:text-white/70"
+              className="p-2 rounded-full text-zinc-400 hover:text-accent hover:bg-surface-hover transition-colors"
            >
-              <Paperclip size={20} />
+              <Paperclip size={22} strokeWidth={1.5} />
            </button>
            <AnimatePresence>
              {showAttachMenu && (
@@ -852,17 +852,17 @@ export default function MessageInput({ chatId }: MessageInputProps) {
              onContextMenu={handleInputContextMenu}
              placeholder={attachments.length > 0 ? t('addCaption') : t('message')}
              rows={1}
-              className="w-full resize-none bg-transparent text-[15px] text-white placeholder-white/40 leading-relaxed py-2.5 px-2 border-none focus:ring-0 max-h-[150px] outline-none"
+              className="w-full resize-none bg-transparent text-[15px] text-white placeholder-zinc-500 leading-[22px] py-[10px] px-2 border-none focus:ring-0 max-h-[150px] outline-none"
            />
          </div>

          {/* Emoji */}
-          <div className="relative mb-0.5 flex-shrink-0 self-center">
+          <div className="relative mb-0 flex-shrink-0 self-center">
            <button
              onClick={() => setShowEmoji(!showEmoji)}
-              className="p-2 rounded-full text-white/50 hover:text-white hover:bg-white/10 transition-colors"
+              className="p-2 rounded-full text-zinc-400 hover:text-accent hover:bg-surface-hover transition-colors"
            >
-              <Smile size={20} />
+              <Smile size={22} strokeWidth={1.5} />
            </button>
            <AnimatePresence>
              {showEmoji && (
@@ -904,7 +904,7 @@ export default function MessageInput({ chatId }: MessageInputProps) {
          </div>

          {/* Send / Mic */}
-          <div className="flex-shrink-0 self-center mr-0.5 relative">
+          <div className="flex-shrink-0 self-center relative flex items-center">
            {hasContent ? (
              <>
                <button
@@ -1031,9 +1031,9 @@ export default function MessageInput({ chatId }: MessageInputProps) {
            ) : (
              <button
                onClick={startRecording}
-                className="w-10 h-10 flex items-center justify-center rounded-full bg-white/10 text-white/70 hover:text-white hover:bg-white/20 transition-all shadow-md transform hover:scale-105"
+                className="w-10 h-10 flex items-center justify-center rounded-full text-zinc-400 hover:text-accent hover:bg-surface-hover transition-colors"
              >
-                <Mic size={18} />
+                <Mic size={22} strokeWidth={1.5} />
              </button>
            )}
          </div>
@@ -36,6 +36,7 @@ import { getSocket } from '../lib/socket';
 import { useLang } from '../lib/i18n';
 import { useThemeStore, ChatTheme } from '../stores/themeStore';
 import DatePicker from './DatePicker';
+import TelegramImportModal from './TelegramImportModal';
 import type { User as UserType, UserPresence, FriendRequest, FriendWithId } from '../lib/types';

 type SideView = 'main' | 'profile' | 'settings' | 'about' | 'themes' | 'friends';
@@ -56,6 +57,8 @@ export default function SideMenu({ isOpen, onClose, onOpenProfile }: SideMenuPro
  const [prevView, setPrevView] = useState<SideView>('main');
  const [themeIndex, setThemeIndex] = useState(0);
  const fileInputRef = useRef<HTMLInputElement>(null);
+  
+  const [showImportModal, setShowImportModal] = useState(false);

  // Friends state
  const [friends, setFriends] = useState<FriendWithId[]>([]);
@@ -425,6 +428,23 @@ export default function SideMenu({ isOpen, onClose, onOpenProfile }: SideMenuPro
            </button>
          </div>
        </div>
+        <div className="px-5 py-3 border-t border-border mt-2">
+          <h4 className="text-xs text-zinc-500 uppercase tracking-wide mb-3">Хранилище и данные</h4>
+          <button
+            onClick={() => { setShowImportModal(true); }}
+            className="w-full flex items-center gap-4 px-3 py-3 rounded-xl bg-surface-tertiary/50 hover:bg-surface-hover transition-colors"
+          >
+            <div className="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center">
+              <MessageSquare size={16} className="text-blue-400" />
+            </div>
+            <div className="flex-1 min-w-0 text-left">
+              <p className="text-sm text-zinc-200">Импорт истории Telegram</p>
+              <p className="text-[11px] text-zinc-500 mt-0.5">Перенести сообщения и медиа</p>
+            </div>
+            <ChevronRight size={18} className="text-zinc-500 transition-colors" />
+          </button>
+        </div>
+
        <div className="px-5 py-3">
          <h4 className="text-xs text-zinc-500 uppercase tracking-wide mb-3">{t('about')}</h4>
    <div className="flex items-center gap-4 px-3 py-3 rounded-xl bg-surface-tertiary/50">
@@ -760,6 +780,7 @@ export default function SideMenu({ isOpen, onClose, onOpenProfile }: SideMenuPro
              {view === 'about' && renderAbout()}
            </AnimatePresence>
          </motion.div>
+          <TelegramImportModal isOpen={showImportModal} onClose={() => setShowImportModal(false)} friends={friends} />
        </>
      )}
    </AnimatePresence>
@@ -100,45 +100,47 @@ export default function Sidebar() {
    <>
      <div className="w-full h-full flex flex-col bg-surface-secondary sm:rounded-[2rem] overflow-hidden border-x sm:border border-border/50 shadow-2xl relative z-10">
        {/* Шапка */}
-        <div className="h-[76px] px-4 flex items-center gap-3 border-b border-border/40 bg-surface-secondary flex-shrink-0">
-          <button
-            onClick={() => setShowSideMenu(true)}
-            className="p-2 rounded-lg hover:bg-surface-hover transition-colors text-zinc-400 hover:text-white"
-            title={t('menu')}
-          >
-            <Menu size={20} />
-          </button>
-          <div className="flex items-center gap-2.5 min-w-0">
-            <div className="flex items-center justify-center w-9 h-9 rounded-xl bg-gradient-to-br from-accent/20 to-purple-600/20 shadow-[0_0_15px_-3px_var(--color-accent)] ring-1 ring-white/10 relative overflow-hidden">
-              <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-white/[0.05] to-transparent pointer-events-none" />
-              <MessageSquare size={18} className="text-accent drop-shadow-md relative z-10" />
+        <div className="h-14 px-3 flex items-center justify-between border-b border-border/40 bg-surface-secondary flex-shrink-0">
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setShowSideMenu(true)}
+              className="p-1.5 rounded-lg hover:bg-surface-hover transition-colors text-zinc-400 hover:text-white"
+              title={t('menu')}
+            >
+              <Menu size={20} />
+            </button>
+            <div className="flex items-center gap-2.5 min-w-0">
+              <div className="flex items-center justify-center w-8 h-8 rounded-xl bg-accent text-white flex-shrink-0">
+                <MessageSquare size={16} fill="currentColor" strokeWidth={0} />
+              </div>
+              <h1 className="text-[16px] font-semibold text-white truncate tracking-tight">Knot Messenger</h1>
            </div>
-            <h1 className="text-lg font-bold gradient-text truncate">Knot Messenger</h1>
          </div>
          <button
            onClick={() => setShowNewChat(true)}
-            className="p-2 rounded-lg hover:bg-surface-hover transition-colors text-zinc-400 hover:text-white"
+            className="p-1.5 rounded-lg hover:bg-surface-hover transition-colors text-zinc-400 hover:text-white"
            title={t('newChat')}
          >
-            <Plus size={20} />
+            <Plus size={22} />
          </button>
        </div>

        {/* Поиск */}
-        <div className="p-4 bg-surface-secondary/50">
+        <div className="px-3 py-2 bg-surface-secondary">
          <div className="relative group">
-            <Search size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500 group-focus-within:text-accent transition-colors" />
+            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 transition-colors" />
            <input
              type="text"
              placeholder={t('searchChats')}
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-11 pr-10 py-3 rounded-2xl bg-surface-tertiary/80 text-[15px] font-medium text-white placeholder-zinc-500 border border-border/30 hover:border-border/60 focus:border-accent transition-all outline-none shadow-inner"
+              className="w-full pl-9 pr-8 py-1.5 rounded-[10px] bg-surface-tertiary text-[14px] text-white placeholder-zinc-500 border border-transparent focus:border-accent/50 hover:bg-surface-hover transition-all outline-none"
            />
            {searchQuery && (
              <button
                onClick={() => setSearchQuery('')}
-                className="absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-full bg-surface-hover text-zinc-400 hover:text-white transition-colors"
+                className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-full text-zinc-400 hover:text-white transition-colors"
+                title={t('clear')}
              >
                <X size={14} />
              </button>
@@ -148,16 +150,16 @@ export default function Sidebar() {

        {/* Story circles */}
        {(storyGroups.length > 0 || true) && (
-          <div className="flex items-center gap-3 px-4 py-2 overflow-x-auto scrollbar-hide border-b border-border/20 flex-shrink-0">
+          <div className="flex items-center gap-2 px-3 py-2 overflow-x-auto scrollbar-hide border-b border-border/20 flex-shrink-0">
            {/* Add story circle */}
            <button
              onClick={() => setShowCreateStory(true)}
-              className="flex flex-col items-center gap-1 flex-shrink-0 group"
+              className="flex flex-col items-center gap-1.5 flex-shrink-0 group w-[60px]"
            >
-              <div className="w-12 h-12 sm:w-14 sm:h-14 rounded-full border-2 border-dashed border-zinc-600 flex items-center justify-center group-hover:border-accent transition-colors">
-                <Plus size={18} className="text-zinc-400 group-hover:text-accent transition-colors" />
+              <div className="w-[50px] h-[50px] rounded-full border border-dashed border-zinc-600 flex items-center justify-center group-hover:border-accent group-hover:bg-accent/10 transition-colors">
+                <Plus size={20} className="text-accent transition-colors" />
              </div>
-              <span className="text-[10px] text-zinc-500 truncate w-12 sm:w-14 text-center">{t('newStory')}</span>
+              <span className="text-[11px] text-zinc-400 truncate w-full text-center">{t('newStory')}</span>
            </button>

            {storyGroups.map((group, idx) => {
@@ -167,25 +169,25 @@ export default function Sidebar() {
                <button
                  key={group.user.id}
                  onClick={() => openViewer(idx)}
-                  className="flex flex-col items-center gap-1 flex-shrink-0 group"
+                  className="flex flex-col items-center gap-1.5 flex-shrink-0 group w-[60px]"
                >
-                  <div className={`w-14 h-14 rounded-full p-[2.5px] transition-transform group-hover:scale-105 ${
+                  <div className={`w-[50px] h-[50px] rounded-full flex items-center justify-center transition-transform group-hover:scale-[1.03] ${
                    group.hasUnviewed
-                      ? 'bg-gradient-to-tr from-accent via-purple-500 to-pink-500 shadow-lg shadow-accent/25'
+                      ? 'border-[2px] border-accent'
                      : isMine
-                        ? 'bg-gradient-to-tr from-zinc-500 to-zinc-600'
-                        : 'bg-zinc-700'
+                        ? 'border border-zinc-600'
+                        : 'border border-zinc-700'
                  }`}>
-                    <div className="w-full h-full rounded-full overflow-hidden border-[2.5px] border-surface-secondary">
+                    <div className="w-[44px] h-[44px] rounded-full overflow-hidden">
                      <Avatar
                        src={avatarUrl}
                        name={group.user.displayName || group.user.username}
-                        size="lg"
+                        size="md"
                        className="w-full h-full"
                      />
                    </div>
                  </div>
-                  <span className="text-[10px] text-zinc-400 truncate w-14 text-center">
+                  <span className="text-[11px] text-zinc-400 truncate w-full text-center">
                    {isMine ? t('myStory') : (group.user.displayName || group.user.username).split(' ')[0]}
                  </span>
                </button>
@@ -0,0 +1,249 @@
+import { useState, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Upload, Check, Loader2, MessageSquare, AlertCircle } from 'lucide-react';
+import { api } from '../lib/api';
+import { useLang } from '../lib/i18n';
+import type { User as UserType, FriendWithId } from '../lib/types';
+import { useAuthStore } from '../stores/authStore';
+
+interface TelegramImportModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  friends: FriendWithId[];
+}
+
+export default function TelegramImportModal({ isOpen, onClose, friends }: TelegramImportModalProps) {
+  const { t } = useLang();
+  const { user } = useAuthStore();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [step, setStep] = useState<1 | 2 | 3>(1); // 1: upload, 2: map, 3: loading/done
+  const [file, setFile] = useState<File | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+  const [names, setNames] = useState<string[]>([]);
+  const [mapping, setMapping] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [importedState, setImportedState] = useState<{ count: number; text: string } | null>(null);
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0];
+    if (!selectedFile) return;
+
+    if (!selectedFile.name.endsWith('.zip')) {
+      setError('Пожалуйста, выберите ZIP-архив экспорта Telegram.');
+      return;
+    }
+
+    setFile(selectedFile);
+    setError(null);
+    setLoading(true);
+
+    try {
+      const data = await api.analyzeTelegramImport(selectedFile) as any;
+      setToken(data.token);
+      setNames(data.names);
+      
+      // Auto-map if possible
+      const initialMap: Record<string, string> = {};
+      data.names.forEach((name: string) => {
+        initialMap[name] = '';
+      });
+      setMapping(initialMap);
+      setStep(2);
+    } catch (err: any) {
+      console.error(err);
+      setError(err.message || 'Ошибка загрузки файла');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleExecute = async () => {
+    if (!token) return;
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await api.executeTelegramImport({ token, mapping }) as any;
+      setImportedState({ count: res.messagesImported, text: 'Успешно импортировано' });
+      setStep(3);
+    } catch (err: any) {
+      console.error(err);
+      setError(err.message || 'Ошибка импорта');
+      setStep(1);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const reset = () => {
+    setStep(1);
+    setFile(null);
+    setToken(null);
+    setNames([]);
+    setMapping({});
+    setError(null);
+    setImportedState(null);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+            onClick={step === 3 && importedState ? handleClose : undefined}
+          />
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 20 }}
+            className="relative w-full max-w-lg bg-surface-secondary border border-border shadow-2xl rounded-2xl overflow-hidden flex flex-col max-h-[90vh]"
+          >
+            {/* Header */}
+            <div className="h-14 px-4 flex items-center justify-between border-b border-border bg-surface-secondary/50 backdrop-blur-md shrink-0">
+              <div className="flex items-center gap-2">
+                <MessageSquare size={20} className="text-knot-400" />
+                <h3 className="font-semibold text-white">Импорт из Telegram</h3>
+              </div>
+              <button
+                onClick={handleClose}
+                className="p-2 -mr-2 text-zinc-400 hover:text-white hover:bg-white/10 rounded-xl transition-all"
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto p-6">
+              {error && (
+                <div className="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/20 flex gap-3 text-red-400">
+                  <AlertCircle size={20} className="shrink-0" />
+                  <p className="text-sm">{error}</p>
+                </div>
+              )}
+
+              {step === 1 && (
+                <div className="text-center space-y-6">
+                  <div className="w-20 h-20 mx-auto bg-surface-tertiary rounded-full flex items-center justify-center border border-border">
+                    <Upload size={32} className="text-knot-400" />
+                  </div>
+                  <div>
+                    <h4 className="text-lg font-medium text-white mb-2">Загрузите архив с историей</h4>
+                    <p className="text-sm text-zinc-400 leading-relaxed max-w-sm mx-auto">
+                      Скачайте историю чата из Telegram в формате HTML (сняв галочку с формата JSON). Убедитесь, что медиафайлы тоже скачаны, если хотите перенести их. Загрузите полученный ZIP архив.
+                    </p>
+                  </div>
+                  
+                  <input
+                    type="file"
+                    ref={fileInputRef}
+                    onChange={handleFileChange}
+                    accept=".zip"
+                    className="hidden"
+                  />
+                  
+                  <button
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={loading}
+                    className="h-12 px-6 bg-knot-500 hover:bg-knot-600 active:bg-knot-700 text-white font-medium rounded-xl transition-colors inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed mx-auto"
+                  >
+                    {loading ? (
+                      <Loader2 size={18} className="animate-spin" />
+                    ) : (
+                      <>
+                        <Upload size={18} />
+                        Выбрать ZIP-архив
+                      </>
+                    )}
+                  </button>
+                </div>
+              )}
+
+              {step === 2 && (
+                <div className="space-y-6">
+                  <div>
+                    <h4 className="text-lg font-medium text-white mb-2">Кто есть кто?</h4>
+                    <p className="text-sm text-zinc-400">
+                      Мы нашли {names.length} имён в архиве. Укажите, какому контакту в Knot они соответствуют. Одно из имён должно принадлежать вам.
+                    </p>
+                  </div>
+
+                  <div className="space-y-4">
+                    {names.map((name) => (
+                      <div key={name} className="flex flex-col gap-2 p-4 rounded-xl border border-border bg-surface-tertiary">
+                        <span className="text-sm font-medium text-white">Сообщения от: "{name}"</span>
+                        <select
+                          value={mapping[name] || ''}
+                          onChange={(e) => setMapping({ ...mapping, [name]: e.target.value })}
+                          className="w-full h-11 px-3 bg-surface-secondary text-sm text-white rounded-lg border border-border focus:border-knot-500 outline-none transition-colors"
+                        >
+                          <option value="">-- Выберите пользователя --</option>
+                          <option value={user?.id}>Это я ({user?.displayName || user?.username})</option>
+                          <optgroup label="Мои контакты">
+                            {friends.map(f => (
+                              <option key={f.id} value={f.id}>
+                                Контакт: {f.displayName || f.username}
+                              </option>
+                            ))}
+                          </optgroup>
+                        </select>
+                      </div>
+                    ))}
+                  </div>
+
+                  <div className="pt-4 flex items-center justify-end gap-3">
+                    <button
+                      onClick={reset}
+                      disabled={loading}
+                      className="px-5 py-2.5 text-sm font-medium text-zinc-400 hover:text-white transition-colors"
+                    >
+                      Отмена
+                    </button>
+                    <button
+                      onClick={handleExecute}
+                      disabled={loading || names.some(n => !mapping[n])}
+                      className="px-6 py-2.5 bg-knot-500 hover:bg-knot-600 disabled:bg-surface-tertiary disabled:text-zinc-500 text-white text-sm font-medium rounded-xl transition-colors flex items-center gap-2"
+                    >
+                      {loading ? <Loader2 size={16} className="animate-spin" /> : <Check size={16} />}
+                      Импортировать
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {step === 3 && importedState && (
+                <div className="text-center py-8 space-y-4">
+                  <div className="w-16 h-16 mx-auto bg-green-500/20 text-green-400 rounded-full flex items-center justify-center border border-green-500/30">
+                    <Check size={32} />
+                  </div>
+                  <div>
+                    <h4 className="text-xl font-medium text-white mb-2">Готово!</h4>
+                    <p className="text-sm text-zinc-400">
+                      Импорт завершен. Сообщений: <strong className="text-white">{importedState.count}</strong>.
+                    </p>
+                  </div>
+                  <button
+                    onClick={handleClose}
+                    className="mt-6 h-11 px-6 bg-surface-tertiary hover:bg-surface-hover active:bg-surface-secondary text-white font-medium rounded-xl transition-colors"
+                  >
+                    Закрыть
+                  </button>
+                </div>
+              )}
+            </div>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+}
@@ -374,9 +374,8 @@ export default function UserProfile({ userId, chatId, onClose, onGoToMessage, is
        className="fixed right-3 top-3 bottom-3 w-[650px] max-w-[calc(100%-24px)] bg-surface-secondary/90 backdrop-blur-3xl shadow-2xl shadow-black/80 border border-white/5 rounded-[2rem] z-50 flex flex-col overflow-hidden ring-1 ring-white/10"
      >
        {/* Шапка */}
-        <div className="flex items-center justify-between p-5 border-b border-white/5 bg-white/5 relative overflow-hidden">
-          <div className="absolute inset-0 bg-gradient-to-r from-knot-500/20 to-purple-500/10 pointer-events-none" />
-          <h2 className="text-xl font-bold tracking-tight text-white drop-shadow-sm relative z-10 flex-1">
+        <div className="flex items-center justify-between p-5 border-b border-border/40 bg-surface-secondary relative overflow-hidden">
+          <h2 className="text-lg font-semibold tracking-tight text-white relative z-10 flex-1">
            {(isSelf ? t('myProfile') : t('profileTitle')) as string}
          </h2>
          <div className="flex items-center gap-2 relative z-10">
@@ -417,23 +416,18 @@ export default function UserProfile({ userId, chatId, onClose, onGoToMessage, is
            <div className="flex-shrink-0 overflow-y-auto max-h-[50%] custom-scrollbar">
              {/* Аватар */}
              <div className="flex flex-col items-center pt-8 pb-4 px-6 relative overflow-visible">
-                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[240px] h-[240px] bg-knot-500/10 rounded-full blur-[80px] pointer-events-none" />
-
-              <div className="relative group">
-                {/* Spinning gradient glow ring */}
-                <div className="absolute -inset-1 bg-gradient-to-r from-accent via-purple-500 to-accent rounded-full opacity-50 blur group-hover:opacity-75 transition duration-500 animate-[spin_4s_linear_infinite]" />
+                <div className="relative group">

                <div className="relative">
                  {profile.avatar ? (
                    <img
                      src={getMediaUrl(profile.avatar)}
                      alt=""
-                      className="w-32 h-32 rounded-full object-cover ring-4 ring-surface bg-surface"
+                      className="w-32 h-32 rounded-full object-cover border-4 border-surface bg-surface"
                    />
                  ) : (
-                    <div className="w-32 h-32 rounded-full bg-gradient-to-br from-surface to-surface-secondary flex items-center justify-center text-white font-bold text-4xl ring-4 ring-surface relative overflow-hidden">
-                      <div className="absolute inset-0 bg-gradient-to-tr from-accent/20 to-purple-500/20" />
-                      <span className="relative z-10 text-transparent bg-clip-text bg-gradient-to-br from-white to-zinc-400 drop-shadow-md">{initials}</span>
+                    <div className="w-32 h-32 rounded-full bg-accent flex items-center justify-center text-white font-bold text-4xl border-4 border-surface relative overflow-hidden">
+                      <span className="relative z-10 drop-shadow-sm">{initials}</span>
                    </div>
                  )}
                </div>
@@ -477,15 +471,15 @@ export default function UserProfile({ userId, chatId, onClose, onGoToMessage, is
                  />
                </div>
              ) : (
-                <h3 className="mt-5 text-[28px] font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-white/70 tracking-tight text-center px-4">
+                <h3 className="mt-5 text-[24px] font-semibold text-white tracking-tight text-center px-4">
                  {profile.displayName || profile.username}
                </h3>
              )}

              {/* Username (неизменяемый) */}
-              <div className="flex items-center gap-1.5 mt-2.5 bg-knot-500/10 hover:bg-knot-500/20 transition-colors px-4 py-1.5 rounded-full border border-knot-500/20 backdrop-blur-sm cursor-default">
-                <AtSign size={14} className="text-knot-400" />
-                <span className="text-sm font-semibold text-knot-100">{profile.username}</span>
+              <div className="flex items-center gap-1.5 mt-2 bg-accent/10 px-4 py-1.5 rounded-full border border-accent/20 cursor-default">
+                <AtSign size={14} className="text-accent" />
+                <span className="text-sm font-medium text-accent">{profile.username}</span>
              </div>

              {/* Онлайн статус */}