From 301260caa5cd2a48dcd6c13c540bcbb0aca0b3bd Mon Sep 17 00:00:00 2001
From: dev <dev@noreply.git.backend-3.com>
Date: Sat, 31 Oct 2026 09:21:45 +0000
Subject: [PATCH] Update templates/index.html

---
 templates/index.html | 449 +++++++++++++++++++++++++++++--------------
 1 file changed, 302 insertions(+), 147 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 509ca28..d2a31d9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -33,96 +33,102 @@
         </div>
 
         <div class="header-navigation">
-          <button
-            id="feedButton"
-            class="header-action feed-button active"
-            type="button"
-            aria-label="Open activity feed"
-            aria-pressed="true"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
-              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>
-            </svg>
-          </button>
+          <div class="header-nav-group">
+            <button
+              id="feedButton"
+              class="header-action feed-button active"
+              type="button"
+              aria-label="Open activity feed"
+              aria-pressed="true"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>
+              </svg>
+            </button>
 
-          <button
-            id="pagesButton"
-            class="header-action pages-button"
-            type="button"
-            aria-label="Open team pages"
-            aria-pressed="false"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
-              <g fill="none">
-                <path d="M3.5 2.5h17v19h-17z"/>
-                <path stroke="currentColor" stroke-linecap="square" stroke-width="2" d="M3.5 2.5h17v19h-17zM8 8h8m-8 4h8m-8 4h5"/>
-              </g>
-            </svg>
-          </button>
+            <button
+              id="pagesButton"
+              class="header-action pages-button"
+              type="button"
+              aria-label="Open team pages"
+              aria-pressed="false"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
+                <g fill="none">
+                  <path d="M3.5 2.5h17v19h-17z"/>
+                  <path stroke="currentColor" stroke-linecap="square" stroke-width="2" d="M3.5 2.5h17v19h-17zM8 8h8m-8 4h8m-8 4h5"/>
+                </g>
+              </svg>
+            </button>
 
-          <button
-            id="dmsButton"
-            class="header-action"
-            type="button"
-            aria-label="Open direct messages"
-            aria-pressed="false"
-            title="Direct messages"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
-              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-            </svg>
-          </button>
+            <button
+              id="dmsButton"
+              class="header-action"
+              type="button"
+              aria-label="Open direct messages"
+              aria-pressed="false"
+              title="Direct messages"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+              </svg>
+            </button>
 
-          <button
-            id="backButton"
-            class="header-action hidden"
-            type="button"
-            aria-label="Go back"
-          >
-            Back
-          </button>
+            <button
+              id="backButton"
+              class="header-action hidden"
+              type="button"
+              aria-label="Go back"
+            >
+              Back
+            </button>
+          </div>
 
-          <select
-            id="teamSelect"
-            class="room-select team-select"
-            aria-label="Select team"
-            disabled
-          >
-            <option value="">Loading teams…</option>
-          </select>
+          <div class="header-context-group">
+            <select
+              id="teamSelect"
+              class="room-select team-select"
+              aria-label="Select team"
+              disabled
+            >
+              <option value="">Loading teams…</option>
+            </select>
 
-          <select
-            id="roomSelect"
-            class="room-select channel-select"
-            aria-label="Select channel"
-            disabled
-          >
-            <option value="">Loading channels…</option>
-          </select>
+            <select
+              id="roomSelect"
+              class="room-select channel-select"
+              aria-label="Select channel"
+              disabled
+            >
+              <option value="">Loading channels…</option>
+            </select>
+          </div>
 
-          <div id="presenceLabel" class="presence-label hidden" aria-live="polite"></div>
+          <div class="header-utility-group">
+            <div id="presenceLabel" class="presence-label hidden" aria-live="polite"></div>
 
