refactor(SubscriptionsPage): styling changes

- show channel info as cards
- only show sub count info if subs are > 0

src/components/SubscriptionsPage.vue

@@ -1,6 +1,6 @@
 <template>
     <h1 class="font-bold text-center my-4" v-t="'titles.subscriptions'" />
-
+    <!-- import / export section -->
     <div class="flex justify-between w-full">
         <div class="flex">
             <button class="btn mx-1">
@@ -8,25 +8,30 @@
             </button>
             <button class="btn" @click="exportHandler" v-t="'actions.export_to_json'" />
         </div>
-        <i18n-t keypath="subscriptions.subscribed_channels_count">{{ subscriptions.length }}</i18n-t>
+        <!-- subscriptions count, only shown if there are any  -->
+        <i18n-t v-if="subscriptions.length > 0" keypath="subscriptions.subscribed_channels_count">{{
+            subscriptions.length
+        }}</i18n-t>
     </div>
     <hr />
-
+    <!-- Subscriptions card list -->
-    <div class="grid">
+    <div class="xl:flex <md:flex-wrap">
-        <div class="mb-3" v-for="subscription in subscriptions" :key="subscription.url">
+        <!-- channel info card -->
-            <div class="flex justify-center place-items-center">
+        <div
-                <div class="w-full flex justify-between items-center">
+            class="col m-2 p-1 border rounded-lg border-gray-500"
-                    <router-link :to="subscription.url" class="flex text-center font-bold text-4xl">
+            v-for="subscription in subscriptions"
-                        <img :src="subscription.avatar" class="rounded-full h-[fit-content]" width="48" height="48" />
+            :key="subscription.url"
-                        <span class="mx-2" v-text="subscription.name" />
+        >
-                    </router-link>
+            <router-link :to="subscription.url" class="flex p-2 font-bold text-4x4">
-                    <button
+                <img :src="subscription.avatar" class="rounded-full h-[fit-content]" width="48" height="48" />
-                        class="btn w-min"
+                <span class="self-center mx-2" v-text="subscription.name" />
-                        @click="handleButton(subscription)"
+            </router-link>
-                        v-t="`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`"
+            <!-- subscribe / unsubscribe btn -->
-                    />
+            <button
-                </div>
+                class="btn w-full mt-2"
-            </div>
+                @click="handleButton(subscription)"
+                v-t="`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`"
+            />
         </div>
     </div>
     <br />