Implement foundational vault data models, service, and shared UI components.

2026-03-21 22:53:46 +03:00
parent ce6e025d0e
commit d9c148367a
15 changed files with 577 additions and 2 deletions
--- a/src/app/shared/components/notification/notification.component.ts
+++ b/src/app/shared/components/notification/notification.component.ts
@@ -0,0 +1,60 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-notification',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    @if (visible) {
+      <div class="fixed bottom-4 right-4 z-50 glass-panel ghost-border rounded-sm px-4 py-3 min-w-[300px] flex items-start gap-3 shadow-lg transition-all duration-300"
+           [ngClass]="type === 'error' ? 'border-red-500/50' : 'border-[var(--color-primary)]/50'">
+        
+        <!-- Icon -->
+        <div [ngClass]="type === 'error' ? 'text-red-400' : 'text-[var(--color-primary)]'" class="mt-0.5">
+          @if (type === 'success') {
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          }
+          @if (type === 'error') {
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          }
+        </div>
+
+      <!-- Content -->
+      <div class="flex-1">
+        <h4 class="text-[var(--color-on-surface)] font-inter font-medium text-sm m-0">{{ title }}</h4>
+        <p class="text-[var(--color-on-surface-variant)] font-inter text-sm m-0 mt-0.5">{{ message }}</p>
+      </div>
+
+      <!-- Close -->
+      <button (click)="close()" class="text-[var(--color-outline-variant)] hover:text-[var(--color-on-surface)] transition-colors">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+      </div>
+    }
+  `
+})
+export class NotificationComponent implements OnInit {
+  @Input() title = '';
+  @Input() message = '';
+  @Input() type: 'success' | 'error' = 'success';
+  @Input() duration = 5000;
+  
+  visible = true;
+
+  ngOnInit() {
+    if (this.duration > 0) {
+      setTimeout(() => this.close(), this.duration);
+    }
+  }
+
+  close() {
+    this.visible = false;
+  }
+}