Reorganize component files

Author: jonamil

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/HeaderLogo.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/BaseButton.vue renamed to src/components/base/BaseButton.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" />