-          <button
-            id="settingsButton"
-            class="header-action"
-            type="button"
-            aria-label="Open settings and profile menu"
-            title="Settings and profile"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
-              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3l2.3.8l2.4-.5l1.3 2.1l2.2 1l-.3 2.4l1.1 2.1l-1.6 1.8l-.3 2.4l-2.4.5L14 21l-2-.8l-2 .8l-1.4-2.1l-2.4-.5l-.3-2.4L4.3 14l1.1-2.1l-.3-2.4l2.2-1l1.3-2.1l2.4.5zM12 15.5A3.5 3.5 0 1 0 12 8.5a3.5 3.5 0 0 0 0 7z"/>
-            </svg>
-          </button>
+            <button
+              id="settingsButton"
+              class="header-action"
+              type="button"
+              aria-label="Open settings and profile menu"
+              title="Settings and profile"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3l2.3.8l2.4-.5l1.3 2.1l2.2 1l-.3 2.4l1.1 2.1l-1.6 1.8l-.3 2.4l-2.4.5L14 21l-2-.8l-2 .8l-1.4-2.1l-2.4-.5l-.3-2.4L4.3 14l1.1-2.1l-.3-2.4l2.2-1l1.3-2.1l2.4.5zM12 15.5A3.5 3.5 0 1 0 12 8.5a3.5 3.5 0 0 0 0 7z"/>
+              </svg>
+            </button>
 
-          <button
-            id="callStatusChip"
-            class="header-action call-status-chip"
-            type="button"
-            aria-label="Open call panel"
-            title="Voice call"
-          >
-            Call
-          </button>
+            <button
+              id="callStatusChip"
+              class="header-action call-status-chip"
+              type="button"
+              aria-label="Open call panel"
+              title="Voice call"
+            >
+              Call
+            </button>
+          </div>
         </div>
 
         <div class="header-account-wrap">
@@ -151,7 +157,7 @@
       aria-label="Activity feed"
     >
       <div class="empty-state">
-        <div class="empty-card">Loading activity…</div>
+        <div class="empty-card">Loading activity…</div>
       </div>
     </main>
 
@@ -209,7 +215,7 @@
 
     <div id="newMessagesBar" class="new-messages-bar hidden">
       <button id="jumpToLatestButton" class="small-button" type="button">
-        New messages · Jump to latest
+        New messages · Jump to latest
       </button>
     </div>
 
@@ -217,19 +223,39 @@
 
     <div id="composerWrap" class="composer-wrap hidden">
       <form id="chatForm" class="composer">
-        <label class="sr-only" for="messageInput">Message</label>
+        <div class="composer-stack">
+          <div class="composer-shell">
+            <label class="sr-only" for="messageInput">Message</label>
 
-        <div class="composer-field-wrap">
-          <textarea
-            id="messageInput"
-            class="composer-input"
-            rows="1"
-            maxlength="1000"
-            autocomplete="off"
-            placeholder="sign in to send"
-            aria-label="Message"
-            disabled
-          ></textarea>
+            <textarea
+              id="messageInput"
+              class="composer-input"
+              rows="1"
+              maxlength="1000"
+              autocomplete="off"
+              placeholder="sign in to send"
+              aria-label="Message"
+              disabled
+            ></textarea>
+
+            <div class="composer-shell-actions">
+              <label
+                id="attachmentButton"
+                class="attachment-button disabled"
+                for="attachmentInput"
+                title="Attach file(s)"
+                aria-label="Attach file(s)"
+              >
+                +
+              </label>
+
+              <button id="sendButton" class="send-button" type="submit" disabled>
+                Send
+              </button>
+            </div>
+          </div>
+
+          <div id="emojiAutocomplete" class="emoji-autocomplete hidden" aria-live="polite"></div>
 
           <div class="composer-meta">
             <span id="attachmentName" class="attachment-name"></span>
@@ -237,16 +263,6 @@
           </div>
         </div>
 
-        <label
-          id="attachmentButton"
-          class="attachment-button disabled"
-          for="attachmentInput"
-          title="Attach file(s)"
-          aria-label="Attach file(s)"
-        >
-          +
-        </label>
-
         <input
           id="attachmentInput"
           class="sr-only"
@@ -255,28 +271,44 @@
           multiple
           disabled
         >
-
-        <button id="sendButton" class="send-button" type="submit" disabled>
-          Send
-        </button>
       </form>
     </div>
 
     <div id="threadComposerWrap" class="composer-wrap hidden">
       <form id="threadForm" class="composer">
-        <label class="sr-only" for="threadInput">Reply in thread</label>
+        <div class="composer-stack">
+          <div class="composer-shell">
+            <label class="sr-only" for="threadInput">Reply in thread</label>
 
