Update app.py

app.py

@@ -19,8 +19,16 @@ def init_db():
             }, f, indent=4)
 
 def read_db():
-    with open(DB_FILE, 'r') as f:
-        return json.load(f)
+    try:
+        with open(DB_FILE, 'r') as f:
+            return json.load(f)
+    except (json.JSONDecodeError, FileNotFoundError):
+        return {
+            "users": {},
+            "chatrooms": {},
+            "messages": {}
+        }
+
 
 def write_db(data):
     with open(DB_FILE, 'w') as f:
@@ -55,9 +63,7 @@ def index():
                 --success-color: #28a745;
                 --error-color: #dc3545;
                 --font-family: 'Inter', sans-serif;
-                --nav-bg: #18191C;
-                --nav-icon-color: #8E9297;
-                --nav-icon-active-color: #FFFFFF;
+                --nav-height: 60px;
             }
 
             * {
@@ -79,7 +85,6 @@ def index():
                 height: 100vh;
                 width: 100vw;
                 display: flex;
-                flex-direction: column;
                 align-items: center;
                 justify-content: center;
             }
@@ -122,32 +127,155 @@ def index():
                 margin-bottom: 40px;
             }
 
-            #app-wrapper {
+            #app-view {
                 display: none;
-                flex-direction: column;
-                height: 100%;
                 width: 100%;
+                height: 100%;
+                flex-direction: column;
             }
-            
-            #app-content {
-                display: flex;
+
+            .app-content {
                 flex-grow: 1;
-                overflow: hidden;
+                display: flex;
+                overflow: hidden; /* Allows child views to scroll internally */
+                padding-bottom: var(--nav-height); /* Space for nav bar */
             }
 
-            #chatroom-list-view {
+            #navigation-bar {
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: var(--nav-height);
+                background-color: var(--bg-secondary);
+                border-top: 1px solid var(--border-color);
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                z-index: 500;
+            }
+            .nav-btn {
+                flex: 1;
                 display: flex;
                 flex-direction: column;
-                height: 100%;
+                align-items: center;
+                justify-content: center;
+                background: none;
+                border: none;
+                color: var(--text-secondary);
+                font-size: 0.7rem;
+                cursor: pointer;
+                padding: 5px 0;
+                transition: color 0.2s ease;
+            }
+            .nav-btn svg {
+                width: 24px;
+                height: 24px;
+                fill: var(--text-secondary);
+                margin-bottom: 4px;
+                transition: fill 0.2s ease;
+            }
+             .nav-btn.scan-qr {
+                position: relative;
+                top: -10px;
+                background: var(--bg-primary);
+                border: 1px solid var(--border-color);
+                border-radius: 12px;
+                padding: 10px;
+                height: auto;
+                min-width: 60px;
+                max-width: 80px;
+            }
+            .nav-btn.scan-qr svg {
+                 width: 30px;
+                 height: 30px;
+                 fill: var(--accent-blue);
+                 margin-bottom: 0;
+            }
+
+            .nav-btn.active {
+                color: var(--text-primary);
+            }
+            .nav-btn.active svg {
+                fill: var(--accent-blue-light);
+            }
+             .nav-btn.scan-qr.active svg {
+                 fill: var(--accent-blue-light);
+             }
+
+            .app-view-section {
                 width: 100%;
+                height: 100%;
+                overflow-y: auto;
+                flex-shrink: 0;
+                display: none; /* Managed by JS */
+                flex-direction: column;
+            }
+
+            #chatroom-list-view {
                 background-color: var(--bg-secondary);
-                overflow: hidden;
             }
-            
+
+            #users-list-view {
+                background-color: var(--bg-secondary);
+            }
+
+            #profile-view {
+                 background-color: var(--bg-secondary);
+                 padding: 20px;
+                 text-align: center;
+                 justify-content: flex-start;
+            }
+            #profile-view h3 {
+                margin-bottom: 20px;
+                font-weight: 600;
+                font-size: 1.3rem;
+            }
+            #profile-view #profile-avatar-container-view {
+                 margin: 20px auto;
+                 display: inline-block;
+            }
+            #profile-view #profile-username-view {
+                 font-size: 1.2rem;
+                 font-weight: 600;
+            }
+             #profile-view #profile-address-view {
+                 color: var(--text-secondary);
+                 font-size: 0.9rem;
+                 word-break: break-all;
+                 margin-top: 8px;
+             }
+             #profile-view #profile-balance-view {
+                 color: var(--text-secondary);
+                 font-size: 0.9rem;
+                 margin-top: 4px;
+             }
+            #profile-view #profile-qr-code-view {
+                 background: white;
+                 padding: 10px;
+                 margin: 20px auto;
+                 width: fit-content;
+                 border-radius: 8px;
+            }
+             #profile-view .qr-help-text {
+                 text-align: center;
+                 color: var(--text-secondary);
+                 font-size: 0.8rem;
+                 margin-top: -10px;
+                 margin-bottom: 20px;
+             }
+             #profile-view .profile-actions {
+                 display: flex;
+                 flex-direction: column;
+                 gap: 12px;
+                 align-items: stretch;
+             }
+
             .list-header {
                 padding: 16px;
                 border-bottom: 1px solid var(--border-color);
                 flex-shrink: 0;
+                background-color: var(--bg-secondary); /* Ensure header stays above scrolling content */
             }
             .list-header-top {
                 display: flex;
@@ -159,8 +287,8 @@ def index():
                 font-size: 1.5rem;
                 font-weight: 600;
             }
-            
-            .user-profile-section {
+
+            .user-profile {
                 padding: 12px;
                 background-color: var(--bg-tertiary);
                 border-radius: 8px;
@@ -172,7 +300,7 @@ def index():
                 margin-bottom: 8px;
                 word-break: break-all;
             }
-            
+
             .username-form { display: flex; gap: 8px; }
             .username-input {
                 flex-grow: 1;
@@ -207,13 +335,14 @@ def index():
                 padding: 8px 12px;
                 font-size: 0.9rem;
             }
-            
-            #chatroom-list {
+
+            #chatroom-list, #users-list {
                 flex-grow: 1;
                 overflow-y: auto;
-                padding-bottom: 60px;
+                /* Add padding to prevent last item being hidden by nav */
+                padding-bottom: var(--nav-height);
             }
