first commit

ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.html

@@ -0,0 +1,10 @@
+<div class="overlay" (click)="onOverlayClick()"></div>
+<div class="modal" (click)="$event.stopPropagation()">
+    <div class="modal-header">
+        <span class="modal-title">{{ title() }}</span>
+        <button class="close-btn" (click)="onClose()" aria-label="Close">&times;</button>
+    </div>
+    <div class="modal-body">
+        <ng-content />
+    </div>
+</div>

ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.scss

@@ -0,0 +1,134 @@
+:host {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+}
+
+.modal {
+    position: relative;
+    background: var(--bg-surface);
+    border-radius: var(--radius-2xl);
+    width: min(480px, 92vw);
+    max-height: 85vh;
+    overflow: auto;
+    box-shadow: var(--shadow-modal);
+}
+
+.modal-header {
+    padding: 18px 22px 14px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+}
+
+.modal-title {
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.close-btn {
+    margin-left: auto;
+    background: none;
+    border: none;
+    font-size: 20px;
+    color: var(--text-faint);
+    cursor: pointer;
+    line-height: 1;
+    padding: 0;
+
+    &:hover {
+        color: var(--text-primary);
+    }
+}
+
+.modal-body {
+    padding: 18px 22px 22px;
+}
+
+/* ─── Shared form styles for modal content ─── */
+:host ::ng-deep {
+    .field {
+        margin-bottom: 14px;
+    }
+
+    .field-label {
+        display: block;
+        font-size: 12px;
+        font-weight: 600;
+        color: #666;
+        margin-bottom: 4px;
+    }
+
+    .field-input {
+        width: 100%;
+        padding: 8px 10px;
+        border-radius: var(--radius-md);
+        border: 1px solid var(--border-muted);
+        font-size: 13px;
+        font-family: inherit;
+        box-sizing: border-box;
+        outline: none;
+    }
+
+    .field-textarea {
+        min-height: 70px;
+        resize: vertical;
+    }
+
+    .modal-actions {
+        display: flex;
+        gap: 8px;
+        justify-content: flex-end;
+        margin-top: 8px;
+    }
+
+    .btn-primary {
+        padding: 8px 20px;
+        border-radius: var(--radius-md);
+        border: none;
+        background: var(--accent-indigo);
+        color: #fff;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+
+        &:hover:not(:disabled) {
+            background: #3730A3;
+        }
+
+        &:disabled {
+            opacity: 0.55;
+            cursor: not-allowed;
+        }
+    }
+
+    .btn-secondary {
+        padding: 8px 20px;
+        border-radius: var(--radius-md);
+        border: none;
+        background: var(--bg-hover);
+        color: var(--text-secondary);
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+
+        &:hover {
+            background: #e5e5e0;
+        }
+    }
+
+    .error {
+        font-size: 13px;
+        color: #dc2626;
+        margin: 0 0 8px;
+    }
+}

ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.ts

@@ -0,0 +1,19 @@
+import { Component, input, output } from '@angular/core';
+
+@Component({
+    selector: 'app-modal-shell',
+    templateUrl: './modal-shell.html',
+    styleUrl: './modal-shell.scss',
+})
+export class ModalShell {
+    readonly title = input.required<string>();
+    readonly closed = output<void>();
+
+    onOverlayClick() {
+        this.closed.emit();
+    }
+
+    onClose() {
+        this.closed.emit();
+    }
+}