chore: sort components into subfolders

app.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import ContextMenu from '~/components/ContextMenu.vue';
+import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
 import { render } from 'vue';
 
 const banner = useState("banner", () => false);

components/Guild/GuildOptionsMenu.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import { render } from 'vue';
-import InviteModal from './InviteModal.vue';
+import InviteModal from '../Modals/InviteModal.vue';
 
 const settings = [
   { name: "Invite", icon: "lucide:letter", action: openInviteModal }

components/Me/AddFriend.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '../UserInterface/Button.vue';
+import Button from '~/components/UserInterface/Button.vue';
 
 const inputField = ref<HTMLInputElement>();
 const { addFriend } = useApi();

components/Modals/InviteModal.vue

@@ -15,7 +15,7 @@
 
 <script lang="ts" setup>
 import type { InviteResponse, ModalProps } from '~/types/interfaces';
-import Button from './UserInterface/Button.vue';
+import Button from '~/components/UserInterface/Button.vue';
 
 const props = defineProps<ModalProps & { guildId: string }>();
 

components/Modals/Modal.vue

@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import type { ModalProps } from '~/types/interfaces';
-import Button from './UserInterface/Button.vue';
+import Button from '~/components/UserInterface/Button.vue';
 
 const props = defineProps<ModalProps>();
 const dialog = ref<HTMLDialogElement>();

layouts/client.vue

@@ -39,8 +39,8 @@
 
 <script lang="ts" setup>
 import { render } from 'vue';
-import Dropdown from '~/components/Dropdown.vue';
+import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
-import Modal from '~/components/Modal.vue';
+import Modal from '~/components/Modals/Modal.vue';
 import Button from '~/components/UserInterface/Button.vue';
 import type { GuildResponse } from '~/types/interfaces';
 
@@ -180,7 +180,7 @@ const members = [
 ];
 
 function createDropdown() {
-	const dropdown = h(Dropdown, { options });
+	const dropdown = h(GuildDropdown, { options });
 	const div = document.createElement("div");
 	div.classList.add("dropdown", "destroy-on-click");
 	if (createButtonContainer.value) {

pages/servers/[serverId]/channels/[channelId].vue

@@ -25,6 +25,9 @@
 
 <script lang="ts" setup>
 import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
+import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
+import MemberEntry from "~/components/Member/MemberEntry.vue";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 const route = useRoute();
 
@@ -41,8 +44,6 @@ const members = ref<GuildMemberResponse[]>();
 const showInvitePopup = ref(false);
 const showGuildSettings = ref(false);
 
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
-
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("channelid: servers:", servers);
 

utils/createContextMenu.ts

@@ -1,5 +1,5 @@
 import { render } from "vue";
-import ContextMenu from "~/components/ContextMenu.vue";
+import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
 import type { ContextMenuItem } from "~/types/interfaces";
 
 export default (e: MouseEvent, menuItems: ContextMenuItem[]) => {

utils/replyToMessage.ts

@@ -1,5 +1,5 @@
 import { render } from "vue";
-import MessageReply from "~/components/MessageReply.vue";
+import MessageReply from "~/components/UserInterface/MessageReply.vue";
 import type { MessageProps } from "~/types/props";
 
 export default (element: HTMLDivElement, props: MessageProps) => {