Reorganize component files

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']
   }
 }

src/components/BaseIcon.vue → 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>

src/components/ThePrimaryColumn.vue → 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" />

src/components/TheCommentsColumnBody.vue → 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, {

src/components/TheLinkColumnBody.vue → 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;
     });

src/components/ThePostsListColumn.vue → src/components/column-posts-list/ThePostsListColumn.vue

@@ -11,7 +11,7 @@
         <TheCategorySelect />
       </template>
       <template #right>
-        <RefreshButton
+        <TheRefreshButton
           :title="`Refresh ${content.currentCategoryName}`"
           @click="content.fetchPostIds()"
         />

src/components/ThePostsListColumnBody.vue → 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"
     />

src/components/TheCategorySelect.vue → 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();

src/components/TheSettingsMenu.vue → 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();
 

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),