From 4b68a4ad7ca084e9ef1f48144be555dbef17e823 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Mon, 23 Feb 2026 16:57:18 +0100
Subject: [PATCH] update all imports with alias @ and scss

---
 src/App.vue                                   |  4 +-
 src/components/CastList.vue                   |  2 +-
 src/components/LandingBanner.vue              |  4 +-
 src/components/PageHeader.vue                 |  6 +--
 src/components/Popup.vue                      |  4 +-
 src/components/ResultsList.vue                |  4 +-
 src/components/ResultsListItem.vue            |  6 +--
 src/components/ResultsSection.vue             |  2 +-
 .../header/AutocompleteDropdown.vue           | 12 +++---
 src/components/header/NavigationHeader.vue    |  4 +-
 src/components/header/NavigationIcon.vue      |  2 +-
 src/components/header/NavigationIcons.vue     |  2 +-
 src/components/header/SearchInput.vue         | 14 +++----
 src/components/popup/ActionButton.vue         |  2 +-
 src/components/popup/Description.vue          |  2 +-
 src/components/popup/Detail.vue               |  2 +-
 src/components/popup/Movie.vue                | 37 +++++++++----------
 src/components/popup/Person.vue               |  8 ++--
 .../torrent/TorrentSearchResults.vue          |  6 +--
 src/components/torrent/TorrentTable.vue       |  6 +--
 .../torrent/TruncatedTorrentResults.vue       |  2 +-
 src/components/ui/Hamburger.vue               |  2 +-
 src/components/ui/Loader.vue                  |  2 +-
 src/components/ui/LoadingPlaceholder.vue      |  2 +-
 src/components/ui/SeasonedButton.vue          |  4 +-
 src/components/ui/SeasonedInput.vue           |  4 +-
 src/components/ui/SeasonedMessages.vue        |  4 +-
 src/components/ui/ToggleButton.vue            |  2 +-
 src/pages/404Page.vue                         |  4 +-
 src/pages/ActivityPage.vue                    |  2 +-
 src/pages/ProfilePage.vue                     |  4 +-
 src/pages/RegisterPage.vue                    |  2 +-
 src/pages/SearchPage.vue                      |  2 +-
 src/pages/SettingsPage.vue                    |  4 +-
 src/pages/SigninPage.vue                      |  2 +-
 src/scss/elements.scss                        |  4 +-
 src/scss/loading-placeholder.scss             |  2 +-
 src/scss/main.scss                            |  2 +-
 src/scss/variables.scss                       |  2 +-
 39 files changed, 90 insertions(+), 91 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 81a8529..0e1414c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,8 +28,8 @@
 </script>
 
 <style lang="scss">
-  @import "src/scss/main";
-  @import "src/scss/media-queries";
+  @import "scss/main";
+  @import "scss/media-queries";
 
   #app {
     display: grid;
diff --git a/src/components/CastList.vue b/src/components/CastList.vue
index 002ef9e..7fd59ef 100644
--- a/src/components/CastList.vue
+++ b/src/components/CastList.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
   import { defineProps } from "vue";
