From 0bc5442eb9e870a9d1c97586b17a39a0f226a2c3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 7 Dec 2025 17:42:10 +0200
Subject: [PATCH] third pass of emoji reorganizing

---
 src/App.scss                                  |   4 +-
 .../settings_modal/admin_tabs/emoji_tab.scss  |  17 +-
 .../settings_modal/admin_tabs/emoji_tab.vue   | 366 +++++++++---------
 src/i18n/en.json                              |   1 +
 4 files changed, 196 insertions(+), 192 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 1a08fbae8..57faf4aa3 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -560,7 +560,9 @@ textarea {
   &.disabled {
     cursor: not-allowed;
     color: var(--textFaint);
-    background-color: transparent;
+
+    /* stylelint-disable-next-line declaration-no-important */
+    background-color: transparent !important;
   }
 
   &[type="range"] {
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
index 0cd555101..327d0f376 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.scss
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss
@@ -1,4 +1,8 @@
 .EmojiTab {
+  .setting-list {
+    padding-left: 0.75em;
+  }
+
   .toolbar {
     display: flex;
     flex-wrap: wrap;
@@ -20,24 +24,27 @@
 
     .button-default {
       flex: 0 0 auto;
-      padding: 0.33em;
+      padding: 0.5em;
       font-size: 1rem;
     }
   }
 
+  .selector-buttons,
   .meta-buttons {
     display: flex;
+    flex-wrap: wrap;
     gap: 0.5em;
   }
 
+  h5 {
+    margin-top: 1em;
+    margin-bottom: 0.25em;
+  }
+
   h3.toolbar {
     align-items: end;
   }
 
-  h4.toolbar {
-    align-items: baseline;
-  }
-
   .emoji-info-input {
     width: 100%;
   }
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index 8d7bc10bc..8a3a5fd33 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -112,147 +112,146 @@
           </Popover>
         </span>
       </h3>
-      <ul class="setting-list">
-        <li>
-          <h4 class="toolbar">
-            <span class="header-text">
-              {{ $t('admin_dash.emoji.edit_pack') }}
-            </span>
-            <span class="header-buttons">
-              <button
-                :disabled="!pack || pack.remote !== undefined"
-                class="button button-default btn"
-                type="button"
-                @click="deleteModalVisible = true"
-              >
-                {{ $t('admin_dash.emoji.delete_pack') }}
+      <div class="setting-list">
+        <h4 class="toolbar">
+          {{ $t('admin_dash.emoji.edit_pack') }}
+        </h4>
+        <div class="selector-buttons setting-list">
+          <button
+            :disabled="!pack || pack.remote !== undefined"
+            class="button button-default btn"
+            type="button"
+            @click="deleteModalVisible = true"
+          >
+            {{ $t('admin_dash.emoji.delete_pack') }}
 
-                <ConfirmModal
-                  v-if="deleteModalVisible"
-                  :title="$t('admin_dash.emoji.delete_title')"
-                  :cancel-text="$t('status.delete_confirm_cancel_button')"
-                  :confirm-text="$t('status.delete_confirm_accept_button')"
-                  @cancelled="deleteModalVisible = false"
-                  @accepted="deleteEmojiPack"
-                >
-                  {{ $t('admin_dash.emoji.delete_confirm', [packName]) }}
-                </ConfirmModal>
-              </button>
+            <ConfirmModal
+              v-if="deleteModalVisible"
+              :title="$t('admin_dash.emoji.delete_title')"
+              :cancel-text="$t('status.delete_confirm_cancel_button')"
+              :confirm-text="$t('status.delete_confirm_accept_button')"
+              @cancelled="deleteModalVisible = false"
+              @accepted="deleteEmojiPack"
+            >
+              {{ $t('admin_dash.emoji.delete_confirm', [packName]) }}
+            </ConfirmModal>
+          </button>
 
-              <button
-                :disabled="!pack || pack.remote === undefined"
-                class="button button-default btn"
-                type="button"
-                @click="$refs.downloadPackPopover.showPopover"
-              >
-                {{ $t('admin_dash.emoji.download_pack') }}
+          <button
+            :disabled="!pack || pack.remote === undefined"
+            class="button button-default btn"
+            type="button"
+            @click="$refs.downloadPackPopover.showPopover"
+          >
+            {{ $t('admin_dash.emoji.download_pack') }}
 
-                <Popover
-                  ref="downloadPackPopover"
-                  trigger="click"
-                  placement="bottom"
-                  bound-to-selector=".emoji-tab"
-                  popover-class="emoji-tab-edit-popover popover-default"
-                  :bound-to="{ x: 'container' }"
-                  :offset="{ y: 5 }"
-                >
-                  <template #content>
-                    <h3>{{ $t('admin_dash.emoji.downloading_pack', [packName]) }}</h3>
-                    <div>
-                      <div>
-                        <div class="emoji-tab-popover-input">
-                          <label>
-                            {{ $t('admin_dash.emoji.download_as_name') }}
-                            <input
-                              v-model="remotePackDownloadAs"
-                              class="emoji-data-input input"
-                              :placeholder="$t('admin_dash.emoji.download_as_name_full')"
-                            >
-                          </label>
-
-                          <div
-                            v-if="downloadWillReplaceLocal"
-                            class="warning"
-                          >
-                            <em>{{ $t('admin_dash.emoji.replace_warning') }}</em>
-                          </div>
-                        </div>
-
-                        <button
-                          class="button button-default btn"
-                          type="button"
-                          @click="downloadRemotePack"
+            <Popover
+              ref="downloadPackPopover"
+              trigger="click"
+              placement="bottom"
+              bound-to-selector=".emoji-tab"
+              popover-class="emoji-tab-edit-popover popover-default"
+              :bound-to="{ x: 'container' }"
+              :offset="{ y: 5 }"
+            >
+              <template #content>
+                <h3>{{ $t('admin_dash.emoji.downloading_pack', [packName]) }}</h3>
+                <div>
+                  <div>
+                    <div class="emoji-tab-popover-input">
+                      <label>
+                        {{ $t('admin_dash.emoji.download_as_name') }}
+                        <input
+                          v-model="remotePackDownloadAs"
+                          class="emoji-data-input input"
+                          :placeholder="$t('admin_dash.emoji.download_as_name_full')"
                         >
-                          {{ $t('admin_dash.emoji.download') }}
-                        </button>
+                      </label>
+
+                      <div
+                        v-if="downloadWillReplaceLocal"
+                        class="warning"
+                      >
+                        <em>{{ $t('admin_dash.emoji.replace_warning') }}</em>
                       </div>
                     </div>
-                  </template>
-                </Popover>
-              </button>
-            </span>
-            <span class="header-buttons btn-group">
-              <Select
-                v-model="packName"
-                class="form-control"
-              >
-                <option
-                  value=""
-                  disabled
-                  hidden
-                >
-                  {{ $t('admin_dash.emoji.emoji_pack') }}
-                </option>
-                <option
-                  v-for="(pack, listPackName) in knownPacks"
-                  :key="listPackName"
-                  :label="listPackName"
-                >
-                  {{ listPackName }}
-                </option>
-              </Select>
 
-              <Popover
-                ref="createPackPopover"
-                popover-class="emoji-tab-edit-popover popover-default"
-                trigger="click"
-                placement="bottom"
+                    <button
+                      class="button button-default btn"
+                      type="button"
+                      @click="downloadRemotePack"
+                    >
+                      {{ $t('admin_dash.emoji.download') }}
+                    </button>
+                  </div>
+                </div>
+              </template>
+            </Popover>
+          </button>
+
+          <span class="btn-group">
+            <Select
+              v-model="packName"
+              class="form-control"
+            >
+              <option
+                value=""
+                disabled
+                hidden
               >
-                <template #trigger>
+                {{ $t('admin_dash.emoji.emoji_pack') }}
+              </option>
+              <option
+                v-for="(pack, listPackName) in knownPacks"
+                :key="listPackName"
+                :label="listPackName"
+              >
+                {{ listPackName }}
+              </option>
+            </Select>
+
+            <Popover
+              ref="createPackPopover"
+              popover-class="emoji-tab-edit-popover popover-default"
+              trigger="click"
+              placement="bottom"
+            >
+              <template #trigger>
+                <button
+                  class="button button-default btn emoji-tab-popover-button"
+                  type="button"
+                >
+                  {{ $t('admin_dash.emoji.create_pack') }}
+                </button>
+              </template>
+              <template #content>
+                <div class="emoji-tab-popover-input">
+                  <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
+                  <input
+                    v-model="newPackName"
+                    :placeholder="$t('admin_dash.emoji.new_pack_name')"
+                    class="input"
+                  >
                   <button
                     class="button button-default btn emoji-tab-popover-button"
                     type="button"
+                    @click="createEmojiPack"
                   >
-                    {{ $t('admin_dash.emoji.create_pack') }}
+                    {{ $t('admin_dash.emoji.create') }}
                   </button>
-                </template>
-                <template #content>
-                  <div class="emoji-tab-popover-input">
-                    <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
-                    <input
-                      v-model="newPackName"
-                      :placeholder="$t('admin_dash.emoji.new_pack_name')"
-                      class="input"
-                    >
-                    <button
-                      class="button button-default btn emoji-tab-popover-button"
-                      type="button"
-                      @click="createEmojiPack"
-                    >
-                      {{ $t('admin_dash.emoji.create') }}
-                    </button>
-                  </div>
-                </template>
-              </Popover>
-            </span>
-          </h4>
-        </li>
-      </ul>
+                </div>
+              </template>
+            </Popover>
+          </span>
+        </div>
+        <h5>
+          {{ $t('admin_dash.emoji.metadata') }}
 
-      <div
-        class="pack-info-wrapper"
-        :class="{ disabled: !pack }"
-      >
+          <ModifiedIndicator
+            :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
+            message-key="admin_dash.emoji.emoji_changed"
+          />
+        </h5>
         <ul class="setting-list">
           <li>
             <label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
@@ -340,77 +339,72 @@
                 {{ $t('admin_dash.emoji.revert_meta') }}
               </button>
             </div>
-
           </li>
         </ul>
+        <h5>
+          {{ $t('admin_dash.emoji.files') }}
 
-        <ul class="setting-list">
-          <h4>
-            {{ $t('admin_dash.emoji.files') }}
+          <ModifiedIndicator
+            :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
+            message-key="admin_dash.emoji.emoji_changed"
+          />
+        </h5>
 
-            <ModifiedIndicator
-              :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
-              message-key="admin_dash.emoji.emoji_changed"
-            />
-          </h4>
-
-          <div
-            class="emoji-list"
+        <div
+          class="emoji-list setting-list"
+        >
+          <EmojiEditingPopover
+            v-if="pack && pack.remote === undefined"
+            placement="bottom"
+            new-upload
+            :title="$t('admin_dash.emoji.adding_new')"
+            :pack-name="packName"
+            @update-pack-files="updatePackFiles"
+            @display-error="displayError"
           >
-            <EmojiEditingPopover
-              v-if="pack && pack.remote === undefined"
-              placement="bottom"
-              new-upload
-              :title="$t('admin_dash.emoji.adding_new')"
-              :pack-name="packName"
-              @update-pack-files="updatePackFiles"
-              @display-error="displayError"
-            >
-              <template #trigger>
-                <FAIcon
-                  icon="plus"
-                  size="2x"
-                  :title="$t('admin_dash.emoji.add_file')"
-                />
-              </template>
-            </EmojiEditingPopover>
-            <template v-if="!pack">
-              <div
-                class="placeholder"
-                v-for="_ in new Array(20)"
+            <template #trigger>
+              <FAIcon
+                icon="plus"
+                size="2x"
+                :title="$t('admin_dash.emoji.add_file')"
               />
             </template>
+          </EmojiEditingPopover>
+          <template v-if="!pack">
+            <div
+              class="placeholder"
+              v-for="_ in new Array(20)"
+            />
+          </template>
 
 
-            <EmojiEditingPopover
-              v-for="(file, shortcode) in (pack?.files || [])"
-              ref="emojiPopovers"
-              :key="shortcode"
-              placement="top"
-              :title="$t(`admin_dash.emoji.${pack?.remote === undefined ? 'editing' : 'copying'}`, [shortcode])"
-              :shortcode="shortcode"
-              :file="file"
-              :pack-name="packName"
-              :remote="pack?.remote"
-              :known-local-packs="knownLocalPacks"
-              @update-pack-files="updatePackFiles"
-              @display-error="displayError"
-            >
-              <template #trigger>
-                <StillImage
-                  class="emoji"
-                  :src="emojiAddr(file)"
-                  :title="`:${shortcode}:`"
-                  :alt="`:${shortcode}:`"
-                />
-              </template>
-            </EmojiEditingPopover>
-          </div>
-        </ul>
+          <EmojiEditingPopover
+            v-for="(file, shortcode) in (pack?.files || [])"
+            ref="emojiPopovers"
+            :key="shortcode"
+            placement="top"
+            :title="$t(`admin_dash.emoji.${pack?.remote === undefined ? 'editing' : 'copying'}`, [shortcode])"
+            :shortcode="shortcode"
+            :file="file"
+            :pack-name="packName"
+            :remote="pack?.remote"
+            :known-local-packs="knownLocalPacks"
+            @update-pack-files="updatePackFiles"
+            @display-error="displayError"
+          >
+            <template #trigger>
+              <StillImage
+                class="emoji"
+                :src="emojiAddr(file)"
+                :title="`:${shortcode}:`"
+                :alt="`:${shortcode}:`"
+              />
+            </template>
+          </EmojiEditingPopover>
+        </div>
       </div>
       <h3>{{ $t('admin_dash.emoji.advanced') }}</h3>
       <button
-
         class="button button-default btn"
         type="button"
         @click="importFromFS"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 311f8a8ab..0a7f0fd00 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1307,6 +1307,7 @@
       "remote_pack_instance": "Remote pack instance",
       "emoji_pack": "Emoji pack",
       "edit_pack": "Edit pack",
+      "metadata": "Metadata",
       "description": "Description",
       "homepage": "Homepage",
       "fallback_src": "Fallback source",