Update templates/index.html

templates/index.html

@@ -25,13 +25,11 @@
             class="header-dot"
             aria-hidden="true"
           ></span>
-
           <div class="header-room-copy">
             <div id="headerTitle" class="header-title">Feed</div>
             <div id="headerSubtitle" class="header-subtitle">Recent activity</div>
           </div>
         </div>
-
         <div class="header-navigation">
           <button
             id="feedButton"
@@ -44,7 +42,6 @@
               <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"
@@ -59,7 +56,6 @@
               </g>
             </svg>
           </button>
-
           <button
             id="dmsButton"
             class="header-action"
@@ -72,7 +68,6 @@
               <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"
@@ -81,7 +76,6 @@
           >
             Back
           </button>
-
           <select
             id="teamSelect"
             class="room-select team-select"
@@ -90,7 +84,6 @@
           >
             <option value="">Loading teams…</option>
           </select>
-
           <select
             id="roomSelect"
             class="room-select channel-select"
@@ -99,9 +92,7 @@
           >
             <option value="">Loading channels…</option>
           </select>
-
           <div id="presenceLabel" class="presence-label hidden" aria-live="polite"></div>
-
           <button
             id="settingsButton"
             class="header-action"
@@ -114,10 +105,8 @@
             </svg>
           </button>
         </div>
-
         <div class="header-account-wrap">
           <div id="headerAccount" class="header-account">not signed in</div>
-
           <button
             id="logoutButton"
             class="header-action hidden"
@@ -132,7 +121,6 @@
         </div>
       </div>
     </header>
-
     <main
       id="feedBox"
       class="feed-box"
@@ -144,7 +132,6 @@
         <div class="empty-card">Loading activity…</div>
       </div>
     </main>
-
     <main
       id="dmBox"
       class="dm-box hidden"
@@ -156,7 +143,6 @@
         <div class="empty-card">Sign in to view direct messages.</div>
       </div>
     </main>
-
     <main
       id="chatBox"
       class="chat-box hidden"
@@ -164,7 +150,6 @@
       aria-busy="true"
       aria-label="Channel messages"
     ></main>
-
     <main
       id="threadBox"
       class="thread-box hidden"
@@ -172,7 +157,6 @@
       aria-busy="false"
       aria-label="Message thread"
     ></main>
-
     <main
       id="pagesBox"
       class="pages-box hidden"
@@ -180,7 +164,6 @@
       aria-busy="false"
       aria-label="Team pages"
     ></main>
-
     <main
       id="pageDetailBox"
       class="page-detail-box hidden"
@@ -188,7 +171,6 @@
       aria-busy="false"
       aria-label="Page details"
     ></main>
-
     <main
       id="profileBox"
       class="profile-box hidden"
@@ -196,19 +178,15 @@
       aria-busy="false"
       aria-label="Profile"
     ></main>
-
     <div id="newMessagesBar" class="new-messages-bar hidden">
       <button id="jumpToLatestButton" class="small-button" type="button">
         New messages · Jump to latest
       </button>
     </div>
-
     <div id="typingBar" class="typing-bar hidden" aria-live="polite"></div>
-
     <div id="composerWrap" class="composer-wrap hidden">
       <form id="chatForm" class="composer">
         <label class="sr-only" for="messageInput">Message</label>
-
         <div class="composer-field-wrap">
           <textarea
             id="messageInput"
@@ -220,13 +198,12 @@
             aria-label="Message"
             disabled
           ></textarea>
-
+          <div id="emojiAutocomplete" class="emoji-autocomplete hidden"></div>
           <div class="composer-meta">
             <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"
@@ -236,26 +213,22 @@
         >
           +
         </label>
-
         <input
           id="attachmentInput"
           class="sr-only"
           type="file"
-          accept=".txt,.pdf,.png,.jpg,.jpeg,.gif,.webp"
+          accept=".txt,.pdf,.png,.jpg,.jpeg,.gif,.webp,.mp3,.wav,.ogg,.m4a,.aac,.flac,.mp4,.webm,.mov,.m4v,.ogv"
           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-field-wrap">
           <textarea
             id="threadInput"
@@ -267,13 +240,11 @@
             aria-label="Reply in thread"
             disabled
           ></textarea>
-
           <div class="composer-meta">
             <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"
@@ -283,23 +254,20 @@
         >
           +
         </label>
-
         <input
           id="threadAttachmentInput"
           class="sr-only"
           type="file"
