Displays a tab view in the config modal, with raw YAML for downloading

src/components/LinkItems/Item.vue

@@ -100,7 +100,6 @@ export default {
 
 .item {
   flex-grow: 1;
-  position: relative;
   color: var(--item-text-color);
   vertical-align: middle;
   margin: 0.5rem;
@@ -116,6 +115,7 @@ export default {
   &:hover {
     box-shadow: var(--item-hover-shadow);
     background: var(--item-background-hover);
+    position: relative;
   }
   &:focus {
     outline: 2px solid var(--primary);

src/components/LinkItems/ItemIcon.vue

@@ -99,7 +99,7 @@ export default {
 <style lang="scss">
   .tile-icon {
       width: 60px;
-      filter: var(--item-icon-transform);
+      // filter: var(--item-icon-transform);
       &.broken { display: none; }
   }
   i.fas, i.fab, i.far, i.fal, i.fad {

src/components/Settings/ConfigEditor.vue

@@ -5,7 +5,16 @@
       <IconSpanner v-tooltip="tooltip('Update configuration locally')" @click="showEditor()" />
     </div>
     <modal :name="modalName" :resizable="true" width="80%" height="80%">
-      <p>Hello</p>
+      <Tabs>
+        <TabItem name="Edit">
+          <div class="first-tab">Todo</div>
+        </TabItem>
+        <TabItem name="Download">
+          <div class="second-tab">
+            <pre>{{this.jsonParser(this.sections)}}</pre>
+          </div>
+        </TabItem>
+      </Tabs>
     </modal>
   </div>
 </template>
@@ -13,6 +22,7 @@
 <script>
 
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
+import JsonToYaml from '@/utils/JsonToYaml';
 
 export default {
   name: 'ConfigEditor',
@@ -20,13 +30,14 @@ export default {
     return {
       modalName: 'CONF-EDITOR',
       input: '',
+      jsonParser: JsonToYaml,
     };
   },
   components: {
     IconSpanner,
   },
   props: {
-    initialConfig: Object,
+    sections: Array,
   },
   methods: {
     showEditor: function show() {

src/components/Settings/SettingsContainer.vue

@@ -6,7 +6,7 @@
         :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
       <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
       <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
-      <ConfigEditor />
+      <ConfigEditor :sections="sections" />
     </div>
     <KeyboardShortcutInfo />
   </section>
@@ -28,6 +28,7 @@ export default {
     iconSize: String,
     availableThemes: Object,
     appConfig: Object,
+    sections: Array,
   },
   components: {
     SearchBar,