Initial commit: notification-elements-ui library
Angular 19 component library for notifications & communication: - ntf-bell: notification bell with badge count and shake animation - ntf-feed / ntf-feed-item: real-time notification feed with grouping - ntf-center: full notification center with category filter tabs - ntf-inbox / ntf-inbox-item: two-column inbox with search and detail - ntf-comment / ntf-thread: comment threads with replies and reactions - ntf-mention-input: text input with @mention autocomplete - ntf-empty-state: empty state placeholder - ntf-item-def: custom template directive for notification items Includes signal-based services, SCSS design tokens with dark mode, utility functions, and full TypeScript type definitions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Giuliano Silvestro
1
src/components/ntf-comment/index.ts
Normal file
1
src/components/ntf-comment/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { NtfCommentComponent } from './ntf-comment.component';
|
||||
91
src/components/ntf-comment/ntf-comment.component.html
Normal file
91
src/components/ntf-comment/ntf-comment.component.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<div class="ntf-comment">
|
||||
<!-- Avatar -->
|
||||
<div class="ntf-comment__avatar">
|
||||
@if (comment().authorAvatar) {
|
||||
<img [src]="comment().authorAvatar" [alt]="comment().authorName" class="ntf-comment__avatar-img" />
|
||||
} @else {
|
||||
<div class="ntf-comment__avatar-placeholder">
|
||||
{{ comment().authorName.charAt(0).toUpperCase() }}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="ntf-comment__body">
|
||||
<!-- Header -->
|
||||
<div class="ntf-comment__header">
|
||||
<span class="ntf-comment__author">{{ comment().authorName }}</span>
|
||||
<span class="ntf-comment__time">{{ timeDisplay() }}</span>
|
||||
@if (editedDisplay()) {
|
||||
<span class="ntf-comment__edited">({{ editedDisplay() }})</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
@if (isEditing()) {
|
||||
<div class="ntf-comment__edit">
|
||||
<textarea
|
||||
class="ntf-comment__edit-input"
|
||||
[ngModel]="editContent()"
|
||||
(ngModelChange)="editContent.set($event)"
|
||||
rows="3"
|
||||
></textarea>
|
||||
<div class="ntf-comment__edit-actions">
|
||||
<button class="ntf-comment__edit-btn ntf-comment__edit-btn--cancel" (click)="cancelEdit()">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="ntf-comment__edit-btn ntf-comment__edit-btn--save" (click)="saveEdit()">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="ntf-comment__content" [innerHTML]="comment().content"></div>
|
||||
}
|
||||
|
||||
<!-- Reactions -->
|
||||
@if (comment().reactions?.length && allowReactions()) {
|
||||
<div class="ntf-comment__reactions">
|
||||
@for (reaction of comment().reactions; track reaction.emoji) {
|
||||
<button
|
||||
class="ntf-comment__reaction"
|
||||
[class.ntf-comment__reaction--active]="reaction.reacted"
|
||||
(click)="onReact(reaction.emoji)"
|
||||
>
|
||||
<span>{{ reaction.emoji }}</span>
|
||||
<span class="ntf-comment__reaction-count">{{ reaction.count }}</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Footer actions -->
|
||||
@if (!isEditing()) {
|
||||
<div class="ntf-comment__footer">
|
||||
<button class="ntf-comment__footer-btn" (click)="onReply()">Reply</button>
|
||||
@if (allowReactions()) {
|
||||
<button class="ntf-comment__footer-btn" (click)="onReact('👍')">React</button>
|
||||
}
|
||||
@if (isOwner()) {
|
||||
<div class="ntf-comment__more">
|
||||
<button class="ntf-comment__footer-btn" (click)="toggleActions()">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14">
|
||||
<circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/>
|
||||
</svg>
|
||||
</button>
|
||||
@if (showActions()) {
|
||||
<div class="ntf-comment__more-menu">
|
||||
@if (allowEdit()) {
|
||||
<button class="ntf-comment__more-item" (click)="startEdit()">Edit</button>
|
||||
}
|
||||
@if (allowDelete()) {
|
||||
<button class="ntf-comment__more-item ntf-comment__more-item--danger" (click)="onDelete()">Delete</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
249
src/components/ntf-comment/ntf-comment.component.scss
Normal file
249
src/components/ntf-comment/ntf-comment.component.scss
Normal file
@@ -0,0 +1,249 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ntf-comment {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.ntf-comment__avatar-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ntf-comment__avatar-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary-50, #eff6ff);
|
||||
color: var(--color-primary-500, #3b82f6);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ntf-comment__body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: var(--ntf-comment-bg);
|
||||
border: 1px solid var(--ntf-comment-border);
|
||||
border-radius: var(--ntf-comment-radius);
|
||||
padding: var(--ntf-comment-padding);
|
||||
}
|
||||
|
||||
.ntf-comment__header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.ntf-comment__author {
|
||||
font-size: var(--ntf-comment-author-font-size);
|
||||
font-weight: var(--ntf-comment-author-font-weight);
|
||||
color: var(--ntf-comment-author-color);
|
||||
}
|
||||
|
||||
.ntf-comment__time {
|
||||
font-size: var(--font-size-xs, 0.75rem);
|
||||
color: var(--ntf-item-time-color);
|
||||
}
|
||||
|
||||
.ntf-comment__edited {
|
||||
font-size: var(--font-size-xs, 0.75rem);
|
||||
color: var(--ntf-item-time-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ntf-comment__content {
|
||||
font-size: var(--ntf-comment-content-font-size);
|
||||
color: var(--ntf-comment-content-color);
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
|
||||
:host ::ng-deep .ntf-mention {
|
||||
background: var(--ntf-mention-bg);
|
||||
color: var(--ntf-mention-color);
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// Edit mode
|
||||
.ntf-comment__edit-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--ntf-feed-border);
|
||||
border-radius: 0.375rem;
|
||||
background: var(--ntf-item-bg);
|
||||
color: var(--ntf-item-title-color);
|
||||
font-size: var(--font-size-sm, 0.875rem);
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary-500, #3b82f6);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.ntf-comment__edit-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.ntf-comment__edit-btn {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border: 1px solid var(--ntf-feed-border);
|
||||
border-radius: 0.375rem;
|
||||
font-size: var(--font-size-xs, 0.75rem);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color var(--ntf-transition, 150ms ease-in-out),
|
||||
border-color var(--ntf-transition, 150ms ease-in-out);
|
||||
|
||||
&--cancel {
|
||||
background: transparent;
|
||||
color: var(--ntf-item-body-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--ntf-item-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&--save {
|
||||
background: var(--color-primary-500, #3b82f6);
|
||||
color: #ffffff;
|
||||
border-color: var(--color-primary-500, #3b82f6);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-primary-600, #2563eb);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reactions
|
||||
.ntf-comment__reactions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.ntf-comment__reaction {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border: 1px solid var(--ntf-feed-border);
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
font-size: var(--font-size-xs, 0.75rem);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color var(--ntf-transition, 150ms ease-in-out),
|
||||
border-color var(--ntf-transition, 150ms ease-in-out);
|
||||
|
||||
&:hover {
|
||||
background: var(--ntf-item-hover-bg);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: var(--ntf-mention-bg);
|
||||
border-color: var(--color-primary-500, #3b82f6);
|
||||
}
|
||||
}
|
||||
|
||||
.ntf-comment__reaction-count {
|
||||
color: var(--ntf-item-body-color);
|
||||
}
|
||||
|
||||
// Footer
|
||||
.ntf-comment__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.ntf-comment__footer-btn {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: var(--font-size-xs, 0.75rem);
|
||||
color: var(--ntf-item-time-color);
|
||||
cursor: pointer;
|
||||
transition: color var(--ntf-transition, 150ms ease-in-out);
|
||||
|
||||
&:hover {
|
||||
color: var(--ntf-item-title-color);
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.ntf-comment__more {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.ntf-comment__more-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 4px;
|
||||
min-width: 120px;
|
||||
background: var(--ntf-mention-popup-bg);
|
||||
border: 1px solid var(--ntf-feed-border);
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: var(--ntf-mention-popup-shadow);
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
animation: ntf-menu-in 150ms var(--ntf-ease-smooth, ease-out);
|
||||
}
|
||||
|
||||
.ntf-comment__more-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
font-size: var(--font-size-sm, 0.875rem);
|
||||
color: var(--ntf-item-title-color);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--ntf-transition, 150ms ease-in-out);
|
||||
|
||||
&:hover {
|
||||
background: var(--ntf-item-hover-bg);
|
||||
}
|
||||
|
||||
&--danger {
|
||||
color: var(--color-error-500, #ef4444);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ntf-menu-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
93
src/components/ntf-comment/ntf-comment.component.ts
Normal file
93
src/components/ntf-comment/ntf-comment.component.ts
Normal file
@@ -0,0 +1,93 @@
|
||||
import { Component, ChangeDetectionStrategy, input, output, signal, computed, inject } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { NOTIFICATION_CONFIG } from '../../providers/notification-config.provider';
|
||||
import type { NtfComment } from '../../types/comment.types';
|
||||
import type {
|
||||
NtfCommentEditEvent,
|
||||
NtfCommentDeleteEvent,
|
||||
NtfReactionEvent,
|
||||
NtfReplyEvent,
|
||||
} from '../../types/event.types';
|
||||
import { formatRelativeTime, formatTimestamp } from '../../utils/time.utils';
|
||||
|
||||
@Component({
|
||||
selector: 'ntf-comment',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule],
|
||||
templateUrl: './ntf-comment.component.html',
|
||||
styleUrl: './ntf-comment.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class NtfCommentComponent {
|
||||
private config = inject(NOTIFICATION_CONFIG);
|
||||
|
||||
readonly comment = input.required<NtfComment>();
|
||||
readonly currentUserId = input('');
|
||||
readonly allowReactions = input(true);
|
||||
readonly allowEdit = input(true);
|
||||
readonly allowDelete = input(true);
|
||||
|
||||
readonly reply = output<NtfReplyEvent>();
|
||||
readonly edit = output<NtfCommentEditEvent>();
|
||||
readonly delete = output<NtfCommentDeleteEvent>();
|
||||
readonly react = output<NtfReactionEvent>();
|
||||
|
||||
readonly isEditing = signal(false);
|
||||
readonly editContent = signal('');
|
||||
readonly showActions = signal(false);
|
||||
|
||||
readonly isOwner = computed(() => this.comment().authorId === this.currentUserId());
|
||||
|
||||
readonly timeDisplay = computed(() => {
|
||||
const ts = this.comment().timestamp;
|
||||
return this.config.relativeTime ? formatRelativeTime(ts) : formatTimestamp(ts, this.config.locale);
|
||||
});
|
||||
|
||||
readonly editedDisplay = computed(() => {
|
||||
const editedAt = this.comment().editedAt;
|
||||
if (!editedAt) return '';
|
||||
return `edited ${this.config.relativeTime ? formatRelativeTime(editedAt) : formatTimestamp(editedAt, this.config.locale)}`;
|
||||
});
|
||||
|
||||
onReply(): void {
|
||||
this.reply.emit({ parentId: this.comment().id });
|
||||
}
|
||||
|
||||
startEdit(): void {
|
||||
this.editContent.set(this.comment().content);
|
||||
this.isEditing.set(true);
|
||||
this.showActions.set(false);
|
||||
}
|
||||
|
||||
cancelEdit(): void {
|
||||
this.isEditing.set(false);
|
||||
}
|
||||
|
||||
saveEdit(): void {
|
||||
const newContent = this.editContent().trim();
|
||||
if (newContent && newContent !== this.comment().content) {
|
||||
this.edit.emit({
|
||||
comment: this.comment(),
|
||||
newContent,
|
||||
});
|
||||
}
|
||||
this.isEditing.set(false);
|
||||
}
|
||||
|
||||
onDelete(): void {
|
||||
this.delete.emit({ commentId: this.comment().id });
|
||||
this.showActions.set(false);
|
||||
}
|
||||
|
||||
onReact(emoji: string): void {
|
||||
this.react.emit({
|
||||
commentId: this.comment().id,
|
||||
emoji,
|
||||
});
|
||||
}
|
||||
|
||||
toggleActions(): void {
|
||||
this.showActions.update((v) => !v);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user