erudit 3.0.0-dev.21 → 3.0.0-dev.23

package/app/assets/icons/cameo-add.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-<path d="M896 0h-768c-70.6 0-128 57.4-128 128v576c0 70.6 57.4 128 128 128h192v160c0 12.2 6.8 23.2 17.6 28.6s23.8 4.2 33.6-3l247.4-185.6h277.4c70.6 0 128-57.4 128-128v-576c0-70.6-57.4-128-128-128zM688.6 465.2h-127.4v127.4c0 27.2-22 49.2-49.2 49.2s-49.2-22-49.2-49.2v-127.4h-127.4c-27.2 0-49.2-22-49.2-49.2s22-49.2 49.2-49.2h127.4v-127.4c0-27.2 22-49.2 49.2-49.2s49.2 22 49.2 49.2v127.4h127.4c27.2 0 49.2 22 49.2 49.2s-22 49.2-49.2 49.2z"></path>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+<path d="M896 0h-768c-70.6 0-128 57.4-128 128v576c0 70.6 57.4 128 128 128h192v160c0 12.2 6.8 23.2 17.6 28.6s23.8 4.2 33.6-3l247.4-185.6h277.4c70.6 0 128-57.4 128-128v-576c0-70.6-57.4-128-128-128zM688.6 465.2h-127.4v127.4c0 27.2-22 49.2-49.2 49.2s-49.2-22-49.2-49.2v-127.4h-127.4c-27.2 0-49.2-22-49.2-49.2s22-49.2 49.2-49.2h127.4v-127.4c0-27.2 22-49.2 49.2-49.2s49.2 22 49.2 49.2v127.4h127.4c27.2 0 49.2 22 49.2 49.2s-22 49.2-49.2 49.2z"></path>
+</svg>

package/app/assets/icons/diamond.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
-  <path class="cls-1" d="M12,22.5L.3,8.5,3.8,1.5h16.4l3.5,7-11.7,14.1ZM9.2,7.3h5.6l-1.8-3.5h-2l-1.8,3.5ZM10.8,17.5v-7.8h-6.5l6.5,7.8ZM13.2,17.5l6.5-7.8h-6.5v7.8ZM17.4,7.3h3.1l-1.8-3.5h-3.1l1.8,3.5ZM3.5,7.3h3.1l1.8-3.5h-3.1l-1.8,3.5Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
+  <path class="cls-1" d="M12,22.5L.3,8.5,3.8,1.5h16.4l3.5,7-11.7,14.1ZM9.2,7.3h5.6l-1.8-3.5h-2l-1.8,3.5ZM10.8,17.5v-7.8h-6.5l6.5,7.8ZM13.2,17.5l6.5-7.8h-6.5v7.8ZM17.4,7.3h3.1l-1.8-3.5h-3.1l1.8,3.5ZM3.5,7.3h3.1l1.8-3.5h-3.1l-1.8,3.5Z"/>
 </svg>

