From 78079291b96f99b5c182193a227e4817b101d9f5 Mon Sep 17 00:00:00 2001
From: Flupsi <upsiflu@gmail.com>
Date: Sun, 10 Aug 2025 00:02:26 +0200
Subject: [PATCH] fix(front): minor fixes

---
 front/src/components/album/Widget.vue       |  1 +
 front/src/components/library/ArtistBase.vue |  2 ++
 front/src/components/library/Home.vue       |  3 +--
 front/src/components/playlists/Card.vue     |  2 +-
 front/src/components/ui/Card.vue            | 10 ++++++++--
 front/src/components/ui/Modal.vue           |  4 ++--
 front/src/composables/onKeyboardShortcut.ts |  3 +++
 front/src/style/colors.scss                 |  4 ++--
 front/src/ui/modals/Upload.vue              |  2 +-
 9 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/front/src/components/album/Widget.vue b/front/src/components/album/Widget.vue
index f8868e326..0ae05811b 100644
--- a/front/src/components/album/Widget.vue
+++ b/front/src/components/album/Widget.vue
@@ -11,6 +11,7 @@ import useErrorHandler from '~/composables/useErrorHandler'
 import AlbumCard from '~/components/album/Card.vue'
 import Section from '~/components/ui/Section.vue'
 import Loader from '~/components/ui/Loader.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 import Pagination from '~/components/ui/Pagination.vue'
 
 interface Props {
diff --git a/front/src/components/library/ArtistBase.vue b/front/src/components/library/ArtistBase.vue
index 5d41822ec..a2f05b852 100644
--- a/front/src/components/library/ArtistBase.vue
+++ b/front/src/components/library/ArtistBase.vue
@@ -355,6 +355,8 @@ const isOpen = useModal('artist-description').isOpen
 </template>
 
 <style scoped lang="scss">
+@import '~/style/funkwhale.scss';
+
   .channel-image {
     border-radius: 50%;
   }
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index 26a337aee..11f3995f6 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -89,9 +89,8 @@ fetchData()
     <Spacer />
     <playlist-widget
       :url="'playlists/'"
-      :filters="{scope: scope, playable: true, ordering: '-modification_date'}"
+      :filters="{scope: scope, playable: true, ordering: '-modification_date', limit: 4}"
       :title="t('components.library.Home.header.playlists')"
-      :limit="4"
     />
     <Spacer />
     <track-widget
diff --git a/front/src/components/playlists/Card.vue b/front/src/components/playlists/Card.vue
index 8e220dfa3..dca92daa5 100644
--- a/front/src/components/playlists/Card.vue
+++ b/front/src/components/playlists/Card.vue
@@ -59,7 +59,7 @@ const randomizedColors = computed(() => shuffleArray(bgcolors.value))
 
 const updatedTitle = computed(() => {
   const date = momentFormat(new Date(props.playlist.modification_date ?? '1970-01-01'))
-  return t('components.playlists.Card.title', { date })
+  return t('views.playlists.Card.title', { date })
 })
 const updatedAgo = computed(() => moment(props.playlist.modification_date).fromNow())
 
diff --git a/front/src/components/ui/Card.vue b/front/src/components/ui/Card.vue
index cf95c76b5..b83fc9b58 100644
--- a/front/src/components/ui/Card.vue
+++ b/front/src/components/ui/Card.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, getCurrentInstance } from 'vue'
 
 import { type RouterLinkProps, RouterLink } from 'vue-router'
 import { type ColorProps, type DefaultProps, type PastelProps, type RaisedProps, type VariantProps, color } from '~/composables/color'
@@ -37,8 +37,12 @@ const isExternalLink = computed(() => {
   return typeof props.to === 'string' && props.to.startsWith('http')
 })
 
+const hasClickEventListener = computed(
+  () => !!getCurrentInstance()?.vnode.props?.onClick
+);
+
 const attributes = computed(() =>
-  color(props, props.to ? ['interactive', 'solid'] : [])(
+  color(props, (props.to || hasClickEventListener.value) ? ['interactive', 'solid'] : [])(
     width(props, ['medium'])()
   ))
 </script>
@@ -178,6 +182,8 @@ const attributes = computed(() =>
 
   position: relative;
 
+  cursor: v-bind("hasClickEventListener ? 'pointer' : 'default'");
+
   color: var(--fw-text-color);
   background-color: var(--fw-bg-color);
   box-shadow: 0px 2px 8px 0px var(--shadow-color);
diff --git a/front/src/components/ui/Modal.vue b/front/src/components/ui/Modal.vue
index d60e29775..fb1b87f6e 100644
--- a/front/src/components/ui/Modal.vue
+++ b/front/src/components/ui/Modal.vue
@@ -61,7 +61,7 @@ onKeyboardShortcut('escape', () => { isOpen.value = false })
               'over-popover': overPopover,
             }
           ]"
-          v-bind="{ ...$attrs, ...color(props) }"
+          v-bind="{ ...$attrs, ...color(props, ['default'])() }"
           @click.stop
         >
           <Layout
@@ -156,7 +156,7 @@ onKeyboardShortcut('escape', () => { isOpen.value = false })
 .funkwhale.modal {
   background: var(--background-color);
 
-  box-shadow: 0 2px 4px 2px rgba(#000, 0.2);
+  box-shadow: 0 2px 12px 2px var(--shadow-color);
   border-radius: 1rem;
   max-width: min(90vw, 55rem);
   width: 100%;
diff --git a/front/src/composables/onKeyboardShortcut.ts b/front/src/composables/onKeyboardShortcut.ts
index 7b56c9159..e56c492ae 100644
--- a/front/src/composables/onKeyboardShortcut.ts
+++ b/front/src/composables/onKeyboardShortcut.ts
@@ -56,6 +56,9 @@ export default (key: KeyFilter, handler: () => unknown, prevent = false) => {
 
     // NOTE: Inform about possible combination collision
     for (const [keys, { __location }] of combinations.entries()) {
+      // Allow multiple events on 'escape'
+      if (keys.join('') === 'escape') return;
+
       const collisions = []
       if (isMatch(keys, combination) || isMatch(combination, keys)) {
         collisions.push(`${__location}: ${keys.join(' + ')}`)
diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index 906c29c96..c87857b9b 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -88,7 +88,7 @@
 :is(body.theme-light, html:not(.dark) > body:not(.theme-dark)),
 .force-light-theme.force-light-theme.force-light-theme {
   --focus-ring-color: var(--fw-primary);
-  --shadow-color: rgba(0, 0, 0, 0.2);
+  --shadow-color: rgba(0, 0, 0, 0.3);
 
   .default,
   .VPDoc {
@@ -331,7 +331,7 @@
 :is(body.theme-dark, html.dark > body:not(.theme-light)),
 .force-dark-theme.force-dark-theme.force-dark-theme {
   --focus-ring-color: var(--fw-gray-600);
-  --shadow-color: rgba(0, 0, 0, 0.4);
+  --shadow-color: rgba(0, 0, 0, 0.8);
 
   .default,
   .funkwhale.default,
diff --git a/front/src/ui/modals/Upload.vue b/front/src/ui/modals/Upload.vue
index f46a62115..6137e6457 100644
--- a/front/src/ui/modals/Upload.vue
+++ b/front/src/ui/modals/Upload.vue
@@ -107,8 +107,8 @@ const channelUpload = ref()
       </Card>
       <Card
         small
-        title="Music"
         solid
+        title="Music"
         icon="bi-upload primary solid"
         @click="destinationSelected({ type: 'channel', filter: 'music' })"
       >