feat(diff): add file diff checker functionality with UI and service integration

- Implemented DiffService for comparing original and modified text.
- Created DiffViewComponent for displaying the diff results with editor support.
- Added HTML and SCSS for the diff view layout and styling.
- Introduced action buttons for pasting and clearing text in editors.
- Enhanced metadata in index.html for better SEO and structured data.
- Updated version number in sidebar to 2.2.
- Modified sitemap.xml with new last modified dates and added new diff page.
- Improved button styles in _buttons.scss for better user experience.

Author: timothydodd

package-lock.json

@@ -13,51 +13,51 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.0.3",
-    "@angular/common": "^20.0.3",
-    "@angular/compiler": "^20.0.3",
-    "@angular/core": "^20.0.3",
-    "@angular/forms": "^20.0.3",
-    "@angular/platform-browser": "^20.0.3",
-    "@angular/platform-browser-dynamic": "^20.0.3",
-    "@angular/platform-server": "^20.0.3",
-    "@angular/router": "^20.0.3",
-    "@angular/ssr": "^20.0.2",
-    "@ng-select/ng-select": "^15.1.2",
-    "@stedi/prettier-plugin-jsonata": "^2.1.4",
+    "@angular/animations": "^20.1.6",
+    "@angular/common": "^20.1.6",
+    "@angular/compiler": "^20.1.6",
+    "@angular/core": "^20.1.6",
+    "@angular/forms": "^20.1.6",
+    "@angular/platform-browser": "^20.1.6",
+    "@angular/platform-browser-dynamic": "^20.1.6",
+    "@angular/platform-server": "^20.1.6",
+    "@angular/router": "^20.1.6",
+    "@angular/ssr": "^20.1.5",
+    "@ng-select/ng-select": "^20.1.0",
+    "@stedi/prettier-plugin-jsonata": "^2.1.5",
     "express": "~4.21.2",
     "js-yaml": "^4.1.0",
     "monaco-editor": "^0.52.2",
     "rxjs": "~7.8.2",
-    "sql-formatter": "^15.6.4",
+    "sql-formatter": "^15.6.6",
     "tslib": "^2.8.1",
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-eslint/builder": "20.1.0",
-    "@angular-eslint/schematics": "20.1.0",
-    "@angular-eslint/template-parser": "20.1.0",
-    "@angular/build": "^20.0.2",
-    "@angular/cli": "~20.0.2",
-    "@angular/compiler-cli": "^20.0.3",
+    "@angular-eslint/builder": "20.1.1",
+    "@angular-eslint/schematics": "20.1.1",
+    "@angular-eslint/template-parser": "20.1.1",
+    "@angular/build": "^20.1.5",
+    "@angular/cli": "~20.1.5",
+    "@angular/compiler-cli": "^20.1.6",
     "@types/express": "~4.17.21",
     "@types/jasmine": "~5.1.8",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^24.0.3",
-    "angular-eslint": "^20.1.0",
-    "eslint": "^9.29.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-prettier": "^5.5.0",
-    "jasmine-core": "~5.8.0",
+    "@types/node": "^24.2.1",
+    "angular-eslint": "^20.1.1",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jasmine-core": "~5.9.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "prettier-eslint": "^16.4.2",
     "style-loader": "^4.0.0",
     "typescript": "~5.8.3",
-    "typescript-eslint": "^8.34.1"
+    "typescript-eslint": "^8.39.0"
   }
 }

package.json

@@ -138,6 +138,18 @@ export class RouteService {
         },
       ],
     },
+    {
+      name: 'Diff',
+      routes: [
+        {
+          name: 'File Diff',
+          title: 'File Diff Checker',
+          url: '/diff/files',
+          description: 'Compare two files or text blocks and highlight the differences between them. Perfect for code reviews and content comparison.',
+          loadComponent: () => import('../diff/diff-view/diff-view.component').then((mod) => mod.DiffViewComponent),
+        },
+      ],
+    },
   ];
 }
 export interface RouteCategory {

src/app/_services/route.service.ts

@@ -27,11 +27,11 @@ <h1 class="tool-title">{{ convertService.title }}</h1>
           <h3>{{ convertService.languageFrom.toUpperCase() }} Input</h3>
         </div>
         <div class="panel-actions">
-          <button class="action-btn paste-btn" (click)="pasteClick()" title="Paste from clipboard">
+          <button class="action-btn-sm paste-btn" (click)="pasteClick()" title="Paste from clipboard">
             <span class="btn-icon">📋</span>
             Paste
           </button>
-          <button class="action-btn clear-btn" (click)="clearInput()" title="Clear input">
+          <button class="action-btn-sm clear-btn" (click)="clearInput()" title="Clear input">
             <span class="btn-icon">🗑️</span>
             Clear
           </button>
@@ -61,11 +61,11 @@ <h3>{{ convertService.languageFrom.toUpperCase() }} Input</h3>
           <h3>{{ convertService.languageTo.toUpperCase() }} Output</h3>
         </div>
         <div class="panel-actions">
-          <button class="action-btn copy-btn" (click)="copyClick()" title="Copy to clipboard" [disabled]="!outputCode()">
+          <button class="action-btn-sm copy-btn" (click)="copyClick()" title="Copy to clipboard" [disabled]="!outputCode()">
             <span class="btn-icon">📄</span>
             Copy
           </button>
-          <button class="action-btn download-btn" (click)="downloadOutput()" title="Download as file" [disabled]="!outputCode()">
+          <button class="action-btn-sm download-btn" (click)="downloadOutput()" title="Download as file" [disabled]="!outputCode()">
             <span class="btn-icon">💾</span>
             Download
           </button>

src/app/converters/convert-view/convert-view.component.html

@@ -222,61 +222,8 @@
   gap: 0.5rem;
 }
 
