From 024db0b988766b35bdd7a3c8388bf5c46873c996 Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Fri, 12 Jan 2024 00:29:00 +0100
Subject: [PATCH] feat(plus): suggests to show public songs if song list is
 empty

---
 .../js/components/screens/AllSongsScreen.vue  | 13 ++++++++++++
 .../assets/js/components/ui/CheckBox.vue      | 20 ++++++++-----------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/resources/assets/js/components/screens/AllSongsScreen.vue b/resources/assets/js/components/screens/AllSongsScreen.vue
index cb65c1a7..e1b7025a 100644
--- a/resources/assets/js/components/screens/AllSongsScreen.vue
+++ b/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
 
diff --git a/resources/assets/js/components/ui/CheckBox.vue b/resources/assets/js/components/ui/CheckBox.vue
index 5330943c..53d155bb 100644
--- a/resources/assets/js/components/ui/CheckBox.vue
+++ b/resources/assets/js/components/ui/CheckBox.vue
@@ -1,24 +1,20 @@
 <template>
-  <span :class="checked && 'checked'">
-    <input :checked="checked" type="checkbox" v-bind="$attrs" @input="onInput">
+  <span :class="value && 'checked'">
+    <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 }>(), {
-  modelValue: false
-})
-
-const checked = ref(props.modelValue)
+const props = withDefaults(defineProps<{ modelValue?: any }>(), { modelValue: false })
 
 const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
 
-const onInput = (event: Event) => {
-  checked.value = (event.target as HTMLInputElement).checked
-  emit('update:modelValue', checked.value)
-}
+const value = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value)
+})
 </script>
 
 <style lang="scss" scoped>