Show bubble instances in about panel (#123)

Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/123

src/components/local_bubble_panel/local_bubble_panel.js

@@ -0,0 +1,12 @@
+import { mapState } from 'vuex'
+import { get } from 'lodash'
+
+const LocalBubblePanel = {
+  computed: {
+    ...mapState({
+      bubbleInstances: state => get(state, 'instance.localBubbleInstances')
+    })
+  }
+}
+
+export default LocalBubblePanel

src/components/local_bubble_panel/local_bubble_panel.scss

@@ -0,0 +1,21 @@
+.mrf-section {
+  margin: 1em;
+
+  table {
+    width:100%;
+    text-align: left;
+    padding-left:10px;
+    padding-bottom:20px;
+
+    th, td {
+      width: 180px;
+      max-width: 360px;
+      overflow:  hidden;
+      vertical-align: text-top;
+    }
+
+    th+th, td+td {
+      width: auto;
+    }
+  }
+}

src/components/local_bubble_panel/local_bubble_panel.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    v-if="bubbleInstances"
+    class="bubble-panel"
+  >
+    <div class="panel panel-default base01-background">
+      <div class="panel-heading timeline-heading base02-background">
+        <div class="title">
+          {{ $t("about.bubble_instances") }}
+        </div>
+      </div>
+      <div class="panel-body">
+        <p>{{ $t("about.bubble_instances_description")}}:</p>
+        <ul>
+          <li
+            v-for="instance in bubbleInstances"
+            :key="instance"
+            v-text="instance"
+          />
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./local_bubble_panel.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+@import './local_bubble_panel.scss';
+</style>