From 65cc0bf14d1a82599ddcf2b0e5e2c4bbb8b02024 Mon Sep 17 00:00:00 2001
From: Vitalij Ryndin <crashmax.dev@gmail.com>
Date: Tue, 7 May 2024 17:07:17 +0800
Subject: [PATCH] feat(dashboard): greetings gql (#727)

---
 .../dashboard/src/api/admin/notifications.ts  |  13 +-
 frontend/dashboard/src/api/greetings.ts       |   4 +-
 .../src/components/dialog-or-sheet.vue        |   6 +
 .../src/components/greetings/modal.vue        | 121 ------------
 .../src/components/twitchUsers/single.vue     | 148 +++++++--------
 .../src/components/ui/alert/Alert.vue         |  16 ++
 .../components/ui/alert/AlertDescription.vue  |  14 ++
 .../src/components/ui/alert/AlertTitle.vue    |  14 ++
 .../src/components/ui/alert/index.ts          |  23 +++
 .../src/components/variable-input.vue         |  51 ++---
 .../components/notifications-form.vue         |   4 +-
 .../composables/use-notifications-table.ts    |  26 +--
 .../components/users-table-cell-user.vue      |  17 +-
 .../composables/use-users-table.ts            |   5 +-
 ...-community-emotes-details-users-history.ts |   5 +-
 .../use-community-emotes-details-users-top.ts |   5 +-
 .../composables/use-community-users-table.ts  |  41 ++---
 .../composables/use-greetings-table.ts        |  85 +++++++++
 .../src/features/greetings/greetings.vue      |  15 ++
 .../greetings/ui/greetings-create-button.vue  |  23 +++
 .../greetings/ui/greetings-dialog.vue         | 151 +++++++++++++++
 .../greetings/ui/greetings-information.vue    |  20 ++
 .../greetings/ui/greetings-table-actions.vue  |  49 +++++
 frontend/dashboard/src/layout/page-layout.vue |  12 +-
 frontend/dashboard/src/locales/en.json        |   1 +
 frontend/dashboard/src/pages/Greetings.vue    | 174 ------------------
 frontend/dashboard/src/pages/greetings.vue    |  25 +++
 frontend/dashboard/src/plugins/router.ts      |  79 ++++----
 28 files changed, 658 insertions(+), 489 deletions(-)
 delete mode 100644 frontend/dashboard/src/components/greetings/modal.vue
 create mode 100644 frontend/dashboard/src/components/ui/alert/Alert.vue
 create mode 100644 frontend/dashboard/src/components/ui/alert/AlertDescription.vue
 create mode 100644 frontend/dashboard/src/components/ui/alert/AlertTitle.vue
 create mode 100644 frontend/dashboard/src/components/ui/alert/index.ts
 create mode 100644 frontend/dashboard/src/features/greetings/composables/use-greetings-table.ts
 create mode 100644 frontend/dashboard/src/features/greetings/greetings.vue
 create mode 100644 frontend/dashboard/src/features/greetings/ui/greetings-create-button.vue
 create mode 100644 frontend/dashboard/src/features/greetings/ui/greetings-dialog.vue
 create mode 100644 frontend/dashboard/src/features/greetings/ui/greetings-information.vue
 create mode 100644 frontend/dashboard/src/features/greetings/ui/greetings-table-actions.vue
 delete mode 100644 frontend/dashboard/src/pages/Greetings.vue
 create mode 100644 frontend/dashboard/src/pages/greetings.vue

diff --git a/frontend/dashboard/src/api/admin/notifications.ts b/frontend/dashboard/src/api/admin/notifications.ts
index 86ef00bc5..6b4875b06 100644
--- a/frontend/dashboard/src/api/admin/notifications.ts
+++ b/frontend/dashboard/src/api/admin/notifications.ts
@@ -19,7 +19,7 @@ export function useQueryNotifications() {
 					createdAt
 				}
 			}