-        <div class="composer-field-wrap">
-          <textarea
-            id="threadInput"
-            class="composer-input"
-            rows="1"
-            maxlength="1000"
-            autocomplete="off"
-            placeholder="reply in thread"
-            aria-label="Reply in thread"
-            disabled
-          ></textarea>
+            <textarea
+              id="threadInput"
+              class="composer-input"
+              rows="1"
+              maxlength="1000"
+              autocomplete="off"
+              placeholder="reply in thread"
+              aria-label="Reply in thread"
+              disabled
+            ></textarea>
+
+            <div class="composer-shell-actions">
+              <label
+                id="threadAttachmentButton"
+                class="attachment-button disabled"
+                for="threadAttachmentInput"
+                title="Attach file(s)"
+                aria-label="Attach file(s)"
+              >
+                +
+              </label>
+
+              <button id="threadSendButton" class="send-button" type="submit" disabled>
+                Reply
+              </button>
+            </div>
+          </div>
+
+          <div id="threadEmojiAutocomplete" class="emoji-autocomplete hidden" aria-live="polite"></div>
 
           <div class="composer-meta">
             <span id="threadAttachmentName" class="attachment-name"></span>
@@ -284,16 +316,6 @@
           </div>
         </div>
 
-        <label
-          id="threadAttachmentButton"
-          class="attachment-button disabled"
-          for="threadAttachmentInput"
-          title="Attach file(s)"
-          aria-label="Attach file(s)"
-        >
-          +
-        </label>
-
         <input
           id="threadAttachmentInput"
           class="sr-only"
@@ -302,14 +324,24 @@
           multiple
           disabled
         >
-
-        <button id="threadSendButton" class="send-button" type="submit" disabled>
-          Reply
-        </button>
       </form>
     </div>
   </div>
 
+  <input
+    id="avatarUploadInput"
+    class="sr-only"
+    type="file"
+    accept=".png,.jpg,.jpeg,.gif,.webp"
+  >
+
+  <input
+    id="bannerUploadInput"
+    class="sr-only"
+    type="file"
+    accept=".png,.jpg,.jpeg,.gif,.webp"
+  >
+
   <section
     id="authOverlay"
     class="auth-overlay"
@@ -399,7 +431,10 @@
     aria-label="Reactions"
   >
     <div class="reaction-popup-card">
-      <h2 class="reaction-popup-title">Reactions</h2>
+      <div class="reaction-popup-header">
+        <h2 class="reaction-popup-title">Reactions</h2>
+      </div>
+
       <div id="reactionPopupGrid" class="reaction-popup-grid"></div>
 
       <div class="reaction-popup-custom">
@@ -436,14 +471,15 @@
     aria-label="Media preview"
   >
     <div class="media-card">
-      <div class="media-header">
+      <div class="media-header minimal">
         <div id="mediaTitle" class="media-title">Media</div>
         <div class="settings-actions">
           <a id="mediaDownloadLink" class="button secondary" href="#" download>Download</a>
           <button id="closeMediaButton" class="button secondary" type="button">Close</button>
         </div>
       </div>
-      <div class="media-body">
+
+      <div class="media-body spacious">
         <img id="mediaImage" class="hidden" alt="">
         <audio id="mediaAudio" class="hidden" controls preload="metadata"></audio>
         <video id="mediaVideo" class="hidden" controls preload="metadata"></video>
@@ -455,14 +491,55 @@
     </div>
   </section>
 
+  <section
+    id="imageCropOverlay"
+    class="dialog-overlay hidden"
+    role="dialog"
+    aria-modal="true"
+    aria-label="Image crop and preview"
+  >
+    <div class="dialog-card crop-dialog-card">
+      <h2>Adjust image</h2>
+
+      <div class="crop-dialog-body">
+        <div id="imageCropPreview" class="crop-preview-area" aria-live="polite"></div>
+
+        <label class="dialog-label" for="imageCropZoom">
+          Zoom
+          <input
+            id="imageCropZoom"
+            class="field"
+            type="range"
+            min="1"
+            max="3"
+            step="0.05"
+            value="1"
+          >
+        </label>
+
+        <label class="dialog-label crop-toggle">
+          <input id="imageCropAuto" type="checkbox">
+          Auto-crop placeholder
+        </label>
+      </div>
+
+      <div class="dialog-actions">
+        <button id="imageCropCancel" class="button secondary" type="button">Cancel</button>
+        <button id="imageCropApply" class="button" type="button">Apply</button>
+      </div>
+    </div>
+  </section>
+
   <section
     id="callOverlay"
     class="call-overlay hidden"
     role="dialog"
-    aria-modal="true"
+    aria-modal="false"
     aria-label="Voice call"
   >
-    <div class="call-card">
+    <div class="call-card utility-panel">
+      <div id="callDragHandle" class="call-drag-handle" aria-hidden="true"></div>
+
       <div class="call-title-row">
         <div>
           <div class="call-title">call</div>
