perf: Extend RSS Feeds / Rules to use full width instead of half (#811)

* perf: Extend RSS Feeds / Rules to use full width instead of half

* fix: misplaced v-key

src/components/Settings/Tabs/Rss/Feeds.vue

@@ -1,52 +1,52 @@
 <template>
   <v-card flat>
     <v-row dense class="ma-0 pa-0">
-      <v-col cols="12" md="6">
-        <v-subheader>{{ $t('modals.settings.rss.feeds.feeds') }}</v-subheader>
-        <template v-for="(item, index) in availableFeeds">
-          <v-list-item :key="item.uid">
-            <v-list-item-content>
-              <v-list-item-title v-text="item.name" />
-            </v-list-item-content>
-            <v-list-item-action class="icon">
-              <v-icon @click="updateFeed(item)">
-                {{ mdiSync }}
-              </v-icon>
-            </v-list-item-action>
-            <v-list-item-action class="icon">
-              <v-icon @click="editFeed(item)">
-                {{ mdiPencil }}
-              </v-icon>
-            </v-list-item-action>
-            <v-list-item-action class="icon">
-              <v-icon color="red" @click="deleteFeed(item)">
-                {{ mdiDelete }}
-              </v-icon>
-            </v-list-item-action>
-          </v-list-item>
-          <v-divider v-if="index < availableFeeds.length - 1" :key="index" />
-        </template>
+      <v-col cols="12" sm="6" lg="3" v-for="item in availableFeeds" :key="item.uid">
         <v-list-item>
-          <v-btn class="mx-auto accent white--text elevation-0 px-4" @click="createFeed">
-            {{ $t('modals.settings.rss.feeds.btnCreateNew') }}
-          </v-btn>
-          <v-btn class="mx-auto accent white--text elevation-0 px-4" @click="refreshAll">
-            {{ $t('modals.settings.rss.feeds.refreshAll') }}
-          </v-btn>
+          <v-list-item-content>
+            <v-list-item-title v-text="item.name" />
+          </v-list-item-content>
+          <v-list-item-action class="icon">
+            <v-icon @click="updateFeed(item)">
+              {{ mdiSync }}
+            </v-icon>
+          </v-list-item-action>
+          <v-list-item-action class="icon">
+            <v-icon @click="editFeed(item)">
+              {{ mdiPencil }}
+            </v-icon>
+          </v-list-item-action>
+          <v-list-item-action class="icon">
+            <v-icon color="red" @click="deleteFeed(item)">
+              {{ mdiDelete }}
+            </v-icon>
+          </v-list-item-action>
         </v-list-item>
+        <v-divider />
+      </v-col>
+    </v-row>
+    <v-row class="mb-3">
+      <v-col cols="6" class="d-flex align-center justify-center">
+        <v-btn class="mx-auto accent white--text elevation-0 px-4" @click="createFeed">
+          {{ $t('modals.settings.rss.feeds.btnCreateNew') }}
+        </v-btn>
+      </v-col>
+      <v-col cols="6" class="d-flex align-center justify-center">
+        <v-btn class="mx-auto accent white--text elevation-0 px-4" @click="refreshAll">
+          {{ $t('modals.settings.rss.feeds.refreshAll') }}
+        </v-btn>
       </v-col>
     </v-row>
   </v-card>
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue'
 import { mapGetters } from 'vuex'
-import qbit from '@/services/qbit'
 import { mdiDelete, mdiPencil, mdiSync } from '@mdi/js'
-
+import qbit from '@/services/qbit'
 import { Tab, General, FullScreenModal } from '@/mixins'
 import { Feed } from '@/types/vuetorrent'
-import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'Feeds',
@@ -58,9 +58,9 @@ export default defineComponent({
   }),
   computed: {
     ...mapGetters(['getFeeds']),
-    availableFeeds() {
+    availableFeeds(): Feed[] {
       // @ts-expect-error: TS2349: This expression is not callable. Type 'never' has no call signatures.
-      return this.getFeeds() as Feed[]
+      return this.getFeeds()
     }
   },
   created() {

src/components/Settings/Tabs/Rss/Rules.vue

@@ -1,36 +1,35 @@
 <template>
   <v-card flat>
     <v-row dense class="ma-0 pa-0">
-      <v-col cols="12" md="6">
-        <v-subheader>{{ $t('modals.settings.rss.rules.rules') }}</v-subheader>
-        <template v-for="(item, index) in availableRules">
-          <v-list-item :key="item.uid">
-            <v-list-item-content>
-              <v-list-item-title v-text="item.name" />
-            </v-list-item-content>
-            <v-list-item-action class="icon">
-              <v-icon @click="previewMatchingArticles(item.name)">
-                {{ mdiEye }}
-              </v-icon>
-            </v-list-item-action>
-            <v-list-item-action class="icon">
-              <v-icon @click="editRule(item)">
-                {{ mdiPencil }}
-              </v-icon>
-            </v-list-item-action>
-            <v-list-item-action>
-              <v-icon color="red" @click="deleteRule(item)">
-                {{ mdiDelete }}
-              </v-icon>
-            </v-list-item-action>
-          </v-list-item>
-          <v-divider v-if="index < availableRules.length - 1" :key="index" />
-        </template>
+      <v-col cols="12" sm="6" lg="3" v-for="(item, index) in availableRules" :key="item.uid">
         <v-list-item>
-          <v-btn class="mx-auto accent white--text elevation-0 px-4" @click="createRule">
-            {{ $t('modals.settings.rss.rules.btnCreateNew') }}
-          </v-btn>
+          <v-list-item-content>
+            <v-list-item-title v-text="item.name" />
+          </v-list-item-content>
+          <v-list-item-action class="icon">
+            <v-icon @click="previewMatchingArticles(item.name)">
+              {{ mdiEye }}
+            </v-icon>
+          </v-list-item-action>
+          <v-list-item-action class="icon">
+            <v-icon @click="editRule(item)">
+              {{ mdiPencil }}
+            </v-icon>
+          </v-list-item-action>
+          <v-list-item-action>
+            <v-icon color="red" @click="deleteRule(item)">
+              {{ mdiDelete }}
+            </v-icon>
+          </v-list-item-action>
         </v-list-item>
+        <v-divider />
+      </v-col>
+    </v-row>
+    <v-row class="mb-3">
+      <v-col cols="12" class="d-flex align-center justify-center">
+        <v-btn class="mx-auto accent white--text elevation-0 px-4" @click="createRule">
+          {{ $t('modals.settings.rss.rules.btnCreateNew') }}
+        </v-btn>
       </v-col>
     </v-row>
   </v-card>

src/lang/en.json

@@ -446,12 +446,10 @@
           }
         },
         "feeds": {
-          "feeds": "Feeds",
           "btnCreateNew": "Add feed",
           "refreshAll": "Refresh All"
         },
         "rules": {
-          "rules": "Rules",
           "btnCreateNew": "Create Rule"
         }
       },