From f9a99d6400270f1981c5ab4aa4bc3ced916de813 Mon Sep 17 00:00:00 2001
From: Jona <8698248+jonamil@users.noreply.github.com>
Date: Sat, 28 Sep 2024 15:20:33 +0200
Subject: [PATCH] Reorganize component files

---
 components.d.ts                               | 53 +++++++++----------
 src/components/HeaderLogo.vue                 |  3 --
 src/components/{ => base}/BaseButton.vue      |  0
 src/components/{ => base}/BaseDialog.vue      |  0
 src/components/{ => base}/BaseIcon.vue        |  8 +--
 src/components/{ => base}/BaseLabel.vue       |  0
 .../BaseStatusIndicator.vue}                  |  0
 .../TheNoSelectionColumn.vue                  |  0
 .../{ => column-post}/ThePostColumns.vue      |  0
 .../{ => column-post}/ThePrimaryColumn.vue    |  2 +-
 .../{ => column-post}/TheSecondaryColumn.vue  |  0
 .../TheUnifiedViewControl.vue                 |  0
 .../comments}/CommentItem.vue                 |  0
 .../comments}/TheCommentsColumnBody.vue       |  8 +--
 .../comments}/TheCommentsColumnTitle.vue      |  0
 .../link}/TheLinkColumnBody.vue               |  4 +-
 .../link}/TheLinkColumnTitle.vue              |  0
 .../{ => column-posts-list}/PostsListItem.vue |  0
 .../ThePostsListColumn.vue                    |  2 +-
 .../ThePostsListColumnBody.vue                |  2 +-
 .../header}/TheCategorySelect.vue             |  2 +-
 .../header/TheRefreshButton.vue}              |  0
 .../settings}/TheAboutDialog.vue              |  0
 .../settings}/TheLegalDialog.vue              |  0
 .../settings}/TheSettingsMenu.vue             |  2 +-
 src/components/{ => page}/PageColumn.vue      |  0
 src/components/{ => page}/PageColumnBody.vue  |  0
 .../{ => page}/PageColumnControls.vue         |  0
 src/router/index.ts                           |  4 +-
 29 files changed, 44 insertions(+), 46 deletions(-)
 delete mode 100644 src/components/HeaderLogo.vue
 rename src/components/{ => base}/BaseButton.vue (100%)
 rename src/components/{ => base}/BaseDialog.vue (100%)
 rename src/components/{ => base}/BaseIcon.vue (76%)
 rename src/components/{ => base}/BaseLabel.vue (100%)
 rename src/components/{StatusItem.vue => base/BaseStatusIndicator.vue} (100%)
 rename src/components/{ => column-post}/TheNoSelectionColumn.vue (100%)
 rename src/components/{ => column-post}/ThePostColumns.vue (100%)
 rename src/components/{ => column-post}/ThePrimaryColumn.vue (98%)
 rename src/components/{ => column-post}/TheSecondaryColumn.vue (100%)
 rename src/components/{ => column-post}/TheUnifiedViewControl.vue (100%)
 rename src/components/{ => column-post/comments}/CommentItem.vue (100%)
 rename src/components/{ => column-post/comments}/TheCommentsColumnBody.vue (97%)
 rename src/components/{ => column-post/comments}/TheCommentsColumnTitle.vue (100%)
 rename src/components/{ => column-post/link}/TheLinkColumnBody.vue (96%)
 rename src/components/{ => column-post/link}/TheLinkColumnTitle.vue (100%)
 rename src/components/{ => column-posts-list}/PostsListItem.vue (100%)
 rename src/components/{ => column-posts-list}/ThePostsListColumn.vue (98%)
 rename src/components/{ => column-posts-list}/ThePostsListColumnBody.vue (98%)
 rename src/components/{ => column-posts-list/header}/TheCategorySelect.vue (96%)
 rename src/components/{RefreshButton.vue => column-posts-list/header/TheRefreshButton.vue} (100%)
 rename src/components/{ => column-posts-list/settings}/TheAboutDialog.vue (100%)
 rename src/components/{ => column-posts-list/settings}/TheLegalDialog.vue (100%)
 rename src/components/{ => column-posts-list/settings}/TheSettingsMenu.vue (98%)
 rename src/components/{ => page}/PageColumn.vue (100%)
 rename src/components/{ => page}/PageColumnBody.vue (100%)
 rename src/components/{ => page}/PageColumnControls.vue (100%)

