From 6a75aef93f03700345d7e0d0cd53b0584e73e092 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Wed, 12 Feb 2025 10:49:04 +0100
Subject: [PATCH] refactor(ui): alignment props for alerts and buttons

---
 front/src/components/common/EmptyState.vue    |  2 +-
 front/src/components/favorites/List.vue       |  3 +-
 front/src/components/ui/Alert.vue             |  8 +++--
 front/src/components/ui/Button.vue            |  2 +-
 front/src/components/ui/alert.scss            | 33 -------------------
 front/src/composables/alignment.ts            | 13 ++++++--
 .../views/content/libraries/FilesTable.vue    |  6 ++--
 front/src/views/playlists/Detail.vue          | 20 +++++++----
 8 files changed, 37 insertions(+), 50 deletions(-)

diff --git a/front/src/components/common/EmptyState.vue b/front/src/components/common/EmptyState.vue
index a920b8a95..ee447fe1a 100644
--- a/front/src/components/common/EmptyState.vue
+++ b/front/src/components/common/EmptyState.vue
@@ -21,7 +21,7 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <Alert blue style="text-align: center;">
+  <Alert blue align-items="center">
     <h4 class="ui header">
       <div class="content">
         <slot name="title">
diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index a08b24725..c1f1cd34a 100644
--- a/front/src/components/favorites/List.vue
+++ b/front/src/components/favorites/List.vue
@@ -190,7 +190,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         :tracks="results"
       />
     </Layout>
-    <Alert blue style="text-align: center;"
+    <Alert blue align-items="center"
       v-else
     >
       <i class="bi bi-heartbreak-fill" style="font-size: 100px;" />
@@ -202,7 +202,6 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
         solid
         primary
         icon="bi-headphones"
-        align-self="center"
       >
         {{ t('components.favorites.List.link.library') }}
       </Link>
diff --git a/front/src/components/ui/Alert.vue b/front/src/components/ui/Alert.vue
index 23f27fcbe..60352bfb8 100644
--- a/front/src/components/ui/Alert.vue
+++ b/front/src/components/ui/Alert.vue
@@ -9,9 +9,13 @@ const props = defineProps<Props>()
 
 <template>
   <div
-    class="funkwhale is-colored solid alert"
+    class="funkwhale alert"
     role="alert"
-    v-bind="color(align(props)())"
+    v-bind="{
+      ...$attrs,
+      ...color(props, ['solid'])(
+         align(props)(
+    ))}"
   >
     <slot />
 
diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue
index c4ac73b6f..1553c8217 100644
--- a/front/src/components/ui/Button.vue
+++ b/front/src/components/ui/Button.vue
@@ -72,7 +72,7 @@ onMounted(() => {
       ...$attrs,
       ...color(props, ['interactive'])(
          width(props, isIconOnly ? ['square'] : ['normalHeight', 'buttonWidth'])(
-         align(props, { alignSelf:'start', alignText:'center' })(
+         align(props, { alignText:'center' })(
     )))}"
     class="funkwhale button split-main"
     :autofocus="autofocus || undefined"
diff --git a/front/src/components/ui/alert.scss b/front/src/components/ui/alert.scss
index 9a1893082..9e7d83b3f 100644
--- a/front/src/components/ui/alert.scss
+++ b/front/src/components/ui/alert.scss
@@ -1,37 +1,4 @@
 .funkwhale.alert {
-  // color: var(--fw-gray-900);
-
-  // @include light-theme {
-  //   background-color: var(--fw-pastel-1, var(--fw-bg-color));
-
-  //   > .actions .funkwhale.button {
-  //     --fw-bg-color: var(--fw-pastel-2);
-
-  //     &:hover, &.is-hovered {
-  //       --fw-bg-color: var(--fw-pastel-3);
-  //     }
-
-  //     &:active, &.is-active {
-  //       --fw-bg-color: var(--fw-pastel-4);
-  //     }
-  //   }
-  // }
-
-  // @include dark-theme {
-  //   background-color: var(--fw-pastel-3, var(--fw-bg-color));
-
-  //   > .actions .funkwhale.button {
-  //     --fw-bg-color: var(--fw-pastel-4);
-
-  //     &:hover, &.is-hovered {
-  //       --fw-bg-color: var(--fw-pastel-2);
-  //     }
-
-  //     &:active, &.is-active {
-  //       --fw-bg-color: var(--fw-pastel-1);
-  //     }
-  //   }
-  // }
 
   padding: 2rem 2rem;
   line-height: 1.2;
diff --git a/front/src/composables/alignment.ts b/front/src/composables/alignment.ts
index 4c215953d..38ece2c65 100644
--- a/front/src/composables/alignment.ts
+++ b/front/src/composables/alignment.ts
@@ -3,7 +3,8 @@ import type { HTMLAttributes } from "vue";
 
 export type AlignmentProps = {
   alignText?: 'left' | 'center' | 'right' | 'stretch' | 'space-out',
-  alignSelf?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch'
+  alignSelf?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch',
+  alignItems?: 'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch'
 } & {
   [T in 'center' | 'stretch']?: true
 }
@@ -14,7 +15,7 @@ const styles = {
   stretch: 'place-content: stretch stretch; place-self: stretch stretch;',
   alignText: (a:AlignmentProps['alignText'])=>({
     left: 'justify-content: flex-start;',
-    center: 'justify-content: center;',
+    center: 'place-content: center;',
     baseline: 'align-items: baseline;',
     right: 'justify-content: flex-end;',
     stretch: 'place-content: stretch;',
@@ -27,6 +28,14 @@ const styles = {
     auto: 'align-self: auto;',
     baseline: 'align-self: baseline;',
     stretch: 'align-self: stretch;'
+  }[a!]),
+  alignItems: (a:AlignmentProps['alignSelf'])=> ({
+    start: 'align-items: flex-start;',
+    center: 'align-items: center;',
+    end: 'align-items: flex-end;',
+    auto: 'align-items: auto;',
+    baseline: 'align-items: baseline;',
+    stretch: 'align-items: stretch;'
   }[a!])
 } as const;
 
diff --git a/front/src/views/content/libraries/FilesTable.vue b/front/src/views/content/libraries/FilesTable.vue
index ff561d7fa..dfff09c24 100644
--- a/front/src/views/content/libraries/FilesTable.vue
+++ b/front/src/views/content/libraries/FilesTable.vue
@@ -229,10 +229,12 @@ const getImportStatusChoice = (importStatus: ImportStatus) => {
   <Alert
     v-else-if="!result || result?.results.length === 0 && !needsRefresh"
     blue
-    align-text="center"
+    align-items="center"
   >
     <i class="bi bi-upload" />
-    {{ t('views.content.libraries.FilesTable.empty.noTracks') }}
+    <span>
+      {{ t('views.content.libraries.FilesTable.empty.noTracks') }}
+    </span>
   </Alert>
   <action-table
     v-else
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index 4984740b6..9c73436c7 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -21,6 +21,7 @@ import Spacer from '~/components/ui/Spacer.vue'
 import Loader from '~/components/ui/Loader.vue'
 import Button from '~/components/ui/Button.vue'
 import Modal from '~/components/ui/Modal.vue'
+import Alert from '~/components/ui/Alert.vue'
 
 import PlaylistDropdown from '~/components/playlists/PlaylistDropdown.vue'
 
@@ -237,15 +238,20 @@ const deletePlaylist = async () => {
       </template>
       <Alert blue
         v-else
+        align-items="center"
       >
-        <i class="bi bi-music-note-list" />
+      <Layout flex :gap="8">
+      <i class="bi bi-music-note-list" />
         {{ t('views.playlists.Detail.empty.noTracks') }}
-        <Button
-          icon="bi-pencil"
-          @click="edit = !edit"
-        >
-          {{ t('views.playlists.Detail.button.edit') }}
-        </Button>
+      </Layout>
+    <Spacer size-16 />
+    <Button
+      primary
+      icon="bi-pencil"
+      @click="edit = !edit"
+    >
+      {{ t('views.playlists.Detail.button.edit') }}
+    </Button>
       </Alert>
       <library-widget
         :url="'playlists/' + playlist?.id + '/libraries/'"