fix(front): working remote channel search form

front/src/components/RemoteSearchForm.vue

@@ -12,8 +12,6 @@ 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'
@@ -172,69 +170,63 @@ watch(() => props.initialId, () => {
 </script>
 
 <template>
-  <Alert red
-    v-if="!isLoading && obj?.status === 'finished' && !redirectRoute"
-  >
-    {{ t('components.RemoteSearchForm.warning.unsupported') }}
-  </Alert>
-  <Alert red
-    v-if="errors.length > 0"
-    role="alert"
-    title="t('components.RemoteSearchForm.header.fetchFailed')"
-  >
-    <ul class="list">
-      <li
-        v-for="(error, key) in errors"
-        :key="key"
-      >
-        {{ error }}
-      </li>
-    </ul>
-  </Alert>
-  <Layout form
+  <Layout stack
     v-if="type === 'both'"
-    id="remote-search"
   >
-  <Tabs
-  >
-    <Tab
-      icon="bi-feed"
-      title="t('components.RemoteSearchForm.button.rss')"
+    <Button
+      secondary
+      raised
+      split
+      round
+      icon="bi-rss-fill"
+      split-icon="bi-globe"
+      style="align-self: center;"
+      :split-title="t('components.RemoteSearchForm.button.fediverse')"
       @click.prevent="type = 'rss'"
+      @split-click.prevent="type = 'artists'"
     >
-      {{ 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'"
-    >
-      {{ t('components.RemoteSearchForm.description.fediverse') }}
-      <Input
-        id="object-id"
-        v-model="id"
-        type="text"
-        name="object-id"
-        :placeholder="labels.fieldPlaceholder"
-        required
-      />
-    </Tab>
-  </Tabs>
-</Layout>
+      {{ t('components.RemoteSearchForm.button.rss') }}
+    </Button>
+  </Layout>
   <Layout form
     v-else
     id="remote-search"
     :class="['ui', {loading: isLoading}, 'form']"
     @submit.stop.prevent="submit"
   >
+    <Alert red
+      v-if="errors.length > 0"
+      role="alert"
+      title="t('components.RemoteSearchForm.header.fetchFailed')"
+    >
+      <ul class="list" v-if="errors.length > 1">
+        <li
+          v-for="(error, key) in errors"
+          :key="key"
+        >
+          {{ error }}
+        </li>
+      </ul>
+      <p v-else>{{ errors[0] }}</p>
+    </Alert>
+    <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"
+      :label="labels.fieldLabel"
+      :placeholder="labels.fieldPlaceholder"
+      required
+    />
+
     <Button
       v-if="showSubmit"
       primary
@@ -245,4 +237,9 @@ watch(() => props.initialId, () => {
       {{ t('components.RemoteSearchForm.button.search') }}
     </Button>
   </Layout>
+  <Alert red
+    v-if="!isLoading && obj?.status === 'finished' && !redirectRoute"
+  >
+    {{ t('components.RemoteSearchForm.warning.unsupported') }}
+  </Alert>
 </template>