From f13e868e729bd75e1acb2b1587e986451971046b Mon Sep 17 00:00:00 2001
From: Varun Patil <radialapps@gmail.com>
Date: Thu, 3 Aug 2023 10:46:48 -0700
Subject: [PATCH] admin: revamp UI

Signed-off-by: Varun Patil <radialapps@gmail.com>
---
 src/components/admin/AdminMain.vue            | 58 +++++++++++++++----
 src/components/admin/sections/Apps.vue        |  3 +
 src/components/admin/sections/Exif.vue        |  3 +
 src/components/admin/sections/FileSupport.vue |  1 +
 src/components/admin/sections/Indexing.vue    |  3 +
 src/components/admin/sections/Performance.vue |  3 +
 src/components/admin/sections/Places.vue      |  3 +
 src/components/admin/sections/Video.vue       |  3 +
 src/components/admin/sections/VideoAccel.vue  |  3 +
 .../admin/sections/VideoTranscoder.vue        |  3 +
 src/components/admin/sections/_Template.vue   |  3 +
 11 files changed, 74 insertions(+), 12 deletions(-)

diff --git a/src/components/admin/AdminMain.vue b/src/components/admin/AdminMain.vue
index caa3bca9..9e253e72 100644
--- a/src/components/admin/AdminMain.vue
+++ b/src/components/admin/AdminMain.vue
@@ -2,15 +2,21 @@
   <div class="outer" v-if="config && sconfig">
     <XLoadingIcon class="loading-icon" v-show="loading" />
 
-    <component
-      v-for="c in components"
-      :key="c.__name"
-      :is="c"
-      :status="status"
-      :config="config"
-      :sconfig="sconfig"
-      @update="update"
-    />
+    <div class="left-pane">
+      <component
+        v-for="c in components"
+        :id="c.name"
+        :key="c.name"
+        :is="c"
+        :status="status"
+        :config="config"
+        :sconfig="sconfig"
+        @update="update"
+      />
+    </div>
+    <div class="right-pane">
+      <a class="sec-link" v-for="c in components" :key="c.name" :href="`#${c.name}`">{{ c.title ?? c.name }}</a>
+    </div>
   </div>
 </template>
 
