start project "move to typescript"

src/assets/css/_variables.scss

@@ -35,6 +35,11 @@ $brown: rgb(172, 142, 104);
 $indigo: rgb(94, 92, 230);
 $teal: rgb(64, 200, 224);
 
+// 60 30 10
+$primary: $blue;
+$accent: $indigo;
+$cta: $red;
+
 // media query mixins
 @mixin phone-only {
   @media (max-width: 599px) {

src/assets/css/global.scss

@@ -11,7 +11,8 @@
 
 body {
   margin: 0;
-  background-color: $card-dark;
+  background-color: #171c28;
+  
   color: #fff;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -97,15 +98,18 @@ button {
 
 .tabs {
   grid-area: tabs;
+  border-left: solid 1px $gray3;
 
   @include tablet-landscape {
     display: none;
   }
 }
 
+
+
 .gsearch-input {
   grid-area: search-input;
-  border-left: solid 1px $gray;
+  border-left: solid 1px $gray3;
 }
 
 .topnav {
@@ -116,7 +120,7 @@ button {
   width: 15rem;
   grid-area: l-sidebar;
   padding-top: 0.5rem;
-  border-right: solid 1px $gray;
+  border-right: solid 1px $gray3;
 }
 
 .bottom-bar {
@@ -156,7 +160,6 @@ button {
   max-width: 1504px;
 
   .nav {
-    border: solid;
     margin: $small;
     width: calc(100% - 1rem);
   }
@@ -164,6 +167,7 @@ button {
 
 .r-sidebar {
   grid-area: r-sidebar;
+  border-left: solid 1px $gray3;
 }
 
 .image {

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);
 }
 

src/composables/perks.js

@@ -2,7 +2,7 @@ import { ref } from "@vue/reactivity";
 import { watch } from "@vue/runtime-core";
 import media from "./mediaNotification.js";
 import playAudio from "./playAudio.js";
-import state from "./state.js";
+import state from "./state";
 
 const current = ref(state.current);
 

src/composables/playAudio.js

@@ -2,7 +2,7 @@ import {ref} from "@vue/reactivity";
 
 import perks from "./perks";
 import media from "./mediaNotification.js";
-import state from "./state.js";
+import state from "./state";
 
 const audio = ref(new Audio()).value;
 

src/composables/routeLoader.js

@@ -1,7 +1,7 @@
 import Router from "@/router";
 
 import album from "./album.js";
-import state from "./state.js";
+import state from "./state";
 
 async function toAlbum(title, artist) {
   console.log("routing to album");

src/composables/searchMusic.js

@@ -1,4 +1,4 @@
-import state from "./state.js";
+import state from "./state";
 
 const base_url = `${state.settings.uri}/search?q=`;
 

src/views/AlbumView.vue

@@ -26,7 +26,7 @@ import AlbumBio from "../components/AlbumView/AlbumBio.vue";
 import SongList from "../components/FolderView/SongList.vue";
 import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
 
-import state from "@/composables/state.js";
+import state from "@/composables/state";
 import routeLoader from "@/composables/routeLoader.js";
 
 const route = useRoute();

src/views/FolderView.vue

@@ -21,7 +21,7 @@ import Header from "@/components/FolderView/Header.vue";
 
 import getTracksAndDirs from "../composables/getFiles.js";
 import { onMounted, watch } from "@vue/runtime-core";
-import state from "@/composables/state.js";
+import state from "@/composables/state";
 
 export default {
   components: {

src/views/PlaylistView.vue

@@ -15,7 +15,7 @@
 import Header from "@/components/PlaylistView/Header.vue";
 import SongList from "@/components/FolderView/SongList.vue";
 import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
-import state from "@/composables/state.js";
+import state from "@/composables/state";
 export default {
   components: {
     Header,