From 8b4949349ea9788259f5c75dab59b4dbb9d28205 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Tue, 19 Dec 2023 16:44:16 +0100
Subject: [PATCH] feat: option to create group in add to group modal

---
 renovate.json                        | 16 +++-------
 src/components/AddToGroupModal.vue   | 46 +++++++++++++++++++++-------
 src/components/ChannelPage.vue       |  2 +-
 src/components/ChaptersBar.vue       |  6 ++--
 src/components/CollapsableText.vue   |  2 +-
 src/components/CreateGroupModal.vue  | 35 +++++++++++++++++++++
 src/components/SubscriptionsPage.vue | 28 ++++++++---------
 src/components/VideoItem.vue         |  4 +--
 8 files changed, 93 insertions(+), 46 deletions(-)
 create mode 100644 src/components/CreateGroupModal.vue

diff --git a/renovate.json b/renovate.json
index 0312e1be..8777a8ed 100644
--- a/renovate.json
+++ b/renovate.json
@@ -9,24 +9,16 @@
             "groupName": "unocss"
         },
         {
-            "matchPackagePrefixes": [
-                "linkify"
-            ],
+            "matchPackagePrefixes": ["linkify"],
             "groupName": "linkify"
         },
         {
-            "matchPackagePrefixes": [
-                "@vitejs/"
-            ],
-            "matchPackageNames": [
-                "vite"
-            ],
+            "matchPackagePrefixes": ["@vitejs/"],
+            "matchPackageNames": ["vite"],
             "groupName": "vite"
         },
         {
-            "matchPackagePrefixes": [
-                "@iconify-json/"
-            ],
+            "matchPackagePrefixes": ["@iconify-json/"],
             "groupName": "iconify",
             "automerge": true
         }
diff --git a/src/components/AddToGroupModal.vue b/src/components/AddToGroupModal.vue
index 65f08e47..0e55fcea 100644
--- a/src/components/AddToGroupModal.vue
+++ b/src/components/AddToGroupModal.vue
@@ -1,27 +1,38 @@
 <template>
     <ModalComponent @close="$emit('close')">
-        <div class="h-[80vh] overflow-y-scroll pr-4">
-            <span v-t="'actions.add_to_group'" class="mb-3 inline-block w-max text-2xl" />
-            <div v-for="(group, index) in channelGroups" :key="group.groupName" class="px-1">
-                <div class="flex items-center justify-between">
-                    <span>{{ group.groupName }}</span>
-                    <input
-                        type="checkbox"
-                        :checked="group.channels.includes(channelId)"
-                        @change="onCheckedChange(index, group)"
-                    />
+        <div class="min-w-[50vw] flex flex-col">
+            <div class="h-[70vh] overflow-y-scroll pr-4">
+                <span v-t="'actions.add_to_group'" class="mb-3 inline-block w-max text-2xl" />
+                <div v-for="(group, index) in channelGroups" :key="group.groupName" class="px-1">
+                    <div class="flex items-center justify-between">
+                        <span>{{ group.groupName }}</span>
+                        <input
+                            type="checkbox"
+                            :checked="group.channels.includes(channelId)"
+                            @change="onCheckedChange(index, group)"
+                        />
+                    </div>
+                    <hr class="h-1 w-full" />
                 </div>
-                <hr class="h-1 w-full" />
             </div>
+            <button v-t="'actions.create_group'" class="btn ml-auto w-max" @click="showCreateGroupModal = true" />
         </div>
     </ModalComponent>
+
+    <CreateGroupModal
+        v-if="showCreateGroupModal"
+        :on-create-group="onCreateGroup"
+        @close="showCreateGroupModal = false"
+    />
 </template>
 <script>
 import ModalComponent from "./ModalComponent.vue";
