From ca967e83bd00416fef98fb010927094dde447593 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 24 Sep 2024 17:52:14 +0900
Subject: [PATCH] :art:

---
 .../src/pages/admin/system-webhook.item.vue   | 64 ++++++++++---------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/packages/frontend/src/pages/admin/system-webhook.item.vue b/packages/frontend/src/pages/admin/system-webhook.item.vue
index 7744d1aed..4e767fba1 100644
--- a/packages/frontend/src/pages/admin/system-webhook.item.vue
+++ b/packages/frontend/src/pages/admin/system-webhook.item.vue
@@ -4,38 +4,40 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-	<MkFolder>
-		<template #label>{{ entity.name || entity.url }}</template>
-		<template #icon>
-			<i v-if="!entity.isActive" class="ti ti-player-pause"/>
-			<i v-else-if="entity.latestStatus === null" class="ti ti-circle"/>
-			<i
-				v-else-if="[200, 201, 204].includes(entity.latestStatus)"
-				class="ti ti-check"
-				:style="{ color: 'var(--success)' }"
-			/>
-			<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--error)' }"/>
-		</template>
-		<template #suffix>
-			<MkTime v-if="entity.latestSentAt" :time="entity.latestSentAt" style="margin-right: 8px"/>
-			<span v-else>-</span>
-		</template>
-
-		<div class="_gaps">
-			<MkKeyValue>
-				<template #key>latestStatus</template>
-				<template #value>{{ entity.latestStatus ?? '-' }}</template>
-			</MkKeyValue>
-			<div class="_buttons">
-				<MkButton @click="onEditClick">
-					<i class="ti ti-settings"></i> {{ i18n.ts.edit }}
-				</MkButton>
-				<MkButton danger @click="onDeleteClick">
-					<i class="ti ti-trash"></i> {{ i18n.ts.delete }}
-				</MkButton>
-			</div>
+<MkFolder>
+	<template #label>{{ entity.name || entity.url }}</template>
+	<template #icon>
+		<i v-if="!entity.isActive" class="ti ti-player-pause"/>
+		<i v-else-if="entity.latestStatus === null" class="ti ti-circle"/>
+		<i
+			v-else-if="[200, 201, 204].includes(entity.latestStatus)"
+			class="ti ti-check"
+			:style="{ color: 'var(--success)' }"
+		/>
+		<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--error)' }"/>
+	</template>
+	<template #suffix>
+		<MkTime v-if="entity.latestSentAt" :time="entity.latestSentAt" style="margin-right: 8px"/>
+		<span v-else>-</span>
+	</template>
+	<template #footer>
+		<div class="_buttons">
+			<MkButton @click="onEditClick">
+				<i class="ti ti-settings"></i> {{ i18n.ts.edit }}
+			</MkButton>
+			<MkButton danger @click="onDeleteClick">
+				<i class="ti ti-trash"></i> {{ i18n.ts.delete }}
+			</MkButton>
 		</div>
-	</MkFolder>
+	</template>
+
+	<div class="_gaps">
+		<MkKeyValue>
+			<template #key>latestStatus</template>
+			<template #value>{{ entity.latestStatus ?? '-' }}</template>
+		</MkKeyValue>
+	</div>
+</MkFolder>
 </template>
 
 <script lang="ts" setup>