package/app/assets/icons/files.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
+  <path d="M18.29,23.19c-.15-.15-.32-.28-.48-.36l-7.7-.04c-.36,0-.72.12-1.13.4-.29.29-.4.79-.4,1.13,0,.4.14.78.4,1.03.33.33.7.49,1.13.49h7.06c.25,0,.47-.05.65-.14.15-.07.3-.18.44-.32.13-.08.31-.26.33-.59.07-.16.1-.32.1-.47,0-.22-.03-.41-.1-.57-.02-.2-.12-.38-.29-.55Z"/>
+  <path d="M9.03,18.41l-.1.1c-.23.35-.35.71-.35,1.07s.12.72.35,1.07l.1.1c.35.23.71.35,1.07.35h7.06c.25,0,.46-.05.65-.14l.39-.19.09-.07c.18-.18.28-.37.3-.58.07-.21.1-.39.1-.55s-.03-.34-.1-.55c-.02-.2-.12-.4-.3-.58l-.48-.26c-.18-.09-.4-.13-.64-.13h-7.06c-.36,0-.72.12-1.07.35Z"/>
+  <path d="M28.92,6.66L23.03.76l-.25-.3h-.15s-.16-.05-.28-.08c-.3-.09-.37-.11-.45-.11h-11.8c-.38,0-.73.08-1,.22-.37.15-.67.34-.9.56-.28.28-.5.58-.65.87l-.03.09c-.07.34-.1.69-.1,1.04v1.96h-2.05c-.38,0-.72.08-1,.22-.37.15-.67.34-.9.56-.3.3-.5.62-.56.9-.15.36-.22.73-.22,1.1v21.17c0,.37.07.74.2,1.05.08.32.28.64.58.94.23.23.53.42.87.55.31.15.66.23,1.03.23h16.53c.38,0,.72-.08,1.01-.22.37-.15.67-.34.9-.56.28-.28.5-.58.65-.87l.03-.09c.07-.34.1-.69.1-1.04v-1.96h2.05c.38,0,.73-.08,1-.22.37-.15.67-.34.9-.56.3-.3.5-.62.56-.9.15-.36.22-.74.22-1.1V7.49c0-.2-.3-.74-.4-.84ZM21.53,13.06v15.54H5.73V8.14h10.8l5.01,4.91ZM24.57,11.89l-.09-.1s-.07-.09-.11-.15c-.07-.1-.14-.2-.18-.24l-5.9-5.9-.25-.3h-.15c-.05-.01-.17-.05-.28-.08-.29-.09-.37-.11-.45-.11h-6.7v-1.6h10.8l5.01,5.01v15.54h-1.69v-12.06Z"/>
+</svg>

package/app/assets/icons/list-squared.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
+  <path d="M14.2,7.1h10.7v3.6h-10.7v-3.6ZM14.2,14.2h10.7v3.6h-10.7v-3.6ZM14.2,21.3h10.7v3.6h-10.7v-3.6ZM7.1,7.1h3.6v3.6h-3.6v-3.6ZM7.1,14.2h3.6v3.6h-3.6v-3.6ZM7.1,21.3h3.6v3.6h-3.6v-3.6ZM30.4,0H1.6C.7,0,0,.7,0,1.6v28.8C0,31.1.7,32,1.6,32h28.8c.7,0,1.6-.9,1.6-1.6V1.6C32,.7,31.1,0,30.4,0M28.4,28.4H3.6V3.6h24.9v24.9Z"/>
+</svg>

package/app/assets/icons/rocket.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m2.45 10.575l4.2-4.2q.35-.35.825-.5t.975-.05l1.3.275Q8.4 7.7 7.625 9t-1.5 3.15zm5.125 2.275q.575-1.8 1.563-3.4t2.387-3q2.2-2.2 5.025-3.287t5.275-.663q.425 2.45-.65 5.275T17.9 12.8q-1.375 1.375-3 2.388t-3.425 1.587zm6.9-3q.575.575 1.413.575T17.3 9.85t.575-1.412t-.575-1.413t-1.412-.575t-1.413.575t-.575 1.413t.575 1.412m-.7 12.025l-1.6-3.675q1.85-.725 3.163-1.5t2.912-2.125l.25 1.3q.1.5-.05.988t-.5.837zM4.05 16.05q.875-.875 2.125-.888t2.125.863t.875 2.125t-.875 2.125q-.625.625-2.087 1.075t-4.038.8q.35-2.575.8-4.025T4.05 16.05"/></svg>

