feat(plus): suggests to show public songs if song list is empty

resources/assets/js/components/screens/AllSongsScreen.vue

@@ -42,6 +42,14 @@
           <Icon :icon="faVolumeOff" />
         </template>
         Your library is empty.
+        <a
+          role="button"
+          class="d-block secondary"
+          v-if="isPlus && ownSongsOnly"
+          @click.prevent="showSongsFromOthers"
+        >
+          Show public songs from other users?
+        </a>
       </ScreenEmptyState>
     </template>
   </section>
@@ -112,6 +120,11 @@ const sort = async (field: SongListSortField, order: SortOrder) => {
   await fetchSongs()
 }
 
+const showSongsFromOthers = async () => {
+  ownSongsOnly.value = false
+  await fetchSongs()
+}
+
 const fetchSongs = async () => {
   if (!moreSongsAvailable.value || loading.value) return
 

resources/assets/js/components/ui/CheckBox.vue

@@ -1,24 +1,20 @@
 <template>
-  <span :class="checked && 'checked'">
+  <span :class="value && 'checked'">
-    <input :checked="checked" type="checkbox" v-bind="$attrs" @input="onInput">
+    <input :checked="value" type="checkbox" v-bind="$attrs" v-model="value">
   </span>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { computed } from 'vue'
 
-const props = withDefaults(defineProps<{ modelValue?: any }>(), {
+const props = withDefaults(defineProps<{ modelValue?: any }>(), { modelValue: false })
-  modelValue: false
-})
-
-const checked = ref(props.modelValue)
 
 const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
 
-const onInput = (event: Event) => {
+const value = computed({
-  checked.value = (event.target as HTMLInputElement).checked
+  get: () => props.modelValue,
-  emit('update:modelValue', checked.value)
+  set: value => emit('update:modelValue', value)
-}
+})
 </script>
 
 <style lang="scss" scoped>