From e05a5b9d7a31663ef4e8c9bfdcf8ad9085496199 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Mon, 17 Mar 2025 13:30:11 +0100
Subject: [PATCH] fix(front): [WIP] in search modal, show rss result as channel
 link

---
 front/src/components/ui/Section.vue |  1 +
 front/src/locales/en_US.json        |  2 +-
 front/src/ui/modals/Search.vue      | 49 +++++++++++++++++++++++------
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/front/src/components/ui/Section.vue b/front/src/components/ui/Section.vue
index f50f6026b..8ed82680a 100644
--- a/front/src/components/ui/Section.vue
+++ b/front/src/components/ui/Section.vue
@@ -87,6 +87,7 @@ const headerGrid
 
     <Layout
       main
+      :inert="'collapsed' in props && props.collapsed"
       :style="`${
         'alignLeft' in props && props.alignLeft
           ? 'justify-content: start;'
diff --git a/front/src/locales/en_US.json b/front/src/locales/en_US.json
index b5d771d10..9470f292f 100644
--- a/front/src/locales/en_US.json
+++ b/front/src/locales/en_US.json
@@ -3332,7 +3332,7 @@
         "tags": "Tags",
         "tracks": "Tracks",
         "rss": "RSS feeds",
-        "federation": "Federation"
+        "fetches": "Federation fetches"
       }
     },
     "admin": {
diff --git a/front/src/ui/modals/Search.vue b/front/src/ui/modals/Search.vue
index f71b512b5..253caa936 100644
--- a/front/src/ui/modals/Search.vue
+++ b/front/src/ui/modals/Search.vue
@@ -21,6 +21,7 @@ import Button from '~/components/ui/Button.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Input from '~/components/ui/Input.vue'
 import Section from '~/components/ui/Section.vue'
+import Link from '~/components/ui/Link.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Alert from '~/components/ui/Alert.vue'
 import EmptyState from '~/components/common/EmptyState.vue'
@@ -46,7 +47,8 @@ const paginateBy = ref<number>(100)
 
 const queryDebounced = refDebounced(query, 500)
 const trimmedQuery = computed(() => trim(trim(queryDebounced.value), '@'))
-const isUri = computed(() => trimmedQuery.value.startsWith('http://') || trimmedQuery.value.startsWith('https://') || trimmedQuery.value.includes('@'))
+const isFetch = computed(() => ((trimmedQuery.value.startsWith('http://') || trimmedQuery.value.startsWith('https://')) || trimmedQuery.value.includes('@')) && !isRss.value)
+const isRss = computed(() => trimmedQuery.value.includes('.rss') || trimmedQuery.value.includes('.xml'))
 
 const isLoading = ref(false)
 
@@ -130,14 +132,16 @@ const categories = computed(() => [
     type: 'rss',
     label: t('views.Search.label.rss'),
     endpoint: '/channels/rss-subscribe/',
+    post: true,
     params: {
-      object: trimmedQuery.value
+      url: trimmedQuery.value
     }
   },
   {
     type: 'federation',
     label: t('views.Search.label.fetches'),
     endpoint: '/federation/fetches/',
+    post: true,
     params: {
       object: trimmedQuery.value
     }
@@ -145,6 +149,7 @@ const categories = computed(() => [
 ] as const satisfies {
   type: Category
   label: string
+  post?: true
   params?: {
     [key: string]: string
   }
@@ -152,15 +157,23 @@ const categories = computed(() => [
 }[])
 
 // Limit the available categories based on the search query
-const federatedCategories: Category[] = ['federation', 'rss']
-
+// Show fetch if the query is a URL; show RSS if the query is an email address; show all other cateories otherwise
 const availableCategories = computed(() =>
   categories.value.filter(({ type }) =>
-    isUri.value
-      ? federatedCategories.includes(type)
-      : !federatedCategories.includes(type)
+    isFetch.value
+      ? type==='federation'
+      : isRss.value
+        ? type==='rss'
+        : !['federation', 'rss'].includes(type)
 ))
 
+// If there is only one available category, open it immediately
+watch(availableCategories, () => {
+  if (availableCategories.value.length === 1 && openSectionHistory.value.at(0) !== availableCategories.value[0].type) {
+    openSectionHistory.value.unshift(availableCategories.value[0].type)
+  }
+})
+
 /**
  * Get the results for a given category
  * @param category The category to get the results for
@@ -250,9 +263,11 @@ const search = async () => {
         ...response.data
       }
     } else {
-      const response = await axios.get<Results[typeof category.type][0]>(
+      console.log("endpoint", category.endpoint)
+      console.log("params", params)
+      const response = await axios['post' in category ? 'post' : 'get']<Results[typeof category.type][0]>(
           category.endpoint,
-          { params }
+          isRss.value ? ({ url: trimmedQuery.value }) : ({ params })
       )
       results.value = {
         ...results.value,
@@ -303,6 +318,7 @@ watch(queryDebounced, search, { immediate: true })
     >
       <!-- Each section collapses if it is not current -->
       <Section
+        align-left
         :action="{
           text: `${
             !isCategoryQueried(category.type)
@@ -369,8 +385,21 @@ watch(queryDebounced, search, { immediate: true })
         </template>
 
         <!-- TODO: Implement results from non-`/v2/search` requests (federated/uri results etc.) here -->
-
         <!-- If response has "url": "webfinger://node1@node1.funkwhale.test" -> Link to go directly to the federation page -->
+
+        <span v-if="category.type === 'rss'">
+          <Alert>If the following link does not work, wait a few seconds and try again</Alert>
+          <Link
+            :to="channel.artist.fid"
+            autofocus
+          >
+            {{ channel.artist.name }}
+          </Link>
+        </span>
+
+        <span v-else-if="category.type === 'federation'">
+          {{ resultsPerCategory(category.type) }}
+        </span>
       </Section>
     </template>
   </Modal>