-            .chatroom-item {
+            .chatroom-item, .user-item {
                 display: flex;
                 align-items: center;
                 gap: 12px;
@@ -222,7 +351,7 @@ def index():
                 border-bottom: 1px solid var(--border-color);
                 transition: background-color 0.2s ease;
             }
-            .chatroom-item:hover { background-color: var(--bg-hover); }
+            .chatroom-item:hover, .user-item:hover { background-color: var(--bg-hover); }
 
             .avatar {
                 width: 40px;
@@ -235,16 +364,23 @@ def index():
                 color: white;
                 flex-shrink: 0;
             }
-            .chatroom-info {
+            .item-info {
                 flex-grow: 1;
                 overflow: hidden;
             }
-            .chatroom-name {
+            .item-name {
                 font-weight: 500;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
+            .item-secondary-text {
+                font-size: 0.9rem;
+                color: var(--text-secondary);
+                 white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
             .lock-icon {
                 width: 16px;
                 height: 16px;
@@ -258,8 +394,12 @@ def index():
                 height: 100%;
                 width: 100%;
                 background-color: var(--bg-primary);
+                 position: absolute; /* Position absolute for mobile fullscreen */
+                 top: 0;
+                 left: 0;
+                 z-index: 400; /* Above list views but below modals/nav */
             }
-            
+
             .chat-header {
                 display: flex;
                 align-items: center;
@@ -273,7 +413,8 @@ def index():
                 background: none;
                 border: none;
                 cursor: pointer;
-                display: none;
+                display: block; /* Always show on mobile */
+                padding: 0; /* Adjust padding */
             }
             .back-btn svg {
                 width: 24px;
@@ -284,6 +425,11 @@ def index():
                 font-size: 1.2rem;
                 font-weight: 600;
             }
+            #chat-header-avatar {
+                 width: 36px;
+                 height: 36px;
+            }
+
 
             #messages-container {
                 flex-grow: 1;
@@ -336,7 +482,7 @@ def index():
                 background-color: var(--bg-tertiary);
                 border-bottom-left-radius: 4px;
             }
-            
+
             .chat-placeholder {
                 display: flex;
                 flex-direction: column;
@@ -351,15 +497,15 @@ def index():
 
             .message-form {
                 display: flex;
-                padding: 16px;
-                gap: 12px;
+                padding: 10px 16px; /* Smaller padding for mobile */
+                gap: 8px; /* Smaller gap for mobile */
                 background-color: var(--bg-secondary);
                 border-top: 1px solid var(--border-color);
                 flex-shrink: 0;
             }
             #message-input {
                 flex-grow: 1;
-                padding: 12px 16px;
+                padding: 10px 16px; /* Smaller padding */
                 border: 1px solid var(--border-color);
                 background-color: var(--bg-tertiary);
                 color: var(--text-primary);
@@ -371,13 +517,13 @@ def index():
             #message-input:focus { border-color: var(--accent-blue); }
 
             .send-btn {
-                width: 44px;
-                height: 44px;
+                width: 40px; /* Smaller button */
+                height: 40px; /* Smaller button */
                 border-radius: 50%;
                 flex-shrink: 0;
                 padding: 0;
             }
-            .send-btn svg { width: 20px; height: 20px; fill: white; }
+            .send-btn svg { width: 18px; height: 18px; fill: white; } /* Smaller icon */
 
             .modal-overlay {
                 position: fixed;
@@ -415,6 +561,7 @@ def index():
                 font-size: 1rem;
             }
             .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
+            .modal-actions.column { flex-direction: column; align-items: stretch; }
             .modal-btn {
                 padding: 10px 20px;
                 border-radius: 6px;
@@ -422,11 +569,12 @@ def index():
                 cursor: pointer;
                 font-weight: 500;
             }
+            .modal-btn.full-width { width: 100%; text-align: center; }
             .secondary-btn { background-color: var(--bg-hover); color: white; }
-            
+
             #status-bar {
                 position: fixed;
-                bottom: 20px;
+                bottom: calc(var(--nav-height) + 10px); /* Position above nav bar */
                 left: 50%;
                 transform: translateX(-50%);
                 background-color: var(--bg-tertiary);
@@ -439,58 +587,16 @@ def index():
                 transition: opacity 0.3s, visibility 0.3s;
                 z-index: 2000;
                 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+                max-width: 90%;
+                text-align: center;
             }
+             #status-bar.chat-open {
+                 bottom: 20px; /* Position lower when chat is open (nav bar is hidden) */
+             }
             #status-bar.success { background-color: var(--success-color); }
             #status-bar.error { background-color: var(--error-color); }
             #status-bar.visible { opacity: 1; visibility: visible; }
 
-            .bottom-nav {
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
-                background-color: var(--nav-bg);
-                padding: 12px 0;
-                border-top: 1px solid var(--border-color);
-                flex-shrink: 0;
-            }
-            .nav-item {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                cursor: pointer;
-                color: var(--nav-icon-color);
-                transition: color 0.2s ease;
-                font-size: 0.75rem;
-                width: 25%;
-                text-align: center;
-            }
-            .nav-item.center {
-                transform: translateY(-10px);
-                background-color: var(--accent-blue);
-                width: 60px;
-                height: 60px;
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: white;
-                box-shadow: 0 5px 20px rgba(0, 136, 204, 0.4);
-            }
-            .nav-item svg {
-                width: 24px;
-                height: 24px;
-                margin-bottom: 4px;
-                fill: currentColor;
-            }
-            .nav-item.center svg {
-                width: 30px;
-                height: 30px;
-                margin-bottom: 0;
-            }
-            .nav-item.active {
-                color: var(--nav-icon-active-color);
-            }
-
             @media (min-width: 768px) {
                 .main-container {
                     max-width: 1100px;
@@ -500,25 +606,70 @@ def index():
                     box-shadow: 0 10px 40px rgba(0,0,0,0.3);
                     border: 1px solid var(--border-color);
                 }
-                #app-wrapper {
-                    flex-direction: row;
+                #app-view {
+                    flex-direction: column; /* Keep column, content is flex-row */
                 }
-                #chatroom-list-view {
-                    width: 320px;
-                    flex-shrink: 0;
+                 .app-content {
+                    padding-bottom: 0; /* No space needed for nav bar */
+                    flex-direction: row; /* Desktop layout */
+                 }
+                #navigation-bar {
+                    position: static; /* Nav bar is part of the layout */
+                    width: auto;
+                    height: auto; /* Or a fixed width column */
+                    border-top: none;
                     border-right: 1px solid var(--border-color);
-                    display: flex !important;
+                    flex-direction: column; /* Stack vertically */
+                    justify-content: flex-start; /* Align to top */
+                    padding: 20px 0;
+                    gap: 15px;
+                    flex-shrink: 0;
+                    width: 80px; /* Fixed width for desktop nav */
                 }
-                #chat-window-view {
-                    width: auto;
+                 .nav-btn {
+                     flex: none; /* Don't grow */
+                     width: 100%; /* Full width of nav column */
+                     padding: 10px 0;
+                     font-size: 0.8rem;
+                 }
+                 .nav-btn svg {
+                     width: 28px; /* Slightly larger icons */
+                     height: 28px;
+                 }
+                 .nav-btn.scan-qr {
+                    position: static; /* No floating effect */
+                    background: none; /* No special background */
+                    border: none; /* No special border */
+                    padding: 0;
+                    width: auto; /* Auto width */
+                    max-width: none;
+                    height: auto;
+                 }
+                 .nav-btn.scan-qr svg {
+                    width: 32px; /* Scan icon slightly larger */
+                    height: 32px;
+                 }
+                .app-view-section {
+                    width: 320px; /* Default width for list views */
+                }
+                #profile-view {
+                    width: auto; /* Profile takes remaining space if selected */
                     flex-grow: 1;
-                    display: flex !important;
+                    padding-top: 40px; /* More vertical padding */
+                }
+                #chatroom-list, #users-list {
+                    padding-bottom: 0; /* No space needed for nav bar */
                 }
-                #chat-window-view.hidden-on-desktop {
-                    display: flex !important;
+                 #chat-window-view {
+                     position: static; /* Static position */
+                     width: auto; /* Takes remaining space */
+                     flex-grow: 1;
+                     z-index: 1; /* Lower z-index */
+                 }
+                .back-btn { display: none; } /* Hide back button on desktop */
+                #status-bar {
+                    bottom: 20px; /* Reset position */
                 }
-                .back-btn { display: none !important; }
-                .bottom-nav { display: none; }
             }
         </style>
     </head>
@@ -531,9 +682,27 @@ def index():
             <div id="ton-connect-button"></div>
         </div>
 
-        <div id="app-wrapper" class="main-container">
-            <div id="app-content">
-                <div id="chatroom-list-view">
+        <div id="app-view" class="main-container">
+            <div class="app-content">
+                <nav id="navigation-bar">
+                    <button class="nav-btn" data-view="chatroom-list-view">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12zM8 10h8v2H8zm0-3h8v2H8z"/></svg>
+                        <span>Чаты</span>
+                    </button>
+                    <button class="nav-btn" data-view="users-list-view">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 11c1.65 0 2.99-1.34 2.99-3S17.65 5 16 5s-3 1.34-3 3s1.35 3 3 3zm-8 0c1.65 0 2.99-1.34 2.99-3S9.65 5 8 5S5 6.34 5 8s1.35 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
+                        <span>Пользователи</span>
+                    </button>
+                    <button class="nav-btn scan-qr" data-view="scan-qr">
+                         <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm8-12v8h8V3h-8zm6 6h-4V5h4v4zm-2 10a2 2 0 100-4 2 2 0 000 4z"/></svg>
+                    </button>
+                    <button class="nav-btn" data-view="profile-view">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                        <span>Профиль</span>
+                    </button>
+                </nav>
+
+                <div id="chatroom-list-view" class="app-view-section">
                     <div class="list-header">
                         <div class="list-header-top">
                             <h2>Чаты</h2>