diff --git a/components.d.ts b/components.d.ts
index 81f401b..37b6de6 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,15 +7,15 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    BaseButton: typeof import('./src/components/BaseButton.vue')['default']
-    BaseDialog: typeof import('./src/components/BaseDialog.vue')['default']
-    BaseIcon: typeof import('./src/components/BaseIcon.vue')['default']
-    BaseLabel: typeof import('./src/components/BaseLabel.vue')['default']
-    CommentItem: typeof import('./src/components/CommentItem.vue')['default']
+    BaseButton: typeof import('./src/components/base/BaseButton.vue')['default']
+    BaseDialog: typeof import('./src/components/base/BaseDialog.vue')['default']
+    BaseIcon: typeof import('./src/components/base/BaseIcon.vue')['default']
+    BaseLabel: typeof import('./src/components/base/BaseLabel.vue')['default']
+    BaseStatusIndicator: typeof import('./src/components/base/BaseStatusIndicator.vue')['default']
+    CommentItem: typeof import('./src/components/column-post/comments/CommentItem.vue')['default']
     Dialog: typeof import('@headlessui/vue')['Dialog']
     DialogPanel: typeof import('@headlessui/vue')['DialogPanel']
     DialogTitle: typeof import('@headlessui/vue')['DialogTitle']
-    HeaderLogo: typeof import('./src/components/HeaderLogo.vue')['default']
     Listbox: typeof import('@headlessui/vue')['Listbox']
     ListboxButton: typeof import('@headlessui/vue')['ListboxButton']
     ListboxOption: typeof import('@headlessui/vue')['ListboxOption']
@@ -24,30 +24,29 @@ declare module 'vue' {
     MenuButton: typeof import('@headlessui/vue')['MenuButton']
     MenuItem: typeof import('@headlessui/vue')['MenuItem']
     MenuItems: typeof import('@headlessui/vue')['MenuItems']
-    PageColumn: typeof import('./src/components/PageColumn.vue')['default']
-    PageColumnBody: typeof import('./src/components/PageColumnBody.vue')['default']
-    PageColumnControls: typeof import('./src/components/PageColumnControls.vue')['default']
-    PostsListItem: typeof import('./src/components/PostsListItem.vue')['default']
+    PageColumn: typeof import('./src/components/page/PageColumn.vue')['default']
+    PageColumnBody: typeof import('./src/components/page/PageColumnBody.vue')['default']
+    PageColumnControls: typeof import('./src/components/page/PageColumnControls.vue')['default']
+    PostsListItem: typeof import('./src/components/column-posts-list/PostsListItem.vue')['default']
     RadioGroup: typeof import('@headlessui/vue')['RadioGroup']
     RadioGroupOption: typeof import('@headlessui/vue')['RadioGroupOption']
-    RefreshButton: typeof import('./src/components/RefreshButton.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    StatusItem: typeof import('./src/components/StatusItem.vue')['default']
-    TheAboutDialog: typeof import('./src/components/TheAboutDialog.vue')['default']
-    TheCategorySelect: typeof import('./src/components/TheCategorySelect.vue')['default']
-    TheCommentsColumnBody: typeof import('./src/components/TheCommentsColumnBody.vue')['default']
-    TheCommentsColumnTitle: typeof import('./src/components/TheCommentsColumnTitle.vue')['default']
-    TheLegalDialog: typeof import('./src/components/TheLegalDialog.vue')['default']
-    TheLinkColumnBody: typeof import('./src/components/TheLinkColumnBody.vue')['default']
-    TheLinkColumnTitle: typeof import('./src/components/TheLinkColumnTitle.vue')['default']
-    TheNoSelectionColumn: typeof import('./src/components/TheNoSelectionColumn.vue')['default']
-    ThePostColumns: typeof import('./src/components/ThePostColumns.vue')['default']
-    ThePostsListColumn: typeof import('./src/components/ThePostsListColumn.vue')['default']
-    ThePostsListColumnBody: typeof import('./src/components/ThePostsListColumnBody.vue')['default']
-    ThePrimaryColumn: typeof import('./src/components/ThePrimaryColumn.vue')['default']
-    TheSecondaryColumn: typeof import('./src/components/TheSecondaryColumn.vue')['default']
-    TheSettingsMenu: typeof import('./src/components/TheSettingsMenu.vue')['default']
-    TheUnifiedViewControl: typeof import('./src/components/TheUnifiedViewControl.vue')['default']
+    TheAboutDialog: typeof import('./src/components/column-posts-list/settings/TheAboutDialog.vue')['default']
+    TheCategorySelect: typeof import('./src/components/column-posts-list/header/TheCategorySelect.vue')['default']
+    TheCommentsColumnBody: typeof import('./src/components/column-post/comments/TheCommentsColumnBody.vue')['default']
+    TheCommentsColumnTitle: typeof import('./src/components/column-post/comments/TheCommentsColumnTitle.vue')['default']
+    TheLegalDialog: typeof import('./src/components/column-posts-list/settings/TheLegalDialog.vue')['default']
+    TheLinkColumnBody: typeof import('./src/components/column-post/link/TheLinkColumnBody.vue')['default']
+    TheLinkColumnTitle: typeof import('./src/components/column-post/link/TheLinkColumnTitle.vue')['default']
+    TheNoSelectionColumn: typeof import('./src/components/column-post/TheNoSelectionColumn.vue')['default']
+    ThePostColumns: typeof import('./src/components/column-post/ThePostColumns.vue')['default']
+    ThePostsListColumn: typeof import('./src/components/column-posts-list/ThePostsListColumn.vue')['default']
+    ThePostsListColumnBody: typeof import('./src/components/column-posts-list/ThePostsListColumnBody.vue')['default']
+    ThePrimaryColumn: typeof import('./src/components/column-post/ThePrimaryColumn.vue')['default']
+    TheRefreshButton: typeof import('./src/components/column-posts-list/header/TheRefreshButton.vue')['default']
+    TheSecondaryColumn: typeof import('./src/components/column-post/TheSecondaryColumn.vue')['default']
+    TheSettingsMenu: typeof import('./src/components/column-posts-list/settings/TheSettingsMenu.vue')['default']
+    TheUnifiedViewControl: typeof import('./src/components/column-post/TheUnifiedViewControl.vue')['default']
   }
 }
