added about section for version, cleaned up about tab

src/components/about/about.js

@@ -1,3 +1,5 @@
+import { mapState } from 'pinia'
+
 import FeaturesPanel from '../features_panel/features_panel.vue'
 import InstanceSpecificPanel from '../instance_specific_panel/instance_specific_panel.vue'
 import MRFTransparencyPanel from '../mrf_transparency_panel/mrf_transparency_panel.vue'
@@ -7,6 +9,9 @@ import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_pane
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
+const pleromaFeCommitUrl =
+  'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
+
 const About = {
   components: {
     InstanceSpecificPanel,
@@ -19,6 +24,10 @@ const About = {
     showFeaturesPanel() {
       return useInstanceStore().instanceIdentity.showFeaturesPanel
     },
+    frontendVersionLink() {
+      return pleromaFeCommitUrl + this.frontendVersion
+    },
+    ...mapState(useInstanceStore, ['backendVersion', 'backendRepository', 'frontendVersion']),
     showInstanceSpecificPanel() {
       return (
         useInstanceStore().instanceIdentity.showInstanceSpecificPanel &&

src/components/about/about.vue

@@ -1,11 +1,45 @@
 <template>
-  <div class="column-inner">
+  <div class="About column-inner">
     <instance-specific-panel v-if="showInstanceSpecificPanel" />
     <staff-panel />
     <terms-of-service-panel />
     <MRFTransparencyPanel />
     <features-panel v-if="showFeaturesPanel" />
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <div class="title">{{ $t('settings.version.title') }}</div>
+      </div>
+      <div class="panel-body">
+        <dl>
+          <dt>{{ $t('settings.version.backend_version') }}</dt>
+          <dd>
+            <a
+              :href="backendRepository"
+              target="_blank"
+            >
+              {{ backendVersion }}
+            </a>
+          </dd>
+          <dt>{{ $t('settings.version.frontend_version') }}</dt>
+          <dd>
+            <a
+              :href="frontendVersionLink"
+              target="_blank"
+            >
+              {{ frontendVersion }}
+            </a>
+          </dd>
+        </dl>
+      </div>
+    </div>
   </div>
 </template>
 
 <script src="./about.js"></script>
+<style>
+  .About {
+    dl {
+      padding-left: 1em;
+    }
+  }
+</style>

src/components/settings_modal/tabs/developer_tab.js

@@ -1,3 +1,4 @@
+import { mapState } from 'pinia'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
@@ -9,14 +10,6 @@ const pleromaFeCommitUrl =
   'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
 
 const VersionTab = {
-  data() {
-    const instance = useInstanceStore()
-    return {
-      backendVersion: instance.backendVersion,
-      backendRepository: instance.backendRepository,
-      frontendVersion: instance.frontendVersion,
-    }
-  },
   components: {
     BooleanSetting,
   },
@@ -24,6 +17,7 @@ const VersionTab = {
     frontendVersionLink() {
       return pleromaFeCommitUrl + this.frontendVersion
     },
+    ...mapState(useInstanceStore, ['backendVersion', 'backendRepository', 'frontendVersion']),
     ...SharedComputedObject(),
   },
   methods: {