@@ -544,7 +713,7 @@ def index():
                                 </button>
                             </div>
                         </div>
-                        <div class="user-profile-section">
+                         <div class="user-profile">
                             <div id="user-wallet"></div>
                             <div id="user-nickname"></div>
                             <form class="username-form" id="username-form">
@@ -556,7 +725,32 @@ def index():
                     <div id="chatroom-list"></div>
                 </div>
 
-                <div id="chat-window-view" class="hidden-on-desktop">
+                 <div id="users-list-view" class="app-view-section">
+                    <div class="list-header">
+                        <div class="list-header-top">
+                            <h2>Пользователи</h2>
+                        </div>
+                    </div>
+                    <div id="users-list"></div>
+                 </div>
+
+                 <div id="profile-view" class="app-view-section">
+                     <h3>Мой профиль</h3>
+                     <div id="profile-avatar-container-view" style="margin: 20px auto; display: inline-block;"></div>
+                     <p id="profile-username-view" style="font-size: 1.2rem; font-weight: 600;"></p>
+                     <p id="profile-address-view" style="color: var(--text-secondary); font-size: 0.9rem; word-break: break-all; margin-top: 8px;"></p>
+                     <p id="profile-balance-view" style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 4px;">Баланс: Loading...</p>
+                     <div id="profile-qr-code-view" style="background: white; padding: 10px; margin: 20px auto; width: fit-content; border-radius: 8px;"></div>
+                     <p class="qr-help-text">Отсканируйте этот QR-код, чтобы другие могли открыть ваш профиль в Virton.</p>
+                     <div class="profile-actions">
+                         <!-- Add other profile actions here if needed -->
+                         <!-- <button class="modal-btn action-btn full-width">Настройки</button> -->
+                         <button id="disconnect-wallet-btn" class="modal-btn secondary-btn full-width">Отключить кошелек</button>
+                     </div>
+                 </div>
+
+
+                <div id="chat-window-view">
                     <div id="chat-placeholder" class="chat-placeholder">
                         <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
                         <h2>Выберите чат</h2>
@@ -580,26 +774,8 @@ def index():
                     </div>
                 </div>
             </div>
-
-            <div class="bottom-nav">
-                <div class="nav-item" id="nav-chats">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 13l-2-2V4H4v11h14z"/><path fill="none" d="M0 0h24v24H0V0z"/><path d="M16 8a2 2 0 100-4 2 2 0 000 4zM8 12a2 2 0 100-4 2 2 0 000 4zM16 12a2 2 0 100-4 2 2 0 000 4z"/></svg>
-                    <span>Чаты</span>
-                </div>
-                <div class="nav-item" id="nav-users">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
-                    <span>Пользователи</span>
-                </div>
-                <div class="nav-item center" id="nav-scan">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 4h-4v2h2v14h-14v-2h-2v4h20V4z"/><path d="M8 13a5 5 0 110-10 5 5 0 010 10zm0-6a3 3 0 100 6 3 3 0 000-6z"/></svg>
-                </div>
-                <div class="nav-item" id="nav-profile">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
-                    <span>Профиль</span>
-                </div>
-            </div>
         </div>
-        
+
         <div id="create-room-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Создать новый чат</h3>
@@ -630,17 +806,18 @@ def index():
             </div>
         </div>
 
-        <div id="profile-modal" class="modal-overlay">
+        <div id="user-profile-modal" class="modal-overlay">
             <div class="modal-content" style="text-align: center;">
-                <h3 id="profile-modal-title">Профиль пользователя</h3>
-                <div id="profile-avatar-container" style="margin: 20px auto; display: inline-block;"></div>
-                <p id="profile-username" style="font-size: 1.2rem; font-weight: 600;"></p>
-                <p id="profile-address" style="color: var(--text-secondary); font-size: 0.9rem; word-break: break-all; margin-top: 8px;"></p>
-                <div id="profile-qr-code" style="background: white; padding: 10px; margin: 20px auto; width: fit-content; border-radius: 8px;"></div>
-                <p style="text-align: center; color: var(--text-secondary); font-size: 0.8rem; margin-top: -10px; margin-bottom: 20px;">Отсканируйте для открытия профиля</p>
-                <div class="modal-actions" style="flex-direction: column; gap: 12px; align-items: stretch;">
+                <h3 id="user-profile-modal-title">Профиль пользователя</h3>
+                <div id="profile-avatar-container-modal" style="margin: 20px auto; display: inline-block;"></div>
+                <p id="profile-username-modal" style="font-size: 1.2rem; font-weight: 600;"></p>
+                <p id="profile-address-modal" style="color: var(--text-secondary); font-size: 0.9rem; word-break: break-all; margin-top: 8px;"></p>
+                 <p id="profile-balance-modal" style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 4px;">Баланс: Loading...</p>
+                <div id="profile-qr-code-modal" style="background: white; padding: 10px; margin: 20px auto; width: fit-content; border-radius: 8px;"></div>
+                <p class="qr-help-text">Отсканируйте этот QR-код, чтобы открыть профиль пользователя в Virton.</p>
+                <div class="modal-actions column">
                     <button id="send-ton-btn" class="modal-btn action-btn">Отправить TON</button>
-                    <button id="profile-close-btn" class="modal-btn secondary-btn">Закрыть</button>
+                    <button id="user-profile-close-btn" class="modal-btn secondary-btn">Закрыть</button>
                 </div>
             </div>
         </div>
@@ -669,18 +846,29 @@ def index():
                 let messagePollingInterval = null;
                 let chatroomsData = {};
                 let html5QrCode = null;
-                let profileQrCode = null;
-                let currentNavView = 'chats'; 
-                
+                let profileQrCodeView = null; // QR code instance for profile-view
+                let profileQrCodeModal = null; // QR code instance for user-profile-modal
+                let currentView = 'chatroom-list-view'; // Keep track of the active main view
+                let lastListView = 'chatroom-list-view'; // Keep track of the last active list view (chats or users)
+
                 const loginView = document.getElementById('login-view');
-                const appWrapper = document.getElementById('app-wrapper');
+                const appView = document.getElementById('app-view');
+                const appContent = document.querySelector('.app-content');
+                const navigationBar = document.getElementById('navigation-bar');
+                const navButtons = document.querySelectorAll('.nav-btn');
+
                 const chatroomListView = document.getElementById('chatroom-list-view');
+                const usersListView = document.getElementById('users-list-view');
+                const profileView = document.getElementById('profile-view');
                 const chatWindowView = document.getElementById('chat-window-view');
                 const chatPlaceholder = document.getElementById('chat-placeholder');
                 const activeChat = document.getElementById('active-chat');
-                const profileModal = document.getElementById('profile-modal');
+
+                const createRoomModal = document.getElementById('create-room-modal');
+                const passwordModal = document.getElementById('password-modal');
+                const userProfileModal = document.getElementById('user-profile-modal'); // Modal for other users
                 const scannerModal = document.getElementById('scanner-modal');
-                const bottomNav = document.querySelector('.bottom-nav');
+                const statusBar = document.getElementById('status-bar');
 
                 const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292'];
 
@@ -696,12 +884,16 @@ def index():
                 };
 
                 const showStatus = (message, type = 'info', duration = 3000) => {
-                    const statusBar = document.getElementById('status-bar');
                     statusBar.textContent = message;
-                    statusBar.className = 'status-bar';
+                    statusBar.className = 'status-bar'; // Reset classes
                     if (type === 'success') statusBar.classList.add('success');
                     else if (type === 'error') statusBar.classList.add('error');
-                    
+                    if (activeChatroomId && window.innerWidth < 768) {
+                        statusBar.classList.add('chat-open'); // Position lower when chat is fullscreen on mobile
+                    } else {
+                         statusBar.classList.remove('chat-open');
+                    }
+
                     statusBar.classList.add('visible');
                     setTimeout(() => statusBar.classList.remove('visible'), duration);
                 };
