feat(dashboard): split chunks

frontend/dashboard/codegen.ts

@@ -1,8 +1,8 @@
+import type { CodegenConfig } from '@graphql-codegen/cli'
+
 import { join, resolve } from 'node:path'
 import * as process from 'node:process'
 
-import type { CodegenConfig } from '@graphql-codegen/cli'
-
 const schemaDir = resolve(
 	join(
 		process.cwd(),
@@ -34,6 +34,15 @@ const config: CodegenConfig = {
 			config: {
 				useTypeImports: true,
 			},
+			presetConfig: {
+				// persistedDocuments: {
+				// 	hashAlgorithm: (operation: string) => {
+				// 		const h = new Bun.CryptoHasher('sha256')
+				// 		h.update(operation)
+				// 		return h.digest('hex')
+				// 	},
+				// },
+			},
 			// presetConfig: {
 			// 	onExecutableDocumentNode: generatePersistHash,
 			// },

frontend/dashboard/package.json

@@ -65,6 +65,7 @@
 		"tinycolor2": "1.6.0",
 		"vaul-vue": "0.4.1",
 		"vee-validate": "4.15.1",
+		"vite-bundle-analyzer": "1.3.2",
 		"vue": "catalog:",
 		"vue-draggable-plus": "0.5.6",
 		"vue-i18n": "11.2.2",

frontend/dashboard/src/api/overlays/kappagen.ts

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 
 import type { KappagenOverlaySettingsFragment } from '@/gql/graphql.ts'
 
-import { useProfile } from '@/api'
+import { useProfile } from '@/api/auth'
 import { graphql } from '@/gql'
 
 graphql(`
@@ -137,12 +137,12 @@ export const useKappagenApi = createGlobalState(() => {
 	})
 
 	const { executeMutation: updateKappagen, fetching: isUpdating } = useMutation(
-		KappagenOverlayUpdateMutation,
+		KappagenOverlayUpdateMutation
 	)
 
 	const selectedDashboard = computed(() => {
 		return profile.value?.availableDashboards.find(
-			(d) => d.id === profile.value?.selectedDashboardId,
+			(d) => d.id === profile.value?.selectedDashboardId
 		)
 	})
 
@@ -161,12 +161,14 @@ export const useKappagenApi = createGlobalState(() => {
 	})
 
 	const availableAnimations = computed<string[]>(() => {
-		const data = subscriptionData.value?.overlaysKappagen as KappagenOverlaySettingsFragment | undefined
+		const data = subscriptionData.value?.overlaysKappagen as
+			| KappagenOverlaySettingsFragment
+			| undefined
 
 		return (
-			data?.animations?.map((a) => a.style)
-			|| kappagenData.value?.overlaysKappagenAvailableAnimations
-			|| []
+			data?.animations?.map((a) => a.style) ||
+			kappagenData.value?.overlaysKappagenAvailableAnimations ||
+			[]
 		)
 	})
 

frontend/dashboard/src/components/dashboard/audit-logs.vue

@@ -3,7 +3,7 @@ import { ExternalLinkIcon } from 'lucide-vue-next'
 import { UseTimeAgo } from '@vueuse/components'
 import { useI18n } from 'vue-i18n'
 
-import { useProfile } from '@/api'
+import { useProfile } from '@/api/auth'
 import { mapOperationTypeToTranslate, mapSystemToTranslate, useAuditLogs } from '@/api/audit-logs'
 import Card from '@/components/dashboard/card.vue'
 import { Badge, type BadgeVariants } from '@/components/ui/badge'

frontend/dashboard/src/components/dashboard/chat.vue

@@ -4,7 +4,7 @@ import { computed, ref } from 'vue'
 
 import Card from './card.vue'
 
-import { useProfile } from '@/api/index.js'
+import { useProfile } from '@/api/auth'
 import { useTheme } from '@/composables/use-theme.js'
 import { Button } from '@/components/ui/button'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'

frontend/dashboard/src/components/dashboard/events.vue

@@ -22,7 +22,7 @@ import ReSubscribe from './events/resubscribe.vue'
 import SubGift from './events/subgift.vue'
 import Subscribe from './events/subscribe.vue'
 
-import { useProfile } from '@/api/index.js'
+import { useProfile } from '@/api/auth'
 import UnbanRequestCreated from '@/components/dashboard/events/unban-request-created.vue'
 import UnbanRequestResolved from '@/components/dashboard/events/unban-request-resolved.vue'
 import { useEvents } from '@/features/dashboard/widgets/composables/events'

frontend/dashboard/src/components/dashboard/stream.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 
 import Card from './card.vue'
 
-import { useProfile } from '@/api/index.js'
+import { useProfile } from '@/api/auth'
 
 const { data: profile } = useProfile()
 

frontend/dashboard/src/components/files/files.vue

@@ -5,7 +5,7 @@ import { toast } from 'vue-sonner'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useFilesApi } from '@/api/index.js'
+import { useFilesApi } from '@/api/files'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Button, FileButton } from '@/components/ui/button'
 import { Progress } from '@/components/ui/progress'

frontend/dashboard/src/components/games/8ball.vue

@@ -3,7 +3,7 @@ import { MessageCircle, Trash } from 'lucide-vue-next'
 import { computed, ref, toRaw, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useProfile } from '@/api'
+import { useProfile } from '@/api/auth'
 import { useGamesApi } from '@/api/games/games.js'
 import Card from '@/components/games/card.vue'
 import { Button } from '@/components/ui/button'

frontend/dashboard/src/components/games/card.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
 
 import type { FunctionalComponent } from 'vue'
 
-import { useUserAccessFlagChecker } from '@/api'
+import { useUserAccessFlagChecker } from '@/api/auth'
 import Card from '@/components/card/card.vue'
 import { Button } from '@/components/ui/button'
 import { ChannelRolePermissionEnum } from '@/gql/graphql'

frontend/dashboard/src/components/integrations/donatepay.vue

@@ -2,7 +2,7 @@
 import { ExternalLink, Eye, EyeOff } from 'lucide-vue-next'
 import { ref, watch } from 'vue'
 
-import { useDonatepayIntegration } from '@/api/index.js'
+import { useDonatepayIntegration } from '@/api/integrations/donatepay'
 import { useIntegrationsPageData } from '@/api/integrations/integrations-page.ts'
 import DonatePaySVG from '@/assets/integrations/donatepay.svg?use'
 import DonateDescription from '@/components/integrations/helpers/donateDescription.vue'

frontend/dashboard/src/components/integrations/streamlabs.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import { useStreamlabsIntegration } from '@/api/index.js';
+import { useStreamlabsIntegration } from '@/api/integrations/oauth';
 import IconStreamLabs from '@/assets/integrations/streamlabs.svg?use';
 import DonateDescription from '@/components/integrations/helpers/donateDescription.vue';
 import OauthComponent from '@/components/integrations/variants/oauth.vue';

frontend/dashboard/src/components/integrations/variants/oauth.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n'
 
 import type { FunctionalComponent } from 'vue'
 
-import { useUserAccessFlagChecker } from '@/api'
+import { useUserAccessFlagChecker } from '@/api/auth'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import {

frontend/dashboard/src/components/integrations/variants/withSettings.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 
 import type { FunctionalComponent } from 'vue'
 
-import { useUserAccessFlagChecker } from '@/api'
+import { useUserAccessFlagChecker } from '@/api/auth'
 import { Card, CardFooter, CardHeader } from '@/components/ui/card'
 import SettingsModal from '@/components/ui/settings-modal.vue'
 import { ChannelRolePermissionEnum } from '@/gql/graphql'

frontend/dashboard/src/components/overlays/card.vue

@@ -6,7 +6,7 @@ import { useCopyOverlayLink } from './copyOverlayLink.js'
 
 import type { FunctionalComponent } from 'vue'
 
-import { useUserAccessFlagChecker } from '@/api/index.js'
+import { useUserAccessFlagChecker } from '@/api/auth'
 import Card from '@/components/card/card.vue'
 import { Button } from '@/components/ui/button'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'

frontend/dashboard/src/components/registry/overlays/edit.vue

@@ -5,7 +5,7 @@ import { useRoute, useRouter } from 'vue-router'
 import OverlayBuilder from '@/features/overlay-builder/OverlayBuilder.vue'
 import {
 	useChannelOverlayByIdQuery,
-} from '@/api/index.js'
+} from '@/api/overlays/custom'
 import type { OverlayProject } from '@/features/overlay-builder/types'
 import { useOverlaySave } from '@/features/overlay-builder/composables/useOverlaySave'
 import { useOverlayInstantSave } from '@/features/overlay-builder/composables/useOverlayInstantSave'

frontend/dashboard/src/components/songRequests/hook.ts

@@ -1,7 +1,7 @@
 import { createGlobalState, useWebSocket } from '@vueuse/core'
 import { computed, onMounted, ref, watch } from 'vue'
 
-import { useProfile } from '@/api/index.js'
+import { useProfile } from '@/api/auth'
 import { useSongRequestsApi } from '@/api/song-requests'
 
 export interface Video {
@@ -62,16 +62,15 @@ export const useYoutubeSocket = createGlobalState(() => {
 				...settings,
 				denyList: {
 					...settings.denyList,
-					users: [
-						...settings.denyList.users,
-						userId,
-					],
+					users: [...settings.denyList.users, userId],
 				},
 			},
 		})
 
-		callWsSkip(videos.value.filter(video => video.orderedById === userId).map(video => video.id))
-		videos.value = videos.value.filter(video => video.orderedById !== userId)
+		callWsSkip(
+			videos.value.filter((video) => video.orderedById === userId).map((video) => video.id)
+		)
+		videos.value = videos.value.filter((video) => video.orderedById !== userId)
 	}
 
 	async function banSong(videoId: string) {
@@ -83,18 +82,15 @@ export const useYoutubeSocket = createGlobalState(() => {
 				...settings,
 				denyList: {
 					...settings.denyList,
-					songs: [
-						...settings.denyList.songs,
-						videoId,
-					],
+					songs: [...settings.denyList.songs, videoId],
 				},
 			},
 		})
 
-		const video = videos.value.find(video => video.videoId === videoId)
+		const video = videos.value.find((video) => video.videoId === videoId)
 
 		callWsSkip(video!.id)
-		videos.value = videos.value.filter(video => video.videoId !== videoId)
+		videos.value = videos.value.filter((video) => video.videoId !== videoId)
 	}
 
 	watch(websocket.data, (data) => {
@@ -110,7 +106,7 @@ export const useYoutubeSocket = createGlobalState(() => {
 		}
 
 		if (parsedData.eventName === 'removeTrack') {
-			videos.value = videos.value.filter(video => video.id !== parsedData.data.id)
+			videos.value = videos.value.filter((video) => video.id !== parsedData.data.id)
 		}
 	})
 
@@ -132,16 +128,16 @@ export const useYoutubeSocket = createGlobalState(() => {
 
 	function deleteVideo(id: string) {
 		callWsSkip(id)
-		videos.value = videos.value.filter(video => video.id !== id)
+		videos.value = videos.value.filter((video) => video.id !== id)
 	}
 
 	function deleteAllVideos() {
-		callWsSkip(videos.value.map(video => video.id))
+		callWsSkip(videos.value.map((video) => video.id))
 		videos.value = []
 	}
 
 	function moveVideo(id: string, newPosition: number) {
-		const currentIndex = videos.value.findIndex(video => video.id === id)
+		const currentIndex = videos.value.findIndex((video) => video.id === id)
 		const itemToMove = videos.value.splice(currentIndex, 1)[0]
 		videos.value.splice(newPosition, 0, itemToMove)
 

frontend/dashboard/src/components/songRequests/player.vue

@@ -18,7 +18,7 @@ import { useLocalStorage, useScriptTag } from '@vueuse/core'
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useProfile } from '@/api/index.js'
+import { useProfile } from '@/api/auth'
 import { useYoutubeSocket } from '@/components/songRequests/hook.js'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardFooter, CardTitle } from '@/components/ui/card'

frontend/dashboard/src/components/twitch-category-search-shadcn-multiple.vue

@@ -14,7 +14,7 @@ import TagsInput from './ui/tags-input/TagsInput.vue'
 import TagsInputItem from './ui/tags-input/TagsInputItem.vue'
 import TagsInputItemDelete from './ui/tags-input/TagsInputItemDelete.vue'
 
-import { useTwitchGetCategories, useTwitchSearchCategories } from '@/api'
+import { useTwitchGetCategories, useTwitchSearchCategories } from '@/api/twitch'
 
 defineProps<{ id?: string }>()
 

frontend/dashboard/src/components/twitch-category-selector.vue

@@ -3,7 +3,7 @@ import { Check, ChevronsUpDown } from 'lucide-vue-next'
 import { refDebounced } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
-import { useTwitchGetCategories, useTwitchSearchCategories } from '@/api'
+import { useTwitchGetCategories, useTwitchSearchCategories } from '@/api/twitch'
 import { Button } from '@/components/ui/button'
 import {
 	Command,

frontend/dashboard/src/components/twitchUsers/twitch-user-select.vue

@@ -3,7 +3,7 @@ import { refDebounced } from '@vueuse/core'
 import { XIcon } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 
-import { useTwitchGetUsers, useTwitchSearchChannels } from '@/api'
+import { useTwitchGetUsers, useTwitchSearchChannels } from '@/api/twitch'
 import { Command, CommandGroup, CommandItem, CommandList } from '@/components/ui/command'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { resolveUserName } from '@/helpers'

frontend/dashboard/src/components/twitchUsers/twitch-users-select.vue

@@ -2,7 +2,7 @@
 import { refDebounced } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
-import { useTwitchGetUsers, useTwitchSearchChannels } from '@/api'
+import { useTwitchGetUsers, useTwitchSearchChannels } from '@/api/twitch'
 import { Command, CommandGroup, CommandItem, CommandList } from '@/components/ui/command'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { TagsInput, TagsInputItem, TagsInputItemDelete } from '@/components/ui/tags-input'

frontend/dashboard/src/features/alerts/composables/use-alerts-information.ts

@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue'
 
-import { useProfile } from '@/api'
+import { useProfile } from '@/api/auth'
 
 export function useAlertsInformation() {
 	const { data: profile } = useProfile()

frontend/dashboard/src/features/alerts/ui/alerts-create-button.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n'
 
 import AlertsDialog from './alerts-dialog.vue'
 
-import { useProfile, useUserAccessFlagChecker } from '@/api'
+import { useProfile, useUserAccessFlagChecker } from '@/api/auth'
 import { useAlertsApi } from '@/api/alerts'
 import { Button } from '@/components/ui/button'
 import { ChannelRolePermissionEnum } from '@/gql/graphql'

frontend/dashboard/src/features/alerts/ui/alerts-dialog-content.vue

@@ -7,7 +7,7 @@ import { z } from 'zod'
 
 import AlertsDialogContentAudio from './alerts-dialog-content-audio.vue'
 
-import { useTwitchGetUsers } from '@/api'
+import { useTwitchGetUsers } from '@/api/twitch'
 import { type Alert, useAlertsApi } from '@/api/alerts.js'
 import { useCommandsApi } from '@/api/commands/commands.js'
 import { useGreetingsApi } from '@/api/greetings.js'

frontend/dashboard/src/features/chat-alerts/ui/settings.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n'
 
 import { type FormKey, useForm } from '../composables/use-form.js'
 
-import { useUserAccessFlagChecker } from '@/api/index.js'
+import { useUserAccessFlagChecker } from '@/api/auth'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'

frontend/dashboard/src/features/commands/commands.vue

@@ -6,7 +6,7 @@ import { useRoute } from 'vue-router'
 
 import List from './ui/list.vue'
 
-import { useProfile, useUserAccessFlagChecker } from '@/api'
+import { useProfile, useUserAccessFlagChecker } from '@/api/auth'
 import { useCommandsApi } from '@/api/commands/commands.js'
 import ManageGroups from '@/components/commands/manageGroups.vue'
 import DialogOrSheet from '@/components/dialog-or-sheet.vue'

frontend/dashboard/src/features/commands/ui/form/form-responses.vue

@@ -16,7 +16,7 @@ import { useCommandEditV2 } from '../../composables/use-command-edit-v2'
 
 import type { FormSchema } from '../../composables/use-command-edit-v2'
 
-import { useProfile } from '@/api'
+import { useProfile } from '@/api/auth'
 
 import TwitchCategorySearchShadcnMultiple from '@/components/twitch-category-search-shadcn-multiple.vue'
 import { Alert, AlertDescription } from '@/components/ui/alert'

frontend/dashboard/src/features/commands/ui/list-actions.vue

@@ -6,7 +6,7 @@ import { useRouter } from 'vue-router'
 
 import type { Command } from '@/gql/graphql'
 
-import { useUserAccessFlagChecker } from '@/api'
+import { useUserAccessFlagChecker } from '@/api/auth'
 import { useCommandsApi } from '@/api/commands/commands.js'
 import ActionConfirmation from '@/components/ui/action-confirm.vue'
 import { Button } from '@/components/ui/button'