diff --git a/src/components/HeaderLogo.vue b/src/components/HeaderLogo.vue
deleted file mode 100644
index e074256..0000000
--- a/src/components/HeaderLogo.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div class="rounded-sm mx-1 h-6 w-10 bg-accent-color"></div>
-</template>
diff --git a/src/components/BaseButton.vue b/src/components/base/BaseButton.vue
similarity index 100%
rename from src/components/BaseButton.vue
rename to src/components/base/BaseButton.vue
diff --git a/src/components/BaseDialog.vue b/src/components/base/BaseDialog.vue
similarity index 100%
rename from src/components/BaseDialog.vue
rename to src/components/base/BaseDialog.vue
diff --git a/src/components/BaseIcon.vue b/src/components/base/BaseIcon.vue
similarity index 76%
rename from src/components/BaseIcon.vue
rename to src/components/base/BaseIcon.vue
index aef9e01..52a0e7b 100644
--- a/src/components/BaseIcon.vue
+++ b/src/components/base/BaseIcon.vue
@@ -23,8 +23,10 @@ const iconComponent = shallowRef();
 watchEffect(async () => {
   iconComponent.value = null;
 
-  import(`@/assets/icons/${props.name + (props.small ? '.small' : '')}.svg`).then((imported) => {
-    iconComponent.value = imported.default;
-  });
+  import(`../../assets/icons/${props.name + (props.small ? '.small' : '')}.svg`).then(
+    (imported) => {
+      iconComponent.value = imported.default;
+    }
+  );
 });
 </script>
diff --git a/src/components/BaseLabel.vue b/src/components/base/BaseLabel.vue
similarity index 100%
rename from src/components/BaseLabel.vue
rename to src/components/base/BaseLabel.vue
diff --git a/src/components/StatusItem.vue b/src/components/base/BaseStatusIndicator.vue
similarity index 100%
rename from src/components/StatusItem.vue
rename to src/components/base/BaseStatusIndicator.vue
diff --git a/src/components/TheNoSelectionColumn.vue b/src/components/column-post/TheNoSelectionColumn.vue
similarity index 100%
rename from src/components/TheNoSelectionColumn.vue
rename to src/components/column-post/TheNoSelectionColumn.vue
diff --git a/src/components/ThePostColumns.vue b/src/components/column-post/ThePostColumns.vue
similarity index 100%
rename from src/components/ThePostColumns.vue
rename to src/components/column-post/ThePostColumns.vue
diff --git a/src/components/ThePrimaryColumn.vue b/src/components/column-post/ThePrimaryColumn.vue
similarity index 98%
rename from src/components/ThePrimaryColumn.vue
rename to src/components/column-post/ThePrimaryColumn.vue
index b391bbe..029d195 100644
--- a/src/components/ThePrimaryColumn.vue
+++ b/src/components/column-post/ThePrimaryColumn.vue
@@ -41,7 +41,7 @@
     </PageColumnControls>
 
     <PageColumnBody v-if="!content.currentPostItem">