@@ -720,24 +912,40 @@ def index():
                         throw error;
                     }
                 };
-                
+
                 const truncateAddress = (address) => address ? `${address.substring(0, 4)}...${address.substring(address.length - 4)}` : '';
 
                 const updateUserInfo = () => {
-                    document.getElementById('user-wallet').textContent = `Кошелек: ${truncateAddress(currentUser.address)}`;
+                    const walletEl = document.getElementById('user-wallet');
                     const nicknameEl = document.getElementById('user-nickname');
                     const usernameInput = document.getElementById('username-input');
-                    nicknameEl.textContent = currentUser.username ? `Ник: ${currentUser.username}` : `Никнейм не установлен`;
-                    usernameInput.value = currentUser.username || '';
+
+                    if (walletEl) walletEl.textContent = `Кошелек: ${truncateAddress(currentUser.address)}`;
+                    if (nicknameEl) nicknameEl.textContent = currentUser.username ? `Ник: ${currentUser.username}` : `Никнейм не установлен`;
+                    if (usernameInput) usernameInput.value = currentUser.username || '';
+
+                    // Update profile view if visible
+                    if (currentView === 'profile-view') {
+                         showMyProfile();
+                    }
                 };
-                
+
                 document.getElementById('username-form').addEventListener('submit', async (e) => {
                     e.preventDefault();
                     const newUsername = document.getElementById('username-input').value.trim();
-                    if (!newUsername || newUsername.length < 3) {
-                        showStatus('Никнейм должен быть не короче 3 символов.', 'error');
+                    if (!newUsername) {
+                         showStatus('Никнейм не может быть пустым.', 'error');
+                         return;
+                    }
+                    if (newUsername.length < 3 || newUsername.length > 20) {
+                        showStatus('Никнейм должен быть от 3 до 20 символов.', 'error');
+                        return;
+                    }
+                    if (!/^[a-zA-Z0-9_]+$/.test(newUsername)) {
+                        showStatus('Никнейм может содержать только латинские буквы, цифры и _ .', 'error');
                         return;
                     }
+
                     try {
                         await apiCall('/api/set_username', {
                             method: 'POST',
@@ -747,8 +955,9 @@ def index():
                         currentUser.username = newUsername;
                         updateUserInfo();
                         showStatus('Никнейм успешно обновлен!', 'success');
-                        fetchChatrooms();
-                        if (activeChatroomId) fetchMessages(activeChatroomId); 
+                        fetchChatrooms(); // Chat list needs to update display names
+                        if (activeChatroomId) fetchMessages(activeChatroomId); // Active chat needs to update display names
+                        fetchUsers(); // User list needs to update
                     } catch (err) {}
                 });
 
@@ -766,49 +975,170 @@ def index():
                     }
                     updateUserInfo();
                     loginView.style.display = 'none';
-                    appWrapper.style.display = 'flex';
-                    showView('chats');
+                    appView.style.display = 'flex';
+                    showView('chatroom-list-view'); // Default view after login
                     fetchChatrooms();
+                    fetchUsers(); // Fetch users list on login
+                };
+
+                const showView = (viewId) => {
+                    // Hide all main views first
+                    document.querySelectorAll('.app-view-section').forEach(view => {
+                        view.style.display = 'none';
+                    });
+                    chatWindowView.style.display = 'none';
+                    activeChat.style.display = 'none'; // Ensure chat content is hidden
+                    chatPlaceholder.style.display = 'flex'; // Show placeholder by default
+
+                    // Hide modals just in case
+                    document.querySelectorAll('.modal-overlay').forEach(modal => modal.style.display = 'none');
+
+                    // Clear intervals/states related to potentially hidden views
+                    if (messagePollingInterval) clearInterval(messagePollingInterval);
+                    activeChatroomId = null;
+
+                    // Show the selected view
+                    const selectedView = document.getElementById(viewId);
+                    if (selectedView) {
+                        selectedView.style.display = 'flex';
+                        currentView = viewId;
+                        if (viewId === 'chatroom-list-view' || viewId === 'users-list-view') {
+                             lastListView = viewId; // Update last list view
+                        }
+                    }
+
+                    // Update active nav button
+                    navButtons.forEach(btn => {
+                        btn.classList.remove('active');
+                        if (btn.dataset.view === viewId) {
+                            btn.classList.add('active');
+                        }
+                         // Special handling for scan button, it opens a modal, not a view section
+                         if (viewId === 'scan-qr') {
+                             document.querySelector('.nav-btn.scan-qr').classList.add('active');
+                         }
+                    });
+
+                    // Handle desktop layout: list view always visible next to chat
+                    if (window.innerWidth >= 768) {
+                         if (viewId === 'chatroom-list-view' || viewId === 'users-list-view') {
+                             // Show the selected list view
+                             document.getElementById(viewId).style.display = 'flex';
+                             // Hide the other list view
+                             const otherListViewId = viewId === 'chatroom-list-view' ? 'users-list-view' : 'chatroom-list-view';
+                             document.getElementById(otherListViewId).style.display = 'none';
+                             // Show chat placeholder beside it
+                              chatWindowView.style.display = 'flex';
+                             chatPlaceholder.style.display = 'flex';
+                             activeChat.style.display = 'none';
+                         } else if (viewId === 'profile-view') {
+                              // Show profile view, hide both list views
+                              chatroomListView.style.display = 'none';
+                              usersListView.style.display = 'none';
+                              // Hide chat window placeholder/content beside it
+                               chatWindowView.style.display = 'none';
+                         } else if (viewId === 'chat-window-view') {
+                             // This case should ideally be handled by selectChatroom,
+                             // not directly by clicking a nav button.
+                             // On desktop, when chat is active, the list view should still be visible.
+                             // The selectChatroom function handles this.
+                             // If somehow showView('chat-window-view') is called, default to showing last list view beside it.
+                              document.getElementById(lastListView).style.display = 'flex';
+                              chatWindowView.style.display = 'flex';
+                         }
+                    } else { // Mobile layout
+                         // Ensure nav bar is visible unless in chat
+                         navigationBar.style.display = (viewId === 'chat-window-view') ? 'none' : 'flex';
+                         // Adjust status bar position based on nav visibility
+                         if (viewId === 'chat-window-view') statusBar.classList.add('chat-open');
+                         else statusBar.classList.remove('chat-open');
+                    }
                 };
 
                 const renderChatrooms = (rooms) => {
                     const list = document.getElementById('chatroom-list');
                     list.innerHTML = '';
                     chatroomsData = {};
-                    rooms.forEach(room => {
-                        chatroomsData[room.id] = room;
-                        const item = document.createElement('div');
-                        item.className = 'chatroom-item';
-                        item.dataset.id = room.id;
-                        
-                        item.appendChild(getAvatar(room.name));
-
-                        const infoDiv = document.createElement('div');
-                        infoDiv.className = 'chatroom-info';
-                        const nameSpan = document.createElement('div');
-                        nameSpan.className = 'chatroom-name';
-                        nameSpan.textContent = room.name;
-                        infoDiv.appendChild(nameSpan);
-                        item.appendChild(infoDiv);
-
-                        if (room.is_private) {
-                            const lockIcon = document.createElement('div');
-                            lockIcon.innerHTML = `<svg class="lock-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"/></svg>`;
-                            item.appendChild(lockIcon);
-                        }
+                    if (rooms.length === 0) {
+                         list.innerHTML = '<div style="text-align: center; padding: 20px; color: var(--text-secondary);">Пока нет чатов. Создайте первый!</div>';
+                    } else {
+                         rooms.forEach(room => {
+                            chatroomsData[room.id] = room;
+                            const item = document.createElement('div');
+                            item.className = 'chatroom-item';
+                            item.dataset.id = room.id;
+
+                            item.appendChild(getAvatar(room.name));
+
+                            const infoDiv = document.createElement('div');
+                            infoDiv.className = 'item-info';
+                            const nameSpan = document.createElement('div');
+                            nameSpan.className = 'item-name';
+                            nameSpan.textContent = room.name;
+                            infoDiv.appendChild(nameSpan);
+                            item.appendChild(infoDiv);
+
+                            if (room.is_private) {
+                                const lockIcon = document.createElement('div');
+                                lockIcon.innerHTML = `<svg class="lock-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"/></svg>`;
+                                item.appendChild(lockIcon);
+                            }
 
-                        item.addEventListener('click', () => selectChatroom(room.id, room.is_private));
-                        list.appendChild(item);
-                    });
+                            item.addEventListener('click', () => selectChatroom(room.id, room.is_private));
+                            list.appendChild(item);
+                        });
+                    }
                 };
-                
+
                 const fetchChatrooms = async () => {
                     try {
                         const data = await apiCall('/api/chatrooms');
-                        renderChatrooms(data.chatrooms);
+                        if (data) renderChatrooms(data.chatrooms);
                     } catch (err) {}
                 };
 
+                const renderUsers = (users) => {
+                    const list = document.getElementById('users-list');
+                    list.innerHTML = '';
+                    if (users.length === 0) {
+                         list.innerHTML = '<div style="text-align: center; padding: 20px; color: var(--text-secondary);">Пока нет других пользователей.</div>';
+                    } else {
+                         users.forEach(user => {
+                            if (user.address === currentUser.address) return; // Skip current user
+
+                            const item = document.createElement('div');
+                            item.className = 'user-item';
+                            item.dataset.address = user.address;
+
+                            item.appendChild(getAvatar(user.username));
+
+                            const infoDiv = document.createElement('div');
+                            infoDiv.className = 'item-info';
+                            const nameSpan = document.createElement('div');
+                            nameSpan.className = 'item-name';
+                            nameSpan.textContent = user.username || `User ${truncateAddress(user.address)}`;
+                            infoDiv.appendChild(nameSpan);
+
+                            const addressSpan = document.createElement('div');
+                            addressSpan.className = 'item-secondary-text';
+                            addressSpan.textContent = truncateAddress(user.address);
+                            infoDiv.appendChild(addressSpan);
+
+                            item.appendChild(infoDiv);
+
+                            item.addEventListener('click', () => showUserProfileModal(user.address));
+                            list.appendChild(item);
+                         });
+                    }
+                };
+
+                 const fetchUsers = async () => {
+                    try {
+                        const data = await apiCall('/api/users');
+                         if (data) renderUsers(data.users);
+                    } catch (err) {}
+                 };
+
                 const renderMessages = (messages) => {
                     const container = document.getElementById('messages-container');
                     const shouldScroll = container.scrollTop + container.clientHeight >= container.scrollHeight - 30;
@@ -820,16 +1150,28 @@ def index():
                         const avatar = getAvatar(msg.display_name);
                         avatar.classList.add('message-avatar');
                         avatar.style.cursor = 'pointer';
-                        avatar.onclick = () => showProfile(msg.sender_address);
-                        
+                        avatar.onclick = () => {
+                            if (msg.sender_address !== currentUser.address) {
+                                 showUserProfileModal(msg.sender_address);
+                            } else {
+                                showMyProfile(); // Click own avatar goes to own profile view
+                            }
+                        };
+
                         const contentDiv = document.createElement('div');
                         contentDiv.className = 'message-content';
 
                         const senderDiv = document.createElement('div');
                         senderDiv.className = 'message-sender';
                         senderDiv.textContent = msg.display_name;
-                        senderDiv.onclick = () => showProfile(msg.sender_address);
-                        
+                        senderDiv.onclick = () => {
+                             if (msg.sender_address !== currentUser.address) {
+                                showUserProfileModal(msg.sender_address);
+                             } else {
+                                showMyProfile(); // Click own username goes to own profile view
+                             }
+                        };
+
                         const bubbleDiv = document.createElement('div');
                         bubbleDiv.className = 'message-bubble';
                         bubbleDiv.textContent = msg.text;
@@ -842,33 +1184,20 @@ def index():
                         container.appendChild(msgDiv);
                     });
 