-.action-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  color: var(--font-color);
-  font-size: 0.9rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  text-decoration: none;
-}
-
-.action-btn:hover:not(:disabled) {
-  background: rgba(139, 233, 253, 0.2);
-  border-color: #8be9fd;
-  color: #8be9fd;
-  transform: translateY(-1px);
-}
+/* Action button styles are now in global _buttons.scss */
 
-.action-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn-icon {
-  font-size: 0.9rem;
-}
-
-.copy-btn:hover:not(:disabled) {
-  background: rgba(80, 250, 123, 0.2);
-  border-color: #50fa7b;
-  color: #50fa7b;
-}
-
-.paste-btn:hover:not(:disabled) {
-  background: rgba(139, 233, 253, 0.2);
-  border-color: #8be9fd;
-  color: #8be9fd;
-}
-
-.clear-btn:hover:not(:disabled) {
-  background: rgba(255, 121, 198, 0.2);
-  border-color: #ff79c6;
-  color: #ff79c6;
-}
-
-.download-btn:hover:not(:disabled) {
-  background: rgba(241, 250, 140, 0.2);
-  border-color: #f1fa8c;
-  color: #f1fa8c;
-}
 
 /* Editor Wrapper */
 .editor-wrapper {
@@ -368,10 +315,6 @@
     flex-wrap: wrap;
   }
 
-  .action-btn {
-    font-size: 0.8rem;
-    padding: 0.4rem 0.8rem;
-  }
 
   .conversion-flow {
     padding: 0.75rem;

src/app/converters/convert-view/convert-view.component.scss

@@ -0,0 +1,116 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+export interface DiffResult {
+  original: DiffLine[];
+  modified: DiffLine[];
+}
+
+export interface DiffLine {
+  content: string;
+  type: 'unchanged' | 'added' | 'removed';
+  lineNumber: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DiffService {
+  
+  compare(original: string, modified: string): Observable<DiffResult> {
+    try {
+      const originalLines = original.split('\n');
+      const modifiedLines = modified.split('\n');
+      
+      const result = this.calculateDiff(originalLines, modifiedLines);
+      return of(result);
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  private calculateDiff(original: string[], modified: string[]): DiffResult {
+    const originalResult: DiffLine[] = [];
+    const modifiedResult: DiffLine[] = [];
+    
+    // Simple line-by-line comparison using longest common subsequence approach
+    const lcs = this.longestCommonSubsequence(original, modified);
+    
+    let i = 0, j = 0, lcsIndex = 0;
+    let originalLineNum = 1, modifiedLineNum = 1;
+    
+    while (i < original.length || j < modified.length) {
+      if (lcsIndex < lcs.length && i < original.length && j < modified.length && 
+          original[i] === lcs[lcsIndex] && modified[j] === lcs[lcsIndex]) {
+        // Lines are the same
+        originalResult.push({
+          content: original[i],
+          type: 'unchanged',
+          lineNumber: originalLineNum++
+        });
+        modifiedResult.push({
+          content: modified[j],
+          type: 'unchanged',
+          lineNumber: modifiedLineNum++
+        });
+        i++;
+        j++;
+        lcsIndex++;
+      } else if (j < modified.length && (i >= original.length || 
+                (lcsIndex < lcs.length && modified[j] !== lcs[lcsIndex] && 
+                 (i >= original.length || original[i] === lcs[lcsIndex])))) {
+        // Line added in modified
+        modifiedResult.push({
+          content: modified[j],
+          type: 'added',
+          lineNumber: modifiedLineNum++
+        });
+        j++;
+      } else {
+        // Line removed from original
+        originalResult.push({
+          content: original[i],
+          type: 'removed',
+          lineNumber: originalLineNum++
+        });
+        i++;
+      }
+    }
+    
+    return { original: originalResult, modified: modifiedResult };
+  }
+
+  private longestCommonSubsequence(a: string[], b: string[]): string[] {
+    const m = a.length;
+    const n = b.length;
+    const dp: number[][] = Array(m + 1).fill(0).map(() => Array(n + 1).fill(0));
+    
+    // Build LCS table
+    for (let i = 1; i <= m; i++) {
+      for (let j = 1; j <= n; j++) {
+        if (a[i - 1] === b[j - 1]) {
+          dp[i][j] = dp[i - 1][j - 1] + 1;
+        } else {
+          dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+        }
+      }
+    }
+    
+    // Reconstruct LCS
+    const lcs: string[] = [];
+    let i = m, j = n;
+    while (i > 0 && j > 0) {
+      if (a[i - 1] === b[j - 1]) {
+        lcs.unshift(a[i - 1]);
+        i--;
+        j--;
+      } else if (dp[i - 1][j] > dp[i][j - 1]) {
+        i--;
+      } else {
+        j--;
+      }
+    }
+    
+    return lcs;
+  }
+}