No subscriptions in subscriptions page, translations

src/components/FeedPage.vue

@@ -77,10 +77,10 @@
             style="text-align: center; width: 100%; margin-top: 10%;"
         >
             <img width="210" src="/img/feed-no-video.png" />
-            <h3 style="font-family: MontserratBold;">{{ $t("actions.subscribe_to_channels_title") }}</h3>
+            <h3 style="font-family: MontserratBold;">{{ $t("actions.no_videos_in_feed_title") }}</h3>
             <p class="uk-text-center" style="line-height: 21px;">
-                {{ $t("actions.subscribe_to_channels_1") }}<br />
+                {{ $t("actions.no_videos_in_feed_1") }}<br />
-                {{ $t("actions.subscribe_to_channels_2") }}
+                {{ $t("actions.no_videos_in_feed_2") }}
             </p>
         </div>
     </div>

src/components/SubscriptionsPage.vue

@@ -1,4 +1,31 @@
 <template>
+    <div class="uk-flex uk-flex-middle uk-flex-between uk-flex-row-reverse" style="padding: 34px 0">
+        <div
+            class="uk-search"
+            :style="{
+                width: isMobile ? '100%' : '35ch',
+            }"
+        >
+            <div class="uk-position-relative">
+                <input
+                    class="uk-search-input"
+                    style="border-radius: 9999px; padding: 12px 18px 12px 40px;"
+                    :style="{ backgroundColor: secondaryBackgroundColor }"
+                    v-model="searchText"
+                    type="text"
+                    role="search"
+                    :title="$t('actions.search')"
+                    :placeholder="$t('actions.search')"
+                    @keyup="onKeyUp"
+                    @focus="onInputFocus"
+                    @blur="onInputBlur"
+                />
+                <font-awesome-icon
+                    icon="search"
+                    style="position: absolute; x: 0px; y: 0px;"
+                    class="uk-position-center-left uk-position-small"
+                />
+            </div>
             <div style="text-align: center">
                 <button
                     v-if="authenticated"
@@ -21,6 +48,24 @@
                     {{ $t("actions.export_to_json") }}
                 </button>
             </div>
+        </div>
+        <SearchSuggestions
+            v-show="searchText && suggestionsVisible"
+            ref="searchSuggestions"
+            :search-text="searchText"
+            @searchchange="onSearchTextChange"
+        />
+
+        <div
+            v-if="!isMobile"
+            class="uk-flex uk-flex-middle"
+            style="gap: 16px; transition: transform 400ms; transform-origin: left;"
+            :style="!menuCollapsed ? 'transform: scale3d(0, 0, 0);' : {}"
+        >
+            <img src="/img/pipedPlay.svg" style="height: 36px;" />
+            <img src="/img/piped.svg" />
+        </div>
+    </div>
 
     <div v-for="subscription in subscriptions" :key="subscription.url" style="text-align: center;">
         <div class="uk-text-primary" :style="[{ background: backgroundColor }]">
@@ -43,6 +88,19 @@
         </div>
         <br />
     </div>
+
+    <div
+        v-if="subscriptions.length == 0 && !loading"
+        class="uk-text-center"
+        style="text-align: center; width: 100%; margin-top: 10%;"
+    >
+        <img width="210" src="/img/subscriptions-no-channels.png" />
+        <h3 style="font-family: MontserratBold;">{{ $t("actions.no_subscriptions_in_subscriptions_title") }}</h3>
+        <p class="uk-text-center" style="line-height: 21px;">
+            {{ $t("actions.no_subscriptions_in_subscriptions_1") }}<br />
+            {{ $t("actions.no_subscriptions_in_subscriptions_2") }}
+        </p>
+    </div>
     <br />
 </template>
 
@@ -51,6 +109,7 @@ export default {
     data() {
         return {
             subscriptions: [],
+            loading: true,
         };
     },
     mounted() {
@@ -60,6 +119,7 @@ export default {
                     Authorization: this.getAuthToken(),
                 },
             }).then(json => {
+                this.loading = false;
                 this.subscriptions = json;
                 this.subscriptions.forEach(subscription => (subscription.subscribed = true));
             });

src/locales/en.json

@@ -66,9 +66,12 @@
         "search": "Search",
         "filter": "Filter",
         "loading": "Loading...",
-        "subscribe_to_channels_1": "Subscribe to channels to",
+        "no_videos_in_feed_1": "Subscribe to channels to",
-        "subscribe_to_channels_2": "see videos in this section.",
+        "no_videos_in_feed_2": "see videos in this section.",
-        "subscribe_to_channels_title": "No videos in My feed yet"
+        "no_videos_in_feed_title": "No videos in My feed yet",
+        "no_subscriptions_in_subscriptions_1": "Subscribe to channels to",
+        "no_subscriptions_in_subscriptions_2": "to see your subscriptions here.",
+        "no_subscriptions_in_subscriptions_title": "No subscriptions yet"
     },
     "comment": {
         "pinned_by": "Pinned by"