git-history-ui 1.0.2 → 1.0.3

package/frontend/src/app/components/commit-list/commit-list.component.ts

@@ -1,199 +0,0 @@
-import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Commit } from '../../models/git.models';
-import { ColorPalette } from '../../models/color-palette.models';
-
-@Component({
-  selector: 'app-commit-list',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <div class="commit-list" [style.background-color]="getBackgroundColor()" [style.min-height]="'100vh'">
-      <div *ngFor="let commit of commits" 
-           class="commit-item"
-           [style.background-color]="getColor('background', 'white')"
-           [style.border-color]="getColor('border', '#e5e7eb')"
-           [style.color]="getColor('text', '#111827')"
-           (click)="onCommitClick(commit)">
-        <div class="commit-header">
-          <div class="commit-info">
-            <div class="commit-meta">
-              <span class="commit-hash" [style.color]="getColor('text', '#6b7280')">{{ commit.hash.substring(0, 8) }}</span>
-              <span class="commit-author" [style.color]="getColor('text', '#374151')">{{ commit.author }}</span>
-              <span class="commit-date" [style.color]="getColor('text', '#6b7280')">{{ formatDate(commit.date) }}</span>
-            </div>
-            <h3 class="commit-message" [style.color]="getColor('text', '#111827')">{{ commit.message }}</h3>
-            <div class="commit-stats" [style.color]="getColor('text', '#6b7280')">
-              <span>{{ commit.files.length }} files changed</span>
-              <span *ngIf="commit.branches.length > 0">
-                Branch: {{ commit.branches[0] }}
-              </span>
-              <span *ngIf="commit.tags.length > 0">
-                Tag: {{ commit.tags[0] }}
-              </span>
-            </div>
-          </div>
-          <div class="commit-actions">
-            <button class="btn btn-primary" 
-                    [style.background-color]="getColor('primary', '#3b82f6')"
-                    [style.color]="getColor('text', 'white')"
-                    (click)="onCommitClick(commit); $event.stopPropagation()">
-              View
-            </button>
-          </div>
-        </div>
-      </div>
-      
-      <!-- No results message -->
-      <div *ngIf="commits.length === 0" 
-           class="no-results"
-           [style.color]="getColor('text', '#6b7280')"
-           [style.text-align]="'center'"
-           [style.padding]="'2rem'">
-        No commits found matching your search criteria.
-      </div>
-    </div>
-  `,
-  styles: [`
-    .commit-list {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-      min-height: 100vh;
-      padding: 1rem 0;
-      transition: background-color 0.2s ease;
-    }
-
-    .commit-item {
-      background-color: white;
-      border-radius: 0.5rem;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      padding: 1rem;
-      cursor: pointer;
-      transition: box-shadow 0.2s;
-    }
-
-    .commit-item:hover {
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-
-    .commit-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-    }
-
-    .commit-info {
-      flex: 1;
-    }
-
-    .commit-meta {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      margin-bottom: 0.5rem;
-    }
-
-    .commit-hash {
-      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-      font-size: 0.875rem;
-      color: #6b7280;
-    }
-
-    .commit-author {
-      font-size: 0.875rem;
-      color: #374151;
-    }
-
-    .commit-date {
-      font-size: 0.875rem;
-      color: #6b7280;
-    }
-
-    .commit-message {
-      font-size: 1.125rem;
-      font-weight: 500;
-      color: #111827;
-      margin-bottom: 0.5rem;
-    }
-
-    .commit-stats {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      font-size: 0.875rem;
-      color: #6b7280;
-    }
-
-    .commit-actions {
-      display: flex;
-      gap: 0.5rem;
-    }
-
-    .no-results {
-      font-size: 1rem;
-      font-style: italic;
-    }
-
-    /* Remove hardcoded dark mode styles to let dynamic styling work */
-    /* All styling is now handled by dynamic [style] bindings */
-  `]
-})
-export class CommitListComponent implements OnInit, OnDestroy {
-  @Input() commits: Commit[] = [];
-  @Input() colorPalette?: ColorPalette;
-  @Output() commitClick = new EventEmitter<Commit>();
-  
-  private observer?: MutationObserver;
-
-  ngOnInit() {
-    this.setupDarkModeObserver();
-  }
-
-  ngOnDestroy() {
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-  }
-
-  onCommitClick(commit: Commit) {
-    this.commitClick.emit(commit);
-  }
-
-  formatDate(dateString: string): string {
-    const date = new Date(dateString);
-    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
-  }
-
-  private setupDarkModeObserver() {
-    // Observe changes to the document element's class list
-    this.observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-          // Force change detection when dark mode changes
-          // This will trigger a re-render with the correct background color
-          setTimeout(() => {
-            // Trigger change detection
-            this.getBackgroundColor();
-          }, 0);
-        }
-      });
-    });
-
-    // Start observing the document element for class changes
-    this.observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class']
-    });
-  }
-
-  getColor(colorKey: keyof ColorPalette['colors'], defaultValue: string): string {
-    return this.colorPalette?.colors[colorKey] || defaultValue;
-  }
-
-  getBackgroundColor(): string {
-    // Use transparent background so it inherits from the parent container
-    // This allows the list to blend with the main content background
-    return 'transparent';
-  }
-}

package/frontend/src/app/components/diff-viewer/diff-viewer.component.ts

@@ -1,311 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DiffFile } from '../../models/git.models';
-
-@Component({
-  selector: 'app-diff-viewer',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <div class="diff-viewer">
-      <div class="diff-header">
-        <h3 class="diff-title">Diff: {{ fileName }}</h3>
-        <button (click)="onClose()" class="close-button">
-          <svg class="close-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-          </svg>
-        </button>
-      </div>
-      
-      <div class="diff-content">
-        <div class="diff-stats">
-          <span class="stat added">+{{ diffFile?.additions || 0 }} additions</span>
-          <span class="stat removed">-{{ diffFile?.deletions || 0 }} deletions</span>
-        </div>
-        
-        <div class="diff-lines" *ngIf="diffLines.length > 0">
-          <div *ngFor="let line of diffLines; trackBy: trackByLine" 
-               class="diff-line"
-               [class.added]="line.type === 'added'"
-               [class.removed]="line.type === 'removed'"
-               [class.context]="line.type === 'context'">
-            <span class="line-number">{{ line.lineNumber }}</span>
-            <span class="line-content">{{ line.content }}</span>
-          </div>
-        </div>
-        
-        <div class="no-diff" *ngIf="diffLines.length === 0">
-          <p>No diff content available for this file.</p>
-        </div>
-      </div>
-    </div>
-  `,
-  styles: [`
-    .diff-viewer {
-      background-color: white;
-      border-radius: 0.5rem;
-      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-      max-width: 90vw;
-      width: 100%;
-      max-height: 80vh;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .diff-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 1rem 1.5rem;
-      border-bottom: 1px solid #e5e7eb;
-      background-color: #f9fafb;
-    }
-
-    .diff-title {
-      font-size: 1.125rem;
-      font-weight: 600;
-      color: #111827;
-      margin: 0;
-    }
-
-    .close-button {
-      background: none;
-      border: none;
-      color: #6b7280;
-      cursor: pointer;
-      padding: 0.25rem;
-      border-radius: 0.25rem;
-      transition: color 0.2s;
-    }
-
-    .close-button:hover {
-      color: #374151;
-    }
-
-    .close-icon {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-
-    .diff-content {
-      flex: 1;
-      overflow-y: auto;
-      padding: 1rem;
-    }
-
-    .diff-stats {
-      display: flex;
-      gap: 1rem;
-      margin-bottom: 1rem;
-      padding: 0.5rem;
-      background-color: #f9fafb;
-      border-radius: 0.375rem;
-    }
-
-    .stat {
-      font-size: 0.875rem;
-      font-weight: 500;
-    }
-
-    .stat.added {
-      color: #059669;
-    }
-
-    .stat.removed {
-      color: #dc2626;
-    }
-
-    .diff-lines {
-      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-      font-size: 0.875rem;
-      line-height: 1.5;
-      border: 1px solid #e5e7eb;
-      border-radius: 0.375rem;
-      overflow: hidden;
-    }
-
-    .diff-line {
-      display: flex;
-      padding: 0.125rem 0.5rem;
-      border-bottom: 1px solid #f3f4f6;
-    }
-
-    .diff-line:last-child {
-      border-bottom: none;
-    }
-
-    .diff-line.added {
-      background-color: #dcfce7;
-    }
-
-    .diff-line.removed {
-      background-color: #fee2e2;
-    }
-
-    .diff-line.context {
-      background-color: #f9fafb;
-    }
-
-    .line-number {
-      min-width: 3rem;
-      color: #6b7280;
-      font-size: 0.75rem;
-      padding-right: 0.5rem;
-      border-right: 1px solid #e5e7eb;
-      margin-right: 0.5rem;
-    }
-
-    .line-content {
-      flex: 1;
-      white-space: pre-wrap;
-      word-break: break-all;
-    }
-
-    .diff-line.added .line-content {
-      color: #166534;
-    }
-
-    .diff-line.removed .line-content {
-      color: #991b1b;
-    }
-
-    .diff-line.context .line-content {
-      color: #374151;
-    }
-
-    .no-diff {
-      text-align: center;
-      padding: 2rem;
-      color: #6b7280;
-    }
-
-    /* Dark mode styles */
-    .dark .diff-viewer {
-      background-color: #2d2d2d;
-      color: #e0e0e0;
-    }
-
-    .dark .diff-header {
-      background-color: #404040;
-      border-color: #555;
-    }
-
-    .dark .diff-title {
-      color: #e0e0e0;
-    }
-
-    .dark .close-button {
-      color: #9ca3af;
-    }
-
-    .dark .close-button:hover {
-      color: #d1d5db;
-    }
-
-    .dark .diff-stats {
-      background-color: #404040;
-    }
-
-    .dark .diff-lines {
-      border-color: #555;
-    }
-
-    .dark .diff-line {
-      border-color: #404040;
-    }
-
-    .dark .diff-line.added {
-      background-color: #14532d;
-    }
-
-    .dark .diff-line.removed {
-      background-color: #7f1d1d;
-    }
-
-    .dark .diff-line.context {
-      background-color: #404040;
-    }
-
-    .dark .line-number {
-      color: #9ca3af;
-      border-color: #555;
-    }
-
-    .dark .diff-line.added .line-content {
-      color: #bbf7d0;
-    }
-
-    .dark .diff-line.removed .line-content {
-      color: #fecaca;
-    }
-
-    .dark .diff-line.context .line-content {
-      color: #d1d5db;
-    }
-
-    .dark .no-diff {
-      color: #9ca3af;
-    }
-  `]
-})
-export class DiffViewerComponent {
-  @Input() fileName: string = '';
-  @Input() diffFile: DiffFile | null = null;
-  @Output() close = new EventEmitter<void>();
-
-  diffLines: Array<{type: 'added' | 'removed' | 'context', lineNumber: string, content: string}> = [];
-
-  ngOnInit() {
-    console.log('DiffViewer ngOnInit called');
-    this.parseDiff();
-  }
-
-  ngOnChanges() {
-    console.log('DiffViewer ngOnChanges called');
-    this.parseDiff();
-  }
-
-  parseDiff() {
-    console.log('parseDiff called with diffFile:', this.diffFile);
-    
-    if (!this.diffFile?.changes) {
-      console.log('No changes found in diffFile');
-      this.diffLines = [];
-      return;
-    }
-
-    const lines = this.diffFile.changes.split('\n');
-    console.log('Parsed lines:', lines.length);
-    
-    this.diffLines = lines.map((line, index) => {
-      let type: 'added' | 'removed' | 'context' = 'context';
-      let lineNumber = (index + 1).toString();
-      let content = line;
-
-      if (line.startsWith('+')) {
-        type = 'added';
-        content = line.substring(1);
-      } else if (line.startsWith('-')) {
-        type = 'removed';
-        content = line.substring(1);
-      } else if (line.startsWith('@@')) {
-        // Git diff header line
-        lineNumber = '@@';
-        content = line;
-      }
-
-      return { type, lineNumber, content };
-    });
-    
-    console.log('Parsed diff lines:', this.diffLines.length);
-  }
-
-  onClose() {
-    this.close.emit();
-  }
-
-  trackByLine(index: number, line: any): string {
-    return `${line.type}-${index}`;
-  }
-}