feat: show search icon in header instead of input

+ fix: persistent updating text on update playlist modal
+ move router routes to a separate file
    + lazy import route components
+ remove loading: lazy from songcard
+ remove unused imports on navigation component

src/components/shared/Input.vue

@@ -1,20 +1,31 @@
 <template>
-  <input
-    type="search"
-    class="header-input rounded-sm pad-sm"
-    placeholder="Search here"
-    v-model.trim="source"
-    id="page-search"
-  />
+  <div class="header-input-wrapper rounded-sm" :class="{ showInput: clicked }">
+    <div class="search-svg" @click="clicked = !clicked">
+      <SearchSvg />
+    </div>
+    <input
+      type="search"
+      class="header-input rounded-sm pad-sm"
+      :class="{ showInput: clicked }"
+      placeholder="Search here"
+      v-model.trim="source"
+      id="page-search"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
-import usePStore from "@/stores/pages/playlist";
-import useFolderStore from "@/stores/pages/folder";
-import useAlbumStore from "@/stores/pages/album";
-
+import { ref } from "vue";
 import { storeToRefs } from "pinia";
+
+import usePStore from "@/stores/pages/playlist";
+import useAlbumStore from "@/stores/pages/album";
+import useFolderStore from "@/stores/pages/folder";
+
 import { Routes } from "@/composables/enums";
+import SearchSvg from "@/assets/icons/search.svg";
+
+const clicked = ref(false);
 
 const { query: playlistQuery } = storeToRefs(usePStore());
 const { query: folderQuery } = storeToRefs(useFolderStore());
@@ -44,6 +55,18 @@ const source = getRef();
 </script>
 
 <style lang="scss">
+.header-input-wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  width: 1.5rem;
+  transition: all 0.25s;
+
+  &.showInput {
+    width: 15rem;
+  }
+}
+
+
 .header-input {
   background-color: $gray3;
   outline: none;
@@ -51,9 +74,35 @@ const source = getRef();
   color: inherit;
   font-size: 1rem;
   z-index: 200;
-
+  transition: all 0.25s $overshoot;
+  opacity: 0;
+  transform: translateY(-1rem);
+  
   &:focus {
     outline: solid;
   }
+  
+  &.showInput {
+    opacity: 1;
+    transform: translateY(0);
+    transition-delay: .1s;
+  }
+}
+
+.search-svg {
+  // outline: solid;
+  margin-top: $smaller;
+  cursor: pointer;
+  // padding-left: ;
+  width: 2.25rem;
+  height: 2rem;
+  // aspect-ratio: 1;
+  z-index: 100;
+
+  svg {
+    display: block;
+    margin: 0 auto;
+    // outline: solid;
+  }
 }
 </style>