-          accept=".txt,.pdf,.png,.jpg,.jpeg,.gif,.webp"
+          accept=".txt,.pdf,.png,.jpg,.jpeg,.gif,.webp,.mp3,.wav,.ogg,.m4a,.aac,.flac,.mp4,.webm,.mov,.m4v,.ogv"
           multiple
           disabled
         >
-
         <button id="threadSendButton" class="send-button" type="submit" disabled>
           Reply
         </button>
       </form>
     </div>
   </div>
-
   <section
     id="authOverlay"
     class="auth-overlay"
@@ -309,9 +277,7 @@
   >
     <div class="auth-card">
       <p></p>
-
       <div id="authNotice" class="notice" role="status"></div>
-
       <label class="sr-only" for="accessKeyInput">access key</label>
       <input
         id="accessKeyInput"
@@ -323,7 +289,6 @@
         maxlength="256"
         placeholder="private access key"
       >
-
       <label class="sr-only" for="usernameInput">Username</label>
       <input
         id="usernameInput"
@@ -335,7 +300,6 @@
         maxlength="30"
         placeholder="username"
       >
-
       <label class="sr-only" for="passwordInput">Password</label>
       <input
         id="passwordInput"
@@ -345,16 +309,13 @@
         maxlength="256"
         placeholder="password"
       >
-
       <div class="auth-actions">
         <button id="loginButton" class="button" type="button">sign in</button>
         <button id="registerButton" class="button secondary" type="button">create account</button>
       </div>
-
       <p class="auth-help"></p>
     </div>
   </section>
-
   <section
     id="blockedOverlay"
     class="blocked-overlay hidden"
@@ -367,7 +328,6 @@
       <p id="blockedMessage">Access to this chat service is unavailable.</p>
     </div>
   </section>
-
   <section
     id="headerMenuOverlay"
     class="header-menu-overlay hidden"
@@ -380,7 +340,6 @@
       <div id="headerMenuList" class="header-menu-list"></div>
     </div>
   </section>
-
   <section
     id="reactionPopupOverlay"
     class="reaction-popup-overlay hidden"
@@ -391,7 +350,6 @@
     <div class="reaction-popup-card">
       <h2 class="reaction-popup-title">Reactions</h2>
       <div id="reactionPopupGrid" class="reaction-popup-grid"></div>
-
       <div class="reaction-popup-custom">
         <input
           id="reactionCustomInput"
@@ -409,15 +367,12 @@
           Add
         </button>
       </div>
-
       <div id="reactionPopupList" class="reaction-popup-list"></div>
-
       <div class="dialog-actions">
         <button id="closeReactionPopupButton" class="button secondary" type="button">Close</button>
       </div>
     </div>
   </section>
-
   <section
     id="mediaOverlay"
     class="media-overlay hidden"
@@ -444,7 +399,6 @@
       </div>
     </div>
   </section>
-
   <section
     id="callOverlay"
     class="call-overlay hidden"
@@ -460,11 +414,8 @@
         </div>
         <button id="closeCallPanelButton" class="button secondary" type="button">Hide</button>
       </div>
-
       <div id="callPeerLabel" class="call-peer-label">No active call</div>
-
       <audio id="remoteAudio" autoplay playsinline></audio>
-
       <div class="call-actions">
         <button id="startCallButton" class="button" type="button">Start call</button>
         <button id="answerCallButton" class="button hidden" type="button">Answer</button>
@@ -473,7 +424,6 @@
       </div>
     </div>
   </section>
-
   <button
     id="adminFab"
     class="admin-fab"
@@ -483,7 +433,6 @@
   >
     #
   </button>
-
   <section
     id="adminPanel"
     class="admin-panel"
@@ -498,12 +447,10 @@
           <strong>Moderation</strong>
           <div class="header-subtitle"></div>
         </div>
-
         <button id="closeAdminButton" class="button secondary" type="button">
           Close
         </button>
       </div>
-
       <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>
@@ -511,12 +458,10 @@
         <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>
   </section>
-
   <section
     id="dialogOverlay"
     class="dialog-overlay hidden"
@@ -530,9 +475,7 @@
       <div id="dialogActions" class="dialog-actions"></div>
     </div>
   </section>
-
   <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>
   <script src="{{ url_for('static', filename='js/01-api.js', v=asset_version) }}" defer></script>
   <script src="{{ url_for('static', filename='js/02-chat.js', v=asset_version) }}" defer></script>