@@ -473,6 +550,29 @@
 
       <div id="callPeerLabel" class="call-peer-label">No active call</div>
 
+      <div id="callSummaryStats" class="call-summary-stats">
+        <div class="call-stat-row">
+          <span class="call-stat-label">Users</span>
+          <span id="callUserCountStat" class="call-stat-value">0</span>
+        </div>
+        <div class="call-stat-row">
+          <span class="call-stat-label">Elapsed</span>
+          <span id="callElapsedStat" class="call-stat-value">0m</span>
+        </div>
+        <div class="call-stat-row">
+          <span class="call-stat-label">Latency</span>
+          <span id="callLatencyStat" class="call-stat-value">—</span>
+        </div>
+        <div class="call-stat-row">
+          <span class="call-stat-label">Loss</span>
+          <span id="callPacketLossStat" class="call-stat-value">—</span>
+        </div>
+        <div class="call-stat-row">
+          <span class="call-stat-label">Uptime</span>
+          <span id="callUptimeStat" class="call-stat-value">—</span>
+        </div>
+      </div>
+
       <div id="callParticipants" class="call-participants"></div>
       <div id="callPendingInvites" class="call-pending-invites hidden"></div>
       <div id="remoteAudioContainer" class="remote-audio-container"></div>
@@ -521,13 +621,51 @@
       <div class="admin-actions">
         <button id="createRoomButton" class="button" type="button">Add chat</button>
         <button id="clearMessagesButton" class="danger-button" type="button">Clear selected room</button>
-        <button id="typingToggleButton" class="button secondary" type="button">Typing indicator: on</button>
-        <button id="notificationsToggleButton" class="button secondary" type="button">Notifications: off</button>
-        <button id="themeButton" class="button secondary" type="button" aria-label="Choose accent color">Accent color</button>
       </div>
 
-      <div id="adminRooms" class="admin-rooms"></div>
-      <div id="adminUsers" class="admin-users"></div>
+      <div class="admin-tabs" role="tablist" aria-label="Moderation sections">
+        <button
+          id="adminTabRooms"
+          class="admin-tab active"
+          type="button"
+          role="tab"
+          aria-selected="true"
+        >
+          Rooms
+        </button>
+        <button
+          id="adminTabUsers"
+          class="admin-tab"
+          type="button"
+          role="tab"
+          aria-selected="false"
+        >
+          Users
+        </button>
+        <button
+          id="adminTabTeams"
+          class="admin-tab"
+          type="button"
+          role="tab"
+          aria-selected="false"
+        >
+          Teams/channels
+        </button>
+      </div>
+
+      <div class="admin-tab-panels">
+        <div id="adminRoomsPanel" class="admin-tab-panel">
+          <div id="adminRooms" class="admin-rooms"></div>
+        </div>
+
+        <div id="adminUsersPanel" class="admin-tab-panel hidden">
+          <div id="adminUsers" class="admin-users"></div>
+        </div>
+
+        <div id="adminTeamsPanel" class="admin-tab-panel hidden">
+          <div id="adminTeamsChannels" class="admin-rooms"></div>
+        </div>
+      </div>
     </div>
   </section>
 
@@ -545,6 +683,23 @@
     </div>
   </section>
 
+  <div
+    id="settingsSavePanel"
+    class="settings-save-panel hidden"
+    aria-live="polite"
+  >
+    <div class="settings-save-panel-inner">
+      <div class="settings-save-copy">
+        <strong id="settingsUnsavedIndicator">Unsaved changes</strong>
+        <small>Your previews are local until you save.</small>
+      </div>
+      <div class="settings-save-actions">
+        <button id="settingsCloseButton" class="button secondary" type="button">Close</button>
+        <button id="settingsSaveButton" class="button" type="button">Save</button>
+      </div>
+    </div>
+  </div>
+
   <div id="statusToast" class="status-toast" role="status" aria-live="polite"></div>
 
   <script src="{{ url_for('static', filename='js/00-config.js', v=asset_version) }}" defer></script>
@@ -561,4 +716,4 @@
   <script src="{{ url_for('static', filename='js/04-main.js', v=asset_version) }}" defer></script>
   <script src="{{ url_for('static', filename='js/07-team-channel-adapter.js', v=asset_version) }}" defer></script>
 </body>
-</html>
+</html>
\ No newline at end of file