feat: refactor sidebar component for collapsible functionality and improve styling

- Removed MonacoConfig interface as it is no longer needed.
- Enhanced sidebar component to support collapsing with toggle button.
- Updated sidebar styles for better responsiveness and visual appeal.
- Implemented signal-based state management for sidebar collapse state.
- Refactored time zones component to utilize signals for state management.
- Added Dracula theme for CodeMirror editor with custom styling.
- Introduced language extensions for CodeMirror to support various languages.
- Created a diff editor component using CodeMirror for comparing code.
- Developed a CodeMirror editor component with enhanced features and styling.
- Implemented TypeScript formatting service using Prettier for code formatting.
- Created a dedicated component for TypeScript formatting with UI integration.

Author: timothydodd

CLAUDE.md

@@ -63,4 +63,7 @@ Routes are centrally managed in `src/app/_services/route.service.ts` with:
 - Use `inject()` function for dependency injection
 - Prefer signals over observables for component state
 - Follow existing naming patterns: `f-json` (formatter), `c-json-yaml` (converter)
-- Abstract base classes for extensibility
+- Abstract base classes for extensibility
+- Use Angular control flow syntax (`@if`, `@for`, `@switch`) instead of structural directives (`*ngIf`, `*ngFor`, `*ngSwitch`)
+- Use `@for` syntax: `@for (item of items; track item.id) { ... }` instead of `*ngFor="let item of items; trackBy: trackByFn"`
+- Use signal-based inputs/outputs: `myInput = input()` and `myOutput = output()` instead of `@Input()` and `@Output()` decorators

package-lock.json

@@ -13,6 +13,7 @@
   },
   "private": true,
   "dependencies": {
+    "@acrodata/code-editor": "^0.5.1",
     "@angular/animations": "^20.1.6",
     "@angular/common": "^20.1.6",
     "@angular/compiler": "^20.1.6",
@@ -23,11 +24,23 @@
     "@angular/platform-server": "^20.1.6",
     "@angular/router": "^20.1.6",
     "@angular/ssr": "^20.1.5",
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-sql": "^6.9.1",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/language": "^6.11.2",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.1",
+    "@lezer/highlight": "^1.2.1",
     "@ng-select/ng-select": "^20.1.0",
     "@stedi/prettier-plugin-jsonata": "^2.1.5",
+    "codemirror": "^6.0.2",
     "express": "~4.21.2",
     "js-yaml": "^4.1.0",
-    "monaco-editor": "^0.52.2",
+    "prettier": "^3.6.2",
     "rxjs": "~7.8.2",
     "sql-formatter": "^15.6.6",
     "tslib": "^2.8.1",
@@ -60,4 +73,4 @@
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.0"
   }
-}
+}

package.json

@@ -72,6 +72,14 @@ export class RouteService {
           loadComponent: () =>
             import('../formatters/f-javascript/f-javascript.component').then((mod) => mod.FJavascriptComponent),
         },
+        {
+          name: 'TypeScript',
+          title: 'TypeScript Formatter',
+          url: '/format/typescript',
+          description: 'Format and beautify your TypeScript code with proper indentation and type definitions.',
+          loadComponent: () =>
+            import('../formatters/f-typescript/f-typescript.component').then((mod) => mod.FTypescriptComponent),
+        },
         {
           name: 'SCSS',
           title: 'SCSS Formatter',
@@ -145,7 +153,8 @@ export class RouteService {
           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.',
+          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),
         },
       ],

src/app/_services/route.service.ts

@@ -1,7 +1,7 @@
 <app-animated-background></app-animated-background>
-<div class="left-gutter"></div>
+<div class="left-gutter" [ngClass]="{'collapsed': sidebarCollapsed()}"></div>
 <div class="middle-section">
-  <app-side-bar></app-side-bar>
+  <app-side-bar (sidebarToggle)="onSidebarToggle($event)"></app-side-bar>
   <div class="back">
     <div class="route-container">
 

src/app/app.component.html

@@ -36,8 +36,13 @@ app-side-bar {
   //   rgba(15, 15, 26, 0.95) 0%, 
   //   rgba(26, 26, 46, 0.9) 50%,
   //   rgba(22, 33, 62, 0.95) 100%);
-  width: 280px;
+  width: 240px;
   flex-shrink: 0;
+  transition: width 0.3s ease;
+}
+
+.left-gutter.collapsed {
+  width: 64px;
 }
 
 
@@ -93,7 +98,7 @@ app-side-bar {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  padding: 1.5rem;
+  padding: 1rem 1.25rem;
   position: relative;
   z-index: 2;
 }

