fix(front): minor fixes

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 {

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%;
   }

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

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())
 

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);

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%;

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(' + ')}`)

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,

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' })"
       >