move vue files around to folders

client-vue/src/App.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import SideMenu from "@/components/SideMenu.vue";
+import SideMenu from "@/components/menu/SideMenu.vue";
 import type { ApiAuthResponse } from "@common/Api/Api";
 import type { ApiLogLine } from "@common/Api/Client";
 import type {

client-vue/src/components/JobStatus.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-import DurationDisplay from "@/components/DurationDisplay.vue";
+import DurationDisplay from "@/components/reusables/DurationDisplay.vue";
 import { useStore } from "@/store";
 import { JobStatus } from "@common/Defs";
 import { library } from "@fortawesome/fontawesome-svg-core";

client-vue/src/components/SideMenu.vue → client-vue/src/components/menu/SideMenu.vue

@@ -4,7 +4,7 @@
             <div v-if="store.config" class="top-menu-item title" :class="{ fancy: store.clientCfg('animationsEnabled') }">
                 <router-link to="/dashboard" class="link" aria-label="Go to dashboard">
                     <div class="bg" />
-                    <img src="../assets/logo.png" class="favicon" width="24" height="24" :alt="store.cfg('app_name', 'TA') ?? 'TA'" aria-hidden="true" />
+                    <img src="../../assets/logo.png" class="favicon" width="24" height="24" :alt="store.cfg('app_name', 'TA') ?? 'TA'" aria-hidden="true" />
                     <h1 class="title" :title="verboseVersion">
                         <span>{{ store.app_name }}</span>
                         <template v-if="isDevelopmentBranch">
@@ -86,7 +86,7 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from "vue";
-import pack from "../../package.json";
+import pack from "../../../package.json";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
@@ -244,7 +244,7 @@ function copyDebugStuff(e: Event) {
 </script>
 
 <style lang="scss" scoped>
-@import "../assets/_variables";
+@import "../../assets/_variables";
 
 .side-menu {
     position: fixed;
@@ -359,7 +359,7 @@ function copyDebugStuff(e: Event) {
             position: relative;
             overflow: hidden;
             .bg {
-                background-image: url(../assets/3D_TV_static.gif);
+                background-image: url(../../assets/3D_TV_static.gif);
                 background-size: cover;
                 opacity: 0;
                 transition: opacity 0.5s ease-in-out;

client-vue/src/components/SideMenuStreamer.vue → client-vue/src/components/menu/SideMenuStreamer.vue

@@ -96,7 +96,7 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 
-import DurationDisplay from "@/components/DurationDisplay.vue";
+import DurationDisplay from "@/components/reusables/DurationDisplay.vue";
 import SideMenuStreamerVod from "./SideMenuStreamerVod.vue";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
@@ -121,7 +121,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { faHourglass } from "@fortawesome/free-regular-svg-icons";
 import { useStore } from "@/store";
-import { nonGameCategories } from "../../../common/Defs";
+import { nonGameCategories } from "@common/Defs";
 import { isTwitchChannel } from "@/mixins/newhelpers";
 import { useRoute } from "vue-router";
 import { formatLogicalDate } from "@/mixins/newhelpers";
@@ -192,7 +192,7 @@ function toggleExpand() {
 </script>
 
 <style lang="scss" scoped>
-@import "../assets/_variables";
+@import "../../assets/_variables";
 
 .top-menu-item {
     font-size: 1.2em;

client-vue/src/components/SideMenuStreamerVod.vue → client-vue/src/components/menu/SideMenuStreamerVod.vue

@@ -172,8 +172,8 @@
 // import { ref } from "vue";
 import { useStore } from "@/store";
 import type TwitchVOD from "@/core/Providers/Twitch/TwitchVOD";
-import { MuteStatus, TwitchVodAge } from "../../../common/Defs";
-import DurationDisplay from "./DurationDisplay.vue";
+import { MuteStatus, TwitchVodAge } from "@common/Defs";
+import DurationDisplay from "../reusables/DurationDisplay.vue";
 import { isTwitchVOD } from "@/mixins/newhelpers";
 import { formatDate, formatBytes, humanDuration, niceDuration, humanDate } from "@/mixins/newhelpers";
 

client-vue/src/components/DurationDisplay.vue.test.ts → client-vue/src/components/reusables/DurationDisplay.vue.test.ts

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import DurationDisplay from "@/components/DurationDisplay.vue";
+import DurationDisplay from "./DurationDisplay.vue";
 import { describe, it, expect } from "vitest";
 
 describe("DurationDisplay", () => {

client-vue/src/components/StreamerItem.vue → client-vue/src/components/streamer/StreamerItem.vue

@@ -97,13 +97,13 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from "vue";
-import VodItem from "@/components/VodItem.vue";
+import VodItem from "@/components/vod/VodItem.vue";
 import ModalBox from "@/components/ModalBox.vue";
 import StreamerItemClips from "./StreamerItemClips.vue";
 import StreamerItemLocalVideos from "./StreamerItemLocalVideos.vue";
 import StreamerItemTools from "./StreamerItemTools.vue";
-import VideoDownloadModal from "./streamer/VideoDownloadModal.vue";
-import ClipDownloadModal from "./streamer/ClipDownloadModal.vue";
+import VideoDownloadModal from "../streamer/VideoDownloadModal.vue";
+import ClipDownloadModal from "../streamer/ClipDownloadModal.vue";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faVideo, faPlayCircle, faVideoSlash, faDownload, faSync, faPencil, faFolderOpen, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { useStore } from "@/store";
@@ -244,7 +244,7 @@ function toggleLimitVods() {
 </script>
 
 <style lang="scss" scoped>
-@import "../assets/_variables";
+@import "../../assets/_variables";
 
 .streamer-title {
     font-size: 110%;

client-vue/src/components/VodItem.vue → client-vue/src/components/vod/VodItem.vue

@@ -189,18 +189,18 @@ import {
     faKey,
 } from "@fortawesome/free-solid-svg-icons";
 import { useStore } from "@/store";
-import ModalBox from "./ModalBox.vue";
+import ModalBox from "../ModalBox.vue";
 import VodItemSegments from "./VodItemSegments.vue";
 import VodItemBookmarks from "./VodItemBookmarks.vue";
 import VodItemChapters from "./VodItemChapters.vue";
 import VodItemViewers from "./VodItemViewers.vue";
 import VodItemGeneral from "./VodItemGeneral.vue";
 import VodItemStatus from "./VodItemStatus.vue";
 import VodItemTitle from "./VodItemTitle.vue";
-import RenderModal from "./vod/RenderModal.vue";
-import ExportModal from "./vod/ExportModal.vue";
-import EditModal from "./vod/EditModal.vue";
-import { VideoQualityArray } from "../../../common/Defs";
+import RenderModal from "../vod/RenderModal.vue";
+import ExportModal from "../vod/ExportModal.vue";
+import EditModal from "../vod/EditModal.vue";
+import { VideoQualityArray } from "@common/Defs";
 import type { ApiResponse, ApiSettingsResponse } from "@common/Api/Api";
 import { formatString } from "@common/Format";
 import { format } from "date-fns";
@@ -508,7 +508,7 @@ function showModalEv(modal: keyof typeof showModal.value): void {
 </script>
 
 <style lang="scss" scoped>
-@import "../assets/_variables";
+@import "../../assets/_variables";
 
 .video {
     margin-bottom: 1em;

client-vue/src/components/VodItemChapters.vue → client-vue/src/components/vod/VodItemChapters.vue

@@ -189,7 +189,7 @@ import { useStore } from "@/store";
 import type { ApiResponse, ApiSettingsResponse } from "@common/Api/Api";
 import axios from "axios";
 import { computed, onMounted, ref } from "vue";
-import DurationDisplay from "@/components/DurationDisplay.vue";
+import DurationDisplay from "@/components/reusables/DurationDisplay.vue";
 import { useI18n } from "vue-i18n";
 import { formatDate, formatNumber, humanDuration, twitchDuration } from "@/mixins/newhelpers";
 import type { ChapterTypes, VODTypes } from "@/twitchautomator";

client-vue/src/components/VodItemControls.vue → client-vue/src/components/vod/VodItemControls.vue

@@ -115,7 +115,7 @@
 <script lang="ts" setup>
 import { useStore } from "@/store";
 import type { ApiResponse } from "@common/Api/Api";
-import { MuteStatus } from "../../../common/Defs";
+import { MuteStatus } from "@common/Defs";
 import axios from "axios";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";

client-vue/src/components/VodItemGeneral.vue → client-vue/src/components/vod/VodItemGeneral.vue

@@ -89,7 +89,7 @@
 import { useStore } from "@/store";
 import { useI18n } from "vue-i18n";
 import VodItemVideoInfo from "./VodItemVideoInfo.vue";
-import DurationDisplay from "@/components/DurationDisplay.vue";
+import DurationDisplay from "@/components/reusables/DurationDisplay.vue";
 import { formatDate, humanDuration } from "@/mixins/newhelpers";
 import type { VODTypes } from "@/twitchautomator";
 import { computed, onMounted, ref } from "vue";

client-vue/src/components/VodItemVideoInfo.vue → client-vue/src/components/vod/VodItemVideoInfo.vue

@@ -284,7 +284,7 @@ import { useStore } from "@/store";
 import type { ApiResponse } from "@common/Api/Api";
 import axios from "axios";
 import { useI18n } from "vue-i18n";
-import { MuteStatus } from "../../../common/Defs";
+import { MuteStatus } from "@common/Defs";
 import { formatDate, humanDuration, formatBytes, isTwitchVOD } from "@/mixins/newhelpers";
 import type { VODTypes } from "@/twitchautomator";
 import { computed, ref } from "vue";

client-vue/src/views/DashboardView.vue

@@ -63,7 +63,7 @@
 </template>
 
 <script lang="ts" setup>
-import Streamer from "@/components/StreamerItem.vue";
+import Streamer from "@/components/streamer/StreamerItem.vue";
 import { useStore } from "@/store";
 import LogViewer from "@/components/LogViewer.vue";
 import { useI18n } from "vue-i18n";

client-vue/src/views/ToolsView.vue

@@ -206,7 +206,7 @@ import ToolsVodDownloadForm from "@/components/forms/ToolsVodDownloadForm.vue";
 import ToolsChatDownloadForm from "@/components/forms/ToolsChatDownloadForm.vue";
 import ToolsChatDumpForm from "@/components/forms/ToolsChatDumpForm.vue";
 import ToolsClipDownloadForm from "../components/forms/ToolsClipDownloadForm.vue";
-import DurationDisplay from "@/components/DurationDisplay.vue";
+import DurationDisplay from "@/components/reusables/DurationDisplay.vue";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faHeart, faStop, faSkull, faTrash, faPowerOff } from "@fortawesome/free-solid-svg-icons";