[WIP] refactor(front): Channels page

front/src/components/common/InlineSearchBar.vue

@@ -3,6 +3,9 @@ import { useVModel } from '@vueuse/core'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Input from '~/components/ui/Input.vue'
+import Layout from '~/components/ui/Layout.vue'
+
 interface Events {
   (e: 'update:modelValue', value: string): void
   (e: 'search', query: string): void
@@ -33,8 +36,7 @@ const search = () => {
 </script>
 
 <template>
-  <form
+  <Layout form
-    class="ui inline form"
     @submit.stop.prevent="emit('search', value)"
   >
     <div :class="['ui', 'action', {icon: value}, 'input']">
@@ -44,25 +46,14 @@ const search = () => {
       >
         {{ t('components.common.InlineSearchBar.label.search') }}
       </label>
-      <input
+      <Input
         id="search-query"
         v-model="value"
+        search
         name="search-query"
         type="text"
         :placeholder="placeholder || labels.searchPlaceholder"
-      >
-      <i
-        v-if="value"
-        class="x link icon"
-        :title="labels.clear"
-        @click.stop.prevent="search"
       />
-      <button
-        type="submit"
-        class="ui icon basic button"
-      >
-        <i class="search icon" />
-      </button>
     </div>
-  </form>
+  </Layout>
 </template>

front/src/ui/components/Sidebar.vue

@@ -138,12 +138,20 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
 
       <Link to="/library/artists"
           ghost
-          icon="bi-person"
+          icon="bi-person-circle"
           thickWhenActive
         >
           {{ t('components.Sidebar.link.artists') }}
       </Link>
 
+      <Link to="/subscriptions"
+          ghost
+          icon="bi-person-square"
+          thickWhenActive
+        >
+          {{ t('components.Sidebar.link.channels') }}
+      </Link>
+
       <Link to="/library/albums"
           ghost
           icon="bi-disc"
@@ -181,8 +189,6 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
           {{ t('components.Sidebar.link.favorites') }}
       </Link>
     </nav>
-    <Spacer />
-    <h3>{{ t('components.Sidebar.link.channels') }}</h3>
     <Spacer grow />
     <Layout nav flex no-gap style="justify-content: center">
       <Link thinFont to="/about">

front/src/views/channels/SubscriptionsList.vue

@@ -8,8 +8,9 @@ import axios from 'axios'
 
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
-import SemanticModal from '~/components/semantic/Modal.vue'
+import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
+import Layout from '~/components/ui/Layout.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -57,65 +58,63 @@ const showSubscribeModal = ref(false)
 </script>
 
 <template>
-  <main
+  <Layout stack main
     v-title="labels.title"
-    class="main"
   >
-    <section class="ui head vertical stripe segment container">
+    <h1 class="ui with-actions header">
-      <h1 class="ui with-actions header">
+      {{ labels.title }}
-        {{ labels.title }}
+      <div class="actions">
-        <div class="actions">
+        <a @click.stop.prevent="showSubscribeModal = true">
-          <a @click.stop.prevent="showSubscribeModal = true">
+          <i class="bi bi-plus" />
-            <i class="plus icon" />
+          {{ t('views.channels.SubscriptionsList.link.addNew') }}
-            {{ t('views.channels.SubscriptionsList.link.addNew') }}
+        </a>
-          </a>
+      </div>
-        </div>
+    </h1>
-      </h1>
+    <Modal
-      <semantic-modal
+      v-model="showSubscribeModal"
-        v-model:show="showSubscribeModal"
+      :title="t('views.channels.SubscriptionsList.modal.subscription.header')"
-        class="tiny"
+      class="tiny"
-        :fullscreen="false"
+    >
+      <div
+        ref="modalContent"
+        class="scrolling content"
       >
-        <h2 class="header">
+        <remote-search-form
-          {{ t('views.channels.SubscriptionsList.modal.subscription.header') }}
+          initial-type="both"
-        </h2>
+          :show-submit="false"
-        <div
+          :standalone="false"
-          ref="modalContent"
+          :redirect="true"
-          class="scrolling content"
+          @subscribed="showSubscribeModal = false; reloadWidget()"
+        />
+      </div>
+      <template #actions>
+        <Button
+          secondary
+          @click="showSubscribeModal = false"
         >
-          <remote-search-form
+          {{ t('views.channels.SubscriptionsList.button.cancel') }}
-            initial-type="both"
+        </Button>
-            :show-submit="false"
+        <Button
-            :standalone="false"
+          form="remote-search"
-            :redirect="true"
+          type="submit"
-            @subscribed="showSubscribeModal = false; reloadWidget()"
+          icon="bi-bookmark-check-fill"
-          />
+          primary
-        </div>
+        >
-        <div class="actions">
+          {{ t('views.channels.SubscriptionsList.button.subscribe') }}
-          <Button color="secondary">
+        </Button>
-            {{ t('views.channels.SubscriptionsList.button.cancel') }}
+      </template>
-          </Button>
+    </Modal>
-          <Button
-            form="remote-search"
-            type="submit"
-            icon="bi-bookmark-check-fill"
-          >
-            {{ t('views.channels.SubscriptionsList.button.subscribe') }}
-          </Button>
-        </div>
-      </semantic-modal>
 
-      <inline-search-bar
+    <inline-search-bar
-        v-model="query"
+      v-model="query"
-        :placeholder="labels.searchPlaceholder"
+      :placeholder="labels.searchPlaceholder"
-        @search="reloadWidget"
+      @search="reloadWidget"
-      />
+    />
-      <channels-widget
+    <channels-widget
-        :key="widgetKey"
+      :key="widgetKey"
-        :limit="50"
+      :limit="50"
-        :show-modification-date="true"
+      :show-modification-date="true"
-        :filters="{q: query, subscribed: 'true', ordering: '-modification_date'}"
+      :filters="{q: query, subscribed: 'true', ordering: '-modification_date'}"
-      />
+    />
-    </section>
+  </Layout>
-  </main>
 </template>