feat(client): 通知ページで通知の種類によるフィルタ

1 files changed, 15 insertions, 7 deletions

diff --git a/src/client/components/ui/menu.vue b/src/client/components/ui/menu.vue
index a55dccdd71..d144e65c83 100644
--- a/src/client/components/ui/menu.vue
+++ b/src/client/components/ui/menu.vue
@@ -27,7 +27,7 @@
 			<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
 			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
-		<button v-else @click="clicked(item.action, $event)" :tabindex="i" class="_button item" :class="{ danger: item.danger }">
+		<button v-else @click="clicked(item.action, $event)" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active">
 			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 			<span>{{ item.text }}</span>
@@ -175,6 +175,10 @@ export default defineComponent({
 			border-radius: 6px;
 		}
 
+		> * {
+			position: relative;
+		}
+
 		&.danger {
 			color: #ff2a2a;
 
@@ -195,7 +199,16 @@ export default defineComponent({
 			}
 		}
 
-		&:hover {
+		&.active {
+			color: var(--fgOnAccent);
+			opacity: 1;
+
+			&:before {
+				background: var(--accent);
+			}
+		}
+
+		&:not(:disabled):hover {
 			color: var(--accent);
 			text-decoration: none;
 
@@ -204,11 +217,6 @@ export default defineComponent({
 			}
 		}
 
-		&:active {
-			//color: var(--fgOnAccent);
-			//background: var(--accentDarken);
-		}
-
 		&:not(:active):focus-visible {
 			box-shadow: 0 0 0 2px var(--focus) inset;
 		}