Update templates/index.html

templates/index.html

@@ -33,6 +33,7 @@
         </div>
 
         <div class="header-navigation">
+          <div class="header-nav-group">
             <button
               id="feedButton"
               class="header-action feed-button active"
@@ -81,14 +82,16 @@
             >
               Back
             </button>
+          </div>
 
+          <div class="header-context-group">
             <select
               id="teamSelect"
               class="room-select team-select"
               aria-label="Select team"
               disabled
             >
-            <option value="">Loading teams…</option>
+              <option value="">Loading teams…</option>
             </select>
 
             <select
@@ -97,9 +100,11 @@
               aria-label="Select channel"
               disabled
             >
-            <option value="">Loading channels…</option>
+              <option value="">Loading channels…</option>
             </select>
+          </div>
 
+          <div class="header-utility-group">
             <div id="presenceLabel" class="presence-label hidden" aria-live="polite"></div>
 
             <button
@@ -124,6 +129,7 @@
               Call
             </button>
           </div>
+        </div>
 
         <div class="header-account-wrap">
           <div id="headerAccount" class="header-account">not signed in</div>
@@ -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,9 +223,10 @@
 
     <div id="composerWrap" class="composer-wrap hidden">
       <form id="chatForm" class="composer">
+        <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"
@@ -231,12 +238,7 @@
               disabled
             ></textarea>
 
-          <div class="composer-meta">
+            <div class="composer-shell-actions">
-            <span id="attachmentName" class="attachment-name"></span>
-            <span id="messageCount" class="message-count">0 / 1000</span>
-          </div>
-        </div>
-
               <label
                 id="attachmentButton"
                 class="attachment-button disabled"
@@ -247,6 +249,20 @@
                 +
               </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>
+            <span id="messageCount" class="message-count">0 / 1000</span>
+          </div>
+        </div>
+
         <input
           id="attachmentInput"
           class="sr-only"
@@ -255,18 +271,15 @@
           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">
+        <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"
@@ -278,12 +291,7 @@
               disabled
             ></textarea>
 
-          <div class="composer-meta">
+            <div class="composer-shell-actions">
-            <span id="threadAttachmentName" class="attachment-name"></span>
-            <span id="threadMessageCount" class="message-count">0 / 1000</span>
-          </div>
-        </div>
-
               <label
                 id="threadAttachmentButton"
                 class="attachment-button disabled"
@@ -294,6 +302,20 @@
                 +
               </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>
+            <span id="threadMessageCount" class="message-count">0 / 1000</span>
+          </div>
+        </div>
+
         <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">
+      <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,14 +621,52 @@
       <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 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>
 
   <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>