-                    if(shouldScroll) {
+                    if(shouldScroll || messages.length > 0) { // Scroll to bottom on initial load too
                         container.scrollTop = container.scrollHeight;
                     }
                 };
-                
+
                 const fetchMessages = async (roomId) => {
+                    if (!roomId) return;
                     try {
                         const data = await apiCall(`/api/messages/${roomId}`);
-                        renderMessages(data.messages);
+                        if (data) renderMessages(data.messages);
                     } catch (err) {
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
                     }
                 };
-                
-                const showChatView = () => {
-                    chatWindowView.style.display = 'flex';
-                    if (window.innerWidth < 768) {
-                        chatroomListView.style.display = 'none';
-                    }
-                };
-
-                const showListView = () => {
-                    chatroomListView.style.display = 'flex';
-                    if (window.innerWidth < 768) {
-                        chatWindowView.style.display = 'none';
-                    }
-                };
 
                 const selectChatroom = (roomId, isPrivate) => {
                     const roomData = chatroomsData[roomId];
@@ -877,7 +1206,7 @@ def index():
                     const proceedToRoom = () => {
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
                         activeChatroomId = roomId;
-                        
+
                         document.getElementById('chat-header-title').textContent = roomData.name;
                         const headerAvatar = document.getElementById('chat-header-avatar');
                         headerAvatar.innerHTML = '';
@@ -885,23 +1214,28 @@ def index():
 
                         chatPlaceholder.style.display = 'none';
                         activeChat.style.display = 'flex';
-                        showChatView();
-                        
+                        showView('chat-window-view'); // Switch view to chat window
+
                         fetchMessages(roomId);
                         messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000);
                     };
-                    
+
                     if (isPrivate) {
-                        const passwordModal = document.getElementById('password-modal');
                         const passwordForm = document.getElementById('password-form');
                         const passwordInput = document.getElementById('password-input');
                         passwordModal.style.display = 'flex';
                         passwordInput.value = '';
                         passwordInput.focus();
 
+                        // Remove existing listener before adding a new one
+                        const oldForm = document.getElementById('password-form');
+                        const newForm = oldForm.cloneNode(true);
+                        oldForm.parentNode.replaceChild(newForm, oldForm);
+                        const passwordFormNew = document.getElementById('password-form');
+
                         const formSubmitHandler = async (e) => {
                             e.preventDefault();
-                            passwordForm.removeEventListener('submit', formSubmitHandler);
+                            passwordFormNew.removeEventListener('submit', formSubmitHandler);
                             const password = passwordInput.value;
                             passwordModal.style.display = 'none';
                             try {
@@ -913,11 +1247,11 @@ def index():
                                 proceedToRoom();
                             } catch (err) {}
                         };
-                        passwordForm.addEventListener('submit', formSubmitHandler);
+                        passwordFormNew.addEventListener('submit', formSubmitHandler);
 
                         document.getElementById('password-cancel').onclick = () => {
                             passwordModal.style.display = 'none';
-                            passwordForm.removeEventListener('submit', formSubmitHandler);
+                            passwordFormNew.removeEventListener('submit', formSubmitHandler);
                         };
                     } else {
                         proceedToRoom();
@@ -929,7 +1263,7 @@ def index():
                     const input = document.getElementById('message-input');
                     const sendBtn = document.getElementById('send-btn');
                     const text = input.value.trim();
-                    if (text && activeChatroomId) {
+                    if (text && activeChatroomId && currentUser.address) {
                         input.value = '';
                         input.disabled = true;
                         sendBtn.disabled = true;
@@ -943,8 +1277,8 @@ def index():
                                     text: text
                                 })
                             });
-                            await fetchMessages(activeChatroomId);
-                            document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
+                            // Wait a moment before polling to ensure DB write completes
+                            setTimeout(() => fetchMessages(activeChatroomId), 200);
                         } finally {
                             input.disabled = false;
                             sendBtn.disabled = false;
@@ -953,10 +1287,10 @@ def index():
                     }
                 });
 
