feat(front): [WIP] search modal layout

front/src/ui/modals/Search.vue

@@ -32,6 +32,13 @@ const isLoading = ref(false)
 const results = ref<null | components['schemas']['SearchResult']>(null)
 
 const search = async () => {
+
+  // If query has the shape of a federated object, search the federation
+
+
+  // Else, use the user database endpoint to search
+
+
   if (queryDebounced.value.length < 1) {
     isOpen.value = false
     return
@@ -169,33 +176,39 @@ const toggle = (id: QueryType): void => {
         autofocus
         icon="bi-search"
       />
-    </template>
-    <Layout flex>
-      <Spacer grow />
-      <Button @click="startRadio()">
+      <Button
+        v-bind="{[results? 'primary' : 'disabled']: true}"
+        min-width
+        @click="startRadio"
+      >
         {{ t('components.audio.podcast.Modal.button.startRadio') }}
       </Button>
-    </Layout>
-    <Section
+    </template>
+    <Spacer />
+    <template
       v-for="type in types"
       :key="type.id"
-      :action="{ text: type.label, onClick: () => { toggle(type.id) } }"
-      tiny-items
-      align-left
     >
-      <template
-        v-for="(result, index) in (results && type.id !== 'playlists' && type.id !== 'radios' && type.id !== 'podcasts' && type.id !== 'series' ? results[type.id] : [])"
-        :key="type.id+index"
+      <Section
+        :action="{ text: type.label, onClick: () => { toggle(type.id) } }"
+        tiny-items
+        align-left
       >
-        {{ result }}
+        <template
+          v-for="(result, index) in (results && type.id !== 'playlists' && type.id !== 'radios' && type.id !== 'podcasts' && type.id !== 'series' ? results[type.id] : [])"
+          :key="type.id+index"
+        >
+          {{ result }}
 
-        <ArtistCard
-          v-if="type.id === 'artists'"
-          :artist="result"
-        />
+          <ArtistCard
+            v-if="type.id === 'artists'"
+            :artist="result"
+          />
 
-        <!-- TODO: Implement all the other cards here -->
-      </template>
-    </Section>
+          <!-- TODO: Implement all the other cards here -->
+        </template>
+      </Section>
+      <Spacer />
+    </template>
   </Modal>
 </template>