From db73631459b83bb144a8d915d2dafc55b59182ff Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 24 Nov 2025 20:53:01 +0200
Subject: [PATCH] somewhat better import-export tab + minor fixes

---
 src/components/exporter/exporter.vue          |   3 +
 src/components/importer/importer.vue          |   4 +-
 .../settings_modal_user_content.vue           |   6 +-
 .../tabs/data_import_export_tab.scss          |   6 ++
 .../tabs/data_import_export_tab.vue           | 102 +++++++++---------
 .../tab_switcher/vertical_tab_switcher.scss   |  10 --
 src/i18n/en.json                              |   7 ++
 7 files changed, 73 insertions(+), 65 deletions(-)

diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue
index 79defdf6f..e36d9dd62 100644
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@@ -23,6 +23,9 @@
 
 <style lang="scss">
 .exporter {
+  display: flex;
+  flex-direction: column;
+
   &-processing {
     margin: 0.25em;
   }
diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue
index 12779b457..0259ca70e 100644
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="importer">
+  <div class="importer btn-group">
     <form>
       <input
         ref="input"
@@ -19,7 +19,7 @@
       class="btn button-default"
       @click="submit"
     >
-      {{ submitButtonLabel || $t('importer.submit') }}
+      {{ submitButtonLabel || $t('importer.import') }}
     </button>
     <div v-if="success">
       <button
diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
index 4b3308869..6709b6e02 100644
--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -77,15 +77,14 @@
     <div
       v-if="isLoggedIn"
       :label="$t('settings.mutes_and_blocks')"
-      :fullHeight="true"
       icon="eye-slash"
       data-tab-name="mutesAndBlocks"
+      :full-width="true"
     >
       <MutesAndBlocksTab />
     </div>
     <div
       :label="$t('settings.clutter')"
-      :fullHeight="true"
       icon="broom"
       data-tab-name="clutter"
     >
@@ -96,6 +95,7 @@
       :label="$t('settings.security_tab')"
       icon="lock"
       data-tab-name="security"
+      :full-width="true"
     >
       <SecurityTab />
     </div>
@@ -113,6 +113,7 @@
       icon="palette"
       data-tab-name="style"
       :delay-render="true"
+      :full-width="true"
     >
       <StyleTab />
     </div>
@@ -122,6 +123,7 @@
       icon="paint-brush"
       data-tab-name="theme"
       :delay-render="true"
+      :full-width="true"
     >
       <OldThemeTab />
     </div>
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.scss b/src/components/settings_modal/tabs/data_import_export_tab.scss
index 034d03489..6a4b51ca4 100644
--- a/src/components/settings_modal/tabs/data_import_export_tab.scss
+++ b/src/components/settings_modal/tabs/data_import_export_tab.scss
@@ -2,4 +2,10 @@
   h3 {
     margin-right: -2em;
   }
+
+  .importer-exporter {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 0.5em;
+  }
 }
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.vue b/src/components/settings_modal/tabs/data_import_export_tab.vue
index e63385e30..3f7c3a875 100644
--- a/src/components/settings_modal/tabs/data_import_export_tab.vue
+++ b/src/components/settings_modal/tabs/data_import_export_tab.vue
@@ -4,57 +4,57 @@
     :label="$t('settings.data_import_export_tab')"
   >
     <div class="setting-item">
