git-history-ui 1.0.0

package/frontend/src/app/models/color-palette.models.ts

@@ -0,0 +1,229 @@
+export interface ColorPalette {
+  id: string;
+  name: string;
+  description: string;
+  colors: {
+    primary: string;
+    secondary: string;
+    accent: string;
+    background: string;
+    text: string;
+    border: string;
+    link: string;
+    nodeFill: string;
+    nodeStroke: string;
+    graphText: string;
+  };
+}
+
+export type ColorPaletteId = 'default' | 'ocean' | 'forest' | 'sunset' | 'monochrome' | 'neon';
+
+export const COLOR_PALETTES: Record<ColorPaletteId, ColorPalette> = {
+  default: {
+    id: 'default',
+    name: 'Default',
+    description: 'Classic blue theme',
+    colors: {
+      primary: '#3b82f6',
+      secondary: '#6b7280',
+      accent: '#1e40af',
+      background: '#ffffff',
+      text: '#111827',
+      border: '#e5e7eb',
+      link: '#cbd5e0',
+      nodeFill: '#3b82f6',
+      nodeStroke: '#1e40af',
+      graphText: '#6b7280'
+    }
+  },
+  ocean: {
+    id: 'ocean',
+    name: 'Ocean',
+    description: 'Deep blue ocean theme',
+    colors: {
+      primary: '#0ea5e9',
+      secondary: '#64748b',
+      accent: '#0369a1',
+      background: '#ffffff',
+      text: '#0f172a',
+      border: '#e2e8f0',
+      link: '#94a3b8',
+      nodeFill: '#0ea5e9',
+      nodeStroke: '#0369a1',
+      graphText: '#475569'
+    }
+  },
+  forest: {
+    id: 'forest',
+    name: 'Forest',
+    description: 'Green nature theme',
+    colors: {
+      primary: '#10b981',
+      secondary: '#6b7280',
+      accent: '#059669',
+      background: '#ffffff',
+      text: '#111827',
+      border: '#e5e7eb',
+      link: '#d1fae5',
+      nodeFill: '#10b981',
+      nodeStroke: '#059669',
+      graphText: '#6b7280'
+    }
+  },
+  sunset: {
+    id: 'sunset',
+    name: 'Sunset',
+    description: 'Warm orange theme',
+    colors: {
+      primary: '#f59e0b',
+      secondary: '#6b7280',
+      accent: '#d97706',
+      background: '#ffffff',
+      text: '#111827',
+      border: '#e5e7eb',
+      link: '#fed7aa',
+      nodeFill: '#f59e0b',
+      nodeStroke: '#d97706',
+      graphText: '#6b7280'
+    }
+  },
+  monochrome: {
+    id: 'monochrome',
+    name: 'Monochrome',
+    description: 'Black and white theme',
+    colors: {
+      primary: '#374151',
+      secondary: '#6b7280',
+      accent: '#111827',
+      background: '#ffffff',
+      text: '#111827',
+      border: '#e5e7eb',
+      link: '#d1d5db',
+      nodeFill: '#374151',
+      nodeStroke: '#111827',
+      graphText: '#6b7280'
+    }
+  },
+  neon: {
+    id: 'neon',
+    name: 'Neon',
+    description: 'Bright neon theme',
+    colors: {
+      primary: '#ec4899',
+      secondary: '#8b5cf6',
+      accent: '#06b6d4',
+      background: '#ffffff',
+      text: '#111827',
+      border: '#e5e7eb',
+      link: '#f0abfc',
+      nodeFill: '#ec4899',
+      nodeStroke: '#be185d',
+      graphText: '#6b7280'
+    }
+  }
+};
+
+export const DARK_COLOR_PALETTES: Record<ColorPaletteId, ColorPalette> = {
+  default: {
+    id: 'default',
+    name: 'Default Dark',
+    description: 'Classic dark theme',
+    colors: {
+      primary: '#3b82f6',
+      secondary: '#6b7280',
+      accent: '#1e40af',
+      background: '#1a1a1a',
+      text: '#e0e0e0',
+      border: '#404040',
+      link: '#4b5563',
+      nodeFill: '#3b82f6',
+      nodeStroke: '#1e40af',
+      graphText: '#9ca3af'
+    }
+  },
+  ocean: {
+    id: 'ocean',
+    name: 'Ocean Dark',
+    description: 'Deep ocean dark theme',
+    colors: {
+      primary: '#0ea5e9',
+      secondary: '#64748b',
+      accent: '#0369a1',
+      background: '#0f172a',
+      text: '#f1f5f9',
+      border: '#334155',
+      link: '#475569',
+      nodeFill: '#0ea5e9',
+      nodeStroke: '#0369a1',
+      graphText: '#94a3b8'
+    }
+  },
+  forest: {
+    id: 'forest',
+    name: 'Forest Dark',
+    description: 'Dark green theme',
+    colors: {
+      primary: '#10b981',
+      secondary: '#6b7280',
+      accent: '#059669',
+      background: '#064e3b',
+      text: '#ecfdf5',
+      border: '#065f46',
+      link: '#065f46',
+      nodeFill: '#10b981',
+      nodeStroke: '#059669',
+      graphText: '#6ee7b7'
+    }
+  },
+  sunset: {
+    id: 'sunset',
+    name: 'Sunset Dark',
+    description: 'Dark orange theme',
+    colors: {
+      primary: '#f59e0b',
+      secondary: '#6b7280',
+      accent: '#d97706',
+      background: '#451a03',
+      text: '#fef3c7',
+      border: '#92400e',
+      link: '#92400e',
+      nodeFill: '#f59e0b',
+      nodeStroke: '#d97706',
+      graphText: '#fbbf24'
+    }
+  },
+  monochrome: {
+    id: 'monochrome',
+    name: 'Monochrome Dark',
+    description: 'Pure black and white',
+    colors: {
+      primary: '#e5e7eb',
+      secondary: '#9ca3af',
+      accent: '#f9fafb',
+      background: '#000000',
+      text: '#ffffff',
+      border: '#374151',
+      link: '#4b5563',
+      nodeFill: '#e5e7eb',
+      nodeStroke: '#f9fafb',
+      graphText: '#9ca3af'
+    }
+  },
+  neon: {
+    id: 'neon',
+    name: 'Neon Dark',
+    description: 'Bright neon on dark',
+    colors: {
+      primary: '#ec4899',
+      secondary: '#8b5cf6',
+      accent: '#06b6d4',
+      background: '#0f0f23',
+      text: '#ffffff',
+      border: '#312e81',
+      link: '#581c87',
+      nodeFill: '#ec4899',
+      nodeStroke: '#be185d',
+      graphText: '#f0abfc'
+    }
+  }
+};

