From 5e0efff73fffcc38d14e44898bb810b512a6d251 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sun, 23 Mar 2025 21:31:40 +0100
Subject: [PATCH] refactor(front): use `columns-per-item` prop for sections

---
 front/src/components/album/Widget.vue                 |  4 ++--
 front/src/components/audio/ChannelsWidget.vue         |  2 +-
 front/src/components/audio/track/Widget.vue           |  4 ++--
 front/src/components/federation/LibraryWidget.vue     |  4 ++--
 front/src/components/manage/library/EditsCardList.vue |  2 +-
 front/src/components/playlists/Widget.vue             |  2 +-
 front/src/views/auth/ProfileBase.vue                  | 11 +++++++----
 7 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/front/src/components/album/Widget.vue b/front/src/components/album/Widget.vue
index f33b1d8fb..13ef017a1 100644
--- a/front/src/components/album/Widget.vue
+++ b/front/src/components/album/Widget.vue
@@ -76,9 +76,9 @@ watch(
 
 <template>
   <Section
-    :h2="title"
     align-left
-    small-items
+    :h2="title"
+    :columns-per-item="3"
   >
     <inline-search-bar
       v-if="search"
diff --git a/front/src/components/audio/ChannelsWidget.vue b/front/src/components/audio/ChannelsWidget.vue
index 92bf83485..0803cf801 100644
--- a/front/src/components/audio/ChannelsWidget.vue
+++ b/front/src/components/audio/ChannelsWidget.vue
@@ -73,7 +73,7 @@ watch([() => props.filters, page],
 <template>
   <Section
     align-left
-    small-items
+    :columns-per-item="3"
     :h2="title || undefined"
   >
     <Loader
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index 45f6e2116..46a055b26 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -110,9 +110,9 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
 
 <template>
   <Section
-    :h2="title"
-    medium-items
     align-left
+    :h2="title"
+    :columns-per-item="4"
   >
     <Loader
       v-if="isLoading"
diff --git a/front/src/components/federation/LibraryWidget.vue b/front/src/components/federation/LibraryWidget.vue
index cc1117084..4b075e231 100644
--- a/front/src/components/federation/LibraryWidget.vue
+++ b/front/src/components/federation/LibraryWidget.vue
@@ -65,9 +65,9 @@ watch(() => props.url, () => {
 
 <template>
   <Section
-    :h2="title"
     align-left
-    small-items
+    :h2="title"
+    :columns-per-item="3"
   >
     <Loader
       v-if="isLoading"
diff --git a/front/src/components/manage/library/EditsCardList.vue b/front/src/components/manage/library/EditsCardList.vue
index 9e73be3fc..fac77118a 100644
--- a/front/src/components/manage/library/EditsCardList.vue
+++ b/front/src/components/manage/library/EditsCardList.vue
@@ -249,7 +249,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
   <Loader v-if="isLoading" />
   <Section
     v-else-if="(result?.count ?? 0) > 0"
-    small-items
+    :columns-per-item="3"
   >
     <edit-card
       v-for="obj in result?.results ?? []"
diff --git a/front/src/components/playlists/Widget.vue b/front/src/components/playlists/Widget.vue
index 63d14d359..d252a3cab 100644
--- a/front/src/components/playlists/Widget.vue
+++ b/front/src/components/playlists/Widget.vue
@@ -70,7 +70,7 @@ watch(
 <template>
   <Section
     align-left
-    small-items
+    :columns-per-item="3"
     :h2="title"
   >
     <Loader
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index 9b6e6c943..bb19d8c9b 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -105,10 +105,13 @@ const recentActivity = ref(0)
       <!-- TODO: Translate Edit Link -->
       <Section
         :h1="props.username"
-        :action="{ text:'Edit profile', to:'/settings' }"
-        solid
-        primary
-        icon="bi-pencil-fill"
+        :action="{
+          text:'Edit profile',
+          to:'/settings',
+          primary: true,
+          solid: true,
+          icon: 'bi-pencil-fill'
+        }"
         style="margin-top: 58px;"
       >
         <span style="grid-column: 1 / -1">