refactor logo, bottom bar and perks.js

- add new logo
- add tsconfig.json
- move logo to new component
- update bottombar
- remove props from hotkeys and progress bar
- convert perks.js -> perks.ts

src/components/shared/SongItem.vue

@@ -29,7 +29,7 @@
       <div class="ellip" v-if="props.song.artists[0] !== ''">
         <span
           class="artist"
-          v-for="artist in perks.putCommas(props.song.artists)"
+          v-for="artist in putCommas(props.song.artists)"
           :key="artist"
           >{{ artist }}</span
         >
@@ -53,13 +53,13 @@
       </div>
     </router-link>
     <div class="song-duration">
-      {{ perks.formatSeconds(props.song.length) }}
+      {{ formatSeconds(props.song.length) }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import perks from "../../composables/perks.js";
+import { putCommas, formatSeconds } from "../../composables/perks";
 import useContextStore from "../../stores/context";
 import useModalStore from "../../stores/modal";
 import useQueueStore from "../../stores/queue";
@@ -67,7 +67,7 @@ import { ContextSrc } from "../../composables/enums";
 
 import { ref } from "vue";
 import trackContext from "../../contexts/track_context";
-import { Track } from "../../interfaces.js";
+import { Track } from "../../interfaces";
 import { paths } from "../../config";
 
 const contextStore = useContextStore();