-      <StatusItem full-height />
+      <BaseStatusIndicator full-height />
     </PageColumnBody>
     <template v-else-if="view.availableColumns === 3">
       <TheLinkColumnBody v-if="showLinkColumn" />
diff --git a/src/components/TheSecondaryColumn.vue b/src/components/column-post/TheSecondaryColumn.vue
similarity index 100%
rename from src/components/TheSecondaryColumn.vue
rename to src/components/column-post/TheSecondaryColumn.vue
diff --git a/src/components/TheUnifiedViewControl.vue b/src/components/column-post/TheUnifiedViewControl.vue
similarity index 100%
rename from src/components/TheUnifiedViewControl.vue
rename to src/components/column-post/TheUnifiedViewControl.vue
diff --git a/src/components/CommentItem.vue b/src/components/column-post/comments/CommentItem.vue
similarity index 100%
rename from src/components/CommentItem.vue
rename to src/components/column-post/comments/CommentItem.vue
diff --git a/src/components/TheCommentsColumnBody.vue b/src/components/column-post/comments/TheCommentsColumnBody.vue
similarity index 97%
rename from src/components/TheCommentsColumnBody.vue
rename to src/components/column-post/comments/TheCommentsColumnBody.vue
index 9182138..6b43ade 100644
--- a/src/components/TheCommentsColumnBody.vue
+++ b/src/components/column-post/comments/TheCommentsColumnBody.vue
@@ -52,8 +52,8 @@
         />
       </Suspense>
     </template>
-    <StatusItem
-      ref="statusItemInstance"
+    <BaseStatusIndicator
+      ref="statusIndicatorInstance"
       v-show="!hasComments || !someThreadInstancesVisible || !allThreadInstancesVisible"
       :full-height="!hasDescription && (!hasComments || !someThreadInstancesVisible)"
       :message="!hasComments ? 'So far, no comments have been left on this story.' : undefined"
