From 3044a88dbcfc21bf170fc68f1a6f618ce10d338b Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sat, 22 Mar 2025 15:16:15 +0100
Subject: [PATCH] fix(ui): use `start` and `end` for text alignments to respect
 writing direction

https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/
---
 front/src/components/album/Card.vue |  2 +-
 front/src/components/ui/Section.vue |  4 ++--
 front/src/ui/components/Sidebar.vue | 16 ++++++++--------
 front/ui-docs/components/ui/card.md |  8 ++++----
 front/ui-docs/using-alignment.md    |  8 ++++----
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/front/src/components/album/Card.vue b/front/src/components/album/Card.vue
index 425ebd16e..66ea2ab47 100644
--- a/front/src/components/album/Card.vue
+++ b/front/src/components/album/Card.vue
@@ -56,7 +56,7 @@ const imageUrl = computed(() => props.album.cover?.urls.original
       :key="ac.artist.id"
     >
       <Link
-        align-text="left"
+        align-text="start"
         :to="{ name: 'library.artists.detail', params: { id: ac.artist.id }}"
       >
         {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
diff --git a/front/src/components/ui/Section.vue b/front/src/components/ui/Section.vue
index ecbef260c..d20ffa253 100644
--- a/front/src/components/ui/Section.vue
+++ b/front/src/components/ui/Section.vue
@@ -63,7 +63,7 @@ const headerGrid
         <template v-if="expand || collapse">
           <Button
             full
-            align-text="left"
+            align-text="start"
             align-self="end"
             :class="$style.summary"
             :aria-pressed="!!collapse"
@@ -111,7 +111,7 @@ const headerGrid
           ghost
           thin-font
           align-self="baseline"
-          :align-text="expand || collapse ? 'left' : undefined"
+          :align-text="expand || collapse ? 'start' : undefined"
           :aria-pressed="collapse"
           :class="{
             [$style.action]: true,
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index b1321b433..6a21e78e3 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -251,7 +251,7 @@ const moderationNotifications = computed(() =>
           to="/library"
           ghost
           full
-          align-text="left"
+          align-text="start"
           icon="bi-compass"
           thick-when-active
         >
@@ -262,7 +262,7 @@ const moderationNotifications = computed(() =>
           to="/library/artists"
           ghost
           full
-          align-text="left"
+          align-text="start"
           thin-font
           icon="bi-person-circle"
           thick-when-active
@@ -274,7 +274,7 @@ const moderationNotifications = computed(() =>
           to="/channels"
           ghost
           full
-          align-text="left"
+          align-text="start"
           thin-font
           icon="bi-person-square"
           thick-when-active
@@ -286,7 +286,7 @@ const moderationNotifications = computed(() =>
           to="/library/albums"
           ghost
           full
-          align-text="left"
+          align-text="start"
           thin-font
           icon="bi-disc"
           thick-when-active
@@ -298,7 +298,7 @@ const moderationNotifications = computed(() =>
           to="/library/playlists"
           ghost
           full
-          align-text="left"
+          align-text="start"
           thin-font
           icon="bi-music-note-list"
           thick-when-active
@@ -309,7 +309,7 @@ const moderationNotifications = computed(() =>
           to="/library/radios"
           ghost
           full
-          align-text="left"
+          align-text="start"
           thin-font
           icon="bi-boombox-fill"
           thick-when-active
@@ -320,7 +320,7 @@ const moderationNotifications = computed(() =>
           to="/library/podcasts"
           ghost
           full
-          align-text="left"
+          align-text="start"
           thin-font
           icon="bi-mic"
           thick-when-active
@@ -331,7 +331,7 @@ const moderationNotifications = computed(() =>
           to="/favorites"
           ghost
           full
-          align-text="left"
+          align-text="start"
           thin-font
           icon="bi-heart"
           thick-when-active
diff --git a/front/ui-docs/components/ui/card.md b/front/ui-docs/components/ui/card.md
index 5515650dc..971d53310 100644
--- a/front/ui-docs/components/ui/card.md
+++ b/front/ui-docs/components/ui/card.md
@@ -352,7 +352,7 @@ Avoid adding buttons and links on top of a [linked card](#card-as-a-link). This
   icon="bi-exclamation large"
 >
   <Button primary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
-  <Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
+  <Link secondary to="./card.md" align-text="end">Open this file in a new window</Link>
 </Card>
 ```
 
@@ -364,7 +364,7 @@ Avoid adding buttons and links on top of a [linked card](#card-as-a-link). This
   icon="bi-exclamation large"
 >
   <Button primary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
-  <Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
+  <Link secondary to="./card.md" align-text="end">Open this file in a new window</Link>
 </Card>
 
 <!-- prettier-ignore-end -->
@@ -377,7 +377,7 @@ Instead, use the [action area](#add-an-action) to offer the primary link:
   icon="bi-check-lg large"
 >
   <Button secondary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
-  <Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
+  <Link secondary to="./card.md" align-text="end">Open this file in a new window</Link>
   <template #action>
     <Link solid full primary to="./card.md" align-text="center">Details</Link>
   </template>
@@ -391,7 +391,7 @@ Instead, use the [action area](#add-an-action) to offer the primary link:
   icon="bi-check-lg large"
 >
   <Button secondary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
-  <Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
+  <Link secondary to="./card.md" align-text="end">Open this file in a new window</Link>
   <template #action>
     <Link solid full primary to="./card.md" align-text="center">Details</Link>
   </template>
diff --git a/front/ui-docs/using-alignment.md b/front/ui-docs/using-alignment.md
index d9d5919a5..8a9a1dbd2 100644
--- a/front/ui-docs/using-alignment.md
+++ b/front/ui-docs/using-alignment.md
@@ -44,17 +44,17 @@ _
 <Layout flex class="preview">
 
 ```vue-html
-  <Button align-text="left">🐌</Button>
+  <Button align-text="start">🐌</Button>
   <Button align-text="center">🐌</Button>
-  <Button align-text="right">🐌</Button>
+  <Button align-text="end">🐌</Button>
   <Button icon="bi-star" align-text="stretch">🐌</Button>
   <Button icon="bi-star" align-text="space-out">🐌</Button>
 ```
 
   <Layout class="preview solid primary" stack no-gap>
-    <Button align-text="left">🐌</Button>
+    <Button align-text="start">🐌</Button>
     <Button align-text="center">🐌</Button>
-    <Button align-text="right">🐌</Button>
+    <Button align-text="end">🐌</Button>
     <Button icon="bi-star" align-text="stretch">🐌</Button>
     <Button icon="bi-star" align-text="space-out">🐌</Button>
   </Layout>