new footer layout (#339)

* #338 new footer layout

* adjust search result height

---------

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>

modules/desktop/src/components/footer/footer.svelte

@@ -0,0 +1,24 @@
+<script>
+  import * as pub from '$env/static/public';
+</script>
+<footer class="w-full border-gray flex items-center justify-between border pr-2 rounded-b-xl overflow-clip"> 
+  <figure class="text-center">
+    <i class="icon-tea-logo-iconasset-1 text-black"/>
+  </figure>
+  <div class="text-gray text-xs">v{ pub.PUBLIC_VERSION }</div>
+</footer>
+<style>
+	footer {
+    height: 27px;
+		background: rgba(26,26,26,0.9);
+		backdrop-filter: blur(2px);
+		box-sizing: border-box;
+	}
+  figure {
+    width: 60px;
+    height: 27px;
+    background-image: url('/images/gradient-bg.png');
+    background-size: cover;
+    padding-top: 4px;
+  }
+</style>

modules/desktop/src/components/search-popup-results/search-popup-results.svelte

@@ -121,7 +121,7 @@
 <style>
 	section {
 		position: fixed;
-		top: 80px;
+		top: 48px;
 		left: 0px;
 		right: 0;
 		background: rgba(0, 0, 0, 0.7);

modules/desktop/src/components/side-menu/side-menu.svelte

@@ -63,7 +63,8 @@
 		position: fixed;
 		top: 48px;
 		left: 0px;
-		height: calc(100% - 40px);
+		height: calc(100% - 40px - 35px); /* win.height - title-bar.height - footer.height */
 		width: 190px;
+		box-sizing: border-box;
 	}
 </style>

modules/desktop/src/components/top-bar/top-bar.svelte

@@ -5,7 +5,6 @@
 	import SearchInput from '@tea/ui/search-input/search-input.svelte';
 	import { navStore } from '$libs/stores';
 	import { t } from '$libs/translations';
-	import * as pub from '$env/static/public';
 
 	import ProfileNavButton from './profile-nav-button.svelte';
 
@@ -33,7 +32,7 @@
 		<SearchInput
 			class="w-full border border-gray rounded-sm h-9"
 			size="small"
-			placeholder={`${$t("store-search-placeholder")} rm this v${pub.PUBLIC_VERSION}`}
+			placeholder={`${$t("store-search-placeholder")}`}
 			{onSearch}
 		/>
 	</div>

modules/desktop/src/routes/+layout.svelte

@@ -5,6 +5,7 @@
 	import { afterNavigate } from '$app/navigation';
 	import TopBar from '$components/top-bar/top-bar.svelte';
 	import SideBar from '$components/side-bar/side-bar.svelte';
+	import Footer from '$components/footer/footer.svelte';
 	import { navStore, packagesStore } from '$libs/stores';
 	import { listenToChannel } from "@native";
 
@@ -49,6 +50,7 @@
 		</div>
 		<SearchPopupResults />
 	</section>
+	<Footer/>
 </div>
 <aside class={`absolute h-full w-1/4 bg-gray bg-opacity-10 top-0 transition-all  ${$sideNavOpen ? "right-0":"-right-1/4"}`}>
 	<SideBar/>
@@ -61,7 +63,7 @@
 		overflow: hidden;
 	}
 	section {
-		height: calc(100vh - 50px);
+		height: calc(100vh - 50px - 25px); /* win.height - header - footer */
 		overflow-y: scroll;
 		box-sizing: border-box;
 	}