@@ -58,6 +64,7 @@ export default defineComponent({
 
   methods: {
     async refreshSystemConfig() {
+      console.log(this.components);
       try {
         this.loading++;
         const res = await axios.get<ISystemConfig>(API.SYSTEM_CONFIG(null));
@@ -124,6 +131,33 @@ export default defineComponent({
 .outer {
   padding: 20px;
   padding-top: 0px;
+  overflow-x: hidden;
+
+  > .right-pane {
+    display: none;
+  }
+
+  @media (min-width: 1024px) {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+
+    > .left-pane {
+      flex: 1;
+      padding-right: 10px;
+      height: 100%;
+      overflow-y: auto;
+    }
+
+    > .right-pane {
+      display: block;
+      padding: 10px;
+      line-height: 2em;
+      > a.sec-link {
+        display: block;
+      }
+    }
+  }
 
   .admin-section {
     margin-top: 20px;
@@ -155,9 +189,9 @@ export default defineComponent({
   }
 
   :deep h2 {
-    font-size: 1.5em;
-    font-weight: bold;
-    margin-top: 25px;
+    font-size: 1.6em;
+    font-weight: 500;
+    margin-top: 40px;
   }
 
   :deep h3 {
diff --git a/src/components/admin/sections/Apps.vue b/src/components/admin/sections/Apps.vue
index 912cb195..6162c92a 100644
--- a/src/components/admin/sections/Apps.vue
+++ b/src/components/admin/sections/Apps.vue
@@ -37,10 +37,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'Apps',
+  title: t('memories', 'Recommended Apps'),
   mixins: [AdminMixin],
 });
 </script>
diff --git a/src/components/admin/sections/Exif.vue b/src/components/admin/sections/Exif.vue
index eb8e5b63..d1eee9c4 100644
--- a/src/components/admin/sections/Exif.vue
+++ b/src/components/admin/sections/Exif.vue
@@ -36,10 +36,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'Exif',
+  title: t('memories', 'EXIF Extraction'),
   mixins: [AdminMixin],
 });
 </script>
diff --git a/src/components/admin/sections/FileSupport.vue b/src/components/admin/sections/FileSupport.vue
index e5e48dfb..72a27af0 100644
--- a/src/components/admin/sections/FileSupport.vue
+++ b/src/components/admin/sections/FileSupport.vue
@@ -74,6 +74,7 @@ import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'FileSupport',
+  title: t('memories', 'File Support'),
   mixins: [AdminMixin],
 
   data: () => ({
diff --git a/src/components/admin/sections/Indexing.vue b/src/components/admin/sections/Indexing.vue
index 56a7c4f0..83a5d7f8 100644
--- a/src/components/admin/sections/Indexing.vue
+++ b/src/components/admin/sections/Indexing.vue
@@ -116,10 +116,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'Indexing',
+  title: t('memories', 'Media Indexing'),
   mixins: [AdminMixin],
 });
 </script>
diff --git a/src/components/admin/sections/Performance.vue b/src/components/admin/sections/Performance.vue
index 2af98462..44328b6d 100644
--- a/src/components/admin/sections/Performance.vue
+++ b/src/components/admin/sections/Performance.vue
@@ -29,10 +29,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'Performance',
+  title: t('memories', 'Performance'),
   mixins: [AdminMixin],
 
   computed: {
diff --git a/src/components/admin/sections/Places.vue b/src/components/admin/sections/Places.vue
index 851abf12..3e5d911b 100644
--- a/src/components/admin/sections/Places.vue
+++ b/src/components/admin/sections/Places.vue
@@ -71,10 +71,13 @@
 import { defineComponent } from 'vue';
 import { API } from '../../../services/API';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'Places',
+  title: t('memories', 'Reverse Geocoding'),
   mixins: [AdminMixin],
 
   computed: {
diff --git a/src/components/admin/sections/Video.vue b/src/components/admin/sections/Video.vue
index 7b35e2db..eb569e92 100644
--- a/src/components/admin/sections/Video.vue
+++ b/src/components/admin/sections/Video.vue
@@ -81,10 +81,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'Video',
+  title: t('memories', 'Video Streaming'),
   mixins: [AdminMixin],
 });
 </script>
diff --git a/src/components/admin/sections/VideoAccel.vue b/src/components/admin/sections/VideoAccel.vue
index fc570fff..6aba3820 100644
--- a/src/components/admin/sections/VideoAccel.vue
+++ b/src/components/admin/sections/VideoAccel.vue
@@ -102,10 +102,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'VideoAccel',
+  title: t('memories', 'HW Acceleration'),
   mixins: [AdminMixin],
 
   computed: {
diff --git a/src/components/admin/sections/VideoTranscoder.vue b/src/components/admin/sections/VideoTranscoder.vue
index e42e573c..1e0f5c00 100644
--- a/src/components/admin/sections/VideoTranscoder.vue
+++ b/src/components/admin/sections/VideoTranscoder.vue
@@ -57,10 +57,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'VideoTranscoder',
+  title: t('memories', 'Transcoding'),
   mixins: [AdminMixin],
 });
 </script>
diff --git a/src/components/admin/sections/_Template.vue b/src/components/admin/sections/_Template.vue
index 5aec45e8..6b5b3edd 100644
--- a/src/components/admin/sections/_Template.vue
+++ b/src/components/admin/sections/_Template.vue
@@ -5,10 +5,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
+import { translate as t } from '@nextcloud/l10n';
+
 import AdminMixin from '../AdminMixin';
 
 export default defineComponent({
   name: 'Template',
+  title: t('memories', 'Template'),
   mixins: [AdminMixin],
 });
 </script>