-                const createRoomModal = document.getElementById('create-room-modal');
                 document.getElementById('create-room-show-modal').addEventListener('click', () => {
                     createRoomModal.style.display = 'flex';
                     document.getElementById('create-room-form').reset();
+                    document.getElementById('room-name').focus();
                 });
                 document.getElementById('create-room-cancel').addEventListener('click', () => {
                     createRoomModal.style.display = 'none';
@@ -965,7 +1299,22 @@ def index():
                     e.preventDefault();
                     const name = document.getElementById('room-name').value.trim();
                     const password = document.getElementById('room-password').value;
-                    if (!name) return;
+                    if (!name) {
+                         showStatus('Название чата не может быть пустым.', 'error');
+                         return;
+                    }
+                     if (name.length < 3 || name.length > 30) {
+                         showStatus('Название чата должно быть от 3 до 30 символов.', 'error');
+                         return;
+                     }
+                    if (password && password.length < 4) {
+                         showStatus('Пароль должен быть не короче 4 символов.', 'error');
+                         return;
+                    }
+                    if (!currentUser.address) {
+                         showStatus('Подключите кошелек для создания чата.', 'error');
+                         return;
+                    }
 
                     try {
                         await apiCall('/api/create_chatroom', {
@@ -979,75 +1328,147 @@ def index():
                     } catch (err) {}
                 });
 
-                const showProfile = async (address) => {
+                const updateProfileDataInElements = async (address, isCurrentUser, containerId, avatarContainerId, usernameId, addressId, balanceId, qrCodeId, sendTonBtnId) => {
                     try {
                         const userData = await apiCall('/api/user_data', {
                             method: 'POST',
                             headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify({ address: address })
                         });
-                        
+
                         const username = userData.username || `User ${truncateAddress(address)}`;
-                        const avatarContainer = document.getElementById('profile-avatar-container');
-                        const usernameEl = document.getElementById('profile-username');
-                        const addressEl = document.getElementById('profile-address');
-                        const qrCodeEl = document.getElementById('profile-qr-code');
-                        const sendTonBtn = document.getElementById('send-ton-btn');
-                        
-                        avatarContainer.innerHTML = '';
-                        avatarContainer.appendChild(getAvatar(username));
-                        
-                        usernameEl.textContent = username;
-                        addressEl.textContent = address;
-                        
-                        qrCodeEl.innerHTML = '';
-                        if (profileQrCode) {
-                            profileQrCode.clear();
+                        const avatarContainer = document.getElementById(avatarContainerId);
+                        const usernameEl = document.getElementById(usernameId);
+                        const addressEl = document.getElementById(addressId);
+                        const balanceEl = document.getElementById(balanceId);
+                        const qrCodeEl = document.getElementById(qrCodeId);
+                        const sendTonBtn = document.getElementById(sendTonBtnId);
+
+                        if (avatarContainer) {
+                             avatarContainer.innerHTML = '';
+                             avatarContainer.appendChild(getAvatar(username));
                         }
-                        profileQrCode = new QRCode(qrCodeEl, {
-                            text: address,
-                            width: 150,
-                            height: 150,
-                            colorDark : "#000000",
-                            colorLight : "#ffffff",
-                            correctLevel : QRCode.CorrectLevel.H
-                        });
-                        
-                        sendTonBtn.onclick = async () => {
-                            if (!tonConnectUI.connected) {
-                                showStatus('Подключите кошелек для отправки TON.', 'error');
-                                return;
+                        if (usernameEl) usernameEl.textContent = username;
+                        if (addressEl) addressEl.textContent = address;
+
+                        // Placeholder for balance - backend doesn't provide it
+                        if (balanceEl) {
+                             // You would fetch the actual balance here if the backend supported it
+                            balanceEl.textContent = `Баланс: ${isCurrentUser ? 'Loading...' : 'N/A'}`; // Show loading for self, N/A for others (as we don't have their balance)
+                            if (isCurrentUser && tonConnectUI.connected) {
+                                try {
+                                     const balance = await tonConnectUI.getBalance();
+                                     balanceEl.textContent = `Баланс: ${parseFloat(balance) / 1_000_000_000} TON`; // Display balance in TON
+                                } catch (balanceError) {
+                                     balanceEl.textContent = 'Баланс: Ошибка загрузки';
+                                     console.error("Failed to get balance:", balanceError);
+                                }
+                            } else if (!isCurrentUser) {
+                                 balanceEl.textContent = 'Баланс: N/A';
                             }
-                            const amountString = prompt("Введите сумму в TON для отправки:", "0.1");
-                            if (amountString === null) return;
-                            
-                            const amount = parseFloat(amountString);
-                            if (isNaN(amount) || amount <= 0) {
-                                showStatus('Неверная сумма.', 'error');
-                                return;
+                        }
+
+
+                        if (qrCodeEl) {
+                            qrCodeEl.innerHTML = '';
+                            const qrCodeInstance = isCurrentUser ? profileQrCodeView : profileQrCodeModal;
+                            if (qrCodeInstance) {
+                                qrCodeInstance.clear();
                             }
-                            
-                            const amountInNanoTon = Math.floor(amount * 1_000_000_000).toString();
 
-                            const transaction = {
-                                validUntil: Math.floor(Date.now() / 1000) + 600,
-                                messages: [ { address: address, amount: amountInNanoTon } ]
-                            };
+                            const newQrCodeInstance = new QRCode(qrCodeEl, {
+                                text: address,
+                                width: 150,
+                                height: 150,
+                                colorDark : "#000000",
+                                colorLight : "#ffffff",
+                                correctLevel : QRCode.CorrectLevel.H
+                            });
 
-                            try {
-                                await tonConnectUI.sendTransaction(transaction);
-                                showStatus(`Транзакция отправлена успешно!`, 'success');
-                                profileModal.style.display = 'none';
-                            } catch (error) {
-                                showStatus('Транзакция отклонена.', 'error');
+                            if (isCurrentUser) profileQrCodeView = newQrCodeInstance;
+                            else profileQrCodeModal = newQrCodeInstance;
+                        }
+
+                        if (sendTonBtn) {
+                            if (isCurrentUser) {
+                                sendTonBtn.style.display = 'none';
+                            } else {
+                                sendTonBtn.style.display = tonConnectUI.connected ? 'block' : 'none';
+                                sendTonBtn.onclick = async () => {
+                                     if (!tonConnectUI.connected) {
+                                         showStatus('Подключите кошелек для отправки TON.', 'error');
+                                         return;
+                                     }
+                                     const amountString = prompt("Введите сумму в TON для отправки:", "0.1");
+                                     if (amountString === null) return;
+
+                                     const amount = parseFloat(amountString);
+                                     if (isNaN(amount) || amount <= 0) {
+                                         showStatus('Неверная сумма.', 'error');
+                                         return;
+                                     }
+
+                                     const amountInNanoTon = Math.floor(amount * 1_000_000_000).toString();
+
+                                     const transaction = {
+                                         validUntil: Math.floor(Date.now() / 1000) + 600,
+                                         messages: [ { address: address, amount: amountInNanoTon } ]
+                                     };
+
+                                     try {
+                                         await tonConnectUI.sendTransaction(transaction);
+                                         showStatus(`Транзакция отправлена успешно!`, 'success');
+                                         userProfileModal.style.display = 'none'; // Close modal after sending
+                                     } catch (error) {
+                                          showStatus('Транзакция отменена или произошла ошибка.', 'error');
+                                     }
+                                };
                             }
-                        };
-                        
-                        sendTonBtn.style.display = (address === currentUser.address) ? 'none' : 'block';
-                        profileModal.style.display = 'flex';
+                        }
+
                     } catch (err) {
                         showStatus('Не удалось загрузить профиль.', 'error');
                     }
+                 };
+
+
+                const showMyProfile = () => {
+                    if (!currentUser.address) {
+                         showStatus('Подключите кошелек, чтобы посмотреть профиль.', 'error');
+                         return;
+                    }
+                    showView('profile-view');
+                    updateProfileDataInElements(
+                        currentUser.address,
+                        true,
+                        'profile-view',
+                        'profile-avatar-container-view',
+                        'profile-username-view',
+                        'profile-address-view',
+                        'profile-balance-view',
+                        'profile-qr-code-view',
+                        null // No send TON button on own profile view
+                    );
+                };
+
+                const showUserProfileModal = (address) => {
+                     if (!address) return;
+                     if (address === currentUser.address) {
+                          showMyProfile(); // If clicking self in list, go to profile view
+                          return;
+                     }
+                     userProfileModal.style.display = 'flex';
+                     updateProfileDataInElements(
+                        address,
+                        false,
+                        'user-profile-modal',
+                        'profile-avatar-container-modal',
+                        'profile-username-modal',
+                        'profile-address-modal',
+                        'profile-balance-modal',
+                        'profile-qr-code-modal',
+                        'send-ton-btn' // Send TON button on other users' modal
+                    );
                 };
 
                 const showScanner = () => {
@@ -1055,13 +1476,15 @@ def index():
                     html5QrCode = new Html5Qrcode("qr-reader");
                     const qrCodeSuccessCallback = (decodedText, decodedResult) => {
                         hideScanner();
+                        // Basic check if it looks like a TON address (EQ/UQ followed by many chars)
                         if (decodedText && decodedText.length > 40 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ'))) {
-                            showProfile(decodedText);
+                            showUserProfileModal(decodedText); // Show profile modal for scanned address
                         } else {
-                            showStatus('Отсканирован недействительный QR-код.', 'error');
+                            showStatus('Отсканирован недействительный QR-код (ожидается TON адрес).', 'error');
                         }
                     };
-                    const config = { fps: 10, qrbox: { width: 250, height: 250 } };
+                    const config = { fps: 10, qrbox: { width: 250, height: 250 } }; // Adjusted qrbox size
+                    // Request camera permissions and start scanning
                     html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
                         .catch(err => {
                             showStatus('Не удалось запустить сканер.', 'error');
@@ -1075,60 +1498,70 @@ def index():
                     }
                     scannerModal.style.display = 'none';
                 };
-                
-                const showView = (viewName) => {
-                    currentNavView = viewName;
-                    document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
-                    document.getElementById(`nav-${viewName}`).classList.add('active');
-
-                    if (viewName === 'chats') {
-                        if (window.innerWidth < 768) {
-                            chatroomListView.style.display = 'flex';
-                            chatWindowView.style.display = 'none';
+
+                 document.getElementById('disconnect-wallet-btn').addEventListener('click', () => {
+                     tonConnectUI.disconnect();
+                 });
+                 document.getElementById('user-profile-close-btn').addEventListener('click', () => userProfileModal.style.display = 'none');
+                 document.getElementById('scanner-close-btn').addEventListener('click', hideScanner);
+                 document.getElementById('back-to-list-btn').addEventListener('click', () => {
+                     if (window.innerWidth < 768) { // Only on mobile
+                         showView(lastListView); // Go back to the last visited list view
+                     }
+                     // On desktop, back button is hidden, list view is always visible
+                 });
+
+                // Navigation button listeners
+                navButtons.forEach(button => {
+                    button.addEventListener('click', () => {
+                        const viewId = button.dataset.view;
+                        if (viewId === 'scan-qr') {
+                            showScanner();
+                        } else {
+                            // If coming from chat window, stop polling
+                            if (activeChatroomId) {
+                                 clearInterval(messagePollingInterval);
+                                 activeChatroomId = null;
+                                 activeChat.style.display = 'none';
+                                 chatPlaceholder.style.display = 'flex';
+                            }
+                            showView(viewId);
+                            // Fetch data for the view if needed
+                            if (viewId === 'chatroom-list-view') fetchChatrooms();
+                            if (viewId === 'users-list-view') fetchUsers();
+                             if (viewId === 'profile-view') showMyProfile();
                         }
-                    } else if (viewName === 'users') {
-                        showStatus('Функционал списка пользователей в разработке.', 'info');
-                    } else if (viewName === 'scan') {
-                        showScanner();
-                    } else if (viewName === 'profile') {
-                        if (currentUser.address) showProfile(currentUser.address);
-                    }
-                };
+                    });
+                });
 
-                document.getElementById('nav-chats').addEventListener('click', () => showView('chats'));
-                document.getElementById('nav-users').addEventListener('click', () => showView('users'));
-                document.getElementById('nav-scan').addEventListener('click', () => showView('scan'));
-                document.getElementById('nav-profile').addEventListener('click', () => showView('profile'));
-
-                document.getElementById('my-profile-btn').addEventListener('click', () => showView('profile'));
-                document.getElementById('scan-qr-btn').addEventListener('click', () => showView('scan'));
-                document.getElementById('profile-close-btn').addEventListener('click', () => profileModal.style.display = 'none');
-                document.getElementById('scanner-close-btn').addEventListener('click', hideScanner);
-                document.getElementById('back-to-list-btn').addEventListener('click', () => showView('chats'));
-                
+                // Handle initial view and resize
                 const handleResize = () => {
                     const isMobile = window.innerWidth < 768;
-                    bottomNav.style.display = isMobile ? 'flex' : 'none';
-                    
-                    if (!isMobile) {
-                        chatroomListView.style.display = 'flex';
-                        chatWindowView.style.display = 'flex';
-                    } else {
-                        if (currentNavView === 'chats') {
-                             chatroomListView.style.display = 'flex';
-                             chatWindowView.style.display = 'none';
-                        } else if (activeChat.style.display === 'flex') {
-                            chatroomListView.style.display = 'none';
-                            chatWindowView.style.display = 'flex';
+                    const backBtn = document.getElementById('back-to-list-btn');
+                    if (backBtn) backBtn.style.display = isMobile ? 'block' : 'none';
+
+                    // Re-apply view display logic based on current view and screen size
+                    const currentViewId = currentView; // Capture current view before showView might change it
+                    if (activeChatroomId) { // If currently in a chat
+                        // Ensure desktop layout shows list + chat, mobile shows only chat
+                        if (window.innerWidth >= 768) {
+                            document.getElementById(lastListView).style.display = 'flex'; // Show last list
+                            chatWindowView.style.display = 'flex'; // Show chat
+                             navigationBar.style.display = 'flex'; // Nav bar is column
+                             statusBar.classList.remove('chat-open'); // Status bar standard position
                         } else {
-                            chatroomListView.style.display = 'flex';
-                            chatWindowView.style.display = 'none';
+                            document.querySelectorAll('.app-view-section').forEach(view => view.style.display = 'none'); // Hide lists/profile
+                            chatWindowView.style.display = 'flex'; // Show chat only
+                             navigationBar.style.display = 'none'; // Hide nav bar
+                            statusBar.classList.add('chat-open'); // Status bar lower position
                         }
+                    } else { // Not in a chat
+                        showView(currentViewId); // Re-apply display for the current view
                     }
                 };
 
                 window.addEventListener('resize', handleResize);
-                handleResize();
+
 
                 tonConnectUI.onStatusChange(wallet => {
                     if (wallet) {
@@ -1136,12 +1569,36 @@ def index():
                         initializeUser(address);
                     } else {
                         currentUser = { address: null, username: null };
-                        appWrapper.style.display = 'none';
+                        appView.style.display = 'none';
                         loginView.style.display = 'flex';
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
                         activeChatroomId = null;
+                        currentView = 'chatroom-list-view'; // Reset view state
+                        lastListView = 'chatroom-list-view';
+                        // Clear displayed user data on logout
+                        updateUserInfo();
+                         if (profileQrCodeView) profileQrCodeView.clear();
+                         if (profileQrCodeModal) profileQrCodeModal.clear();
+                         document.getElementById('profile-qr-code-view').innerHTML = '';
+                         document.getElementById('profile-qr-code-modal').innerHTML = '';
+                    }
+                     // Update profile view balance status if wallet connection changes
+                    if (currentView === 'profile-view') {
+                         showMyProfile();
                     }
                 });
+
+                 // Check initial connection status on load
+                if (tonConnectUI.connected) {
+                    const wallet = tonConnectUI.wallet;
+                    const address = TON_CONNECT_UI.toUserFriendlyAddress(wallet.account.address, false);
+                    initializeUser(address);
+                } else {
+                     loginView.style.display = 'flex';
+                }
+
+                 // Initial resize check to set up correct layout
+                 handleResize();
             });
         </script>
     </body>
@@ -1157,9 +1614,53 @@ def get_user_data():
     if not address:
         return jsonify({'error': 'Address is required'}), 400
     db = read_db()
-    user_info = db['users'].get(address)
-    username = user_info.get('username') if user_info else None
-    return jsonify({'username': username})
+    user_info = db['users'].get(address, {}) # Return empty dict if user not found
+    username = user_info.get('username')
+    return jsonify({'address': address, 'username': username})
+
+@app.route('/api/users', methods=['GET'])
+def get_users():
+    db = read_db()
+    users_list = []
+    for address, user_info in db['users'].items():
+         # Only include users who have set a username for potentially cleaner list,
+         # or include all with default name? Include all for simplicity.
+        users_list.append({
+            'address': address,
+            'username': user_info.get('username')
+        })
+     # Include users who might exist in messages but not in 'users' table?
+     # This requires scanning all messages, which is inefficient.
+     # Stick to users explicitly stored in 'users' for now.
+
+     # Simple way to add users who exist in messages but not necessarily set a username yet
+     # This is still inefficient for large DBs but better than scanning all messages every time.
+    all_addresses_in_messages = set()
+    for chatroom_messages in db['messages'].values():
+         for msg in chatroom_messages:
+             all_addresses_in_messages.add(msg['sender_address'])
+
+    existing_user_addresses = {user['address'] for user in users_list}
+
+    for address in all_addresses_in_messages:
+         if address not in existing_user_addresses:
+             # Add user with null username if they sent a message but haven't set a username
+              users_list.append({
+                'address': address,
+                'username': None
+            })
+    
+    # Ensure addresses are unique in the final list
+    unique_users = {}
+    for user in users_list:
+        if user['address'] not in unique_users:
+            unique_users[user['address']] = user
+        elif user.get('username') and not unique_users[user['address']].get('username'):
+            # If we found a username for an address already added with null, update it
+             unique_users[user['address']]['username'] = user['username']
+
+    return jsonify({'users': list(unique_users.values())})
+
 
 @app.route('/api/set_username', methods=['POST'])
 def set_username():
@@ -1170,8 +1671,16 @@ def set_username():
         return jsonify({'error': 'Address and username are required'}), 400
     if len(username) < 3 or len(username) > 20:
         return jsonify({'error': 'Username must be between 3 and 20 characters'}), 400
+    if not username.replace('_', '').isalnum(): # Allow alphanumeric and underscore
+         return jsonify({'error': 'Username can only contain letters, numbers, and underscores.'}), 400
+
 
     db = read_db()
+    # Check if username is already taken by another address
+    for addr, user_info in db['users'].items():
+        if addr != address and user_info.get('username', '').lower() == username.lower():
+             return jsonify({'error': 'Username is already taken'}), 409 # Conflict
+
     if address not in db['users']:
         db['users'][address] = {}
     db['users'][address]['username'] = username
@@ -1186,7 +1695,7 @@ def get_chatrooms():
         chatrooms_list.append({
             'id': room_id,
             'name': room_data['name'],
-            'is_private': room_data['is_private']
+            'is_private': room_data.get('is_private', False) # Default to False if key is missing
         })
     return jsonify({'chatrooms': sorted(chatrooms_list, key=lambda x: x['name'])})
 
@@ -1199,6 +1708,12 @@ def create_chatroom():
     if not name or not creator_address:
         return jsonify({'error': 'Name and creator address are required'}), 400
 
+    if len(name) < 3 or len(name) > 30:
+        return jsonify({'error': 'Chatroom name must be between 3 and 30 characters'}), 400
+    if password and len(password) < 4:
+         return jsonify({'error': 'Password must be at least 4 characters long'}), 400
+
+
     db = read_db()
     room_id = str(uuid.uuid4())
     db['chatrooms'][room_id] = {
@@ -1220,8 +1735,10 @@ def join_chatroom():
     chatroom = db['chatrooms'].get(chatroom_id)
     if not chatroom:
         return jsonify({'error': 'Chatroom not found'}), 404
-    if chatroom['is_private']:
-        if not password or not check_password_hash(chatroom['password_hash'], password):
+    if chatroom.get('is_private', False): # Default to False if key is missing
+        # Use get with default None in case password_hash was somehow not set for a private room
+        stored_hash = chatroom.get('password_hash', None)
+        if not stored_hash or not check_password_hash(stored_hash, password or ''): # Compare against empty string if password is None
             return jsonify({'error': 'Invalid password'}), 403
     return jsonify({'success': True})
 
@@ -1229,17 +1746,30 @@ def join_chatroom():
 def get_messages(chatroom_id):
     db = read_db()
     if chatroom_id not in db['messages']:
-        return jsonify({'error': 'Chatroom not found'}), 404
-    
+        # If chatroom exists but has no messages entry yet, create one
+        if chatroom_id in db['chatrooms']:
+             db['messages'][chatroom_id] = []
+             write_db(db) # Write the new empty message list
+        else:
+             return jsonify({'error': 'Chatroom not found'}), 404
+
     messages_with_names = []
     room_messages = db['messages'].get(chatroom_id, [])
-    
+
+    # Collect all unique sender addresses in this chat
+    sender_addresses = {msg['sender_address'] for msg in room_messages}
+
+    # Fetch usernames for all senders in one go
+    user_names_map = {}
+    for address in sender_addresses:
+         user_info = db['users'].get(address)
+         user_names_map[address] = (user_info.get('username') if user_info and user_info.get('username')
+                                      else f"{address[:4]}...{address[-4:]}")
+
     for msg in room_messages:
         sender_address = msg['sender_address']
-        user_info = db['users'].get(sender_address)
-        display_name = (user_info.get('username') if user_info and user_info.get('username') 
-                        else f"{sender_address[:4]}...{sender_address[-4:]}")
-        
+        display_name = user_names_map.get(sender_address, f"{sender_address[:4]}...{sender_address[-4:]}") # Fallback just in case
+
         msg_copy = msg.copy()
         msg_copy['display_name'] = display_name
         messages_with_names.append(msg_copy)
@@ -1257,8 +1787,14 @@ def send_message():
         return jsonify({'error': 'Missing data'}), 400
 
     db = read_db()
-    if chatroom_id not in db['messages']:
-        return jsonify({'error': 'Chatroom not found'}), 404
+    # Check if chatroom exists before adding message
+    if chatroom_id not in db['chatrooms']:
+         return jsonify({'error': 'Chatroom not found'}), 404
+
+    # Ensure user entry exists, even if they haven't set a username yet
+    if sender_address not in db['users']:
+        db['users'][sender_address] = {}
+        # Don't write to DB immediately, will write after adding message
 
     message = {
         'id': str(uuid.uuid4()),
@@ -1266,9 +1802,15 @@ def send_message():
         'text': text,
         'timestamp': datetime.utcnow().isoformat() + "Z"
     }
-    
-    if len(db['messages'][chatroom_id]) >= 100:
-        db['messages'][chatroom_id].pop(0)
+
+    # Ensure message list exists for the chatroom
+    if chatroom_id not in db['messages']:
+        db['messages'][chatroom_id] = []
+
+    # Keep message list length manageable (e.g., last 200 messages)
+    MAX_MESSAGES = 200
+    if len(db['messages'][chatroom_id]) >= MAX_MESSAGES:
+        db['messages'][chatroom_id].pop(0) # Remove oldest message
 
     db['messages'][chatroom_id].append(message)
     write_db(db)
@@ -1277,4 +1819,6 @@ def send_message():
 
 if __name__ == '__main__':
     init_db()
-    app.run(host='0.0.0.0', port=7860)
+    # Consider using a more robust web server like Gunicorn or uWSGI
+    # for production, but for a simple Flask app this is fine.
+    app.run(host='0.0.0.0', port=7860, debug=True) # Turn debug=False for production