-		`)
+		`),
 	})
 
 	const { data: newNotifications } = useSubscription({
@@ -31,7 +31,7 @@ export function useQueryNotifications() {
 					createdAt
 				}
 			}
-		`)
+		`),
 	})
 
 	watch(newNotifications, (newNotification) => {
@@ -50,11 +50,11 @@ export function useQueryNotifications() {
 export function useAdminNotifications() {
 	const useQueryNotifications = (variables: Ref<AdminNotificationsParams>) => useQuery({
 		context: {
-			additionalTypenames: [invalidationKey]
+			additionalTypenames: [invalidationKey],
 		},
 		get variables() {
 			return {
-				opts: variables.value
+				opts: variables.value,
 			}
 		},
 		query: graphql(`
@@ -66,6 +66,7 @@ export function useAdminNotifications() {
 						text
 						userId
 						twitchProfile {
+							login
 							displayName
 							profileImageUrl
 						}
@@ -73,7 +74,7 @@ export function useAdminNotifications() {
 					}
 				}
 			}
-		`)
+		`),
 	})
 
 	const useMutationCreateNotification = () => useMutation(graphql(`
@@ -102,6 +103,6 @@ export function useAdminNotifications() {
 		useQueryNotifications,
 		useMutationCreateNotification,
 		useMutationDeleteNotification,
-		useMutationUpdateNotifications
+		useMutationUpdateNotifications,
 	}
 }
diff --git a/frontend/dashboard/src/api/greetings.ts b/frontend/dashboard/src/api/greetings.ts
index 3b92ae5bb..28b218520 100644
--- a/frontend/dashboard/src/api/greetings.ts
+++ b/frontend/dashboard/src/api/greetings.ts
@@ -29,7 +29,7 @@ export const useGreetingsApi = defineStore('api/greetings', () => {
 					}
 				}
 			}
-		`)
+		`),
 	})
 
 	const useMutationCreateGreetings = () => useMutation(graphql(`
@@ -58,6 +58,6 @@ export const useGreetingsApi = defineStore('api/greetings', () => {
 		useQueryGreetings,
 		useMutationCreateGreetings,
 		useMutationUpdateGreetings,
-		useMutationRemoveGreetings
+		useMutationRemoveGreetings,
 	}
 })
diff --git a/frontend/dashboard/src/components/dialog-or-sheet.vue b/frontend/dashboard/src/components/dialog-or-sheet.vue
index f3b6e9bb1..b388c2564 100644
--- a/frontend/dashboard/src/components/dialog-or-sheet.vue
+++ b/frontend/dashboard/src/components/dialog-or-sheet.vue
@@ -5,12 +5,18 @@ import { DialogContent } from '@/components/ui/dialog'
 import { SheetContent } from '@/components/ui/sheet'
 
 const { width: windowWidth } = useWindowSize()
+
+function onInteractOutside(event: any) {
+	if ((event.target as HTMLElement)?.closest('[role="dialog"]')) return
+	event.preventDefault()
+}
 </script>
 
 <template>
 	<DialogContent
 		v-if="windowWidth > 800"
 		class="max-w-3xl overflow-hidden rounded-2xl outline-none"
+		@interact-outside="onInteractOutside"
 	>
 		<slot />
 	</DialogContent>
diff --git a/frontend/dashboard/src/components/greetings/modal.vue b/frontend/dashboard/src/components/greetings/modal.vue
deleted file mode 100644
index 76a617b0f..000000000
--- a/frontend/dashboard/src/components/greetings/modal.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup lang='ts'>
-import {
-	type FormInst,
-	type FormRules,
-	type FormItemRule,
-	NForm,
-	NSpace,
-	NFormItem,
-	NButton,
-	NSwitch,
-} from 'naive-ui';
-import { ref, onMounted, toRaw } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import TwitchUserSearch from '@/components/twitchUsers/single.vue';
-import VariableInput from '@/components/variable-input.vue';
-import { useGreetingsApi, type Greetings } from '@/api/greetings';
-import type { GreetingsCreateInput } from '@/gql/graphql';
-
-const props = defineProps<{
-	greeting?: Greetings | null
-}>();
-const emits = defineEmits<{
-	close: []
-}>();
-
-const formRef = ref<FormInst | null>(null);
-const formValue = ref<Omit<Greetings, 'twitchProfile'>>({
-	id: '',
-	text: '',
-	userId: '',
-	enabled: true,
-	isReply: true,
-});
-
-onMounted(() => {
-	if (!props.greeting) return;
-	formValue.value = structuredClone(toRaw(props.greeting));
-});
-
-const greetingsApi = useGreetingsApi();
-const greetingsUpdate = greetingsApi.useMutationUpdateGreetings();
-const greetingsCreate = greetingsApi.useMutationCreateGreetings();
-
-async function save() {
-	if (!formRef.value || !formValue.value) return;
-	await formRef.value.validate();
-
-	const data = formValue.value;
-	const opts: GreetingsCreateInput = {
-		enabled: data.enabled,
-		isReply: data.isReply,
-		text: data.text,
-		userId: data.userId,
-	}
-
-	if (data.id) {
-		await greetingsUpdate.executeMutation({
-			id: data.id,
-			opts,
-		});
-	} else {
-		await greetingsCreate.executeMutation({ opts });
-	}
-
-	emits('close');
-}
-
-const { t } = useI18n();
-
-const rules: FormRules = {
-	userId: {
-		trigger: ['input', 'blur'],
-		validator: (_: FormItemRule, value: string) => {
-			if (!value || !value.length) {
-				return new Error(t('greetings.validations.userName'));
-			}
-
-			return true;
-		},
-	},
-	text: {
-		trigger: ['input', 'blur'],
-		validator: (_: FormItemRule, value: string) => {
-			if (!value || !value.length) {
-				return new Error(t('greetings.validations.textRequired'));
-			}
-
-			return true;
-		},
-	},
-};
-</script>
-
-<template>
-	<n-form
-		ref="formRef"
-		:model="formValue"
-		:rules="rules"
-	>
-		<n-space vertical class="w-full">
-			<n-form-item :label="t('sharedTexts.userName')" path="userId" show-require-mark>
-				<twitch-user-search
-					v-model="formValue.userId"
-					:initial-user-id="props.greeting?.userId"
-				/>
-			</n-form-item>
-			<n-form-item :label="t('sharedTexts.response')" path="text" show-require-mark>
-				<variable-input v-model="formValue.text" input-type="textarea" />
-			</n-form-item>
-
-			<n-form-item :label="t('sharedTexts.reply.text')" path="text">
-				<n-switch v-model:value="formValue.isReply" />
-			</n-form-item>
-		</n-space>
-
-		<n-button secondary type="success" block @click="save">
-			{{ t('sharedButtons.save') }}
-		</n-button>
-	</n-form>
-</template>
diff --git a/frontend/dashboard/src/components/twitchUsers/single.vue b/frontend/dashboard/src/components/twitchUsers/single.vue
index 3c7433b95..68b0e6802 100644
--- a/frontend/dashboard/src/components/twitchUsers/single.vue
+++ b/frontend/dashboard/src/components/twitchUsers/single.vue
@@ -1,116 +1,120 @@
 <script setup lang='ts'>
-import type { Channel, TwitchSearchChannelsRequest, TwitchUser } from '@twir/api/messages/twitch/twitch';
-import { refDebounced } from '@vueuse/core';
-import { NSelect, NTag, NAvatar } from 'naive-ui';
-import { computed, ref, h } from 'vue';
+import { refDebounced } from '@vueuse/core'
+import { NAvatar, NSelect, NTag } from 'naive-ui'
+import { computed, h, ref } from 'vue'
 
-import { useTwitchSearchChannels, useTwitchGetUsers } from '@/api/index.js';
-import { resolveUserName } from '@/helpers';
+import type { Channel, TwitchSearchChannelsRequest, TwitchUser } from '@twir/api/messages/twitch/twitch'
 
-// eslint-disable-next-line no-undef
-const userId = defineModel<string | null>({ default: null });
+import { useTwitchGetUsers, useTwitchSearchChannels } from '@/api/index.js'
+import { resolveUserName } from '@/helpers'
 
 const props = withDefaults(defineProps<{
-	initialUserId?: string | null;
+	initialUserId?: string | null
 	twirOnly?: boolean
 }>(), {
 	twirOnly: false,
 	initialUserId: null,
-});
+})
+
+const userId = defineModel<string | null>({ default: null })
 
 const getUsers = useTwitchGetUsers({
 	ids: [props.initialUserId ?? ''],
-});
+})
 
-const userName = ref('');
-const userNameDebounced = refDebounced(userName, 500);
+const userName = ref('')
+const userNameDebounced = refDebounced(userName, 500)
 
 const searchParams = computed<TwitchSearchChannelsRequest>(() => ({
 	query: userNameDebounced.value,
 	twirOnly: props.twirOnly,
-}));
-const twitchSearch = useTwitchSearchChannels(searchParams);
+}))
+const twitchSearch = useTwitchSearchChannels(searchParams)
 
-function mapOptions(users: (TwitchUser | Channel)[] ) {
+function mapOptions(users: (TwitchUser | Channel)[]) {
 	return users.map((user) => ({
 		label: resolveUserName(user.login, user.displayName),
 		value: user.id,
 		profileImageUrl: user.profileImageUrl,
-	}));
+	}))
 }
 
 const options = computed(() => {
-	const searchUsers = twitchSearch.data.value?.channels ?? [];
-	const initialUsers = getUsers.data.value?.users ?? [];
+	const searchUsers = twitchSearch.data.value?.channels ?? []
+	const initialUsers = getUsers.data.value?.users ?? []
 
 	return [
 		...mapOptions(searchUsers)
 			.filter((channel) => !initialUsers.find((user) => user.id === channel.value)),
 		...mapOptions(initialUsers),
-	];
-});
+	]
+})
 
 function handleSearch(query: string) {
-	userName.value = query;
+	userName.value = query
+}
+
+interface Option {
+	label: string
+	value: string
+	profileImageUrl?: string
 }
 
-type Option = {
-	label: string;
-	value: string;
-	profileImageUrl?: string;
-};
+function renderMultipleSelectTag({ option }: {
+	option: Option
+	handleClose: () => void
+}) {
+	return !option.label
+		? h('p')
+		: h(
+			NTag,
+			{
+				class: 'pr-1.5 pl-1',
+				round: true,
+			},
+			{
+				default: () =>
+					h(
+						'div',
+						{ class: 'flex items-center' },
+						[
+							h(NAvatar, {
+								src: option.profileImageUrl,
+								round: true,
+								size: 22,
+								class: 'mr-1',
+							}),
+							option.label as string,
+						],
+					),
+			},
+		)
+}
 
-const renderMultipleSelectTag = ({ option }: {
-	option: Option;
-	handleClose: () => void;
-}) => {
-	return !option.label ? h('p') : h(
-		NTag,
-		{
-			class: 'pr-1.5 pl-1',
-			round: true,
-		},
-		{
-			default: () =>
+function renderLabel(option: Option | undefined) {
+	return !option
+		? null
+		: h(
+			'div',
+			{ class: 'flex items-center' },
+			[
+				h(NAvatar, {
+					src: option.profileImageUrl,
+					round: true,
+					size: 'small',
+				}),
 				h(
 					'div',
-					{ class: 'flex items-center' },
-					[
-						h(NAvatar, {
-							src: option.profileImageUrl,
-							round: true,
-							size: 22,
-							class: 'mr-1',
-						}),
-						option.label as string,
-					],
+					{ class: 'ml-3 py-1' },
+					[h('div', null, option.label)],
 				),
-		},
-	);
-};
-
-const renderLabel = (option: Option | undefined) => {
-	return !option ? null : h(
-		'div',
-		{ class: 'flex items-center' },
-		[
-			h(NAvatar, {
-				src: option.profileImageUrl,
-				round: true,
-				size: 'small',
-			}),
-			h(
-				'div',
-				{ class: 'ml-3 py-1' },
-				[h('div', null, option.label)],
-			),
-		],
-	);
-};
+			],
+		)
+}
 </script>
 
 <template>
-	<n-select
+	<NSelect
 		v-model:value="userId"
 		filterable
 		placeholder="Search users..."
diff --git a/frontend/dashboard/src/components/ui/alert/Alert.vue b/frontend/dashboard/src/components/ui/alert/Alert.vue
new file mode 100644
index 000000000..b3502d521
--- /dev/null
+++ b/frontend/dashboard/src/components/ui/alert/Alert.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { type AlertVariants, alertVariants } from '.'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>
diff --git a/frontend/dashboard/src/components/ui/alert/AlertDescription.vue b/frontend/dashboard/src/components/ui/alert/AlertDescription.vue
new file mode 100644
index 000000000..2971a877b
--- /dev/null
+++ b/frontend/dashboard/src/components/ui/alert/AlertDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/frontend/dashboard/src/components/ui/alert/AlertTitle.vue b/frontend/dashboard/src/components/ui/alert/AlertTitle.vue
new file mode 100644
index 000000000..e28dd37ea
--- /dev/null
+++ b/frontend/dashboard/src/components/ui/alert/AlertTitle.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>
diff --git a/frontend/dashboard/src/components/ui/alert/index.ts b/frontend/dashboard/src/components/ui/alert/index.ts
new file mode 100644
index 000000000..765f704d0
--- /dev/null
+++ b/frontend/dashboard/src/components/ui/alert/index.ts
@@ -0,0 +1,23 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/frontend/dashboard/src/components/variable-input.vue b/frontend/dashboard/src/components/variable-input.vue
index 4a2325d71..dbe42455c 100644
--- a/frontend/dashboard/src/components/variable-input.vue
+++ b/frontend/dashboard/src/components/variable-input.vue
@@ -1,50 +1,53 @@
 <script setup lang='ts'>
-import { MentionOption, NMention, NText } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed, VNodeChild, h, FunctionalComponent } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { NMention, NText } from 'naive-ui'
+import { storeToRefs } from 'pinia'
+import { computed, h } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useVariablesApi } from '@/api/variables';
+import type { MentionOption } from 'naive-ui'
+import type { FunctionalComponent, VNodeChild } from 'vue'
 
-const text = defineModel<string>({ default: '' });
-const { t }  = useI18n();
+import { useVariablesApi } from '@/api/variables.js'
 
 withDefaults(defineProps<{
-	inputType?: 'text' | 'textarea',
-	minRows?: number,
-	maxRows?: number,
+	inputType?: 'text' | 'textarea'
+	minRows?: number
+	maxRows?: number
 }>(), {
 	inputType: 'text',
-});
+})
 
 defineSlots<{
 	underSelect: FunctionalComponent
-}>();
+}>()
 
-const { allVariables } = storeToRefs(useVariablesApi());
+const text = defineModel<string>({ default: '' })
+const { t } = useI18n()
+
+const { allVariables } = storeToRefs(useVariablesApi())
 
 const selectVariables = computed<MentionOption[]>(() => {
 	return allVariables.value.map((variable) => ({
 		label: `(${variable.example})`,
-    value: `(${variable.example})`,
+		value: `(${variable.example})`,
 		description: variable.description,
-	}));
-});
+	}))
+})
 
 function renderVariableSelectLabel(option: {
-	type: string,
-	label: string,
+	type: string
+	label: string
 	description: string
 }): VNodeChild {
-	if (!option.description) return '$' + option.label;
-	const variable = '$' + option.label;
-	const description = h(NText, { depth: 3 }, option.description);
-	return h('span', {}, [variable, ' ', description]);
+	if (!option.description) return `$${option.label}`
+	const variable = `$${option.label}`
+	const description = h(NText, { depth: 3 }, option.description)
+	return h('span', {}, [variable, ' ', description])
 }
 </script>
 
 <template>
-	<n-mention
+	<NMention
 		v-model:value="text"
 		:render-label="renderVariableSelectLabel"
 		placeholder="Response"
@@ -57,5 +60,5 @@ function renderVariableSelectLabel(option: {
 		<template #empty>
 			{{ t('sharedTexts.placeCursorMessage') }}
 		</template>
-	</n-mention>
+	</NMention>
 </template>
diff --git a/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-form.vue b/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-form.vue
index 941923c69..edc20f8ce 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-form.vue
+++ b/frontend/dashboard/src/features/admin-panel/manage-notifications/components/notifications-form.vue
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n'
 import { useNotificationsForm } from '../composables/use-notifications-form.js'
 import { textareaButtons, useTextarea } from '../composables/use-textarea.js'
 
-import TwitchUserSignle from '@/components/twitchUsers/single.vue'
+import TwitchUserSingle from '@/components/twitchUsers/single.vue'
 import { Button } from '@/components/ui/button'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
@@ -27,7 +27,7 @@ const { textareaRef, applyModifier } = useTextarea()
 				<Label for="userId">
 					{{ t('adminPanel.notifications.userLabel') }}
 				</Label>
-				<TwitchUserSignle v-model="notificationsForm.userIdField.fieldModel" twir-only />
+				<TwitchUserSingle v-model="notificationsForm.userIdField.fieldModel" twir-only />
 			</div>
 
 			<div class="space-y-2">
diff --git a/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-table.ts b/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-table.ts
index 5b8352912..3cba9c4cf 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-table.ts
+++ b/frontend/dashboard/src/features/admin-panel/manage-notifications/composables/use-notifications-table.ts
@@ -30,7 +30,7 @@ export const useNotificationsTable = defineStore('admin-panel/notifications-tabl
 		perPage: pagination.value.pageSize,
 		page: pagination.value.pageIndex,
 		type: filters.filterInput,
-		search: filters.debounceSearchInput
+		search: filters.debounceSearchInput,
 	}))
 
 	const notificationsApi = useAdminNotifications()
@@ -50,7 +50,7 @@ export const useNotificationsTable = defineStore('admin-panel/notifications-tabl
 				header: () => h('div', {}, t('adminPanel.notifications.messageLabel')),
 				cell: ({ row }) => {
 					return h('div', { class: 'break-words max-w-[450px]', innerHTML: row.original.text })
-				}
+				},
 			},
 			{
 				accessorKey: 'createdAt',
@@ -58,7 +58,7 @@ export const useNotificationsTable = defineStore('admin-panel/notifications-tabl
 				header: () => h('div', {}, t('adminPanel.notifications.createdAt')),
 				cell: ({ row }) => {
 					return h(CreatedAtTooltip, { time: new Date(row.original.createdAt) })
-				}
+				},
 			},
 			{
 				accessorKey: 'actions',
@@ -67,10 +67,10 @@ export const useNotificationsTable = defineStore('admin-panel/notifications-tabl
 				cell: ({ row }) => {
 					return h(NotificationsTableActions, {
 						onDelete: () => onDeleteNotification(row.original.id),
-						onEdit: () => onEditNotification(row.original)
+						onEdit: () => onEditNotification(row.original),
 					})
-				}
-			}
+				},
+			},
 		]
 
 		if (filters.filterInput === NotificationType.User) {
@@ -83,14 +83,14 @@ export const useNotificationsTable = defineStore('admin-panel/notifications-tabl
 						return h('a', {
 							class: 'flex flex-col',
 							href: `https://twitch.tv/${row.original.twitchProfile.displayName.toLowerCase()}`,
-							target: '_blank'
+							target: '_blank',
 						}, h(UsersTableCellUser, {
-							userId: row.original.id,
 							avatar: row.original.twitchProfile.profileImageUrl,
-							name: row.original.twitchProfile.displayName
+							name: row.original.twitchProfile.login,
+							displayName: row.original.twitchProfile.displayName,
 						}))
 					}
