Move donations to fixed location bottom right corner + feeds in progress

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>

src/components/FeedPage.vue

@@ -1,22 +1,38 @@
 <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
+    <div class="uk-flex uk-flex-middle uk-flex-between uk-flex-row-reverse" style="padding: 34px 0">
-        v-if="authenticated"
+        <div
-        class="uk-button uk-button-small"
+            class="uk-search"
-        style="background: #222; margin-right: 0.5rem"
+            :style="{
-        type="button"
+                width: isMobile ? '100%' : '35ch',
-        @click="exportHandler"
+            }"
         >
-        <router-link to="/subscriptions">
+            <div class="uk-position-relative">
-            Subscriptions
+                <input
-        </router-link>
+                    class="uk-search-input"
-    </button>
+                    style="border-radius: 9999px; padding: 12px 18px 12px 40px;"
-
+                    :style="{ backgroundColor: secondaryBackgroundColor }"
-    <span>
+                    v-model="searchText"
-        <a :href="getRssUrl"><font-awesome-icon icon="rss" style="padding-top: 0.2rem"></font-awesome-icon></a>
+                    type="text"
-    </span>
+                    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()">
@@ -26,6 +42,28 @@
                     <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>
 
     <hr />
 
@@ -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>