-  import CastListItem from "src/components/CastListItem.vue";
+  import CastListItem from "@/components/CastListItem.vue";
   import type {
     IMovie,
     IShow,
diff --git a/src/components/LandingBanner.vue b/src/components/LandingBanner.vue
index 0933494..d701507 100644
--- a/src/components/LandingBanner.vue
+++ b/src/components/LandingBanner.vue
@@ -100,8 +100,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   header {
     width: 100%;
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index c19ebeb..b770217 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -47,9 +47,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   header {
     width: 100%;
diff --git a/src/components/Popup.vue b/src/components/Popup.vue
index 74cb9fc..e4c065d 100644
--- a/src/components/Popup.vue
+++ b/src/components/Popup.vue
@@ -90,8 +90,8 @@
 </script>
 
 <style lang="scss">
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .movie-popup {
     position: fixed;
diff --git a/src/components/ResultsList.vue b/src/components/ResultsList.vue
index 8c79906..e993d3c 100644
--- a/src/components/ResultsList.vue
+++ b/src/components/ResultsList.vue
@@ -35,8 +35,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   .no-results {
     width: 100%;
diff --git a/src/components/ResultsListItem.vue b/src/components/ResultsListItem.vue
index a1bf425..4c47afb 100644
--- a/src/components/ResultsListItem.vue
+++ b/src/components/ResultsListItem.vue
@@ -111,9 +111,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   .movie-item {
     padding: 15px;
diff --git a/src/components/ResultsSection.vue b/src/components/ResultsSection.vue
index d22fdd0..dbc3360 100644
--- a/src/components/ResultsSection.vue
+++ b/src/components/ResultsSection.vue
@@ -172,7 +172,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .resultSection {
     background-color: var(--background-color);
diff --git a/src/components/header/AutocompleteDropdown.vue b/src/components/header/AutocompleteDropdown.vue
index cf07e5a..eb2e0c7 100644
--- a/src/components/header/AutocompleteDropdown.vue
+++ b/src/components/header/AutocompleteDropdown.vue
@@ -24,11 +24,11 @@
 </template>
 
 <script setup lang="ts">
+  import type { Ref } from "vue";
   import { ref, watch, defineProps } from "vue";
   import { useStore } from "vuex";
-  import IconMovie from "@/icons/IconMovie.vue";
-  import IconShow from "@/icons/IconShow.vue";
-  import type { Ref } from "vue";
+  import IconMovie from "../../icons/IconMovie.vue";
+  import IconShow from "../../icons/IconShow.vue";
   import { elasticSearchMoviesAndShows } from "../../api";
   import { MediaTypes } from "../../interfaces/IList";
   import { Index } from "../../interfaces/IAutocompleteSearch";
@@ -134,9 +134,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
   $sizes: 22;
 
   @for $i from 0 through $sizes {
diff --git a/src/components/header/NavigationHeader.vue b/src/components/header/NavigationHeader.vue
index d8610d3..dc1390f 100644
--- a/src/components/header/NavigationHeader.vue
+++ b/src/components/header/NavigationHeader.vue
@@ -61,8 +61,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .spacer {
     @include mobile-only {
diff --git a/src/components/header/NavigationIcon.vue b/src/components/header/NavigationIcon.vue
index 914e0c6..92b8dc4 100644
--- a/src/components/header/NavigationIcon.vue
+++ b/src/components/header/NavigationIcon.vue
@@ -37,7 +37,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .navigation-link {
     display: grid;
diff --git a/src/components/header/NavigationIcons.vue b/src/components/header/NavigationIcons.vue
index 4289c38..c52ed77 100644
--- a/src/components/header/NavigationIcons.vue
+++ b/src/components/header/NavigationIcons.vue
@@ -77,7 +77,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .navigation-icons {
     display: grid;
diff --git a/src/components/header/SearchInput.vue b/src/components/header/SearchInput.vue
index be050d6..7c0a25e 100644
--- a/src/components/header/SearchInput.vue
+++ b/src/components/header/SearchInput.vue
@@ -43,13 +43,13 @@
 </template>
 
 <script setup lang="ts">
+  import type { Ref } from "vue";
   import { ref, computed } from "vue";
   import { useStore } from "vuex";
   import { useRouter, useRoute } from "vue-router";
-  import AutocompleteDropdown from "@/components/header/AutocompleteDropdown.vue";
-  import IconSearch from "@/icons/IconSearch.vue";
-  import IconClose from "@/icons/IconClose.vue";
-  import type { Ref } from "vue";
+  import AutocompleteDropdown from "./AutocompleteDropdown.vue";
+  import IconSearch from "../../icons/IconSearch.vue";
+  import IconClose from "../../icons/IconClose.vue";
   import type { MediaTypes } from "../../interfaces/IList";
 
   interface ISearchResult {
@@ -165,9 +165,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   .close-icon {
     position: absolute;
diff --git a/src/components/popup/ActionButton.vue b/src/components/popup/ActionButton.vue
index 1a9fd1f..4cf99d1 100644
--- a/src/components/popup/ActionButton.vue
+++ b/src/components/popup/ActionButton.vue
@@ -26,7 +26,7 @@
 </script>
 
 <style lang="scss">
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   li.sidebar-list-element {
     display: flex;
diff --git a/src/components/popup/Description.vue b/src/components/popup/Description.vue
index 0c8d107..b70d9a8 100644
--- a/src/components/popup/Description.vue
+++ b/src/components/popup/Description.vue
@@ -67,7 +67,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .movie-description {
     font-weight: 300;
diff --git a/src/components/popup/Detail.vue b/src/components/popup/Detail.vue
index 7fff44a..beaa622 100644
--- a/src/components/popup/Detail.vue
+++ b/src/components/popup/Detail.vue
@@ -19,7 +19,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .movie-detail {
     margin-bottom: 20px;
diff --git a/src/components/popup/Movie.vue b/src/components/popup/Movie.vue
index 02c0c2b..60998ce 100644
--- a/src/components/popup/Movie.vue
+++ b/src/components/popup/Movie.vue
@@ -169,21 +169,20 @@
   import { useStore } from "vuex";
 
   // import img from "@/directives/v-image";
-  import IconProfile from "@/icons/IconProfile.vue";
-  import IconThumbsUp from "@/icons/IconThumbsUp.vue";
-  import IconThumbsDown from "@/icons/IconThumbsDown.vue";
-  import IconInfo from "@/icons/IconInfo.vue";
-  import IconRequest from "@/icons/IconRequest.vue";
-  import IconRequested from "@/icons/IconRequested.vue";
-  import IconBinoculars from "@/icons/IconBinoculars.vue";
-  import IconPlay from "@/icons/IconPlay.vue";
-  import TorrentList from "@/components/torrent/TruncatedTorrentResults.vue";
-  import CastList from "@/components/CastList.vue";
-  import Detail from "@/components/popup/Detail.vue";
-  import ActionButton from "@/components/popup/ActionButton.vue";
-  import Description from "@/components/popup/Description.vue";
-  import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder.vue";
-  import type { Ref } from "vue";
+  import IconProfile from "../../icons/IconProfile.vue";
+  import IconThumbsUp from "../../icons/IconThumbsUp.vue";
+  import IconThumbsDown from "../../icons/IconThumbsDown.vue";
+  import IconInfo from "../../icons/IconInfo.vue";
+  import IconRequest from "../../icons/IconRequest.vue";
+  import IconRequested from "../../icons/IconRequested.vue";
+  import IconBinoculars from "../../icons/IconBinoculars.vue";
+  import IconPlay from "../../icons/IconPlay.vue";
+  import TorrentList from "../torrent/TruncatedTorrentResults.vue";
+  import CastList from "../CastList.vue";
+  import Detail from "./Detail.vue";
+  import ActionButton from "./ActionButton.vue";
+  import Description from "./Description.vue";
+  import LoadingPlaceholder from "../ui/LoadingPlaceholder.vue";
   import type {
     IMovie,
     IShow,
@@ -331,10 +330,10 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/loading-placeholder";
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/loading-placeholder";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   header {
     $duration: 0.2s;
diff --git a/src/components/popup/Person.vue b/src/components/popup/Person.vue
index 6be9d14..d0280e9 100644
--- a/src/components/popup/Person.vue
+++ b/src/components/popup/Person.vue
@@ -165,10 +165,10 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/loading-placeholder";
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/main";
+  @import "scss/loading-placeholder";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/main";
 
   section.person {
     overflow: hidden;
diff --git a/src/components/torrent/TorrentSearchResults.vue b/src/components/torrent/TorrentSearchResults.vue
index 2fad3c1..3e28d02 100644
--- a/src/components/torrent/TorrentSearchResults.vue
+++ b/src/components/torrent/TorrentSearchResults.vue
@@ -100,9 +100,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/elements";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/elements";
 
   h2 {
     font-size: 20px;
diff --git a/src/components/torrent/TorrentTable.vue b/src/components/torrent/TorrentTable.vue
index 1c5b33c..0b1dadb 100644
--- a/src/components/torrent/TorrentTable.vue
+++ b/src/components/torrent/TorrentTable.vue
@@ -155,9 +155,9 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
-  @import "src/scss/elements";
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/elements";
 
   table {
     border-spacing: 0;
diff --git a/src/components/torrent/TruncatedTorrentResults.vue b/src/components/torrent/TruncatedTorrentResults.vue
index 931f581..47a592d 100644
--- a/src/components/torrent/TruncatedTorrentResults.vue
+++ b/src/components/torrent/TruncatedTorrentResults.vue
@@ -25,8 +25,8 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, defineProps } from "vue";
   import { useRouter } from "vue-router";
+  import { ref, defineProps, computed } from "vue";
   import TorrentSearchResults from "@/components/torrent/TorrentSearchResults.vue";
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";
   import IconArrowDown from "@/icons/IconArrowDown.vue";
diff --git a/src/components/ui/Hamburger.vue b/src/components/ui/Hamburger.vue
index e305ce6..b2bb27b 100644
--- a/src/components/ui/Hamburger.vue
+++ b/src/components/ui/Hamburger.vue
@@ -23,7 +23,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .nav__hamburger {
     display: block;
diff --git a/src/components/ui/Loader.vue b/src/components/ui/Loader.vue
index f9fc213..b7702af 100644
--- a/src/components/ui/Loader.vue
+++ b/src/components/ui/Loader.vue
@@ -23,7 +23,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   .loader {
     display: flex;
diff --git a/src/components/ui/LoadingPlaceholder.vue b/src/components/ui/LoadingPlaceholder.vue
index 8ed11e4..aff8285 100644
--- a/src/components/ui/LoadingPlaceholder.vue
+++ b/src/components/ui/LoadingPlaceholder.vue
@@ -22,5 +22,5 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/loading-placeholder";
+  @import "scss/loading-placeholder";
 </style>
diff --git a/src/components/ui/SeasonedButton.vue b/src/components/ui/SeasonedButton.vue
index 1692045..c16f8e2 100644
--- a/src/components/ui/SeasonedButton.vue
+++ b/src/components/ui/SeasonedButton.vue
@@ -25,8 +25,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   button {
     display: inline-block;
diff --git a/src/components/ui/SeasonedInput.vue b/src/components/ui/SeasonedInput.vue
index d1b4677..898787a 100644
--- a/src/components/ui/SeasonedInput.vue
+++ b/src/components/ui/SeasonedInput.vue
@@ -74,8 +74,8 @@
   }
 </script>
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .group {
     display: flex;
diff --git a/src/components/ui/SeasonedMessages.vue b/src/components/ui/SeasonedMessages.vue
index 9ec9f57..13b884e 100644
--- a/src/components/ui/SeasonedMessages.vue
+++ b/src/components/ui/SeasonedMessages.vue
@@ -65,8 +65,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .fade-active {
     transition: opacity 0.4s;
diff --git a/src/components/ui/ToggleButton.vue b/src/components/ui/ToggleButton.vue
index e9a0124..644fa0a 100644
--- a/src/components/ui/ToggleButton.vue
+++ b/src/components/ui/ToggleButton.vue
@@ -35,7 +35,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   $background: $background-ui;
   $background-selected: $background-color-secondary;
diff --git a/src/pages/404Page.vue b/src/pages/404Page.vue
index 415e2a7..2556b7a 100644
--- a/src/pages/404Page.vue
+++ b/src/pages/404Page.vue
@@ -28,8 +28,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables.scss";
+  @import "scss/media-queries";
 
   .button {
     font-size: 1.2rem;
diff --git a/src/pages/ActivityPage.vue b/src/pages/ActivityPage.vue
index f53db6d..793c879 100644
--- a/src/pages/ActivityPage.vue
+++ b/src/pages/ActivityPage.vue
@@ -141,7 +141,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   .wrapper {
     padding: 2rem;
diff --git a/src/pages/ProfilePage.vue b/src/pages/ProfilePage.vue
index 622988a..a76c8a2 100644
--- a/src/pages/ProfilePage.vue
+++ b/src/pages/ProfilePage.vue
@@ -118,8 +118,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .button--group {
     display: flex;
diff --git a/src/pages/RegisterPage.vue b/src/pages/RegisterPage.vue
index 680b733..b33061a 100644
--- a/src/pages/RegisterPage.vue
+++ b/src/pages/RegisterPage.vue
@@ -131,7 +131,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   section {
     padding: 1.3rem;
diff --git a/src/pages/SearchPage.vue b/src/pages/SearchPage.vue
index 056e33f..97bd520 100644
--- a/src/pages/SearchPage.vue
+++ b/src/pages/SearchPage.vue
@@ -89,7 +89,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/media-queries";
+  @import "scss/media-queries";
 
   .filter {
     margin-top: 0.5rem;
diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
index d73d90d..697981e 100644
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -48,8 +48,8 @@
 </script>
 
 <style lang="scss">
-  @import "src/scss/variables";
-  @import "src/scss/media-queries";
+  @import "scss/variables";
+  @import "scss/media-queries";
 
   .settings {
     padding: 3rem;
diff --git a/src/pages/SigninPage.vue b/src/pages/SigninPage.vue
index 4b3c542..ee84085 100644
--- a/src/pages/SigninPage.vue
+++ b/src/pages/SigninPage.vue
@@ -112,7 +112,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "src/scss/variables";
+  @import "scss/variables";
 
   section {
     padding: 1.3rem;
diff --git a/src/scss/elements.scss b/src/scss/elements.scss
index ae72d55..318add8 100644
--- a/src/scss/elements.scss
+++ b/src/scss/elements.scss
@@ -1,5 +1,5 @@
-@import "src/scss/variables";
-@import "src/scss/media-queries";
+@import "scss/variables";
+@import "scss/media-queries";
 
 .filter {
   margin: 1rem;
diff --git a/src/scss/loading-placeholder.scss b/src/scss/loading-placeholder.scss
index 80984e8..36470ff 100644
--- a/src/scss/loading-placeholder.scss
+++ b/src/scss/loading-placeholder.scss
@@ -1,4 +1,4 @@
-@import "src/scss/variables";
+@import "scss/variables";
 
 // Loading placeholder styling
 @mixin nth-children($points...) {
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 60f959c..de3e5f2 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -1,4 +1,4 @@
-@import "src/scss/variables";
+@import "scss/variables";
 
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index dfeeec6..b10d3c0 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -1,6 +1,6 @@
 // Colors
 // @import "./media-queries";
-@import "src/scss/media-queries";
+@import "scss/media-queries";
 
 :root {
   color-scheme: light;