-				}
+				},
 			})
 		}
 
@@ -108,7 +108,7 @@ export const useNotificationsTable = defineStore('admin-panel/notifications-tabl
 			return pageCount.value
 		},
 		state: {
-			pagination: pagination.value
+			pagination: pagination.value,
 		},
 		get data() {
 			return notifications.value
@@ -118,7 +118,7 @@ export const useNotificationsTable = defineStore('admin-panel/notifications-tabl
 		},
 		manualPagination: true,
 		getCoreRowModel: getCoreRowModel(),
-		onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination)
+		onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
 	})
 
 	async function onDeleteNotification(notificationId: string) {
@@ -154,6 +154,6 @@ export const useNotificationsTable = defineStore('admin-panel/notifications-tabl
 		notifications,
 		totalNotifications,
 		onDeleteNotification,
-		onEditNotification
+		onEditNotification,
 	}
 })
diff --git a/frontend/dashboard/src/features/admin-panel/manage-users/components/users-table-cell-user.vue b/frontend/dashboard/src/features/admin-panel/manage-users/components/users-table-cell-user.vue
index e1946b369..5282053f3 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-users/components/users-table-cell-user.vue
+++ b/frontend/dashboard/src/features/admin-panel/manage-users/components/users-table-cell-user.vue
@@ -1,15 +1,26 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { resolveUserName } from '@/helpers/resolveUserName.js'
+
+const props = defineProps<{
+	name: string
+	displayName: string
+	avatar: string
+}>()
 
