diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index fbcb1a0998..58d7e18166 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -12,11 +12,11 @@
:id="appearNote.id"
>
-
@@ -260,6 +270,7 @@ import { getNoteMenu } from "@/scripts/get-note-menu";
import { useNoteCapture } from "@/scripts/use-note-capture";
import { notePage } from "@/filters/note";
import { deepClone } from "@/scripts/clone";
+import { getNoteSummary } from "@/scripts/get-note-summary";
const router = useRouter();
@@ -267,6 +278,7 @@ const props = defineProps<{
note: misskey.entities.Note;
pinned?: boolean;
detailedView?: boolean;
+ collapsedReply?: boolean;
}>();
const inChannel = inject("inChannel", null);
@@ -712,6 +724,48 @@ defineExpose({
}
}
}
+
+ &.collapsedReply {
+ .line {
+ opacity: 0.25;
+ &::after {
+ content: "";
+ position: absolute;
+ border-left: 2px solid currentColor;
+ border-top: 2px solid currentColor;
+ margin-left: calc(var(--avatarSize) / 2 - 1px);
+ width: calc(var(--avatarSize) / 2 + 14px);
+ border-top-left-radius: calc(var(--avatarSize) / 4);
+ top: calc(50% - 1px);
+ height: calc(50% + 5px);
+ }
+ }
+ .info {
+ color: var(--fgTransparentWeak);
+ transition: color .2s;
+ }
+ .avatar {
+ width: 1.2em;
+ height: 1.2em;
+ border-radius: 2em;
+ overflow: hidden;
+ margin-right: .4em;
+ background: var(--panelHighlight);
+ }
+ .username {
+ font-weight: 700;
+ flex-shrink: 0;
+ max-width: 30%;
+ &::after {
+ content: ": ";
+ }
+ }
+ &:hover, &:focus-within {
+ .info {
+ color: var(--fg);
+ }
+ }
+ }
}
> .article {
diff --git a/packages/client/src/components/MkNotifications.vue b/packages/client/src/components/MkNotifications.vue
index 61b16b16e2..7607e41b9a 100644
--- a/packages/client/src/components/MkNotifications.vue
+++ b/packages/client/src/components/MkNotifications.vue
@@ -26,6 +26,7 @@
"
:key="notification.id"
:note="notification.note"
+ :collapsedReply="true"
/>