src/app/app.component.scss

@@ -1,15 +1,21 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { Router, RouterOutlet } from '@angular/router';
+import { CommonModule } from '@angular/common';
 import { RouteService } from './_services/route.service';
 import { SideBarComponent } from './nav/side-bar/side-bar.component';
 import { AnimatedBackgroundComponent } from './components/animated-background/animated-background.component';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  imports: [RouterOutlet, SideBarComponent, AnimatedBackgroundComponent],
+  imports: [CommonModule, RouterOutlet, SideBarComponent, AnimatedBackgroundComponent],
 })
 export class AppComponent {
   router = inject(Router);
   RouterService = RouteService;
+  sidebarCollapsed = signal(false);
+
+  onSidebarToggle(collapsed: boolean) {
+    this.sidebarCollapsed.set(collapsed);
+  }
 }

src/app/app.component.ts

@@ -0,0 +1,170 @@
+import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+
+const draculaColors = {
+  background: '#1a1a2e',
+  foreground: '#f1f5f9',
+  selection: '#3d4852',
+  lineHighlight: '#252b3a',
+  cursor: '#50fa7b',
+  comment: '#8be9fd',
+  string: '#50fa7b',
+  number: '#bd93f9',
+  keyword: '#8be9fd',
+  function: '#8be9fd',
+  className: '#50fa7b',
+  tag: '#8be9fd',
+  attribute: '#50fa7b',
+  property: '#8be9fd',
+  variable: '#8be9fd',
+  constant: '#bd93f9',
+  type: '#bd93f9',
+  operator: '#ff79c6',
+  punctuation: '#f8f8f2',
+  bracket: '#f8f8f2',
+  invalid: '#ff5555',
+  deprecated: '#ffb86c',
+  lineNumber: '#64748b',
+  activeLineNumber: '#8be9fd',
+  gutter: '#16213e',
+  scrollbar: '#50fa7b30',
+  scrollbarHover: '#50fa7b50',
+  scrollbarActive: '#50fa7b70',
+};
+
+const draculaTheme = EditorView.theme({
+  '&': {
+    color: draculaColors.foreground,
+    backgroundColor: draculaColors.background,
+  },
+  '.cm-content': {
+    padding: '16px',
+    caretColor: draculaColors.cursor,
+  },
+  '.cm-focused .cm-cursor': {
+    borderLeftColor: draculaColors.cursor,
+  },
+  '.cm-focused .cm-selectionBackground, ::selection': {
+    backgroundColor: draculaColors.selection,
+  },
+  '.cm-selectionBackground': {
+    backgroundColor: `${draculaColors.selection}99`,
+  },
+  '.cm-activeLine': {
+    backgroundColor: draculaColors.lineHighlight,
+  },
+  '.cm-gutters': {
+    backgroundColor: draculaColors.gutter,
+    color: draculaColors.lineNumber,
+    borderRight: 'none',
+  },
+  '.cm-activeLineGutter': {
+    backgroundColor: draculaColors.lineHighlight,
+    color: draculaColors.activeLineNumber,
+  },
+  '.cm-lineNumbers': {
+    color: draculaColors.lineNumber,
+  },
+  '.cm-foldPlaceholder': {
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: draculaColors.comment,
+  },
+  '.cm-tooltip': {
+    border: 'none',
+    backgroundColor: draculaColors.background,
+    color: draculaColors.foreground,
+  },
+  '.cm-tooltip-autocomplete': {
+    '& > ul > li[aria-selected]': {
+      backgroundColor: draculaColors.selection,
+      color: draculaColors.foreground,
+    }
+  },
+  '.cm-searchMatch': {
+    backgroundColor: '#50fa7b40',
+    outline: '1px solid #50fa7b',
+  },
+  '.cm-searchMatch.cm-searchMatch-selected': {
+    backgroundColor: '#50fa7b80',
+  },
+  '.cm-panels': {
+    backgroundColor: draculaColors.gutter,
+    color: draculaColors.foreground,
+  },
+  '.cm-panels.cm-panels-top': {
+    borderBottom: '2px solid #374151',
+  },
+  '.cm-panels.cm-panels-bottom': {
+    borderTop: '2px solid #374151',
+  },
+  '.cm-scroller': {
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+    fontSize: '14px',
+    lineHeight: '1.5',
+  },
+}, { dark: true });
+
+const draculaHighlightStyle = HighlightStyle.define([
+  { tag: t.comment, color: draculaColors.comment, fontStyle: 'italic' },
+  { tag: t.lineComment, color: draculaColors.comment, fontStyle: 'italic' },
+  { tag: t.blockComment, color: draculaColors.comment, fontStyle: 'italic' },
+  { tag: t.docComment, color: draculaColors.comment, fontStyle: 'italic' },
+  
+  { tag: t.keyword, color: draculaColors.keyword, fontWeight: 'bold' },
+  { tag: t.controlKeyword, color: draculaColors.keyword, fontWeight: 'bold' },
+  { tag: t.modifier, color: draculaColors.keyword, fontWeight: 'bold' },
+  { tag: t.operatorKeyword, color: draculaColors.keyword, fontWeight: 'bold' },
+  
+  { tag: t.variableName, color: draculaColors.variable },
+  { tag: t.typeName, color: draculaColors.type, fontStyle: 'italic' },
+  { tag: t.atom, color: draculaColors.constant },
+  { tag: t.bool, color: draculaColors.constant },
+  { tag: t.special(t.variableName), color: draculaColors.constant },
+  
+  { tag: t.number, color: draculaColors.number },
+  { tag: t.string, color: draculaColors.string },
+  { tag: t.special(t.string), color: draculaColors.string },
+  { tag: t.regexp, color: draculaColors.string },
+  
+  { tag: t.definition(t.typeName), color: draculaColors.className, fontWeight: 'bold' },
+  { tag: t.className, color: draculaColors.className, fontWeight: 'bold' },
+  { tag: t.definition(t.propertyName), color: draculaColors.function, fontWeight: 'bold' },
+  { tag: t.function(t.variableName), color: draculaColors.function, fontWeight: 'bold' },
+  { tag: t.function(t.propertyName), color: draculaColors.function, fontWeight: 'bold' },
+  
+  { tag: t.tagName, color: draculaColors.tag },
+  { tag: t.attributeName, color: draculaColors.attribute },
+  { tag: t.attributeValue, color: draculaColors.string },
+  
+  { tag: t.propertyName, color: draculaColors.property },
+  { tag: t.namespace, color: draculaColors.variable },
+  { tag: t.macroName, color: draculaColors.function },
+  
+  { tag: t.operator, color: draculaColors.operator },
+  { tag: t.separator, color: draculaColors.punctuation },
+  { tag: t.punctuation, color: draculaColors.punctuation },
+  { tag: t.bracket, color: draculaColors.bracket },
+  { tag: t.angleBracket, color: draculaColors.bracket },
+  { tag: t.squareBracket, color: draculaColors.bracket },
+  { tag: t.paren, color: draculaColors.bracket },
+  { tag: t.brace, color: draculaColors.bracket },
+  
+  { tag: t.invalid, color: draculaColors.invalid, fontWeight: 'bold' },
+  { tag: t.deleted, color: draculaColors.invalid, backgroundColor: '#ff555540' },
+  { tag: t.inserted, color: draculaColors.string, backgroundColor: '#50fa7b40' },
+  { tag: t.changed, color: draculaColors.deprecated, backgroundColor: '#ffb86c40' },
+  
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  { tag: t.link, color: draculaColors.string, textDecoration: 'underline' },
+  { tag: t.heading, color: draculaColors.function, fontWeight: 'bold' },
+]);
+
+export const draculaExtension: Extension = [
+  draculaTheme,
+  syntaxHighlighting(draculaHighlightStyle),
+];

src/app/codemirror/dracula-theme.ts

@@ -0,0 +1,37 @@
+import { Extension } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { sql } from '@codemirror/lang-sql';
+import { css } from '@codemirror/lang-css';
+import { yaml } from '@codemirror/lang-yaml';
+import { xml } from '@codemirror/lang-xml';
+
+export const getLanguageExtension = (language: string): Extension[] => {
+  switch (language.toLowerCase()) {
+    case 'javascript':
+    case 'js':
+      return [javascript({ jsx: false, typescript: false })];
+    case 'typescript':
+    case 'ts':
+      return [javascript({ jsx: false, typescript: true })];
+    case 'json':
+    case 'jsonc':
+      return [json()];
+    case 'sql':
+      return [sql()];
+    case 'css':
+    case 'scss':
+    case 'sass':
+    case 'less':
+      return [css()];
+    case 'yaml':
+    case 'yml':
+      return [yaml()];
+    case 'xml':
+    case 'html':
+    case 'htm':
+      return [xml()];
+    default:
+      return [];
+  }
+};