🔨 Build singleton of guild home page

package.json

@@ -15,7 +15,7 @@
     "postpublish": "pinst --enable"
   },
   "dependencies": {
-    "@mdi/font": "5.9.55",
+    "@mdi/font": "6.5.95",
     "@types/js-cookie": "^3.0.2",
     "@types/uuid": "^8.3.4",
     "@vue/cli": "^5.0.4",

src/components/guild/home/MusicPreviewComponent.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-card title="Music">
+    <template v-slot:prepend>
+      <v-icon color="yellow" size="x-large">mdi-music-circle</v-icon>
+    </template>
+    <v-container class="pt-0">
+      <v-row>
+        <v-col class="d-flex align-center">
+          <v-avatar color="grey-darken-3" size="x-large">
+            <v-icon icon="mdi-connection"></v-icon>
+          </v-avatar>
+          <v-row class="ml-3">
+            <v-col>
+              <h4>Not connected to voice channel</h4>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-progress-linear
+            model-value="0"
+            background-color="blue-grey"
+            color="lime"
+            height="10"
+            rounded
+          ></v-progress-linear>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col class="d-flex justify-center">
+          <v-btn icon="mdi-play" class="mr-2" variant="outlined"></v-btn>
+          <v-btn icon="mdi-skip-next" class="mr-2" variant="outlined"></v-btn>
+          <v-btn icon="mdi-stop" class="mr-2" variant="outlined"></v-btn>
+          <v-btn icon="mdi-eject" class="mr-2" variant="outlined"></v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-overlay
+      v-model="loading"
+      contained
+      class="align-center justify-center"
+      persistent
+    >
+    </v-overlay>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const loading = ref(false);
+</script>
+
+<style scoped></style>

src/components/guild/home/SettingPreviewComponent.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-card title="Guild Settings">
+    <template v-slot:prepend>
+      <v-icon color="yellow" size="x-large">mdi-cog</v-icon>
+    </template>
+  </v-card>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/components/guild/home/StatsPreviewComponent.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-card title="Stats">
+    <template v-slot:prepend>
+      <v-icon color="yellow" size="x-large">mdi-crown</v-icon>
+    </template>
+  </v-card>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/GuildHomeView.vue

@@ -1,11 +1,60 @@
 <template>
-  {{ route.params.guildId }}
+  <v-row>
+    <v-col>
+      <v-card>
+        <v-card-title class="d-flex">
+          <v-avatar :color="guild?.iconUrl ? '' : 'grey-darken-3'" class="mr-3">
+            <v-img v-if="guild?.iconUrl" :src="guild.iconUrl"></v-img>
+            <template v-if="!guild?.iconUrl">{{ guild?.name[1] }}</template>
+          </v-avatar>
+          <span class="mr-auto">{{ guild?.name }}</span>
+          <v-icon
+            icon="mdi-account-wrench"
+            color="green"
+            v-if="guild?.canManage"
+          ></v-icon>
+        </v-card-title>
+      </v-card>
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-col>
+      <v-container>
+        <v-row>
+          <v-col cols="6">
+            <MusicPreviewComponent></MusicPreviewComponent>
+          </v-col>
+          <v-col cols="6">
+            <StatsPreviewComponent></StatsPreviewComponent>
+          </v-col>
+          <v-col cols="6">
+            <SettingPreviewComponent />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-col>
+  </v-row>
 </template>
 
 <script setup lang="ts">
+import { useMutualGuildsStore } from "@/stores/mutualGuilds";
+import { ref, watch } from "vue";
 import { useRoute } from "vue-router";
+import SettingPreviewComponent from "../components/guild/home/SettingPreviewComponent.vue";
+import MusicPreviewComponent from "../components/guild/home/MusicPreviewComponent.vue";
+import StatsPreviewComponent from "../components/guild/home/StatsPreviewComponent.vue";
 
+const guildStore = useMutualGuildsStore();
 const route = useRoute();
+
+const guild = ref(guildStore.getGuild(route.params.guildId as string));
+
+watch(
+  () => route.params.guildId,
+  (value, oldValue) => {
+    guild.value = guildStore.getGuild(value as string);
+  }
+);
 </script>
 
 <style scoped></style>

yarn.lock

@@ -1529,10 +1529,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdi/font@npm:5.9.55":
-  version: 5.9.55
-  resolution: "@mdi/font@npm:5.9.55"
-  checksum: 05d8e30d5c5bd0992bde4827ddcde0e4e00882ae70d4355c69d4db93d9b69c75d3bde6b414bea90f5f8ad46336837b082d64a26761a12b1548e28cfe765b0e4f
+"@mdi/font@npm:6.5.95":
+  version: 6.5.95
+  resolution: "@mdi/font@npm:6.5.95"
+  checksum: 6333a2e15462b55e4a981c8f1a249254090a9c0e242f6331f75403897241bbc94d9470a660bf0c596471e47a68e07cd630e0984cb576e1e12a4d6e8bfc02198c
   languageName: node
   linkType: hard
 
@@ -3611,7 +3611,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "claptrap-ui@workspace:."
   dependencies:
-    "@mdi/font": 5.9.55
+    "@mdi/font": 6.5.95
     "@rushstack/eslint-patch": ^1.1.0
     "@types/js-cookie": ^3.0.2
     "@types/jsdom": ^16.2.14