-defineProps<{ name: string, avatar: string }>()
+const userName = computed(() => {
+	return resolveUserName(props.name, props.displayName)
+})
 </script>
 
 <template>
 	<div class="flex items-center gap-4 max-sm:justify-start">
-		<Avatar class="h-9 w-9">
+		<Avatar class="size-9">
 			<AvatarImage :src="avatar" :alt="name" loading="lazy" />
 			<AvatarFallback>{{ name.charAt(0).toUpperCase() }}</AvatarFallback>
 		</Avatar>
-		{{ name }}
+		{{ userName }}
 	</div>
 </template>
diff --git a/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users-table.ts b/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users-table.ts
index 3eaa58449..4fea4ca0b 100644
--- a/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users-table.ts
+++ b/frontend/dashboard/src/features/admin-panel/manage-users/composables/use-users-table.ts
@@ -18,7 +18,6 @@ import type { User } from '@/api/admin/users.js'
 import type { TwirUsersSearchParams } from '@/gql/graphql'
 
 import { usePagination } from '@/composables/use-pagination.js'
-import { resolveUserName } from '@/helpers'
 import { valueUpdater } from '@/helpers/value-updater.js'
 
 export const useUsersTable = defineStore('manage-users/users-table', () => {
@@ -69,8 +68,8 @@ export const useUsersTable = defineStore('manage-users/users-table', () => {
 					target: '_blank',
 				}, h(UsersTableCellUser, {
 					avatar: row.original.twitchProfile.profileImageUrl,
-					userId: row.original.id,
-					name: resolveUserName(row.original.twitchProfile.login, row.original.twitchProfile.displayName),
+					name: row.original.twitchProfile.login,
+					displayName: row.original.twitchProfile.displayName,
 				}))
 			},
 		},
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-history.ts b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-history.ts
index 3971e7591..60b012ea0 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-history.ts
+++ b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-history.ts
@@ -16,7 +16,6 @@ import type { ColumnDef } from '@tanstack/vue-table'
 
 import UsersTableCellUser
 	from '@/features/admin-panel/manage-users/components/users-table-cell-user.vue'
-import { resolveUserName } from '@/helpers'
 import { valueUpdater } from '@/helpers/value-updater'
 
 type UserUsage = NonNullable<EmotesStatisticsDetail['emotesStatisticEmoteDetailedInformation']>['usagesHistory'][number]
@@ -46,8 +45,8 @@ export const useCommunityEmotesDetailsUsersHistory = defineStore(
 						target: '_blank',
 					}, h(UsersTableCellUser, {
 						avatar: row.original.twitchProfile.profileImageUrl,
-						userId: row.original.userId,
-						name: resolveUserName(row.original.twitchProfile.login, row.original.twitchProfile.displayName),
+						name: row.original.twitchProfile.login,
+						displayName: row.original.twitchProfile.displayName,
 					}))
 				},
 			},
diff --git a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-top.ts b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-top.ts
index 7386ba3ee..28bb24ab8 100644
--- a/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-top.ts
+++ b/frontend/dashboard/src/features/community-emotes-statistic/composables/use-community-emotes-details-users-top.ts
@@ -15,7 +15,6 @@ import type { ColumnDef } from '@tanstack/vue-table'
 
 import UsersTableCellUser
 	from '@/features/admin-panel/manage-users/components/users-table-cell-user.vue'
-import { resolveUserName } from '@/helpers'
 import { valueUpdater } from '@/helpers/value-updater'
 
 type User = NonNullable<EmotesStatisticsDetail['emotesStatisticEmoteDetailedInformation']>['topUsers'][number]
@@ -45,8 +44,8 @@ export const useCommunityEmotesDetailsUsersTop = defineStore(
 						target: '_blank',
 					}, h(UsersTableCellUser, {
 						avatar: row.original.twitchProfile.profileImageUrl,
-						userId: row.original.userId,
-						name: resolveUserName(row.original.twitchProfile.login, row.original.twitchProfile.displayName),
+						name: row.original.twitchProfile.login,
+						displayName: row.original.twitchProfile.displayName,
 					}))
 				},
 			},
diff --git a/frontend/dashboard/src/features/community-users/composables/use-community-users-table.ts b/frontend/dashboard/src/features/community-users/composables/use-community-users-table.ts
index 50e706bf2..f26db2503 100644
--- a/frontend/dashboard/src/features/community-users/composables/use-community-users-table.ts
+++ b/frontend/dashboard/src/features/community-users/composables/use-community-users-table.ts
@@ -6,7 +6,7 @@ import {
 	getFilteredRowModel,
 	getPaginationRowModel,
 	getSortedRowModel,
-	useVueTable
+	useVueTable,
 } from '@tanstack/vue-table'
 import { defineStore, storeToRefs } from 'pinia'
 import { computed, h } from 'vue'
@@ -21,7 +21,6 @@ import { usePagination } from '@/composables/use-pagination.js'
 import UsersTableCellUser
 	from '@/features/admin-panel/manage-users/components/users-table-cell-user.vue'
 import { type CommunityUsersOpts, CommunityUsersResetType } from '@/gql/graphql.js'
-import { resolveUserName } from '@/helpers/resolveUserName.js'
 import { valueUpdater } from '@/helpers/value-updater.js'
 
 const ONE_HOUR = 60 * 60 * 1000
@@ -30,7 +29,7 @@ export const TABLE_ACCESSOR_KEYS = {
 	messages: 'messages',
 	watchedMs: 'watchedMs',
 	usedEmotes: 'usedEmotes',
-	usedChannelPoints: 'usedChannelPoints'
+	usedChannelPoints: 'usedChannelPoints',
 }
 
 export const useCommunityUsersTable = defineStore('features/community-users-table', () => {
@@ -46,7 +45,7 @@ export const useCommunityUsersTable = defineStore('features/community-users-tabl
 		rowSelection,
 		tableOrder,
 		tableSortBy,
-		debouncedSearchInput
+		debouncedSearchInput,
 	} = storeToRefs(useCommunityTableActions())
 
 	const { pagination, setPagination } = usePagination()
@@ -62,7 +61,7 @@ export const useCommunityUsersTable = defineStore('features/community-users-tabl
 			page: pagination.value.pageIndex,
 			perPage: pagination.value.pageSize,
 			order: tableOrder.value,
-			sortBy: tableSortBy.value
+			sortBy: tableSortBy.value,
 		}
 	})
 