package/frontend/src/app/models/git.models.ts

@@ -0,0 +1,39 @@
+export interface Commit {
+  hash: string;
+  author: string;
+  date: string;
+  message: string;
+  files: string[];
+  parents: string[];
+  branches: string[];
+  tags: string[];
+}
+
+export interface DiffFile {
+  file: string;
+  additions: number;
+  deletions: number;
+  changes: string;
+}
+
+export interface BlameLine {
+  line: number;
+  hash: string;
+  author: string;
+  date: string;
+  content: string;
+}
+
+export interface GitOptions {
+  file?: string;
+  since?: string;
+  author?: string;
+  limit?: number;
+}
+
+export interface CommitNode {
+  id: string;
+  x: number;
+  y: number;
+  commit: Commit;
+}

package/frontend/src/app/services/git.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Commit, DiffFile, BlameLine, GitOptions } from '../models/git.models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GitService {
+  private apiUrl = '/api';
+
+  constructor(private http: HttpClient) { }
+
+  getCommits(options: GitOptions = {}): Observable<Commit[]> {
+    const params = new URLSearchParams();
+    if (options.file) params.set('file', options.file);
+    if (options.since) params.set('since', options.since);
+    if (options.author) params.set('author', options.author);
+    if (options.limit) params.set('limit', options.limit.toString());
+
+    return this.http.get<Commit[]>(`${this.apiUrl}/commits?${params.toString()}`);
+  }
+
+  getCommit(hash: string): Observable<Commit> {
+    return this.http.get<Commit>(`${this.apiUrl}/commit/${hash}`);
+  }
+
+  getDiff(hash: string): Observable<DiffFile[]> {
+    return this.http.get<DiffFile[]>(`${this.apiUrl}/diff/${hash}`);
+  }
+
+  getBlame(filePath: string): Observable<BlameLine[]> {
+    return this.http.get<BlameLine[]>(`${this.apiUrl}/blame/${encodeURIComponent(filePath)}`);
+  }
+
+  getTags(): Observable<string[]> {
+    return this.http.get<string[]>(`${this.apiUrl}/tags`);
+  }
+
+  getBranches(): Observable<string[]> {
+    return this.http.get<string[]>(`${this.apiUrl}/branches`);
+  }
+}

