From 4681e23a1e1869a325cc4fe25b6b0ad7607da36b Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sun, 5 Jan 2025 19:35:04 +0100
Subject: [PATCH] fix(ui): Modal toggles

---
 front/src/components/RemoteSearchForm.vue | 97 +++++++++++------------
 front/src/components/library/Albums.vue   |  3 +-
 front/src/components/library/Artists.vue  |  3 +-
 front/src/components/library/Podcasts.vue | 60 ++++++++++----
 front/src/ui/components/Sidebar.vue       |  2 +-
 5 files changed, 95 insertions(+), 70 deletions(-)

diff --git a/front/src/components/RemoteSearchForm.vue b/front/src/components/RemoteSearchForm.vue
index 25d1fb818..a8672cab7 100644
--- a/front/src/components/RemoteSearchForm.vue
+++ b/front/src/components/RemoteSearchForm.vue
@@ -8,6 +8,13 @@ import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import Layout from '~/components/ui/Layout.vue'
+import Button from '~/components/ui/Button.vue'
+import Input from '~/components/ui/Input.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Tabs from '~/components/ui/Tabs.vue'
+import Tab from '~/components/ui/Tab.vue'
+
 import updateQueryString from '~/composables/updateQueryString'
 import useLogger from '~/composables/useLogger'
 
