From c7e707267c7bfdd388ac42db7b7c520cb68bb09b Mon Sep 17 00:00:00 2001
From: Karlis Cudars <karlis.cudars1996@gmail.com>
Date: Sat, 23 Oct 2021 01:31:44 +0300
Subject: [PATCH] Move donations to fixed location bottom right corner + feeds
 in progress

---
 src/App.vue                 |   5 +-
 src/components/FeedPage.vue | 108 ++++++++++++++++++++++++++++--------
 2 files changed, 89 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d420dcba..96f9d565 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,14 +18,15 @@
                 </keep-alive>
             </router-view>
 
-            <div style="text-align: center">
+            <div
+                style="text-align: center; position: fixed; bottom: 0px; right: 0px; background: linear-gradient(to right, #da22ff, #9733ee); padding: 10px 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topleft: 15px; border-top-left-radius: 15px;"
+            >
                 <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped">
                     <font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon>
                 </a>
                 &nbsp;
                 <a href="https://github.com/TeamPiped/Piped#donations">
                     <font-awesome-icon :icon="['fab', 'bitcoin']"></font-awesome-icon>
-                    {{ $t("actions.donations") }}
                 </a>
             </div>
         </main>
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 4b13ac3f..a9e1fece 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -1,32 +1,70 @@
 <template>
-    <h1 v-t="'titles.feed'" class="uk-text-bold uk-text-center" />
+    <h1
+        v-if="isMobile"
+        v-t="'titles.trending'"
+        style="margin-bottom: 0; padding-top: 34px; font-weight: bold;"
+        class="uk-heading-small"
+    />
 
-    <button
-        v-if="authenticated"
-        class="uk-button uk-button-small"
-        style="background: #222; margin-right: 0.5rem"
-        type="button"
-        @click="exportHandler"
-    >
-        <router-link to="/subscriptions">
-            Subscriptions
-        </router-link>
-    </button>
+    <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>
+            <span class="uk-align-right@m">
+                <label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
+                <select id="ddlSortBy" v-model="selectedSort" class="uk-select uk-width-auto" @change="onChange()">
+                    <option v-t="'actions.most_recent'" value="descending" />
+                    <option v-t="'actions.least_recent'" value="ascending" />
+                    <option v-t="'actions.channel_name_asc'" value="channel_ascending" />
+                    <option v-t="'actions.channel_name_desc'" value="channel_descending" />
+                </select>
+            </span>
+        </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>
 
     <span>
         <a :href="getRssUrl"><font-awesome-icon icon="rss" style="padding-top: 0.2rem"></font-awesome-icon></a>
     </span>
 
-    <span class="uk-align-right@m">
-        <label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
-        <select id="ddlSortBy" v-model="selectedSort" class="uk-select uk-width-auto" @change="onChange()">
-            <option v-t="'actions.most_recent'" value="descending" />
-            <option v-t="'actions.least_recent'" value="ascending" />
-            <option v-t="'actions.channel_name_asc'" value="channel_ascending" />
-            <option v-t="'actions.channel_name_desc'" value="channel_descending" />
-        </select>
-    </span>
-
     <hr />
 
     <div class="uk-grid-xl" uk-grid="parallax: 0" style="padding-left: 25px;">
@@ -43,9 +81,11 @@
 
 <script>
 import VideoItem from "@/components/VideoItem.vue";
+import SearchSuggestions from "@/components/SearchSuggestions";
 
 export default {
     components: {
+        SearchSuggestions,
         VideoItem,
     },
     data() {
@@ -55,6 +95,8 @@ export default {
             videosStore: [],
             videos: [],
             selectedSort: "descending",
+            searchText: "",
+            suggestionsVisible: false,
         };
     },
     computed: {
@@ -112,6 +154,28 @@ export default {
                 this.loadMoreVideos();
             }
         },
+        onKeyUp(e) {
+            if (e.key === "Enter") {
+                e.target.blur();
+                this.$router.push({
+                    name: "SearchResults",
+                    query: { search_query: this.searchText },
+                });
+                return;
+            } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+                e.preventDefault();
+            }
+            this.$refs.searchSuggestions.onKeyUp(e);
+        },
+        onInputFocus() {
+            this.suggestionsVisible = true;
+        },
+        onInputBlur() {
+            this.suggestionsVisible = false;
+        },
+        onSearchTextChange(searchText) {
+            this.searchText = searchText;
+        },
     },
 };
 </script>