feat: Add dynamic views to Help page

- Add imports and computed property to dynamically render views on the Help page.
- Include the Discord view if the server discord ID is provided.
- Include the Request view if there are any requests available.
- Views are fetched from the Carousel component props.

apps/wizarr-frontend/src/modules/help/views/Help.vue

@@ -24,13 +24,18 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { useServerStore } from "@/stores/server";
+import { mapState } from "pinia";
 
 import Carousel from "@/components/Carousel.vue";
 import WizarrLogo from "@/components/WizarrLogo.vue";
 
 import Welcome from "../components/Welcome.vue";
 import Download from "../components/Download.vue";
 import Discord from "../components/Discord.vue";
+import Request from "../components/Request.vue";
+
+import type { CarouselViewProps } from "@/components/Carousel.vue";
 
 export default defineComponent({
  name: "HelpView",
@@ -41,7 +46,11 @@ export default defineComponent({
  data() {
  return {
  currentView: 1,
- views: [
+ };
+ },
+ computed: {
+ views() {
+ const views: CarouselViewProps["views"] = [
  {
  name: "welcome",
  view: Welcome,
@@ -50,12 +59,28 @@ export default defineComponent({
  name: "download",
  view: Download,
  },
- // {
- // name: "discord",
- // view: Discord,
- // },
- ],
- };
+ ];
+
+ if (this.settings.server_discord_id && this.settings.server_discord_id !== "") {
+ views.push({
+ name: "discord",
+ view: Discord,
+ });
+ }
+
+ if (this.requests && this.requests.length > 0) {
+ views.push({
+ name: "request",
+ view: Request,
+ props: {
+ requestURL: this.requests,
+ },
+ });
+ }
+
+ return views;
+ },
+ ...mapState(useServerStore, ["settings", "requests"]),
  },
 });
 </script>