@@ -165,40 +172,52 @@ watch(() => props.initialId, () => {
 </script>
 
 <template>
-  <div
+  <Tabs
     v-if="type === 'both'"
     class="two ui buttons"
   >
-    <button
-      class="ui left floated labeled icon button"
+    <Tab
+      icon="bi-feed"
+      title="t('components.RemoteSearchForm.button.rss')"
       @click.prevent="type = 'rss'"
     >
-      <i class="feed icon" />
-      {{ t('components.RemoteSearchForm.button.rss') }}
-    </button>
-    <div class="or" />
-    <button
-      class="ui right floated right labeled icon button"
+      {{ t('components.RemoteSearchForm.description.rss') }}
+      <Input
+        id="object-id"
+        v-model="id"
+        type="text"
+        name="object-id"
+        :placeholder="labels.fieldPlaceholder"
+        required
+      />
+    </Tab>
+    <Tab
+      icon="bi-globe"
+      title="t('components.RemoteSearchForm.button.fediverse')"
       @click.prevent="type = 'artists'"
     >
-      <i class="globe icon" />
-      {{ t('components.RemoteSearchForm.button.fediverse') }}
-    </button>
-  </div>
+      {{ t('components.RemoteSearchForm.description.fediverse') }}
+      <Input
+        id="object-id"
+        v-model="id"
+        type="text"
+        name="object-id"
+        :placeholder="labels.fieldPlaceholder"
+        required
+      />
+    </Tab>
+  </Tabs>
   <div v-else>
-    <form
+    <Layout form
       id="remote-search"
       :class="['ui', {loading: isLoading}, 'form']"
       @submit.stop.prevent="submit"
     >
-      <div
+      <Alert red
         v-if="errors.length > 0"
         role="alert"
-        class="ui negative message"
+        title="t('components.RemoteSearchForm.header.fetchFailed')"
       >
-        <h3 class="header">
-          {{ t('components.RemoteSearchForm.header.fetchFailed') }}
-        </h3>
         <ul class="list">
           <li
             v-for="(error, key) in errors"
@@ -207,43 +226,21 @@ watch(() => props.initialId, () => {
             {{ error }}
           </li>
         </ul>
-      </div>
-      <div class="ui required field">
-        <label for="object-id">
-          {{ labels.fieldLabel }}
-        </label>
-        <p v-if="type === 'rss'">
-          {{ t('components.RemoteSearchForm.description.rss') }}
-        </p>
-        <p v-else-if="type === 'artists'">
-          {{ t('components.RemoteSearchForm.description.fediverse') }}
-        </p>
-        <input
-          id="object-id"
-          v-model="id"
-          type="text"
-          name="object-id"
-          :placeholder="labels.fieldPlaceholder"
-          required
-        >
-      </div>
-      <button
+      </Alert>
+      <Button
         v-if="showSubmit"
+        primary
         type="submit"
-        :class="['ui', 'primary', {loading: isLoading}, 'button']"
+        :class="{loading: isLoading}"
         :disabled="isLoading || !id || id.length === 0"
       >
         {{ t('components.RemoteSearchForm.button.search') }}
-      </button>
-    </form>
-    <div
+      </Button>
+    </Layout>
+    <Alert
       v-if="!isLoading && obj?.status === 'finished' && !redirectRoute"
-      role="alert"
-      class="ui warning message"
     >
-      <p>
-        {{ t('components.RemoteSearchForm.warning.unsupported') }}
-      </p>
-    </div>
+      {{ t('components.RemoteSearchForm.warning.unsupported') }}
+    </Alert>
   </div>
 </template>
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index 955bd2530..3a7d79a02 100644
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@@ -218,7 +218,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           solid
           small
           primary
-          :to="{name: 'content.index'}"
+          @click="store.commit('ui/toggleModal', 'upload')"
+          :aria-pressed="store.state.ui.modalsOpen.has('upload') || undefine"
         >
           <template #image>
             <i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index 24397ad95..4a5203671 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -230,7 +230,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
           solid
           small
           primary
-          :to="{name: 'content.index'}"
+          @click="store.commit('ui/toggleModal', 'upload')"
+          :aria-pressed="store.state.ui.modalsOpen.has('upload') || undefine"
         >
           <template #image>
             <i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
diff --git a/front/src/components/library/Podcasts.vue b/front/src/components/library/Podcasts.vue
index 20cf9b35e..fe53c6e9e 100644
--- a/front/src/components/library/Podcasts.vue
+++ b/front/src/components/library/Podcasts.vue
@@ -16,6 +16,7 @@ import axios from 'axios'
 import TagsSelector from '~/components/library/TagsSelector.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
 import Modal from '~/components/ui/Modal.vue'
+import Card from '~/components/ui/Card.vue'
 import ArtistCard from '~/components/artist/Card.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 import Layout from '~/components/ui/Layout.vue'
@@ -129,6 +130,17 @@ const labels = computed(() => ({
 }))
 
 const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value].sort((a, b) => a - b)))
+
+const modalName = 'subscribe'
+
+const isOpen = computed({
+  get() {
+    return store.state.ui.modalsOpen.has(modalName);
+  },
+  set(value) {
+    store.commit('ui/setModal', [modalName, value]);
+  }
+})
 </script>
 
 <template>
@@ -213,22 +225,32 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         {{ t('components.library.Podcasts.empty.noResults') }}
       </Alert>
       <Layout flex>
-        <Button
+        <Card
           v-if="store.state.auth.authenticated"
-          icon="bi-plus"
+          :title="t('components.library.Podcasts.button.feed')"
+          solid
+          small
           primary
-          @click.stop.prevent="showSubscribeModal = true"
+          @click="store.commit('ui/toggleModal', 'subscribe')"
+          :aria-pressed="store.state.ui.modalsOpen.has('subscribe') || undefine"
         >
-          {{ t('components.library.Podcasts.button.feed') }}
-        </Button>
-        <Button
-          primary
+          <template #image>
+            <i class="bi bi-plus" style="font-size: 100px; position: relative; top: 50px;" />
+          </template>
+        </Card>
+        <Card
           v-if="store.state.auth.authenticated"
-          icon="bi-upload"
-          :to="{name: 'content.index'}"
+          :title="t('components.library.Podcasts.button.channel')"
+          solid
+          small
+          primary
+          @click="store.commit('ui/toggleModal', 'upload')"
+          :aria-pressed="store.state.ui.modalsOpen.has('upload') || undefine"
         >
-        {{ t('components.library.Podcasts.button.channel') }}
-        </Button>
+          <template #image>
+            <i class="bi bi-upload" style="font-size: 100px; position: relative; top: 50px;" />
+          </template>
+        </Card>
       </Layout>
     </Layout>
     <Spacer grow />
@@ -238,8 +260,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
     />
   <Modal
-    v-model:show="showSubscribeModal"
-    title="t('components.library.Podcasts.modal.subscription.header')"
+    v-model="isOpen"
+    :title="t('components.library.Podcasts.modal.subscription.header')"
   >
     <div
       ref="modalContent"
@@ -250,21 +272,25 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
         :show-submit="false"
         :standalone="false"
         :redirect="true"
-        @subscribed="showSubscribeModal = false; fetchData()"
+        @subscribed="isOpen = false; fetchData()"
       />
     </div>
-    <div class="actions">
-      <Button color="secondary">
+    <template #actions>
+      <Button
+        secondary
+        @click="isOpen = false"
+      >
         {{ t('components.library.Podcasts.button.cancel') }}
       </Button>
       <Button
+        primary
         form="remote-search"
         type="submit"
       >
         <i class="bookmark icon" />
         {{ t('components.library.Podcasts.button.subscribe') }}
       </Button>
-    </div>
+    </template>
   </Modal>
 
   </Layout>
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index 762a40a0b..b1d08025f 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -67,7 +67,7 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
           :class="[$style.button]"
           ghost
           @click="store.commit('ui/toggleModal', 'upload')"
-          :aria-pressed="store.state.ui.modalsOpen.has('languages') || undefined"
+          :aria-pressed="store.state.ui.modalsOpen.has('upload') || undefined"
         >
           <Transition>
             <div