Komas Changes

[jynxvlr]

No description provided.

[Copilot]

Pull Request Overview

This PR implements a custom purple Matrix-style theme for syntax highlighting across the application. The changes standardize the visual appearance of code displays by replacing inline styling with a reusable theme object.

• Adds a custom purple Matrix-style theme for syntax highlighting components
• Updates Monaco Editor configuration with the new theme
• Removes TypeScript ignore comments and ESLint disables for cleaner code

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
src/app/dashboard/playground/page.tsx	Adds purpleMatrixTheme object and Monaco theme configuration, updates SyntaxHighlighter styling
src/app/dashboard/examples/page.tsx	Implements purpleMatrixTheme and updates SyntaxHighlighter styling
src/app/dashboard/docs/page.tsx	Applies purpleMatrixTheme to all SyntaxHighlighter instances
.claude/settings.local.json	Adds Claude AI configuration file for build permissions

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The purpleMatrixTheme object is duplicated across multiple files. Consider extracting this theme to a shared utility file or constants to reduce code duplication and improve maintainability.

[Copilot]

The purpleMatrixTheme object is duplicated across multiple files. Consider extracting this theme to a shared utility file or constants to reduce code duplication and improve maintainability.

Suggested change

	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	const purpleMatrixTheme: any = {
	'hljs': {
	display: 'block',
	overflowX: 'auto',
	padding: '1rem',
	background: theme === 'dark' ? '#0a0a0a' : '#f8f8ff',
	color: '#9d4edd',
	borderRadius: '0.5rem'
	},
	'hljs-keyword': { color: '#c77dff' },
	'hljs-string': { color: '#e0aaff' },
	'hljs-number': { color: '#7b2cbf' },
	'hljs-comment': { color: '#6c63ff', fontStyle: 'italic' },
	'hljs-function': { color: '#8b5cf6' },
	'hljs-variable': { color: '#a855f7' },
	'hljs-property': { color: '#9333ea' },
	'hljs-built_in': { color: '#7c3aed' },
	'hljs-title': { color: '#6d28d9' },
	'hljs-literal': { color: '#8b5cf6' },
	'hljs-type': { color: '#7c3aed' },
	'hljs-attribute': { color: '#9333ea' },
	'hljs-meta': { color: '#6c63ff' },
	'hljs-tag': { color: '#8b5cf6' },
	'hljs-name': { color: '#a855f7' },
	'hljs-attr': { color: '#9333ea' },
	'hljs-selector-id': { color: '#7c3aed' },
	'hljs-selector-class': { color: '#8b5cf6' },
	'hljs-regexp': { color: '#c77dff' },
	'hljs-link': { color: '#e0aaff' },
	'hljs-symbol': { color: '#7b2cbf' },
	'hljs-bullet': { color: '#9d4edd' },
	'hljs-addition': { color: '#8b5cf6', backgroundColor: theme === 'dark' ? '#1a1a1a' : '#faf5ff' },
	'hljs-deletion': { color: '#7b2cbf', backgroundColor: theme === 'dark' ? '#1a1a1a' : '#faf5ff' }
	};
	import { getPurpleMatrixTheme } from '@/app/constants/themes';
	const purpleMatrixTheme = getPurpleMatrixTheme(theme);

[Copilot]

The purpleMatrixTheme object is duplicated across multiple files. Consider extracting this theme to a shared utility file or constants to reduce code duplication and improve maintainability.

Suggested change

	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	const purpleMatrixTheme: any = {
	'hljs': {
	display: 'block',
	overflowX: 'auto',
	padding: '1rem',
	background: theme === 'dark' ? '#0a0a0a' : '#f8f8ff',
	color: '#9d4edd',
	borderRadius: '0.5rem'
	},
	'hljs-keyword': { color: '#c77dff' },
	'hljs-string': { color: '#e0aaff' },
	'hljs-number': { color: '#7b2cbf' },
	'hljs-comment': { color: '#6c63ff', fontStyle: 'italic' },
	'hljs-function': { color: '#8b5cf6' },
	'hljs-variable': { color: '#a855f7' },
	'hljs-property': { color: '#9333ea' },
	'hljs-built_in': { color: '#7c3aed' },
	'hljs-title': { color: '#6d28d9' },
	'hljs-literal': { color: '#8b5cf6' },
	'hljs-type': { color: '#7c3aed' },
	'hljs-attribute': { color: '#9333ea' },
	'hljs-meta': { color: '#6c63ff' },
	'hljs-tag': { color: '#8b5cf6' },
	'hljs-name': { color: '#a855f7' },
	'hljs-attr': { color: '#9333ea' },
	'hljs-selector-id': { color: '#7c3aed' },
	'hljs-selector-class': { color: '#8b5cf6' },
	'hljs-regexp': { color: '#c77dff' },
	'hljs-link': { color: '#e0aaff' },
	'hljs-symbol': { color: '#7b2cbf' },
	'hljs-bullet': { color: '#9d4edd' },
	'hljs-addition': { color: '#8b5cf6', backgroundColor: theme === 'dark' ? '#1a1a1a' : '#faf5ff' },
	'hljs-deletion': { color: '#7b2cbf', backgroundColor: theme === 'dark' ? '#1a1a1a' : '#faf5ff' }
	};
	const purpleMatrixTheme = getPurpleMatrixTheme(theme);

[Copilot]

The monacoTheme object could also be extracted to a shared utility file for consistency and reusability across the application.

[Pikachubolk]

What this co-pilot fella said

[jynxvlr]

yeah