@@ -219,7 +219,7 @@ onMounted(() => {
 const { top: firstThreadTop } = useElementBounding(computed(() => threadInstances.value[0]));
 const firstThreadScrolledPastTop = computed(() => firstThreadTop.value < 83);
 
-const statusItemInstance = ref<ComponentPublicInstance | null>(null);
+const statusIndicatorInstance = ref<ComponentPublicInstance | null>(null);
 
 function scrollThreadIntoView(index: number) {
   index = Math.min(Math.max(index, 0), threadItemCount.value - 1);
@@ -237,7 +237,7 @@ function scrollThreadIntoView(index: number) {
   // (triggering loadThreadGroup)
   const element =
     index >= threadInstanceCount.value
-      ? statusItemInstance.value?.$el
+      ? statusIndicatorInstance.value?.$el
       : threadInstances.value[index].$el;
 
   scrollIntoView(element, {
diff --git a/src/components/TheCommentsColumnTitle.vue b/src/components/column-post/comments/TheCommentsColumnTitle.vue
similarity index 100%
rename from src/components/TheCommentsColumnTitle.vue
rename to src/components/column-post/comments/TheCommentsColumnTitle.vue
diff --git a/src/components/TheLinkColumnBody.vue b/src/components/column-post/link/TheLinkColumnBody.vue
similarity index 96%
rename from src/components/TheLinkColumnBody.vue
rename to src/components/column-post/link/TheLinkColumnBody.vue
index dbc2131..584cce8 100644
--- a/src/components/TheLinkColumnBody.vue
+++ b/src/components/column-post/link/TheLinkColumnBody.vue
@@ -32,7 +32,7 @@
           Open in External Tab
         </BaseButton>
       </template>
-      <StatusItem
+      <BaseStatusIndicator
         v-else
         full-height
       />
@@ -127,7 +127,7 @@ watch(
       otherErrorAssetIndexes[Math.floor(Math.random() * otherErrorAssetIndexes.length)];
 
     import(
-      `@/assets/images/error-${currentErrorAssetIndex + (view.darkColorSchemeIsActive ? '.dark' : '')}.png`
+      `../../../assets/images/error-${currentErrorAssetIndex + (view.darkColorSchemeIsActive ? '.dark' : '')}.png`
     ).then((imported) => {
       currentErrorAsset.value = imported.default;
     });
diff --git a/src/components/TheLinkColumnTitle.vue b/src/components/column-post/link/TheLinkColumnTitle.vue
similarity index 100%
rename from src/components/TheLinkColumnTitle.vue
rename to src/components/column-post/link/TheLinkColumnTitle.vue
diff --git a/src/components/PostsListItem.vue b/src/components/column-posts-list/PostsListItem.vue
similarity index 100%
rename from src/components/PostsListItem.vue
rename to src/components/column-posts-list/PostsListItem.vue
diff --git a/src/components/ThePostsListColumn.vue b/src/components/column-posts-list/ThePostsListColumn.vue
similarity index 98%
rename from src/components/ThePostsListColumn.vue
rename to src/components/column-posts-list/ThePostsListColumn.vue
index 7b11525..10e387a 100644
--- a/src/components/ThePostsListColumn.vue
+++ b/src/components/column-posts-list/ThePostsListColumn.vue
@@ -11,7 +11,7 @@
         <TheCategorySelect />
       </template>
       <template #right>
-        <RefreshButton
+        <TheRefreshButton
           :title="`Refresh ${content.currentCategoryName}`"
           @click="content.fetchPostIds()"
         />
diff --git a/src/components/ThePostsListColumnBody.vue b/src/components/column-posts-list/ThePostsListColumnBody.vue
similarity index 98%
rename from src/components/ThePostsListColumnBody.vue
rename to src/components/column-posts-list/ThePostsListColumnBody.vue
index 1e046cf..51adabc 100644
--- a/src/components/ThePostsListColumnBody.vue
+++ b/src/components/column-posts-list/ThePostsListColumnBody.vue
@@ -11,7 +11,7 @@
       :active="route.name === 'post' && postItem.id === content.currentPostItem?.id"
       @click="router.push({ name: 'post', params: { postId: postItem.id } })"
     />
-    <StatusItem
+    <BaseStatusIndicator
       :full-height="!content.currentCategoryHasSomePostItems"
       :message="statusMessage"
     />
diff --git a/src/components/TheCategorySelect.vue b/src/components/column-posts-list/header/TheCategorySelect.vue
similarity index 96%
rename from src/components/TheCategorySelect.vue
rename to src/components/column-posts-list/header/TheCategorySelect.vue
index b65dc2f..0bef1a5 100644
--- a/src/components/TheCategorySelect.vue
+++ b/src/components/column-posts-list/header/TheCategorySelect.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import BaseButton from '@/components/BaseButton.vue';
+import BaseButton from '@/components/base/BaseButton.vue';
 
 const view = useViewStore();
 const content = useContentStore();
diff --git a/src/components/RefreshButton.vue b/src/components/column-posts-list/header/TheRefreshButton.vue
similarity index 100%
rename from src/components/RefreshButton.vue
rename to src/components/column-posts-list/header/TheRefreshButton.vue
diff --git a/src/components/TheAboutDialog.vue b/src/components/column-posts-list/settings/TheAboutDialog.vue
similarity index 100%
rename from src/components/TheAboutDialog.vue
rename to src/components/column-posts-list/settings/TheAboutDialog.vue
diff --git a/src/components/TheLegalDialog.vue b/src/components/column-posts-list/settings/TheLegalDialog.vue
similarity index 100%
rename from src/components/TheLegalDialog.vue
rename to src/components/column-posts-list/settings/TheLegalDialog.vue
diff --git a/src/components/TheSettingsMenu.vue b/src/components/column-posts-list/settings/TheSettingsMenu.vue
similarity index 98%
rename from src/components/TheSettingsMenu.vue
rename to src/components/column-posts-list/settings/TheSettingsMenu.vue
index bac2128..16c4211 100644
--- a/src/components/TheSettingsMenu.vue
+++ b/src/components/column-posts-list/settings/TheSettingsMenu.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import BaseButton from '@/components/BaseButton.vue';
+import BaseButton from '@/components/base/BaseButton.vue';
 
 const view = useViewStore();
 
diff --git a/src/components/PageColumn.vue b/src/components/page/PageColumn.vue
similarity index 100%
rename from src/components/PageColumn.vue
rename to src/components/page/PageColumn.vue
diff --git a/src/components/PageColumnBody.vue b/src/components/page/PageColumnBody.vue
similarity index 100%
rename from src/components/PageColumnBody.vue
rename to src/components/page/PageColumnBody.vue
diff --git a/src/components/PageColumnControls.vue b/src/components/page/PageColumnControls.vue
similarity index 100%
rename from src/components/PageColumnControls.vue
rename to src/components/page/PageColumnControls.vue
diff --git a/src/router/index.ts b/src/router/index.ts
index 4507c7e..e87ad16 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import TheNoSelectionColumn from '@/components/TheNoSelectionColumn.vue';
-import ThePostColumns from '@/components/ThePostColumns.vue';
+import TheNoSelectionColumn from '@/components/column-post/TheNoSelectionColumn.vue';
+import ThePostColumns from '@/components/column-post/ThePostColumns.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),