From b4a157ab91f17311e5aabae65865e04c4842f177 Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Mon, 11 Oct 2021 22:19:05 +0200
Subject: [PATCH] feat(smart-playlist): add empty rule by default

---
 js/components/playlist/smart-playlist/create-form.vue |  2 +-
 js/components/playlist/smart-playlist/form-base.vue   |  5 +++--
 js/components/playlist/smart-playlist/rule-group.vue  |  2 +-
 js/stores/playlist.ts                                 | 10 ++++++----
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/js/components/playlist/smart-playlist/create-form.vue b/js/components/playlist/smart-playlist/create-form.vue
index 0ec46011..b406ca5d 100644
--- a/js/components/playlist/smart-playlist/create-form.vue
+++ b/js/components/playlist/smart-playlist/create-form.vue
@@ -54,7 +54,7 @@ export default Vue.extend({
 
   data: () => ({
     name: '',
-    ruleGroups: [] as SmartPlaylistRuleGroup[],
+    ruleGroups: [playlistStore.createEmptySmartPlaylistRuleGroup()] as SmartPlaylistRuleGroup[],
     meta: {
       loading: false
     }
diff --git a/js/components/playlist/smart-playlist/form-base.vue b/js/components/playlist/smart-playlist/form-base.vue
index 1f8706d8..8b78e412 100644
--- a/js/components/playlist/smart-playlist/form-base.vue
+++ b/js/components/playlist/smart-playlist/form-base.vue
@@ -17,8 +17,9 @@ form {
 
 .rules {
   background: rgba(0, 0, 0, .1);
-  padding: 12px;
-  border-radius: 5px;
+  border: 1px solid rgba(255, 255, 255, .1);
+  padding: .75rem;
+  border-radius: .3rem;
 
   input[type=text], input[type=number], input[type=datetime] {
     display: inline-block;
diff --git a/js/components/playlist/smart-playlist/rule-group.vue b/js/components/playlist/smart-playlist/rule-group.vue
index c5b9203e..40089e77 100644
--- a/js/components/playlist/smart-playlist/rule-group.vue
+++ b/js/components/playlist/smart-playlist/rule-group.vue
@@ -76,7 +76,7 @@ export default Vue.extend({
 .rule-group {
   margin-bottom: 1rem;
   padding-bottom: .5rem;
-  border-bottom: 1px solid rgba(0, 0, 0, .15);
+  border-bottom: 1px solid rgba(255, 255, 255, .1);
 
   > * + * {
     margin-bottom: .5rem;
diff --git a/js/stores/playlist.ts b/js/stores/playlist.ts
index a4111f2e..195d85cc 100644
--- a/js/stores/playlist.ts
+++ b/js/stores/playlist.ts
@@ -160,10 +160,12 @@ export const playlistStore = {
     value: ['']
   }),
 
-  createEmptySmartPlaylistRuleGroup: (): SmartPlaylistRuleGroup => ({
-    id: (new Date()).getTime(),
-    rules: []
-  }),
+  createEmptySmartPlaylistRuleGroup (): SmartPlaylistRuleGroup {
+    return {
+      id: (new Date()).getTime(),
+      rules: [this.createEmptySmartPlaylistRule()]
+    }
+  },
 
   /**
    * Serialize the rule (groups) to be ready for database.