enh: improve compact ui

src/App.vue

@@ -131,10 +131,13 @@ onBeforeMount(() => {
   if (store.theme)
     document.body.setAttribute('data-theme', useAutoTheme(store.theme));
 
-  if (store.compact == 'true') document.body.setAttribute('data-compact', '');
+  if (store.compact == 'true') document.body.classList.add('compact');
 
   /* Prefers Reduced Motion */
-  if (store.prm == 'true' || matchMedia('(prefers-reduced-motion)').matches)
+  if (
+    store.prm !== 'false' &&
+    (store.prm === 'true' || matchMedia('(prefers-reduced-motion)').matches)
+  )
     document.body.classList.add('prm');
 
   /* Set the default locale if set */

src/assets/base.css

@@ -385,7 +385,7 @@ img {
   display: grid;
 }
 @media (max-width: 530px) {
-  [data-compact] .grid-3 {
+  body.compact .grid-3 {
     --col: 2;
   }
 }
@@ -393,7 +393,7 @@ img {
   .grid-3 {
     --col: 2;
   }
-  [data-compact] .grid-3 {
+  body.compact .grid-3 {
     --col: 3;
   }
 }
@@ -405,7 +405,7 @@ img {
   .grid-3 {
     --col: 3;
   }
-  [data-compact] .grid-3 {
+  body.compact .grid-3 {
     --col: 4;
   }
 }
@@ -416,7 +416,7 @@ img {
   .grid-3 {
     --col: 4;
   }
-  [data-compact] .grid-3 {
+  body.compact .grid-3 {
     --col: 5;
   }
 }

src/components/AlbumItem.vue

@@ -50,15 +50,15 @@ defineEmits(['open-album']);
   cursor: default;
 }
 
-[data-compact] .card {
+body.compact .card {
   min-height: 12rem;
   width: 10rem;
 }
-[data-compact] .card-bg {
+body.compact .card-bg {
   width: 7rem;
   height: 7rem;
 }
-[data-compact] .card-text {
+body.compact .card-text {
   margin-top: 0.25rem;
 }
 </style>

src/components/Artist.vue

@@ -83,6 +83,7 @@ p {
   --line: 3;
   display: -webkit-box;
   -webkit-line-clamp: var(--line);
+  line-clamp: var(--line);
   -webkit-box-orient: vertical;
   hyphens: auto;
   margin: 1rem;

src/components/Prefs.vue

@@ -78,10 +78,9 @@ function setCodec(codec) {
     window.audioPlayer.configure('preferredAudioCodecs', codec.split(':'));
 }
 
-function setPRM(prm) {
-  setStore('prm', prm);
-  if (prm) document.body.classList.add('prm');
-  else document.body.classList.remove('prm');
+function setStoreAndClass(key, val) {
+  setStore(key, val);
+  document.body.classList[val ? 'add' : 'remove'](key);
 }
 
 function setPitch(pitch) {
@@ -119,7 +118,7 @@ async function setAuth(e) {
 }
 
 function setStreamApi(e) {
-  if (e.target.value) store.setItem('streamapi', e.target.value)
+  if (e.target.value) store.setItem('streamapi', e.target.value);
   else store.removeItem('streamapi');
 }
 
@@ -144,7 +143,7 @@ onMounted(() => {
   getStoreBool('next', next, true);
   getStoreBool('hls', hls, false);
   getStoreBool('compact', compact, false);
-  getStoreBool('prm', prm, false);
+  getStoreBool('prm', prm, matchMedia('(prefers-reduced-motion)').matches);
   getStoreBool('cc', cc, false);
 });
 </script>
@@ -175,7 +174,7 @@ onMounted(() => {
       name="pref-chk-compact"
       id="pref-chk-compact"
       class="input"
-      @change="setStore('compact', $event.target.checked)"
+      @change="setStoreAndClass('compact', $event.target.checked)"
       v-model="compact" />
     <label for="pref-chk-compact">{{ t('pref.compact') }}</label>
   </div>
@@ -186,7 +185,7 @@ onMounted(() => {
       name="pref-chk-prm"
       id="pref-chk-prm"
       class="input"
-      @change="setPRM($event.target.checked)"
+      @change="setStoreAndClass('prm', $event.target.checked)"
       v-model="prm" />
     <label for="pref-chk-prm">{{ t('pref.prm') }}</label>
   </div>
@@ -418,8 +417,7 @@ onMounted(() => {
     type="text"
     @change="setStreamApi"
     :value="getStore('streamapi') || ''"
-    placeholder="Default (Piped API)"
-  />
+    placeholder="Default (Piped API)" />
 
   <div class="table-wrap">
     <table>

src/components/SongItem.vue

@@ -186,7 +186,7 @@ span.content {
   padding: 1rem;
   flex-direction: column;
   align-items: flex-start;
-  flex-basis: calc(calc(100% - 120px) - 4rem);
+  flex-grow: 1;
 }
 span.bi-three-dots-vertical {
   margin: 2rem;
@@ -214,15 +214,24 @@ button.bi-three-dots-vertical {
   color: indianred;
 }
 
-[data-compact] .card {
+body.compact .card {
   margin: 0;
+  padding: 0 0.5rem;
 }
-[data-compact] .song-bg {
+body.compact .song-bg {
   width: 70px;
   height: 70px;
 }
+body.compact .content :is(h4, a) {
+  overflow: hidden;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+  hyphens: auto;
+  -webkit-box-orient: vertical;
+}
 
-.prm .card {
+body.prm .card {
   margin: 0;
   padding: 0.5rem;
 }

src/stores/misc.js

@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 
 import en from '@/locales/en.json';
 
-export const SUPPORTED_LOCALES = [
+export const SUPPORTED_LOCALES = Object.freeze([
   {
     code: 'ar',
     name: 'عربي',
@@ -147,7 +147,7 @@ export const SUPPORTED_LOCALES = [
     code: 'zh_Hant',
     name: '中文（繁體)',
   },
-];
+]);
 
 export const useNav = defineStore('nav', () => {
   const state = reactive({
@@ -176,21 +176,26 @@ export const useI18n = defineStore('i18n', () => {
   }
 
   function setupLocale(code) {
+    if (code === 'en') return setLocale('en');
     if (SUPPORTED_LOCALES.some(i => i.code == code))
       import(`@/locales/${code}.json`)
         .then(mod => mod.default)
         .then(mod => {
           map.value[code] = mod;
-          locale.value = code;
-          localStorage.locale ??= code;
-          if (localStorage.to_cc == 'true') {
-            const cc = SUPPORTED_LOCALES.find(i => i.code == code).cc;
-            if (cc) localStorage.cc = cc;
-            else localStorage.cc = '';
-          } else localStorage.cc = '';
+          setLocale(code);
         });
   }
 
+  function setLocale(code) {
+    locale.value = code;
+    localStorage.locale ??= code;
+    if (localStorage.to_cc == 'true') {
+      const cc = SUPPORTED_LOCALES.find(i => i.code == code).cc;
+      if (cc) localStorage.cc = cc;
+      else localStorage.cc = '';
+    } else localStorage.cc = '';
+  }
+
   return { locale, map, t, setupLocale };
 });