@@ -93,13 +92,13 @@ export const useCommunityUsersTable = defineStore('features/community-users-tabl
 				return h('a', {
 					class: 'flex flex-col',
 					href: `https://twitch.tv/${row.original.twitchProfile.login}`,
-					target: '_blank'
+					target: '_blank',
 				}, h(UsersTableCellUser, {
 					avatar: row.original.twitchProfile.profileImageUrl,
-					userId: row.original.id,
-					name: resolveUserName(row.original.twitchProfile.login, row.original.twitchProfile.displayName)
+					name: row.original.twitchProfile.login,
+					displayName: row.original.twitchProfile.displayName,
 				}))
-			}
+			},
 		},
 		{
 			// accessorKey: t('community.users.table.messages'),
@@ -109,12 +108,12 @@ export const useCommunityUsersTable = defineStore('features/community-users-tabl
 				return h(CommunityUsersTableColumn, {
 					column,
 					columnType: CommunityUsersResetType.Messages,
-					title: t('community.users.table.messages')
+					title: t('community.users.table.messages'),
 				})
 			},
 			cell: ({ row }) => {
 				return h('div', row.original.messages)
-			}
+			},
 		},
 		{
 			// accessorKey: t('community.users.table.usedChannelPoints'),
@@ -124,12 +123,12 @@ export const useCommunityUsersTable = defineStore('features/community-users-tabl
 				return h(CommunityUsersTableColumn, {
 					column,
 					columnType: CommunityUsersResetType.UsedChannelsPoints,
-					title: t('community.users.table.usedChannelPoints')
+					title: t('community.users.table.usedChannelPoints'),
 				})
 			},
 			cell: ({ row }) => {
 				return h('div', row.original.usedChannelPoints)
-			}
+			},
 		},
 		{
 			// accessorKey: t('community.users.table.usedEmotes'),
@@ -139,12 +138,12 @@ export const useCommunityUsersTable = defineStore('features/community-users-tabl
 				return h(CommunityUsersTableColumn, {
 					column,
 					columnType: CommunityUsersResetType.UsedEmotes,
-					title: t('community.users.table.usedEmotes')
+					title: t('community.users.table.usedEmotes'),
 				})
 			},
 			cell: ({ row }) => {
 				return h('div', row.original.usedEmotes)
-			}
+			},
 		},
 		{
 			// accessorKey: t('community.users.table.watchedTime'),
@@ -154,13 +153,13 @@ export const useCommunityUsersTable = defineStore('features/community-users-tabl
 				return h(CommunityUsersTableColumn, {
 					column,
 					columnType: CommunityUsersResetType.Watched,
-					title: t('community.users.table.watchedTime')
+					title: t('community.users.table.watchedTime'),
 				})
 			},
 			cell: ({ row }) => {
 				return h('div', `${(Number(row.original.watchedMs) / ONE_HOUR).toFixed(1)}h`)
-			}
-		}
+			},
+		},
 	])
 
 	const table = useVueTable({
@@ -188,7 +187,7 @@ export const useCommunityUsersTable = defineStore('features/community-users-tabl
 			},
 			get pagination() {
 				return pagination.value
-			}
+			},
 		},
 		manualPagination: true,
 		enableRowSelection: true,
@@ -202,7 +201,7 @@ export const useCommunityUsersTable = defineStore('features/community-users-tabl
 		getPaginationRowModel: getPaginationRowModel(),
 		getSortedRowModel: getSortedRowModel(),
 		getFacetedRowModel: getFacetedRowModel(),
-		getFacetedUniqueValues: getFacetedUniqueValues()
+		getFacetedUniqueValues: getFacetedUniqueValues(),
 	})
 
 	return {
@@ -210,6 +209,6 @@ export const useCommunityUsersTable = defineStore('features/community-users-tabl
 		table,
 		totalUsers,
 		pagination,
-		setPagination
+		setPagination,
 	}
 })