package/frontend/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Frontend</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/frontend/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

package/frontend/src/styles.css

@@ -0,0 +1,397 @@
+/* You can add global styles to this file, and also import other style files */
+
+/* Modern CSS Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Base styles */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background-color: #f8f9fa;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #1a1a1a;
+    color: #e0e0e0;
+  }
+}
+
+/* Manual dark mode toggle */
+.dark {
+  background-color: #1a1a1a !important;
+  color: #e0e0e0 !important;
+}
+
+.dark body {
+  background-color: #1a1a1a !important;
+  color: #e0e0e0 !important;
+}
+
+.dark * {
+  border-color: #404040 !important;
+}
+
+.dark .app-container {
+  background-color: #1a1a1a;
+  color: #e0e0e0;
+}
+
+.dark .header {
+  background-color: #2d2d2d;
+  border-bottom-color: #404040;
+}
+
+.dark .app-title {
+  color: #e0e0e0;
+}
+
+.dark .search-input {
+  background-color: #404040;
+  color: #e0e0e0;
+  border-color: #555;
+}
+
+.dark .search-input::placeholder {
+  color: #9ca3af;
+}
+
+.dark .filters {
+  background-color: #2d2d2d;
+  border-bottom-color: #404040;
+}
+
+.dark .filter-select,
+.dark .filter-input {
+  background-color: #404040;
+  color: #e0e0e0;
+  border-color: #555;
+}
+
+.dark .main-content {
+  background-color: #1a1a1a;
+}
+
+.dark .commit-item {
+  background-color: #2d2d2d;
+  border-color: #404040;
+}
+
+.dark .commit-hash {
+  color: #9ca3af;
+}
+
+.dark .commit-author {
+  color: #d1d5db;
+}
+
+.dark .commit-date {
+  color: #9ca3af;
+}
+
+.dark .commit-message {
+  color: #e0e0e0;
+}
+
+/* Date picker dark mode support */
+.dark input[type="date"] {
+  background-color: #404040 !important;
+  color: #e0e0e0 !important;
+  border-color: #555 !important;
+}
+
+.dark .date-picker {
+  background-color: #404040 !important;
+  color: #e0e0e0 !important;
+  border-color: #555 !important;
+}
+
+.dark .filter-input.date-picker {
+  background-color: #404040 !important;
+  color: #e0e0e0 !important;
+  border-color: #555 !important;
+}
+
+.dark input[type="date"]::-webkit-calendar-picker-indicator {
+  filter: invert(1) !important;
+}
+
+.dark input[type="date"]::-webkit-datetime-edit {
+  color: #e0e0e0 !important;
+}
+
+.dark input[type="date"]::-webkit-datetime-edit-fields-wrapper {
+  color: #e0e0e0 !important;
+}
+
+.dark input[type="date"]::-webkit-datetime-edit-text {
+  color: #e0e0e0 !important;
+}
+
+.dark input[type="date"]::-webkit-datetime-edit-month-field,
+.dark input[type="date"]::-webkit-datetime-edit-day-field,
+.dark input[type="date"]::-webkit-datetime-edit-year-field {
+  color: #e0e0e0 !important;
+}
+
+.dark .loading {
+  color: #e0e0e0;
+}
+
+/* Graph container dark mode */
+.dark .graph-container {
+  background-color: #2d2d2d !important;
+  color: #e0e0e0 !important;
+}
+
+/* SVG dark mode support */
+.dark svg {
+  background-color: transparent !important;
+}
+
+/* Modal dark mode support */
+.dark .modal-title,
+.dark .modal-header .modal-title,
+.dark .modal-container .modal-title {
+  color: #e0e0e0 !important;
+}
+
+/* Header dark mode support */
+.dark .header {
+  background-color: #2d2d2d !important;
+  border-bottom-color: #404040 !important;
+}
+
+.dark .app-title {
+  color: #e0e0e0 !important;
+}
+
+.dark .filters {
+  background-color: #2d2d2d !important;
+  border-bottom-color: #404040 !important;
+}
+
+/* Input placeholder dark mode */
+.dark input::placeholder {
+  color: #9ca3af !important;
+}
+
+.dark select {
+  color: #e0e0e0 !important;
+}
+
+/* Ensure all elements transition smoothly */
+* {
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+/* Specific transitions for form elements */
+input, select, button {
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+/* Additional dark mode styles for cards and other elements */
+.dark .card,
+.dark .commit-item,
+.dark .modal-container,
+.dark .diff-viewer {
+  background-color: #2d2d2d !important;
+  color: #e0e0e0 !important;
+  border-color: #404040 !important;
+}
+
+.dark .btn {
+  background-color: #404040 !important;
+  color: #e0e0e0 !important;
+  border-color: #555 !important;
+}
+
+.dark .btn:hover {
+  background-color: #555 !important;
+}
+
+.dark .btn-primary {
+  background-color: #3b82f6 !important;
+  color: white !important;
+}
+
+.dark .btn-primary:hover {
+  background-color: #2563eb !important;
+}
+
+.dark .btn-secondary {
+  background-color: #6b7280 !important;
+  color: white !important;
+}
+
+.dark .btn-secondary:hover {
+  background-color: #4b5563 !important;
+}
+
+.dark .file-item,
+.dark .diff-item {
+  background-color: #404040 !important;
+  border-color: #555 !important;
+}
+
+.dark .section-title {
+  color: #e0e0e0 !important;
+}
+
+.dark .commit-meta,
+.dark .commit-info {
+  color: #e0e0e0 !important;
+}
+
+.dark .commit-hash {
+  color: #9ca3af !important;
+}
+
+.dark .commit-author {
+  color: #d1d5db !important;
+}
+
+.dark .commit-date {
+  color: #9ca3af !important;
+}
+
+.dark .commit-message {
+  color: #e0e0e0 !important;
+}
+
+.dark .file-name,
+.dark .diff-file-name {
+  color: #d1d5db !important;
+}
+
+.dark .diff-stats {
+  color: #9ca3af !important;
+}
+
+/* Utility classes */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.space-x-4 > * + * {
+  margin-left: 1rem;
+}
+
+.space-y-4 > * + * {
+  margin-top: 1rem;
+}
+
+/* Button styles */
+.btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+  margin-right: 0.5rem;
+}
+
+.btn:last-child {
+  margin-right: 0;
+}
+
+/* Button container spacing */
+.flex.items-center {
+  gap: 0.5rem;
+}
+
+.btn-primary {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: #2563eb;
+}
+
+.btn-secondary {
+  background-color: #6b7280;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background-color: #4b5563;
+}
+
+/* Card styles */
+.card {
+  background-color: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 1.5rem;
+}
+
+.dark .card {
+  background-color: #2d2d2d;
+  color: #e0e0e0;
+}
+
+/* Custom styles for git history UI */
+.commit-node {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.commit-node:hover {
+  stroke-width: 3px;
+}
+
+.branch-line {
+  stroke-width: 2px;
+}
+
+.diff-line {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.diff-line.added {
+  background-color: #dcfce7;
+  color: #166534;
+}
+
+.diff-line.removed {
+  background-color: #fee2e2;
+  color: #991b1b;
+}
+
+.dark .diff-line.added {
+  background-color: #14532d;
+  color: #bbf7d0;
+}
+
+.dark .diff-line.removed {
+  background-color: #7f1d1d;
+  color: #fecaca;
+}