language widget and markdown dark theme support#1435
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new Language widget for managing language field types across the application and adds dark theme support for Markdown display components.
- Adds a comprehensive Language widget with display, edit, and view components supporting 184 languages with flag emojis
- Implements dark theme CSS styling for Markdown components using
prefers-color-schememedia queries - Registers the Language widget in all three component type systems (table-display, record-view, record-edit)
Reviewed Changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/app/consts/table-display-types.ts | Registers LanguageDisplayComponent in the table display widget system |
| frontend/src/app/consts/record-view-types.ts | Registers LanguageRecordViewComponent in the record view widget system |
| frontend/src/app/consts/record-edit-types.ts | Registers LanguageEditComponent in the record edit widget system |
| frontend/src/app/consts/languages.ts | Defines language data structure with 184 languages and flag emoji generation utility |
| frontend/src/app/components/ui-components/table-display-fields/markdown/markdown.component.css | Adds dark theme support for code elements in markdown display |
| frontend/src/app/components/ui-components/table-display-fields/language/language.component.ts | Implements table display component for language fields with flag support |
| frontend/src/app/components/ui-components/table-display-fields/language/language.component.spec.ts | Adds unit tests for language table display component |
| frontend/src/app/components/ui-components/table-display-fields/language/language.component.html | Template for displaying language values with optional flag emoji |
| frontend/src/app/components/ui-components/table-display-fields/language/language.component.css | Styles for language display with flag positioning |
| frontend/src/app/components/ui-components/record-view-fields/markdown/markdown.component.css | Adds comprehensive dark theme styling for all markdown elements (code, pre, blockquote, container) |
| frontend/src/app/components/ui-components/record-view-fields/language/language.component.ts | Implements record view component for language fields |
| frontend/src/app/components/ui-components/record-view-fields/language/language.component.spec.ts | Adds unit tests for language record view component |
| frontend/src/app/components/ui-components/record-view-fields/language/language.component.html | Template for viewing language values in record detail view |
| frontend/src/app/components/ui-components/record-view-fields/language/language.component.css | Minimal styles for language flag in record view |
| frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.css | Adds dark theme border styling for markdown editor |
| frontend/src/app/components/ui-components/record-edit-fields/language/language.component.ts | Implements autocomplete-based language selector with flag display and filtering |
| frontend/src/app/components/ui-components/record-edit-fields/language/language.component.spec.ts | Adds unit tests for language edit component |
| frontend/src/app/components/ui-components/record-edit-fields/language/language.component.html | Template with Material autocomplete for language selection |
| frontend/src/app/components/ui-components/record-edit-fields/language/language.component.css | Styles for language autocomplete input with flag prefix and option formatting |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { MatIconModule } from '@angular/material/icon'; | ||
| import { MatTooltipModule } from '@angular/material/tooltip'; | ||
|
|
||
| @Component({ |
There was a problem hiding this comment.
Missing @Injectable() decorator. All table display field components in the codebase use the @Injectable() decorator before the @Component() decorator for consistency with Angular's dependency injection system. This should be added on line 11, before the @Component() decorator.
| import { Observable } from 'rxjs'; | ||
| import { ReactiveFormsModule } from '@angular/forms'; | ||
|
|
||
| @Component({ |
There was a problem hiding this comment.
Missing @Injectable() decorator. All record edit field components in the codebase use the @Injectable() decorator before the @Component() decorator for consistency with Angular's dependency injection system. Add this import to line 2 and add the decorator on line 15, before the @Component() decorator.
| @@ -0,0 +1,54 @@ | |||
| import { LANGUAGES, getLanguageFlag } from '../../../../consts/languages'; | |||
| import { Component, OnInit } from '@angular/core'; | |||
There was a problem hiding this comment.
Missing Injectable import. The @Injectable() decorator is used in this component but Injectable is not imported from @angular/core. Add Injectable to the imports on line 2.
| @@ -0,0 +1,116 @@ | |||
| import { LANGUAGES, getLanguageFlag, Language } from '../../../../consts/languages'; | |||
| import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from '@angular/core'; | |||
There was a problem hiding this comment.
Missing Injectable import. The @Injectable() decorator should be added to this component (see separate comment) but Injectable is not imported from @angular/core. Add Injectable to the imports on line 2.
| styleUrls: ['./language.component.css'], | ||
| schemas: [CUSTOM_ELEMENTS_SCHEMA] | ||
| }) | ||
| export class LanguageEditComponent extends BaseEditFieldComponent { |
There was a problem hiding this comment.
Missing OnInit interface implementation. The component uses ngOnInit() but doesn't implement the OnInit interface. Add OnInit to the imports on line 2 and implement it in the class declaration on line 22: export class LanguageEditComponent extends BaseEditFieldComponent implements OnInit.
| @@ -0,0 +1,116 @@ | |||
| import { LANGUAGES, getLanguageFlag, Language } from '../../../../consts/languages'; | |||
There was a problem hiding this comment.
Unused import Language.
| import { LANGUAGES, getLanguageFlag, Language } from '../../../../consts/languages'; | |
| import { LANGUAGES, getLanguageFlag } from '../../../../consts/languages'; |
No description provided.