Myx
ee293d7daf
Some checks failed
Deploy Web Apps / deploy (push) Successful in 5m52s
Build Android APK / build-android-apk (push) Failing after 23m15s
Queue Release Build / prepare (push) Successful in 1m42s
Queue Release Build / build-linux (push) Failing after 9m33s
Queue Release Build / build-windows (push) Successful in 26m5s
Queue Release Build / finalize (push) Has been skipped
98 lines
3.8 KiB
HTML
98 lines
3.8 KiB
HTML
<!-- eslint-disable @angular-eslint/template/prefer-ngsrc -->
|
|
<div class="mt-2 flex w-full flex-col items-center gap-2 border-b border-border/70 pb-2">
|
|
<div class="group/server relative flex w-full justify-center">
|
|
<button
|
|
type="button"
|
|
class="relative z-10 flex h-11 w-11 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent text-muted-foreground transition-[border-radius,box-shadow,background-color,color] duration-100 hover:rounded-lg hover:bg-card hover:text-foreground md:h-10 md:w-10"
|
|
[title]="'dm.rail.title' | translate"
|
|
[attr.aria-label]="'dm.rail.ariaLabel' | translate"
|
|
[ngClass]="isOnDirectMessages() ? 'rounded-lg ring-2 ring-primary/40 bg-primary/10 text-foreground' : 'rounded-xl bg-card'"
|
|
[attr.aria-current]="isOnDirectMessages() ? 'page' : null"
|
|
(click)="openDirectMessages()"
|
|
>
|
|
<ng-icon
|
|
name="lucideMessageCircle"
|
|
class="h-[18px] w-[18px] md:h-4 md:w-4"
|
|
/>
|
|
@if (directMessages.totalUnreadCount() > 0) {
|
|
<span class="dm-rail-slide-in absolute -right-1 -top-1 h-3 w-3 rounded-full bg-amber-400 ring-2 ring-card"></span>
|
|
}
|
|
</button>
|
|
</div>
|
|
|
|
@for (item of railItems(); track item.id) {
|
|
<div class="group/server relative flex w-full justify-center">
|
|
<button
|
|
type="button"
|
|
class="relative z-10 flex h-11 w-11 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent transition-[border-radius,box-shadow,background-color] duration-100 hover:rounded-lg hover:bg-card md:h-10 md:w-10"
|
|
[class.dm-rail-slide-in]="!item.isExiting"
|
|
[class.dm-rail-slide-out]="item.isExiting"
|
|
[class.pointer-events-none]="item.isExiting"
|
|
[ngClass]="isSelectedItem(item) ? 'rounded-lg ring-2 ring-primary/40 bg-primary/10' : 'rounded-xl bg-card'"
|
|
[attr.data-testid]="'dm-rail-item-' + item.id"
|
|
[title]="item.label"
|
|
[attr.aria-current]="isSelectedItem(item) ? 'page' : null"
|
|
(click)="openItem(item)"
|
|
(contextmenu)="openContextMenu($event, item)"
|
|
>
|
|
<div class="h-full w-full overflow-hidden rounded-[inherit]">
|
|
@if (item.avatarUrl) {
|
|
<img
|
|
[src]="item.avatarUrl"
|
|
[alt]="item.label"
|
|
class="h-full w-full object-cover"
|
|
/>
|
|
} @else {
|
|
<div
|
|
class="flex h-full w-full items-center justify-center bg-secondary transition-colors"
|
|
[class.bg-primary/15]="isSelectedItem(item)"
|
|
>
|
|
<span
|
|
class="text-sm font-semibold text-muted-foreground transition-colors"
|
|
[class.text-foreground]="isSelectedItem(item)"
|
|
>{{ initial(item.label) }}</span
|
|
>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<span
|
|
class="absolute -bottom-1 -right-1 grid h-4 w-4 place-items-center rounded-full bg-secondary text-muted-foreground shadow-sm ring-2 ring-card"
|
|
>
|
|
<ng-icon
|
|
[name]="iconFor(item)"
|
|
class="h-2.5 w-2.5"
|
|
/>
|
|
</span>
|
|
|
|
@if (!item.isExiting && item.unreadCount > 0) {
|
|
<span class="absolute -right-1 -top-1 min-w-5 rounded-full bg-amber-400 px-1.5 py-0.5 text-[10px] font-semibold text-black shadow-sm">
|
|
{{ formatUnreadCount(item.unreadCount) }}
|
|
</span>
|
|
}
|
|
</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
@if (contextMenu(); as menu) {
|
|
<app-context-menu
|
|
[x]="menu.x"
|
|
[y]="menu.y"
|
|
width="w-44"
|
|
(closed)="closeContextMenu()"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="context-menu-item-icon-danger"
|
|
(click)="forgetContextItem()"
|
|
>
|
|
<ng-icon
|
|
[name]="forgetContextIcon(menu.item)"
|
|
class="h-4 w-4"
|
|
/>
|
|
{{ forgetContextLabel(menu.item) }}
|
|
</button>
|
|
</app-context-menu>
|
|
}
|