package/app/components/GroupLikePage.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+import eruditConfig from '#erudit/config';
+
+import type { ContentGeneric } from '@shared/content/data/base';
+import type { ContentGroupLike } from '@shared/content/data/groupLike';
+
+import ContentBreadcrumb from '@app/components/main/content/ContentBreadcrumb.vue';
+import ContentDecoration from '@app/components/main/content/ContentDecoration.vue';
+import ContentPopovers from '@app/components/main/content/ContentPopovers.vue';
+
+const props = defineProps<{
+    icon: MyIconName;
+    contentLabel: string;
+    generic: ContentGeneric;
+    groupLike: ContentGroupLike;
+}>();
+
+const pageTitle = computed(() => {
+    return props.generic?.title || props.generic.contentId.split('/').pop()!;
+});
+
+const phrase = await usePhrases('start_learning', 'topics');
+</script>
+
+<template>
+    <ContentDecoration
+        v-if="generic.decoration"
+        :decoration="generic.decoration"
+    />
+
+    <ContentBreadcrumb :context="generic.context" />
+
+    <MainTitle :title="pageTitle" :icon :hint="contentLabel" />
+
+    <MainDescription
+        v-if="generic?.description"
+        :description="generic?.description"
+    />
+
+    <StatsGroupLike
+        :stats="[
+            {
+                type: 'custom',
+                icon: 'files',
+                label: phrase.topics,
+                count: groupLike.topicCount,
+            },
+            ...groupLike.elementStats,
+        ]"
+    />
+
+    <ContentPopovers :generic />
+
+    <MainActionButton
+        icon="rocket"
+        :label="phrase.start_learning"
+        :link="groupLike.readLink"
+    />
+
+    <div style="clear: both"></div>
+
+    <MainToc :toc="groupLike.contentToc" />
+
+    <MainSourcesUsage :usageSet="groupLike.sourceUsageSet" />
+
+    <MainSection v-if="adsAllowed() && eruditConfig.ads?.bottom">
+        <AdsBannerBottom />
+    </MainSection>
+</template>

package/app/components/QuickLinks.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import type { QuickLinks } from '@shared/quickLink';
+
+interface FrontQuickLink {
+    label: string;
+    link: string;
+    elementTitle: string;
+    elementIcon: string;
+}
+
+const props = defineProps<{ links: QuickLinks }>();
+const pretty = useFormatText();
+
+const frontQuickLinks: FrontQuickLink[] = [];
+for (const link of props.links) {
+    const elementIcon = await useBitranElementIcon(link.elementName);
+    const elementLanguage = await useBitranElementLanguage(link.elementName);
+    frontQuickLinks.push({
+        label: link.label,
+        link: link.link,
+        elementTitle: elementLanguage('_element_title'),
+        elementIcon: elementIcon,
+    });
+}
+</script>
+
+<template>
+    <nav :class="$style.quickLinks">
+        <ul>
+            <li v-for="frontQuickLink of frontQuickLinks">
+                <EruditLink
+                    :to="frontQuickLink.link"
+                    :title="frontQuickLink.elementTitle"
+                    :class="$style.quickLink"
+                >
+                    <MyRuntimeIcon
+                        name="quick-link-icon"
+                        :svg="frontQuickLink.elementIcon"
+                        :class="$style.quickLinkIcon"
+                    />
+                    <span :class="$style.quickLinkLabel">
+                        {{ pretty(frontQuickLink.label) }}
+                    </span>
+                </EruditLink>
+            </li>
+        </ul>
+    </nav>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+
+.quickLinks {
+    --_erudit_quickLink_bg: var(--bgMain);
+
+    > ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap);
+
+        @include bp.below('mobile') {
+            gap: var(--gapSmall);
+        }
+
+        .quickLink {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: var(--textMuted);
+            font-size: 0.85em;
+            text-decoration: none;
+            box-shadow: 0px 0px 0px 0px transparent;
+            background: var(--_erudit_quickLink_bg);
+
+            @include transition(color, border, box-shadow);
+
+            border: 1px solid var(--border);
+            border-radius: 5px;
+            padding: 3px 7px;
+
+            &:hover {
+                color: var(--brand);
+                border-color: var(--brand);
+                box-shadow: 0px 0px 0px 2px
+                    color-mix(in srgb, var(--brand), transparent 70%);
+            }
+
+            [my-icon] {
+                flex-shrink: 0;
+                font-size: 0.9em;
+            }
+        }
+    }
+}
+</style>

package/app/components/aside/major/SiteInfo.vue

