From 4329502422d67cfaae521337b2f1cb041fcac954 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 7 Dec 2025 17:00:21 +0200
Subject: [PATCH] second pass of reorganizing emoji tab

---
 src/App.scss                                  |  14 +-
 src/components/checkbox/checkbox.vue          |   4 +-
 src/components/registration/registration.vue  |   2 +-
 src/components/select/select.vue              |   8 +-
 .../settings_modal/admin_tabs/emoji_tab.js    |  11 +-
 .../settings_modal/admin_tabs/emoji_tab.scss  |  39 +-
 .../settings_modal/admin_tabs/emoji_tab.vue   | 351 +++++++++---------
 7 files changed, 235 insertions(+), 194 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 02500c661..1a08fbae8 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -513,6 +513,12 @@ nav {
   }
 }
 
+label {
+  &.-disabled {
+    color: var(--textFaint);
+  }
+}
+
 input,
 textarea {
   border: none;
@@ -554,6 +560,7 @@ textarea {
   &.disabled {
     cursor: not-allowed;
     color: var(--textFaint);
+    background-color: transparent;
   }
 
   &[type="range"] {
@@ -579,6 +586,8 @@ textarea {
       & + label::before {
         opacity: 0.5;
       }
+
+      background-color: var(--background);
     }
 
     + label::before {
@@ -694,13 +703,16 @@ option {
   display: inline-flex;
   vertical-align: middle;
 
+  .Select select {
+    line-height: 1;
+  }
+
   > *,
   > * .button-default {
     --_roundness-left: 0;
     --_roundness-right: 0;
 
     position: relative;
-    flex: 1 1 auto;
   }
 
   > *:first-child,
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index c8bba4c44..1e0f5ad05 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -1,7 +1,7 @@
 <template>
   <label
     class="checkbox"
-    :class="[{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }, radio ? '-radio' : '-checkbox']"
+    :class="[{ ['-disabled']: disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }, radio ? '-radio' : '-checkbox']"
   >
     <span
       v-if="!!$slots.before"
@@ -123,7 +123,7 @@ export default {
 
   .disabled {
     .checkbox-indicator::before {
-      background-color: var(--background);
+      background-color: transparent;
     }
   }
 
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index f6b056e6b..b969a416e 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -395,7 +395,7 @@
   }
 
   form textarea {
-    line-height: 16px;
+    line-height: 1;
     resize: vertical;
   }
 
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 96be5312c..78b3b348c 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -26,6 +26,7 @@
 /* TODO fix order of styles */
 label.Select {
   padding: 0;
+  display: flex;
 
   select {
     appearance: none;
@@ -33,13 +34,12 @@ label.Select {
     border: none;
     color: var(--text);
     margin: 0;
-    padding: 0 2em 0 0.2em;
+    padding: 0 2em 0 0.5em;
     font-family: var(--font);
     font-size: 1em;
     width: 100%;
     z-index: 1;
-    height: 2em;
-    line-height: 16px;
+    line-height: 2;
 
     &[multiple],
     &[size] {
@@ -79,7 +79,7 @@ label.Select {
     position: absolute;
     top: 0;
     bottom: 0;
-    right: 5px;
+    right: 0.5em;
     height: 100%;
     width: 0.875em;
     font-family: var(--font);
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
index c7c243fb5..7c137e35f 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -65,6 +65,7 @@ const EmojiTab = {
       return this.packName !== '' ? this.knownPacks[this.packName] : undefined
     },
     packMeta () {
+      if (this.packName === '') return {}
       if (this.editedMetadata[this.packName] === undefined) {
         this.editedMetadata[this.packName] = clone(this.pack.pack)
       }
@@ -115,8 +116,6 @@ const EmojiTab = {
           return Promise.reject(resp)
         }
       }).then(() => {
-        this.$refs.createPackPopover.hidePopover()
-
         this.packName = this.newPackName
         this.newPackName = ''
       })
@@ -222,8 +221,6 @@ const EmojiTab = {
           for (const pack in this.knownRemotePacks[inst]) {
             this.sortPackFiles(`${pack}@${inst}`)
           }
-
-          this.$refs.remotePackPopover.hidePopover()
         })
         .catch(data => {
           this.displayError(data)
@@ -240,8 +237,6 @@ const EmojiTab = {
         .then(data => data.json())
         .then(resp => {
           if (resp === 'ok') {
-            this.$refs.downloadPackPopover.hidePopover()
-
             return this.refreshPackList()
           } else {
             this.displayError(resp.error)
@@ -259,8 +254,6 @@ const EmojiTab = {
         .then(data => data.json())
         .then(resp => {
           if (resp === 'ok') {
-            this.$refs.additionalRemotePopover.hidePopover()
-
             return this.refreshPackList()
           } else {
             this.displayError(resp.error)
@@ -279,8 +272,6 @@ const EmojiTab = {
         .then(data => data.json())
         .then(resp => {
           if (resp === 'ok') {
-            this.$refs.additionalRemotePopover.hidePopover()
-
             return this.refreshPackList()
           } else {
             this.displayError(resp.error)
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
index 4a92ac944..0cd555101 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.scss
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss
@@ -2,10 +2,20 @@
   .toolbar {
     display: flex;
     flex-wrap: wrap;
-    align-items: end;
+    gap: 0.5em;
 
-    .header-text {
+    .header-buttons {
+      display: flex;
       flex: 1 0 auto;
+      justify-content: end;
+
+      &:not(.btn-group) {
+        gap: 0.5em;
+      }
+
+      .header-text {
+        flex: 1 0 auto;
+      }
     }
 
     .button-default {
@@ -15,6 +25,19 @@
     }
   }
 
+  .meta-buttons {
+    display: flex;
+    gap: 0.5em;
+  }
+
+  h3.toolbar {
+    align-items: end;
+  }
+
+  h4.toolbar {
+    align-items: baseline;
+  }
+
   .emoji-info-input {
     width: 100%;
   }
@@ -26,8 +49,8 @@
   }
 
   .emoji {
-    width: 32px;
-    height: 32px;
+    width: 2em;
+    height: 2em;
   }
 
   .emoji-unsaved {
@@ -38,6 +61,14 @@
     display: flex;
     flex-wrap: wrap;
     gap: 1em;
+
+    .placeholder {
+      background: var(--textFaint);
+      border-radius: 0.5em;
+      width: 2em;
+      height: 2em;
+      opacity: 0.5;
+    }
   }
 }
 
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index 7a550c948..8d7bc10bc 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -114,157 +114,13 @@
       </h3>
       <ul class="setting-list">
         <li>
-          <h4>
-            {{ $t('admin_dash.emoji.edit_pack') }}
-          </h4>
-
-          <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>
-
-          <button
-            class="button button-default btn emoji-tab-popover-button"
-            type="button"
-            @click="$refs.createPackPopover.showPopover"
-          >
-            {{ $t('admin_dash.emoji.create_pack') }}
-          </button>
-          <Popover
-            ref="createPackPopover"
-            popover-class="emoji-tab-edit-popover popover-default"
-            trigger="click"
-            placement="bottom"
-            bound-to-selector=".emoji-tab"
-            :bound-to="{ x: 'container' }"
-            :offset="{ y: 5 }"
-          >
-            <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>
-        </li>
-      </ul>
-
-      <div v-if="pack">
-        <div class="pack-info-wrapper">
-          <ul class="setting-list">
-            <li>
-              <label>
-                {{ $t('admin_dash.emoji.description') }}
-                <ModifiedIndicator
-                  :changed="metaEdited('description')"
-                  message-key="admin_dash.emoji.metadata_changed"
-                />
-
-                <textarea
-                  v-model="packMeta.description"
-                  :disabled="pack.remote !== undefined"
-                  class="bio resize-height input"
-                />
-              </label>
-            </li>
-            <li>
-              <label>
-                {{ $t('admin_dash.emoji.homepage') }}
-                <ModifiedIndicator
-                  :changed="metaEdited('homepage')"
-                  message-key="admin_dash.emoji.metadata_changed"
-                />
-
-                <input
-                  v-model="packMeta.homepage"
-                  class="emoji-info-input input"
-                  :disabled="pack.remote !== undefined"
-                >
-              </label>
-            </li>
-            <li>
-              <label>
-                {{ $t('admin_dash.emoji.fallback_src') }}
-                <ModifiedIndicator
-                  :changed="metaEdited('fallback-src')"
-                  message-key="admin_dash.emoji.metadata_changed"
-                />
-
-                <input
-                  v-model="packMeta['fallback-src']"
-                  class="emoji-info-input input"
-                  :disabled="pack.remote !== undefined"
-                >
-              </label>
-            </li>
-            <li>
-              <label>
-                {{ $t('admin_dash.emoji.fallback_sha256') }}
-
-                <input
-                  v-model="packMeta['fallback-src-sha256']"
-                  :disabled="true"
-                  class="emoji-info-input input"
-                >
-              </label>
-            </li>
-            <li>
-              <Checkbox
-                v-model="packMeta['share-files']"
-                :disabled="pack.remote !== undefined"
-              >
-                {{ $t('admin_dash.emoji.share') }}
-              </Checkbox>
-
-              <ModifiedIndicator
-                :changed="metaEdited('share-files')"
-                message-key="admin_dash.emoji.metadata_changed"
-              />
+          <h4 class="toolbar">
+            <span class="header-text">
+              {{ $t('admin_dash.emoji.edit_pack') }}
+            </span>
+            <span class="header-buttons">
               <button
-                v-if="pack.remote === undefined"
-                class="button button-default btn"
-                type="button"
-                @click="savePackMetadata"
-              >
-                {{ $t('admin_dash.emoji.save_meta') }}
-              </button>
-              <button
-                v-if="pack.remote === undefined"
-                class="button button-default btn"
-                type="button"
-                @click="savePackMetadata"
-              >
-                {{ $t('admin_dash.emoji.revert_meta') }}
-              </button>
-
-              <button
-                v-if="pack.remote === undefined"
+                :disabled="!pack || pack.remote !== undefined"
                 class="button button-default btn"
                 type="button"
                 @click="deleteModalVisible = true"
@@ -284,7 +140,7 @@
               </button>
 
               <button
-                v-if="pack.remote !== undefined"
+                :disabled="!pack || pack.remote === undefined"
                 class="button button-default btn"
                 type="button"
                 @click="$refs.downloadPackPopover.showPopover"
@@ -334,27 +190,175 @@
                   </template>
                 </Popover>
               </button>
-            </li>
-          </ul>
-        </div>
+            </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"
+              >
+                <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') }}
+                    </button>
+                  </div>
+                </template>
+              </Popover>
+            </span>
+          </h4>
+        </li>
+      </ul>
+
+      <div
+        class="pack-info-wrapper"
+        :class="{ disabled: !pack }"
+      >
+        <ul class="setting-list">
+          <li>
+            <label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
+              {{ $t('admin_dash.emoji.description') }}
+              <ModifiedIndicator
+                :changed="metaEdited('description')"
+                message-key="admin_dash.emoji.metadata_changed"
+              />
+
+              <textarea
+                v-model="packMeta.description"
+                :disabled="!pack || pack.remote !== undefined"
+                class="bio resize-height input"
+              />
+            </label>
+          </li>
+          <li>
+            <label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
+              {{ $t('admin_dash.emoji.homepage') }}
+              <ModifiedIndicator
+                :changed="metaEdited('homepage')"
+                message-key="admin_dash.emoji.metadata_changed"
+              />
+
+              <input
+                v-model="packMeta.homepage"
+                class="emoji-info-input input"
+                :disabled="!pack || pack.remote !== undefined"
+              >
+            </label>
+          </li>
+          <li>
+            <label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
+              {{ $t('admin_dash.emoji.fallback_src') }}
+              <ModifiedIndicator
+                :changed="metaEdited('fallback-src')"
+                message-key="admin_dash.emoji.metadata_changed"
+              />
+
+              <input
+                v-model="packMeta['fallback-src']"
+                class="emoji-info-input input"
+                :disabled="!pack || pack.remote !== undefined"
+              >
+            </label>
+          </li>
+          <li>
+            <label :class="{ ['-disabled']: !pack || pack.remote !== undefined }">
+              {{ $t('admin_dash.emoji.fallback_sha256') }}
+
+              <input
+                v-model="packMeta['fallback-src-sha256']"
+                :disabled="!pack || pack.remote !== undefined"
+                class="emoji-info-input input"
+              >
+            </label>
+          </li>
+          <li>
+            <Checkbox
+              v-model="packMeta['share-files']"
+              :disabled="!pack || pack.remote !== undefined"
+            >
+              {{ $t('admin_dash.emoji.share') }}
+            </Checkbox>
+
+            <ModifiedIndicator
+              :changed="metaEdited('share-files')"
+              message-key="admin_dash.emoji.metadata_changed"
+            />
+            <div class="meta-buttons">
+              <button
+                v-if="pack && pack.remote === undefined"
+                class="button button-default btn"
+                type="button"
+                @click="savePackMetadata"
+              >
+                {{ $t('admin_dash.emoji.save_meta') }}
+              </button>
+              <button
+                v-if="pack && pack.remote === undefined"
+                class="button button-default btn"
+                type="button"
+                @click="savePackMetadata"
+              >
+                {{ $t('admin_dash.emoji.revert_meta') }}
+              </button>
+            </div>
+
+          </li>
+        </ul>
 
         <ul class="setting-list">
           <h4>
             {{ $t('admin_dash.emoji.files') }}
 
             <ModifiedIndicator
-              v-if="pack"
               :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
               message-key="admin_dash.emoji.emoji_changed"
             />
           </h4>
 
           <div
-            v-if="pack"
             class="emoji-list"
           >
             <EmojiEditingPopover
-              v-if="pack.remote === undefined"
+              v-if="pack && pack.remote === undefined"
               placement="bottom"
               new-upload
               :title="$t('admin_dash.emoji.adding_new')"
@@ -370,17 +374,24 @@
                 />
               </template>
             </EmojiEditingPopover>
+            <template v-if="!pack">
+              <div
+                class="placeholder"
+                v-for="_ in new Array(20)"
+              />
+            </template>
+
 
             <EmojiEditingPopover
-              v-for="(file, shortcode) in pack.files"
+              v-for="(file, shortcode) in (pack?.files || [])"
               ref="emojiPopovers"
               :key="shortcode"
               placement="top"
-              :title="$t(`admin_dash.emoji.${pack.remote === undefined ? 'editing' : 'copying'}`, [shortcode])"
+              :title="$t(`admin_dash.emoji.${pack?.remote === undefined ? 'editing' : 'copying'}`, [shortcode])"
               :shortcode="shortcode"
               :file="file"
               :pack-name="packName"
-              :remote="pack.remote"
+              :remote="pack?.remote"
               :known-local-packs="knownLocalPacks"
               @update-pack-files="updatePackFiles"
               @display-error="displayError"
@@ -398,19 +409,15 @@
         </ul>
       </div>
       <h3>{{ $t('admin_dash.emoji.advanced') }}</h3>
-      <li
-        class="toolbar"
-      >
-        <button
+      <button
 
-          class="button button-default btn"
-          type="button"
-          @click="importFromFS"
-        >
-          <FAIcon icon="server" />
-          {{ $t('admin_dash.emoji.importFS') }}
-        </button>
-      </li>
+        class="button button-default btn"
+        type="button"
+        @click="importFromFS"
+      >
+        <FAIcon icon="server" />
+        {{ $t('admin_dash.emoji.importFS') }}
+      </button>
     </div>
   </div>
 </template>