[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,28 +58,23 @@ 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">
       {{ labels.title }}
       <div class="actions">
         <a @click.stop.prevent="showSubscribeModal = true">
-            <i class="plus icon" />
+          <i class="bi bi-plus" />
           {{ t('views.channels.SubscriptionsList.link.addNew') }}
         </a>
       </div>
     </h1>
-      <semantic-modal
+    <Modal
-        v-model:show="showSubscribeModal"
+      v-model="showSubscribeModal"
+      :title="t('views.channels.SubscriptionsList.modal.subscription.header')"
       class="tiny"
-        :fullscreen="false"
     >
-        <h2 class="header">
-          {{ t('views.channels.SubscriptionsList.modal.subscription.header') }}
-        </h2>
       <div
         ref="modalContent"
         class="scrolling content"
@@ -91,19 +87,23 @@ const showSubscribeModal = ref(false)
           @subscribed="showSubscribeModal = false; reloadWidget()"
         />
       </div>
-        <div class="actions">
+      <template #actions>
-          <Button color="secondary">
+        <Button
+          secondary
+          @click="showSubscribeModal = false"
+        >
           {{ t('views.channels.SubscriptionsList.button.cancel') }}
         </Button>
         <Button
           form="remote-search"
           type="submit"
           icon="bi-bookmark-check-fill"
+          primary
         >
           {{ t('views.channels.SubscriptionsList.button.subscribe') }}
         </Button>
-        </div>
+      </template>
-      </semantic-modal>
+    </Modal>
 
     <inline-search-bar
       v-model="query"
@@ -116,6 +116,5 @@ const showSubscribeModal = ref(false)
       :show-modification-date="true"
       :filters="{q: query, subscribed: 'true', ordering: '-modification_date'}"
     />
-    </section>
+  </Layout>
-  </main>
 </template>