display user list insteal of user libraries

front/src/components/federation/LibraryWidget.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import type { Library } from '~/types'
 
-import { ref, reactive, onMounted, watch } from 'vue'
-import { useStore } from '~/store'
+import { ref, reactive, onMounted, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import axios from 'axios'
 
-import LibraryCard from '~/views/content/remote/Card.vue'
 import Button from '~/components/ui/Button.vue'
 import Section from '~/components/ui/Section.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Spacer from '~/components/ui/Spacer.vue'
+import ActorLink from '~/components/common/ActorLink.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
+import Layout from '../ui/Layout.vue'
 
 interface Events {
   (e: 'loaded', libraries: Library[]): void
@@ -26,7 +26,6 @@ interface Props {
 }
 
 const { t } = useI18n()
-const store = useStore()
 
 const emit = defineEmits<Events>()
 const props = defineProps<Props>()
@@ -67,7 +66,6 @@ watch(() => props.url, () => {
   <Section
     align-left
     :h2="title"
-    :columns-per-item="3"
   >
     <Loader
       v-if="isLoading"
@@ -80,14 +78,21 @@ watch(() => props.url, () => {
     >
       {{ t('components.federation.LibraryWidget.empty.noMatch') }}
     </Alert>
-    <library-card
+    <Layout
+      v-if="!isLoading && libraries.length > 0"
+      flex
+    >
+      {{ t('components.federation.LibraryWidget.main') }}
+      <template
         v-for="library in libraries"
         :key="library.uuid"
-      :display-scan="false"
-      :display-follow="store.state.auth.authenticated && library.actor.full_username != store.state.auth.fullUsername"
-      :initial-library="library"
-      :display-copy-fid="true"
+      >
+        <ActorLink
+          :actor="library.actor"
+          discrete
         />
+      </template>
+    </Layout>
     <template v-if="nextPage">
       <Spacer />
       <Button

front/src/locales/en_US.json

@@ -1414,7 +1414,8 @@
         },
         "empty": {
           "noMatch": "No matching library."
-        }
+        },
+        "main": "This audio object is present in the audio collection of"
       }
     },
     "forms": {

front/src/views/auth/ProfileOverview.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Actor } from '~/types'
 
-import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import ChannelForm from '~/components/audio/ChannelForm.vue'
 import { ref } from 'vue'
@@ -59,14 +58,6 @@ const createForm = ref()
         </div>
       </h2>
       <channels-widget :filters="{scope: `actor:${object?.full_username}`}" />
-      <h2 class="ui with-actions header">
-        {{ t('views.auth.ProfileOverview.header.libraries') }}
-      </h2>
-      <library-widget :url="`federation/actors/${object?.full_username}/libraries/`">
-        <template #title>
-          {{ t('views.auth.ProfileOverview.header.sharedLibraries') }}
-        </template>
-      </library-widget>
     </div>
 
     <Modal