diff --git a/frontend/dashboard/src/features/greetings/composables/use-greetings-table.ts b/frontend/dashboard/src/features/greetings/composables/use-greetings-table.ts
new file mode 100644
index 000000000..cba0322a4
--- /dev/null
+++ b/frontend/dashboard/src/features/greetings/composables/use-greetings-table.ts
@@ -0,0 +1,85 @@
+import { type ColumnDef, getCoreRowModel, getPaginationRowModel, useVueTable } from '@tanstack/vue-table'
+import { defineStore } from 'pinia'
+import { computed, h } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import GreetingsTableActions from '../ui/greetings-table-actions.vue'
+
+import { type Greetings, useGreetingsApi } from '@/api/greetings.js'
+import { usePagination } from '@/composables/use-pagination.js'
+import UsersTableCellUser from '@/features/admin-panel/manage-users/components/users-table-cell-user.vue'
+import { valueUpdater } from '@/helpers/value-updater.js'
+
+export const useGreetingsTable = defineStore('features/greetings-table', () => {
+	const { t } = useI18n()
+	const greetingsApi = useGreetingsApi()
+	const { pagination } = usePagination()
+
+	const { data, fetching } = greetingsApi.useQueryGreetings()
+	const greetings = computed<Greetings[]>(() => {
+		if (!data.value) return []
+		return data.value.greetings
+	})
+
+	const pageCount = computed(() => {
+		return Math.ceil(greetings.value.length / pagination.value.pageSize)
+	})
+
+	const tableColumns = computed<ColumnDef<Greetings>[]>(() => [
+		{
+			accessorKey: 'user',
+			size: 60,
+			header: () => h('div', {}, t('sharedTexts.user')),
+			cell: ({ row }) => {
+				return h('a', {
+					class: 'flex flex-col',
+					href: `https://twitch.tv/${row.original.twitchProfile.login}`,
+					target: '_blank',
+				}, h(UsersTableCellUser, {
+					avatar: row.original.twitchProfile.profileImageUrl,
+					name: row.original.twitchProfile.login,
+					displayName: row.original.twitchProfile.displayName,
+				}))
+			},
+		},
+		{
+			accessorKey: 'text',
+			size: 30,
+			header: () => h('div', {}, t('sharedTexts.response')),
+			cell: ({ row }) => h('span', row.original.text),
+		},
+		{
+			accessorKey: 'actions',
+			size: 10,
+			header: () => '',
+			cell: ({ row }) => h(GreetingsTableActions, { greetings: row.original }),
+		},
+	])
+
+	const table = useVueTable({
+		get pageCount() {
+			return pageCount.value
+		},
+		get data() {
+			return greetings.value
+		},
+		get columns() {
+			return tableColumns.value
+		},
+		state: {
+			get pagination() {
+				return pagination.value
+			},
+		},
+		manualPagination: true,
+		enableRowSelection: true,
+		onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, pagination),
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+	})
+
+	return {
+		isLoading: fetching,
+		table,
+	}
+})
diff --git a/frontend/dashboard/src/features/greetings/greetings.vue b/frontend/dashboard/src/features/greetings/greetings.vue
new file mode 100644
index 000000000..a126de43a
--- /dev/null
+++ b/frontend/dashboard/src/features/greetings/greetings.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useGreetingsTable } from './composables/use-greetings-table'
+import GreetingsInformation from './ui/greetings-information.vue'
+
+import Table from '@/components/table.vue'
+
+const greetingsTable = useGreetingsTable()
+</script>
+
+<template>
+	<div class="flex flex-col w-full gap-4">
+		<GreetingsInformation />
+		<Table :table="greetingsTable.table" :is-loading="greetingsTable.isLoading" />
+	</div>
+</template>
diff --git a/frontend/dashboard/src/features/greetings/ui/greetings-create-button.vue b/frontend/dashboard/src/features/greetings/ui/greetings-create-button.vue
new file mode 100644
index 000000000..c66152d43
--- /dev/null
+++ b/frontend/dashboard/src/features/greetings/ui/greetings-create-button.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { PlusIcon } from 'lucide-vue-next'
+import { useI18n } from 'vue-i18n'
+
+import GreetingsDialog from './greetings-dialog.vue'
+
+import { Button } from '@/components/ui/button'
+
+const { t } = useI18n()
+</script>
+
+<template>
+	<div class="flex gap-2">
+		<GreetingsDialog>
+			<template #dialog-trigger>
+				<Button>
+					<PlusIcon class="size-4 mr-2" />
+					{{ t('greetings.create') }}
+				</Button>
+			</template>
+		</GreetingsDialog>
+	</div>
+</template>
diff --git a/frontend/dashboard/src/features/greetings/ui/greetings-dialog.vue b/frontend/dashboard/src/features/greetings/ui/greetings-dialog.vue
new file mode 100644
index 000000000..b4eed3a17
--- /dev/null
+++ b/frontend/dashboard/src/features/greetings/ui/greetings-dialog.vue
@@ -0,0 +1,151 @@
+<script setup lang='ts'>
+import {
+	type FormInst,
+	type FormItemRule,
+	type FormRules,
+	NForm,
+	NFormItem,
+	NSpace,
+	NSwitch,
+} from 'naive-ui'
+import { ref, toRaw, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { GreetingsCreateInput } from '@/gql/graphql'
+
+import { type Greetings, useGreetingsApi } from '@/api/greetings'
+import DialogOrSheet from '@/components/dialog-or-sheet.vue'
+import TwitchUserSearch from '@/components/twitchUsers/single.vue'
+import { Button } from '@/components/ui/button'
+import {
+	Dialog,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from '@/components/ui/dialog'
+import VariableInput from '@/components/variable-input.vue'
+
+const props = defineProps<{
+	greeting?: Greetings | null
+}>()
+
+const emits = defineEmits<{
+	close: []
+}>()
+
+const open = ref(false)
+const formRef = ref<FormInst | null>(null)
+const defaultFormValue: Omit<Greetings, 'twitchProfile'> = {
+	id: '',
+	text: '',
+	userId: '',
+	enabled: true,
+	isReply: true,
+}
+
+const formValue = ref(structuredClone(defaultFormValue))
+function resetFormValue() {
+	formValue.value = structuredClone(defaultFormValue)
+}
+
+watch(() => props.greeting, (greeting) => {
+	if (!greeting) return
+	formValue.value = structuredClone(toRaw(greeting))
+}, { immediate: true })
+
+const greetingsApi = useGreetingsApi()
+const greetingsUpdate = greetingsApi.useMutationUpdateGreetings()
+const greetingsCreate = greetingsApi.useMutationCreateGreetings()
+
+async function save() {
+	if (!formRef.value || !formValue.value) return
+	await formRef.value.validate()
+
+	const data = formValue.value
+	const opts: GreetingsCreateInput = {
+		enabled: data.enabled,
+		isReply: data.isReply,
+		text: data.text,
+		userId: data.userId,
+	}
+
+	if (data.id) {
+		await greetingsUpdate.executeMutation({
+			id: data.id,
+			opts,
+		})
+	} else {
+		await greetingsCreate.executeMutation({ opts })
+	}
+
+	emits('close')
+	open.value = false
+}
+
+const { t } = useI18n()
+
+const rules: FormRules = {
+	userId: {
+		trigger: ['input', 'blur'],
+		validator: (_: FormItemRule, value: string) => {
+			if (!value || !value.length) {
+				return new Error(t('greetings.validations.userName'))
+			}
+
+			return true
+		},
+	},
+	text: {
+		trigger: ['input', 'blur'],
+		validator: (_: FormItemRule, value: string) => {
+			if (!value || !value.length) {
+				return new Error(t('greetings.validations.textRequired'))
+			}
+
+			return true
+		},
+	},
+}
+</script>
+
+<template>
+	<Dialog
+		v-model:open="open"
+		@update:open="(state) => {
+			if (!state && !greeting) resetFormValue()
+		}"
+	>
+		<DialogTrigger as-child>
+			<slot name="dialog-trigger" />
+		</DialogTrigger>
+		<DialogOrSheet class="sm:max-w-[425px]">
+			<DialogHeader>
+				<DialogTitle>
+					{{ greeting ? t('greetings.edit') : t('greetings.create') }}
+				</DialogTitle>
+			</DialogHeader>
+			<NForm ref="formRef" :model="formValue" :rules="rules">
+				<div class="grid gap-4 py-4">
+					<NSpace vertical class="w-full">
+						<NFormItem :label="t('sharedTexts.userName')" path="userId" show-require-mark>
+							<TwitchUserSearch v-model="formValue.userId" :initial-user-id="props.greeting?.userId" />
+						</NFormItem>
+						<NFormItem :label="t('sharedTexts.response')" path="text" show-require-mark>
+							<VariableInput v-model="formValue.text" input-type="textarea" />
+						</NFormItem>
+
+						<NFormItem :label="t('sharedTexts.reply.text')" path="text">
+							<NSwitch v-model:value="formValue.isReply" />
+						</NFormItem>
+					</NSpace>
+				</div>
+				<DialogFooter>
+					<Button type="submit" @click="save">
+						{{ t('sharedButtons.save') }}
+					</Button>
+				</DialogFooter>
+			</NForm>
+		</DialogOrSheet>
+	</Dialog>
+</template>
diff --git a/frontend/dashboard/src/features/greetings/ui/greetings-information.vue b/frontend/dashboard/src/features/greetings/ui/greetings-information.vue
new file mode 100644
index 000000000..9e7e046bc
--- /dev/null
+++ b/frontend/dashboard/src/features/greetings/ui/greetings-information.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { InfoIcon } from 'lucide-vue-next'
+import { useI18n } from 'vue-i18n'
+
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+
+const { t } = useI18n()
+</script>
+
+<template>
+	<Alert>
+		<InfoIcon class="size-5" />
+		<AlertTitle>
+			{{ t('greetings.info.title') }}
+		</AlertTitle>
+		<AlertDescription>
+			{{ t('greetings.info.text') }}
+		</AlertDescription>
+	</Alert>
+</template>
diff --git a/frontend/dashboard/src/features/greetings/ui/greetings-table-actions.vue b/frontend/dashboard/src/features/greetings/ui/greetings-table-actions.vue
new file mode 100644
index 000000000..5122e5da6
--- /dev/null
+++ b/frontend/dashboard/src/features/greetings/ui/greetings-table-actions.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { PencilIcon, TrashIcon } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+import GreetingsDialog from './greetings-dialog.vue'
+
+import { type Greetings, useGreetingsApi } from '@/api/greetings.js'
+import ActionConfirm from '@/components/ui/action-confirm.vue'
+import { Button } from '@/components/ui/button'
+import { Switch } from '@/components/ui/switch'
+
+const props = defineProps<{ greetings: Greetings }>()
+const showDelete = ref(false)
+
+const greetingsApi = useGreetingsApi()
+const updateGreetingsMutation = greetingsApi.useMutationUpdateGreetings()
+const removeGreetingsMutation = greetingsApi.useMutationRemoveGreetings()
+
+function toggleEnabledGreetings() {
+	updateGreetingsMutation.executeMutation({
+		id: props.greetings.id,
+		opts: { enabled: !props.greetings.enabled },
+	})
+}
+
+function deleteGreetings() {
+	removeGreetingsMutation.executeMutation({ id: props.greetings.id })
+}
+</script>
+
+<template>
+	<div class="flex items-center gap-2">
+		<Switch :checked="greetings.enabled" @update:checked="toggleEnabledGreetings" />
+
+		<GreetingsDialog :greeting="greetings">
+			<template #dialog-trigger>
+				<Button variant="secondary" size="icon">
+					<PencilIcon class="h-4 w-4" />
+				</Button>
+			</template>
+		</GreetingsDialog>
+
+		<Button variant="destructive" size="icon" @click="showDelete = true">
+			<TrashIcon class="h-4 w-4" />
+		</Button>
+	</div>
+
+	<ActionConfirm v-model:open="showDelete" @confirm="deleteGreetings" />
+</template>
diff --git a/frontend/dashboard/src/layout/page-layout.vue b/frontend/dashboard/src/layout/page-layout.vue
index 01138aafa..0897203ca 100644
--- a/frontend/dashboard/src/layout/page-layout.vue
+++ b/frontend/dashboard/src/layout/page-layout.vue
@@ -12,7 +12,7 @@ import { useTheme } from '@/composables/use-theme.js'
 
 const props = withDefaults(defineProps<PageLayoutProps>(), {
 	activeTab: '',
-	tabs: () => []
+	tabs: () => [],
 })
 const router = useRouter()
 const themeVars = useThemeVars()
@@ -65,9 +65,13 @@ function onChangeTab(tab: StringOrNumber, replace = false): void {
 				class="container flex flex-col gap-2"
 				:class="[activeTab ? 'pt-9' : 'py-9']"
 			>
-				<h1 class="text-4xl">
-					<slot name="title" />
-				</h1>
+				<div class="flex justify-between gap-2 flex-wrap">
+					<h1 class="text-4xl">
+						<slot name="title" />
+					</h1>
+
+					<slot name="action" />
+				</div>
 
 				<div v-if="props.tabs" class="flex gap-2">
 					<TabsList class="flex flex-wrap overflow-x-auto -mb-px">
diff --git a/frontend/dashboard/src/locales/en.json b/frontend/dashboard/src/locales/en.json
index 864a840f5..6569cdda5 100644
--- a/frontend/dashboard/src/locales/en.json
+++ b/frontend/dashboard/src/locales/en.json
@@ -35,6 +35,7 @@
       "text": "Bot will send commands responses as reply"
     },
     "response": "Response",
+		"user": "User",
     "userName": "Username",
     "dangerZone": "Danger Zone",
     "deleted": "Deleted",
diff --git a/frontend/dashboard/src/pages/Greetings.vue b/frontend/dashboard/src/pages/Greetings.vue
deleted file mode 100644
index a4efcdb9b..000000000
--- a/frontend/dashboard/src/pages/Greetings.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<script setup lang='ts'>
-import { IconPencil, IconTrash } from '@tabler/icons-vue';
-import {
-	type DataTableColumns,
-	NDataTable,
-	NSpace,
-	NTag,
-	NAlert,
-	NButton,
-	NPopconfirm,
-	NModal,
-	NSwitch,
-	NAvatar,
-} from 'naive-ui';
-import { h, ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import { useGreetingsApi, type Greetings } from '@/api/greetings.js';
-import { useUserAccessFlagChecker } from '@/api/index.js';
-import GreetingsModal from '@/components/greetings/modal.vue';
-import { ChannelRolePermissionEnum } from '@/gql/graphql';
-import { renderIcon } from '@/helpers/index.js';
-
-const { t } = useI18n();
-const userCanManageGreetings = useUserAccessFlagChecker(ChannelRolePermissionEnum.ManageGreetings);
-const showModal = ref(false);
-
-const greetingsApi = useGreetingsApi();
-const greetingsUpdate = greetingsApi.useMutationUpdateGreetings();
-const greetingsRemove = greetingsApi.useMutationRemoveGreetings();
-const { data: greetingsData, fetching } = greetingsApi.useQueryGreetings();
-
-const greetings = computed(() => {
-	return greetingsData.value?.greetings ?? [];
-});
-
-const columns = computed<DataTableColumns<Greetings>>(() => [
-	{
-		title: '',
-		key: 'avatar',
-		width: 50,
-		render(row) {
-			if (!row.twitchProfile) return;
-
-			return h(NAvatar, { size: 'medium', src: row.twitchProfile.profileImageUrl, round: true });
-		},
-	},
-	{
-		title: t('sharedTexts.userName'),
-		key: 'userName',
-		maxWidth: 150,
-		render(row) {
-			return h(NTag, { type: 'info', bordered: false }, {
-				default: () => {
-					return row.twitchProfile ? row.twitchProfile.displayName : 'Unknown';
-				},
-			});
-		},
-	},
-	{
-		title: t('sharedTexts.response'),
-		key: 'text',
-		maxWidth: 600,
-		render(row) {
-			return row.text;
-		},
-	},
-	{
-		title: t('sharedTexts.status'),
-		key: 'enabled',
-		width: 100,
-		render(row) {
-			return h(
-				NSwitch,
-				{
-					value: row.enabled,
-					onUpdateValue: (enabled) => {
-						greetingsUpdate.executeMutation({ id: row.id, opts: { enabled } });
-					},
-					disabled: !userCanManageGreetings.value,
-				},
-				{ default: () => row.enabled },
-			);
-		},
-	},
-	{
-		title: t('sharedTexts.actions'),
-		key: 'actions',
-		width: 150,
-		render(row) {
-			const editButton = h(
-				NButton,
-				{
-					type: 'primary',
-					size: 'small',
-					onClick: () => openModal(row),
-					quaternary: true,
-					disabled: !userCanManageGreetings.value,
-				}, {
-					icon: renderIcon(IconPencil),
-				});
-
-			const deleteButton = h(
-				NPopconfirm,
-				{
-					onPositiveClick: () => greetingsRemove.executeMutation({ id: row.id }),
-					positiveText: t('deleteConfirmation.confirm'),
-					negativeText: t('deleteConfirmation.cancel'),
-				},
-				{
-					trigger: () => h(NButton, {
-						type: 'error',
-						size: 'small',
-						quaternary: true,
-						disabled: !userCanManageGreetings.value,
-					}, {
-						default: renderIcon(IconTrash),
-					}),
-					default: () => t('deleteConfirmation.text'),
-				},
-			);
-
-			return h(NSpace, {}, { default: () => [editButton, deleteButton] });
-		},
-	},
-]);
-
-const editableGreeting = ref<Greetings | null>(null);
-
-function openModal(greetings: Greetings | null) {
-	editableGreeting.value = greetings;
-	showModal.value = true;
-}
-
-function closeModal() {
-	showModal.value = false;
-}
-</script>
-
-<template>
-	<div class="flex flex-col gap-4">
-		<div class="flex justify-between">
-			<h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
-				{{ t('greetings.title') }}
-			</h4>
-			<n-button :disabled="!userCanManageGreetings" secondary type="success" @click="openModal(null)">
-				{{ t('sharedButtons.create') }}
-			</n-button>
-		</div>
-
-		<n-alert type="info" :title="t('greetings.info.title')">
-			{{ t('greetings.info.text') }}
-		</n-alert>
-
-		<n-data-table
-			:isLoading="fetching"
-			:columns="columns"
-			:data="greetings"
-		/>
-	</div>
-
-	<n-modal
-		v-model:show="showModal"
-		:mask-closable="false"
-		:segmented="true"
-		preset="card"
-		:title="editableGreeting ? t('greetings.edit') : t('greetings.create')"
-		class="modal"
-		:style="{ width: '400px' }"
-		:on-close="closeModal"
-	>
-		<greetings-modal :greeting="editableGreeting" @close="closeModal" />
-	</n-modal>
-</template>
diff --git a/frontend/dashboard/src/pages/greetings.vue b/frontend/dashboard/src/pages/greetings.vue
new file mode 100644
index 000000000..63dfe30e0
--- /dev/null
+++ b/frontend/dashboard/src/pages/greetings.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import Greetings from '@/features/greetings/greetings.vue'
+import GreetingsCreateButton from '@/features/greetings/ui/greetings-create-button.vue'
+import PageLayout from '@/layout/page-layout.vue'
+
+const { t } = useI18n()
+</script>
+
+<template>
+	<PageLayout>
+		<template #title>
+			{{ t('greetings.title') }}
+		</template>
+
+		<template #action>
+			<GreetingsCreateButton />
+		</template>
+
+		<template #content>
+			<Greetings />
+		</template>
+	</PageLayout>
+</template>
diff --git a/frontend/dashboard/src/plugins/router.ts b/frontend/dashboard/src/plugins/router.ts
index 5d1ab1d67..bb0a43ab5 100644
--- a/frontend/dashboard/src/plugins/router.ts
+++ b/frontend/dashboard/src/plugins/router.ts
@@ -11,7 +11,7 @@ export function newRouter() {
 	const routes: ReadonlyArray<RouteRecordRaw> = [
 		{
 			path: '/dashboard/integrations/:integrationName',
-			component: () => import('../pages/IntegrationsCallback.vue')
+			component: () => import('../pages/IntegrationsCallback.vue'),
 		},
 		{
 			path: '/dashboard',
@@ -21,59 +21,62 @@ export function newRouter() {
 					path: '/dashboard',
 					component: () => import('../pages/Dashboard.vue'),
 					meta: {
-						noPadding: true
-					}
+						noPadding: true,
+					},
 				},
 				{
 					name: 'Integrations',
 					path: '/dashboard/integrations',
 					component: () => import('../pages/Integrations.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ViewIntegrations }
+					meta: { neededPermission: ChannelRolePermissionEnum.ViewIntegrations },
 				},
 				{
 					path: '/dashboard/commands/:system',
 					component: () => import('../features/commands/commands.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ViewCommands }
+					meta: { neededPermission: ChannelRolePermissionEnum.ViewCommands },
 				},
 				{
 					path: '/dashboard/timers',
 					component: () => import('../pages/Timers.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ViewTimers }
+					meta: { neededPermission: ChannelRolePermissionEnum.ViewTimers },
 				},
 				{
 					path: '/dashboard/keywords',
 					component: () => import('../pages/Keywords.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ViewKeywords }
+					meta: { neededPermission: ChannelRolePermissionEnum.ViewKeywords },
 				},
 				{
 					path: '/dashboard/variables',
 					component: () => import('../pages/Variables.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ViewVariables }
+					meta: { neededPermission: ChannelRolePermissionEnum.ViewVariables },
 				},
 				{
 					path: '/dashboard/greetings',
-					component: () => import('../pages/Greetings.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ViewGreetings }
+					component: () => import('../pages/greetings.vue'),
+					meta: {
+						noPadding: true,
+						neededPermission: ChannelRolePermissionEnum.ViewGreetings,
+					},
 				},
 				{
 					path: '/dashboard/community',
 					component: () => import('../pages/community.vue'),
-					meta: { noPadding: true }
+					meta: { noPadding: true },
 				},
 				{
 					path: '/dashboard/community/roles',
 					component: () => import('../features/community-roles/community-roles.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ViewRoles, noPadding: true }
+					meta: { neededPermission: ChannelRolePermissionEnum.ViewRoles, noPadding: true },
 				},
 				{
 					path: '/dashboard/song-requests',
 					component: () => import('../pages/SongRequests.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ViewSongRequests }
+					meta: { neededPermission: ChannelRolePermissionEnum.ViewSongRequests },
 				},
 				{
 					path: '/dashboard/overlays',
 					component: () => import('../pages/Overlays.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ViewOverlays }
+					meta: { neededPermission: ChannelRolePermissionEnum.ViewOverlays },
 				},
 				{
 					name: 'ChatOverlay',
@@ -81,8 +84,8 @@ export function newRouter() {
 					component: () => import('../pages/overlays/chat/Chat.vue'),
 					meta: {
 						neededPermission: ChannelRolePermissionEnum.ManageOverlays,
-						noPadding: true
-					}
+						noPadding: true,
+					},
 				},
 				{
 					name: 'KappagenOverlay',
@@ -90,8 +93,8 @@ export function newRouter() {
 					component: () => import('../pages/overlays/kappagen/Kappagen.vue'),
 					meta: {
 						neededPermission: ChannelRolePermissionEnum.ManageOverlays,
-						noPadding: true
-					}
+						noPadding: true,
+					},
 				},
 				{
 					name: 'BrbOverlay',
@@ -99,8 +102,8 @@ export function newRouter() {
 					component: () => import('../pages/overlays/brb/Brb.vue'),
 					meta: {
 						neededPermission: ChannelRolePermissionEnum.ManageOverlays,
-						noPadding: true
-					}
+						noPadding: true,
+					},
 				},
 				{
 					name: 'DudesOverlay',
@@ -108,81 +111,81 @@ export function newRouter() {
 					component: () => import('../pages/overlays/dudes/dudes-settings.vue'),
 					meta: {
 						neededPermission: ChannelRolePermissionEnum.ManageOverlays,
-						fullScreen: true
-					}
+						fullScreen: true,
+					},
 				},
 				{
 					path: '/dashboard/events/chat-alerts',
 					component: () => import('../pages/chat-alerts.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ViewEvents, noPadding: true }
+					meta: { neededPermission: ChannelRolePermissionEnum.ViewEvents, noPadding: true },
 				},
 				{
 					path: '/dashboard/events/custom',
 					component: () => import('../pages/Events.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ViewEvents }
+					meta: { neededPermission: ChannelRolePermissionEnum.ViewEvents },
 				},
 				{
 					path: '/dashboard/alerts',
 					component: () => import('../pages/Alerts.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ViewAlerts }
+					meta: { neededPermission: ChannelRolePermissionEnum.ViewAlerts },
 				},
 				{
 					path: '/dashboard/games',
 					component: () => import('../pages/Games.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ViewGames }
+					meta: { neededPermission: ChannelRolePermissionEnum.ViewGames },
 				},
 				{
 					path: '/dashboard/files',
-					component: () => import('../pages/Files.vue')
+					component: () => import('../pages/Files.vue'),
 				},
 				{
 					name: 'RegistryOverlayEdit',
 					path: '/dashboard/registry/overlays/:id',
 					component: () => import('../components/registry/overlays/edit.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ViewOverlays }
+					meta: { neededPermission: ChannelRolePermissionEnum.ViewOverlays },
 				},
 				{
 					name: 'Moderation',
 					path: '/dashboard/moderation',
 					component: () => import('../pages/Moderation.vue'),
-					meta: { neededPermission: ChannelRolePermissionEnum.ManageModeration }
+					meta: { neededPermission: ChannelRolePermissionEnum.ManageModeration },
 				},
 				{
 					name: 'Settings',
 					path: '/dashboard/settings',
 					component: () => import('../pages/user-settings/user-settings.vue'),
-					meta: { noPadding: true }
+					meta: { noPadding: true },
 				},
 				{
 					name: 'AdminPanel',
 					path: '/dashboard/admin',
 					component: () => import('../pages/admin-panel.vue'),
-					meta: { noPadding: true }
+					meta: { noPadding: true },
 				},
 				{
 					name: 'Import',
 					path: '/dashboard/import',
-					component: () => import('../pages/Import.vue')
+					component: () => import('../pages/Import.vue'),
 				},
 				{
 					name: 'Forbidden',
 					path: '/dashboard/forbidden',
 					component: () => import('../pages/NoAccess.vue'),
-					meta: { fullScreen: true }
+					meta: { fullScreen: true },
 				},
 				{
 					path: '/:pathMatch(.*)*',
 					name: 'NotFound',
 					component: () => import('../pages/NotFound.vue'),
-					meta: { fullScreen: true }
-				}
-			]
-		}
+					meta: { fullScreen: true },
+				},
+			],
+		},
 	]
 
 	const router = createRouter({
 		history: createWebHistory(),
-		routes
+		routes,
 	})
 
 	router.beforeEach(async (to, _, next) => {