-      <h3>{{ $t('settings.follow_import') }}</h3>
-      <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
-      <Importer
-        :submit-handler="importFollows"
-        :success-message="$t('settings.follows_imported')"
-        :error-message="$t('settings.follow_import_error')"
-      />
-    </div>
-    <div class="setting-item">
-      <h3>{{ $t('settings.follow_export') }}</h3>
-      <Exporter
-        :get-content="getFollowsContent"
-        filename="friends.csv"
-        :export-button-label="$t('settings.follow_export_button')"
-      />
-    </div>
-    <div class="setting-item">
-      <h3>{{ $t('settings.block_import') }}</h3>
-      <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
-      <Importer
-        :submit-handler="importBlocks"
-        :success-message="$t('settings.blocks_imported')"
-        :error-message="$t('settings.block_import_error')"
-      />
-    </div>
-    <div class="setting-item">
-      <h3>{{ $t('settings.block_export') }}</h3>
-      <Exporter
-        :get-content="getBlocksContent"
-        filename="blocks.csv"
-        :export-button-label="$t('settings.block_export_button')"
-      />
-    </div>
-    <div class="setting-item">
-      <h3>{{ $t('settings.mute_import') }}</h3>
-      <p>{{ $t('settings.import_mutes_from_a_csv_file') }}</p>
-      <Importer
-        :submit-handler="importMutes"
-        :success-message="$t('settings.mutes_imported')"
-        :error-message="$t('settings.mute_import_error')"
-      />
-    </div>
-    <div class="setting-item">
-      <h3>{{ $t('settings.mute_export') }}</h3>
-      <Exporter
-        :get-content="getMutesContent"
-        filename="mutes.csv"
-        :export-button-label="$t('settings.mute_export_button')"
-      />
-    </div>
-    <div class="setting-item">
+      <h3>{{ $t('settings.import_export.title') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <h4>{{ $t('settings.import_export.follows') }}</h4>
+          <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
+          <div class="importer-exporter">
+            <Importer
+              :submit-handler="importFollows"
+              :success-message="$t('settings.follows_imported')"
+              :error-message="$t('settings.follow_import_error')"
+            />
+            <Exporter
+              :get-content="getFollowsContent"
+              filename="friends.csv"
+              :export-button-label="$t('settings.follow_export_button')"
+            />
+          </div>
+        </li>
+        <li>
+          <h4>{{ $t('settings.import_export.mutes') }}</h4>
+          <p>{{ $t('settings.import_mutes_from_a_csv_file') }}</p>
+          <div class="importer-exporter">
+            <Importer
+              :submit-handler="importMutes"
+              :success-message="$t('settings.mutes_imported')"
+              :error-message="$t('settings.mute_import_error')"
+            />
+            <Exporter
+              :get-content="getMutesContent"
+              filename="friends.csv"
+              :export-button-label="$t('settings.mute_export_button')"
+            />
+          </div>
+        </li>
+        <li>
+          <h4>{{ $t('settings.import_export.blocks') }}</h4>
+          <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
+          <div class="importer-exporter">
+            <Importer
+              :submit-handler="importBlocks"
+              :success-message="$t('settings.blocks_imported')"
+              :error-message="$t('settings.block_import_error')"
+            />
+            <Exporter
+              :get-content="getBlocksContent"
+              filename="friends.csv"
+              :export-button-label="$t('settings.block_export_button')"
+            />
+          </div>
+        </li>
+      </ul>
       <h3>{{ $t('settings.account_backup') }}</h3>
       <p>{{ $t('settings.account_backup_description') }}</p>
       <table>
diff --git a/src/components/tab_switcher/vertical_tab_switcher.scss b/src/components/tab_switcher/vertical_tab_switcher.scss
index 669a49f73..4a0b10203 100644
--- a/src/components/tab_switcher/vertical_tab_switcher.scss
+++ b/src/components/tab_switcher/vertical_tab_switcher.scss
@@ -68,16 +68,6 @@
       &.-hidden {
         display: none;
       }
-
-      &.-full-height:not(.-hidden) {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-
-        > *:not(.tab-content-label) {
-          flex: 1;
-        }
-      }
     }
   }
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e5f37b392..d2e37eb17 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -132,6 +132,7 @@
   },
   "importer": {
     "submit": "Submit",
+    "import": "Import",
     "success": "Imported successfully.",
     "error": "An error occured while importing this file."
   },
@@ -603,6 +604,12 @@
     "follow_export_button": "Export your follows to a csv file",
     "follow_import": "Follow import",
     "follow_import_error": "Error importing followers",
+    "import_export": {
+      "title": "Import / Export",
+      "follows": "List of users you follow",
+      "blocks": "List of users you block",
+      "mutes": "List of users you mute"
+    },
     "follows_imported": "Follows imported! Processing them will take a while.",
     "accent": "Accent",
     "foreground": "Foreground",