+import CreateGroupModal from "./CreateGroupModal.vue";
 
 export default {
     components: {
         ModalComponent,
+        CreateGroupModal,
     },
     props: {
         channelId: {
@@ -32,6 +43,7 @@ export default {
     emits: ["close"],
     data() {
         return {
+            showCreateGroupModal: false,
             channelGroups: [],
         };
     },
@@ -51,6 +63,18 @@ export default {
             }
             this.createOrUpdateChannelGroup(group);
         },
+        onCreateGroup(newGroupName) {
+            if (!newGroupName || this.channelGroups.some(group => group.groupName == newGroupName)) return;
+
+            const newGroup = {
+                groupName: newGroupName,
+                channels: [],
+            };
+            this.channelGroups.push(newGroup);
+            this.createOrUpdateChannelGroup(newGroup);
+
+            this.showCreateGroupModal = false;
+        },
     },
 };
 </script>
diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index e01e4c1b..6717c38c 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -3,8 +3,8 @@
 
     <LoadingIndicatorPage :show-content="channel != null && !channel.error">
         <img
-            loading="lazy"
             v-if="channel.bannerUrl"
+            loading="lazy"
             :src="channel.bannerUrl"
             class="h-30 w-full object-cover py-1.5 md:h-50"
         />
diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index 30850551..be470d24 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -16,7 +16,7 @@
                 <img class="shrink-0" :src="chapter.image" :alt="chapter.title" />
                 <div class="m-2 flex flex-col">
                     <span class="text-sm" :title="chapter.title" v-text="chapter.title" />
-                    <span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
+                    <span class="text-sm text-blue-500 font-bold" v-text="timeFormat(chapter.start)" />
                 </div>
             </div>
         </div>
@@ -42,7 +42,7 @@
                 <img class="shrink-0" :src="chapter.image" :alt="chapter.title" />
                 <div class="m-2 flex flex-col">
                     <span class="text-sm" :title="chapter.title" v-text="chapter.title" />
-                    <span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
+                    <span class="text-sm text-blue-500 font-bold" v-text="timeFormat(chapter.start)" />
                 </div>
             </div>
         </div>
@@ -59,7 +59,7 @@
             <img :src="chapter.image" :alt="chapter.title" />
             <div class="m-1 flex">
                 <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
-                <span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
+                <span class="px-1 text-sm text-blue-500 font-bold" v-text="timeFormat(chapter.start)" />
             </div>
         </div>
     </div>
diff --git a/src/components/CollapsableText.vue b/src/components/CollapsableText.vue
index 6c0e55c0..637e546a 100644
--- a/src/components/CollapsableText.vue
+++ b/src/components/CollapsableText.vue
@@ -7,7 +7,7 @@
         <span v-if="text.length > visibleLimit && !showFullText">...</span>
         <button
             v-if="text.length > visibleLimit"
-            class="block whitespace-normal font-semibold text-neutral-500 hover:underline"
+            class="block whitespace-normal text-neutral-500 font-semibold hover:underline"
             @click="showFullText = !showFullText"
         >
             [{{ showFullText ? $t("actions.show_less") : $t("actions.show_more") }}]
diff --git a/src/components/CreateGroupModal.vue b/src/components/CreateGroupModal.vue
new file mode 100644
index 00000000..a53a73e5
--- /dev/null
+++ b/src/components/CreateGroupModal.vue
@@ -0,0 +1,35 @@
+<template>
+    <ModalComponent @close="$emit('close')">
+        <h2 v-t="'actions.create_group'" />
+        <div class="flex flex-col">
+            <input v-model="groupName" class="input my-4" type="text" :placeholder="$t('actions.group_name')" />
+            <button v-t="'actions.create_group'" class="btn ml-auto w-max" @click="createGroup()" />
+        </div>
+    </ModalComponent>
+</template>
+
+<script>
+import ModalComponent from "./ModalComponent.vue";
+
+export default {
+    components: { ModalComponent },
+    props: {
+        onCreateGroup: {
+            required: true,
+            type: Function,
+        },
+    },
+    emits: ["close"],
+    data() {
+        return {
+            groupName: "",
+        };
+    },
+    methods: {
+        createGroup() {
+            this.onCreateGroup(this.groupName);
+            this.$emit("close");
+        },
+    },
+};
+</script>
diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index 06be4a88..116e4572 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -10,7 +10,7 @@
             <!-- export to json -->
             <button v-t="'actions.export_to_json'" class="btn" @click="exportHandler" />
         </div>
-        <div class="flex gap-1 flex-wrap m-1">
+        <div class="m-1 flex flex-wrap gap-1">
             <!-- import channel groups to json-->
             <div>
                 <label
@@ -35,7 +35,7 @@
                 v-text="`${$t('actions.export_to_json')} (${$t('titles.channel_groups')})`"
             />
         </div>
-        <div class="flex gap-1 self-center">
+        <div class="flex self-center gap-1">
             <!-- subscriptions count, only shown if there are any  -->
             <i18n-t v-if="subscriptions.length > 0" keypath="subscriptions.subscribed_channels_count">{{
                 subscriptions.length
@@ -86,13 +86,11 @@
     </div>
     <br />
 
-    <ModalComponent v-if="showCreateGroupModal" @close="showCreateGroupModal = !showCreateGroupModal">
-        <h2 v-t="'actions.create_group'" />
-        <div class="flex flex-col">
-            <input v-model="newGroupName" class="input my-4" type="text" :placeholder="$t('actions.group_name')" />
-            <button v-t="'actions.create_group'" class="btn ml-auto w-max" @click="createGroup()" />
-        </div>
-    </ModalComponent>
+    <CreateGroupModal
+        v-if="showCreateGroupModal"
+        :on-create-group="createGroup"
+        @close="showCreateGroupModal = false"
+    />
 
     <ModalComponent v-if="showEditGroupModal" @close="showEditGroupModal = false">
         <div class="mb-5 mt-3 flex justify-between">
@@ -121,9 +119,10 @@
 
 <script>
 import ModalComponent from "./ModalComponent.vue";
+import CreateGroupModal from "./CreateGroupModal.vue";
 
 export default {
-    components: { ModalComponent },
+    components: { ModalComponent, CreateGroupModal },
     data() {
         return {
             subscriptions: [],
@@ -134,7 +133,6 @@ export default {
             channelGroups: [],
             showCreateGroupModal: false,
             showEditGroupModal: false,
-            newGroupName: "",
             editedGroupName: "",
         };
     },
@@ -216,18 +214,16 @@ export default {
             this.selectedGroup = group;
             this.editedGroupName = group.groupName;
         },
-        createGroup() {
-            if (!this.newGroupName || this.channelGroups.some(group => group.groupName == this.newGroupName)) return;
+        createGroup(newGroupName) {
+            if (!newGroupName || this.channelGroups.some(group => group.groupName == newGroupName)) return;
 
             const newGroup = {
-                groupName: this.newGroupName,
+                groupName: newGroupName,
                 channels: [],
             };
             this.channelGroups.push(newGroup);
             this.createOrUpdateChannelGroup(newGroup);
 
-            this.newGroupName = "";
-
             this.showCreateGroupModal = false;
         },
         editGroupName() {
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index d7e657a3..0e7d28ee 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -61,8 +61,8 @@
         <div class="flex">
             <router-link :to="item.uploaderUrl">
                 <img
-                    loading="lazy"
                     v-if="item.uploaderAvatar"
+                    loading="lazy"
                     :src="item.uploaderAvatar"
                     class="mr-0.5 mt-0.5 h-32px w-32px rounded-full"
                     width="68"
@@ -81,7 +81,7 @@
                     <font-awesome-icon v-if="item.uploaderVerified" class="ml-1.5" icon="check" />
                 </router-link>
 
-                <div v-if="item.views >= 0 || item.uploadedDate" class="mt-1 text-xs font-normal text-gray-300">
+                <div v-if="item.views >= 0 || item.uploadedDate" class="mt-1 text-xs text-gray-300 font-normal">
                     <span v-if="item.views >= 0">
                         <font-awesome-icon icon="eye" />
                         <span class="pl-1" v-text="`${numberFormat(item.views)} •`" />