start project "move to typescript"

src/components/AlbumView/Header.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script setup>
-import state from "@/composables/state.js";
+import state from "@/composables/state";
 import perks from "@/composables/perks.js";
 
 const props = defineProps({

src/components/FolderView/SongList.vue

@@ -36,7 +36,7 @@ import SongItem from "../shared/SongItem.vue";
 
 import routeLoader from "@/composables/routeLoader.js";
 import perks from "@/composables/perks.js";
-import state from "@/composables/state.js";
+import state from "@/composables/state";
 
 const props = defineProps({
   songs: {

src/components/LeftSidebar/AlbumArt.vue

@@ -27,7 +27,7 @@ const props = defineProps({
 <style lang="scss">
 .l_ {
   padding: $small;
-  background-color: #e24a01;
+  background-color: $primary;
   margin: $small;
 
   .l-image {

src/components/RightSideBar/Main.vue

@@ -32,7 +32,6 @@ const tabs = useTabStore();
   width: 29em;
   background-color: rgba(4, 12, 34, 0.103);
   padding: 0 0 0 $small;
-  border-left: 1px solid $gray;
 
   @include phone-only {
     display: none;

src/components/RightSideBar/Search.vue

@@ -50,7 +50,7 @@
 <script setup>
 import { reactive, ref } from "@vue/reactivity";
 
-import state from "@/composables/state.js";
+import state from "@/composables/state";
 import searchMusic from "@/composables/searchMusic.js";
 import useDebouncedRef from "@/composables/useDebouncedRef";
 import AlbumGrid from "@/components/Search/AlbumGrid.vue";

src/components/RightSideBar/Tabs.vue

@@ -23,10 +23,9 @@ const tabs = useTabStore();
 <style lang="scss">
 .tabs {
   padding: $small;
-  border-left: 1px solid $gray;
 
   .cont {
-    background-color: $gray;
+    background-color: $gray3;
     display: flex;
     gap: $small;
     height: 100%;
@@ -44,7 +43,7 @@ const tabs = useTabStore();
     width: 4rem;
 
     &:hover {
-      background-color: $gray3;
+      background-color: $gray5;
     }
   }
 
@@ -53,12 +52,12 @@ const tabs = useTabStore();
     display: flex;
     justify-content: center;
     width: 4rem;
+    background-color: $accent;
 
     .t-item {
       background-color: transparent;
     }
 
-    background-image: linear-gradient(to right, $blue, $red) !important;
   }
 
   .search {

src/components/contextMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- v-show="context.visible" -->
   <div
-    class="context-menu rounded"
+    class="context-menu rounded shadow-lg"
     :class="{ 'context-menu-visible': context.visible }"
     :style="{
       left: context.x + 'px',
@@ -35,7 +35,7 @@ const context = useContextStore();
   width: 10rem;
   height: min-content;
   padding: $small;
-  background: $gray;
+  background: $gray3;
   z-index: 100000 !important;
   display: flex;
   flex-direction: column;
@@ -54,6 +54,7 @@ const context = useContextStore();
     cursor: default;
     padding: 0 $small;
     border-radius: $small;
+    color: rgb(255, 255, 255);
 
     .icon {
       height: 1.25rem;

src/components/shared/Loader.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import state from "@/composables/state.js";
+import state from "@/composables/state";
 
 const loading = state.loading
 </script>

src/components/shared/SongItem.vue

@@ -60,17 +60,18 @@
   </div>
 </template>
 
-<script setup>
-import perks from "@/composables/perks.js";
-import state from "@/composables/state.js";
+<script setup lang="ts">
+import perks from "../../composables/perks.js";
+import state from "../../composables/state";
 import useContextStore from "../../stores/context.js";
 import { ref } from "vue";
 import trackContext from "../../composables/track_context";
+import { Track } from "../../interfaces.js";
 
 const contextStore = useContextStore();
 const context_on = ref(false);
 
-const showContextMenu = (e) => {
+const showContextMenu = (e: Event) => {
   e.preventDefault();
   e.stopPropagation();
 
@@ -84,23 +85,21 @@ const showContextMenu = (e) => {
   });
 };
 
-const props = defineProps({
-  song: {
-    type: Object,
-    default: () => ({}),
-  },
-  index: {
-    type: Number,
-    default: () => 0,
-  },
-});
+const props = defineProps<{
+  song: Track;
+  index: Number;
+}>();
 
-const emit = defineEmits(["updateQeuue", "loadAlbum"]);
+const emit = defineEmits<{
+  (e: "updateQueue", song: Track): void;
+  (e: "loadAlbum", album: string, artist: string): void;
+}>();
 
-function emitUpdate(song) {
-  emit("updateQueue", song);
+function emitUpdate(track: Track) {
+  emit("updateQueue", track);
 }
-function emitLoadAlbum(title, artist) {
+
+function emitLoadAlbum(title: string, artist: string) {
   emit("loadAlbum", title, artist);
 }