@@ -33,11 +33,11 @@ const siteInfo = computed<SiteInfo>(() => {
             <img :src="baseUrlPath(siteInfo.logotype)" :alt="siteInfo.title" />
         </EruditLink>
         <div :class="[$style.textInfo, !siteInfo.logotype && $style.noLogo]">
-            <h1 :class="$style.title">
+            <div :class="$style.title">
                 <EruditLink to="/">{{
                     siteInfo.title || phrase.site_info_title
                 }}</EruditLink>
-            </h1>
+            </div>
             <div v-if="siteInfo.slogan" :class="$style.description">
                 {{ siteInfo.slogan }}
             </div>

package/app/components/aside/major/panes/nav/NavBook.vue

@@ -56,7 +56,7 @@ const pharse = await usePhrases('to_index', 'about_book');
                         <TreeItem
                             icon="book-question"
                             :label="pharse.about_book"
-                            :active="contentRoute?.contentId === book.id"
+                            :active="contentRoute?.type === 'book'"
                             :link="`/book/${book.id}`"
                         />
                     </section>

package/app/components/aside/major/panes/other/ItemTheme.vue

@@ -14,41 +14,36 @@ const themeOptions: Record<string, [MyIconName, string]> = {
     dark: ['moon', phrase.theme_dark],
 };
 
+const clientMode = ref(false);
 const themeItem = ref(themeOptions.auto);
-
-let _cycle = () => {};
+let cycle = () => {};
 
 onMounted(() => {
-    const { cycle, theme } = useTheme();
-
-    _cycle = cycle;
-
-    watch(
-        theme,
-        () => {
-            themeItem.value = (() => {
-                switch (theme.value) {
-                    case 'auto':
-                        return themeOptions.auto;
-                    case 'light':
-                        return themeOptions.light;
-                    case 'dark':
-                        return themeOptions.dark;
-                }
-            })();
-        },
-        { immediate: true },
-    );
+    const { cycle: _cycle, theme } = useTheme();
+
+    themeItem.value = themeOptions[theme.value];
+
+    cycle = () => {
+        _cycle();
+        themeItem.value = themeOptions[theme.value];
+    };
+
+    clientMode.value = true;
 });
 </script>
 
 <template>
-    <ClientOnly>
-        <AsideListItem
-            @click="_cycle"
-            :icon="themeItem![0]"
-            :main="phrase.theme"
-            :secondary="themeItem![1]"
-        />
-    </ClientOnly>
+    <AsideListItem
+        v-if="clientMode"
+        :icon="themeItem![0]"
+        :main="phrase.theme"
+        :secondary="themeItem![1]"
+        @click="cycle"
+    />
+    <AsideListItem
+        v-else
+        :icon="themeOptions.auto![0]"
+        :main="phrase.theme"
+        :secondary="themeOptions.auto![1]"
+    />
 </template>

package/app/components/index/IndexAvatars.vue

@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+
+const props = defineProps<{
+    label: string;
+    link: string;
+    max: number;
+    icon: MyIconName;
+    namesAvatars: [string, string?][];
+}>();
+
+const displayNamesAvatars = ref<[string, string?][]>([]);
+const isLoaded = ref(false);
+
+const remainingCount = computed(() => {
+    return Math.max(0, props.namesAvatars.length - props.max);
+});
+
+onMounted(() => {
+    const shuffled = [...props.namesAvatars];
+    for (let i = shuffled.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [shuffled[i], shuffled[j]] = [shuffled[j]!, shuffled[i]!];
+    }
+    displayNamesAvatars.value = shuffled.slice(0, props.max);
+    isLoaded.value = true;
+});
+</script>
+
+<template>
+    <div :class="$style.indexAvatars">
+        <EruditLink :to="link" :class="$style.indexAvatarsLabel">{{
+            label
+        }}</EruditLink>
+        <ul>
+            <template v-if="isLoaded">
+                <li
+                    v-for="nameAvatar of displayNamesAvatars"
+                    :class="$style.indexAvatar"
+                >
+                    <EruditLink :to="link">
+                        <Avatar
+                            :class="$style.indexAvatar"
+                            :title="nameAvatar[0]"
+                            :icon
+                            :src="nameAvatar[1]"
+                            :color="stringColor(nameAvatar[0])"
+                        />
+                    </EruditLink>
+                </li>
+                <li v-if="remainingCount > 0" :class="$style.remainingCounter">
+                    <EruditLink :to="link" :class="$style.counterCircle">
+                        +{{ remainingCount }}
+                    </EruditLink>
+                </li>
+            </template>
+            <template v-else>
+                <li
+                    v-for="i in Math.min(max, namesAvatars.length)"
+                    :class="$style.indexAvatar"
+                >
+                    <div :class="$style.avatarPlaceholder"></div>
+                </li>
+                <li v-if="remainingCount > 0" :class="$style.remainingCounter">
+                    <div :class="$style.counterPlaceholder"></div>
+                </li>
+            </template>
+        </ul>
+    </div>
+</template>
+
+<style lang="scss" module>
+.indexAvatars {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    align-items: center;
+
+    &:hover {
+        .indexAvatarsLabel {
+            color: var(--text);
+        }
+    }
+
+    .indexAvatarsLabel {
+        font-size: 1.2em;
+        font-weight: 600;
+        color: var(--textMuted);
+        text-decoration: none;
+
+        @include transition(color);
+    }
+
+    > ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        display: flex;
+        gap: var(--gapSmall);
+
+        .indexAvatar {
+            --avatarSize: 50px;
+        }
+
+        .remainingCounter {
+            --avatarSize: 50px;
+        }
+    }
+}
+
+.avatarPlaceholder,
+.counterPlaceholder {
+    width: var(--avatarSize);
+    height: var(--avatarSize);
+    border-radius: 50%;
+    background: var(--textDimmed);
+    animation: avatarPlaceholder 500ms infinite ease-in-out alternate;
+}
+
+.counterCircle {
+    width: var(--avatarSize);
+    height: var(--avatarSize);
+    border-radius: 50%;
+    border: 3px dashed var(--textDimmed);
+    color: var(--textMuted);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.95em;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+@keyframes avatarPlaceholder {
+    from {
+        opacity: 0.625;
+    }
+    to {
+        opacity: 0.4;
+    }
+}
+</style>

package/app/components/main/MainActionButton.vue

@@ -13,7 +13,7 @@ defineProps<{
         <EruditLink
             :prefetch="false"
             :to="link"
-            target="_blank"
+            :target="link.startsWith('/') ? undefined : '_blank'"
             :class="$style.actionButton"
         >
             <MyIcon :name="icon" :class="$style.actionButtonIcon" />
@@ -24,6 +24,8 @@ defineProps<{
 
 <style lang="scss" module>
 .actionButtonSection {
+    position: relative;
+    z-index: 10;
     display: flex;
     justify-content: center;
     align-items: center;

package/app/components/main/MainBitranContent.vue

@@ -13,6 +13,7 @@ type MainBitranPayload = RawBitranContent & {
 
 const props = defineProps<{ location: BitranLocation }>();
 
+const route = useRoute();
 const nuxtApp = useNuxtApp();
 const stringLocation = stringifyBitranLocation(props.location);
 
@@ -37,6 +38,18 @@ if (
         mainLocation: props.location,
     });
 }
+
+onMounted(() => {
+    setTimeout(() => {
+        const hash = route.hash;
+        if (hash) {
+            const element = document.querySelector(hash.replace(':', '\\:'));
+            if (element) {
+                element.scrollIntoView({ behavior: 'instant' });
+            }
+        }
+    }, 100);
+});
 </script>
 
 <template>

package/app/components/main/MainDescription.vue

@@ -15,10 +15,16 @@ const pretty = useFormatText();
 </template>
 
 <style lang="scss" module>
+@use '$/def/bp';
+
 .contentDescription {
     padding: var(--_pMainY) var(--_pMainX);
     font-weight: 500;
     font-size: 1.1em;
     color: var(--text);
+
+    @include bp.below('mobile') {
+        text-align: center;
+    }
 }
 </style>

package/app/components/main/MainSectionTitle.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { isMyIcon, type MyIconName } from '#my-icons';
+
+defineProps<{
+    icon: string;
+    title: string;
+    count?: number | string;
+}>();
+
+const pretty = useFormatText();
+</script>
+
+<template>
+    <h2 :class="$style.heading">
+        <MyIcon
+            v-if="isMyIcon(icon)"
+            :name="icon as MyIconName"
+            :class="$style.icon"
+        />
+        <MyRuntimeIcon v-else name="section-title-icon" :svg="icon" />
+        <span :class="$style.title">{{ pretty(title) }}</span>
+        <span v-if="count !== undefined" :class="$style.count">
+            {{ count }}
+        </span>
+    </h2>
+</template>
+
+<style lang="scss" module>
+.heading {
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+    padding: var(--_pMainY) var(--_pMainX);
+
+    .icon {
+        font-size: 0.9em;
+        color: var(--textMuted);
+    }
+
+    .count {
+        position: relative;
+        top: 1px;
+        font-weight: 550;
+        font-size: 0.6em;
+        background: color-mix(in srgb, var(--textDimmed), transparent 65%);
+        border-radius: 20px;
+        padding: 2px 10px;
+    }
+}
+</style>

package/app/components/main/MainSourceUsages.vue

@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import type { ContentSourceUsage } from '@shared/content/reference';
+
+defineProps<{ usages: ContentSourceUsage[] }>();
+
+const expanded = ref(false);
+const pretty = useFormatText();
+const phrase = await usePhrases('mentions');
+</script>
+
+<template>
+    <div :class="[expanded && $style.expanded]">
+        <div>
+            <button :class="$style.toggleUsages" @click="expanded = !expanded">
+                <span :class="$style.toggleUsageLabel">
+                    {{
+                        phrase.mentions(
+                            usages.reduce((sum, usage) => sum + usage.count, 0),
+                        )
+                    }}
+                </span>
+                <MyIcon name="angle-right" :class="$style.toggleUsagesAngle" />
+            </button>
+        </div>
+        <ul :class="$style.mentions">
+            <li v-for="usageItem of usages" :class="$style.mention">
+                <MyIcon name="arrow-up-to-right" />
+                <EruditLink
+                    :class="$style.mentionLabel"
+                    :prefetch="false"
+                    :to="usageItem.link"
+                >
+                    {{ pretty(usageItem.title) }}
+                </EruditLink>
+                <span :class="$style.mentionCount"
+                    >({{ usageItem.count }})</span
+                >
+            </li>
+        </ul>
+    </div>
+</template>
+
+<style lang="scss" module>
+.toggleUsages {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    cursor: pointer;
+
+    &:hover {
+        .toggleUsageLabel {
+            text-decoration-color: var(--textDimmed);
+        }
+    }
+
+    .toggleUsageLabel {
+        color: var(--textMuted);
+        font-weight: 500;
+        text-decoration: underline;
+        text-decoration-color: transparent;
+        @include transition(text-decoration-color);
+    }
+
+    .toggleUsagesAngle {
+        color: var(--textDimmed);
+        @include transition(transform);
+
+        .expanded & {
+            transform: rotate(90deg);
+        }
+    }
+}
+
+.mentions {
+    height: 0;
+    overflow: hidden;
+    @include transition(height);
+
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--gapSmall);
+    color: var(--textMuted);
+    font-size: 0.95em;
+
+    .expanded & {
+        height: auto;
+    }
+
+    .mention {
+        display: flex;
+        align-items: center;
+        gap: var(--gapSmall);
+
+        &:first-of-type {
+            margin-top: var(--gapSmall);
+        }
+
+        .mentionLabel {
+            color: var(--text);
+            font-weight: 500;
+            text-decoration-color: transparent;
+            @include transition(text-decoration-color);
+
+            &:hover {
+                text-decoration-color: var(--textDimmed);
+            }
+        }
+
+        .mentionCount {
+            color: var(--textDimmed);
+            font-weight: 500;
+        }
+    }
+}
+</style>