UI Polish for theme selector (#294)

packages/cli/src/ui/themes/ansi.ts

@@ -7,7 +7,8 @@
 import { ansiTheme, Theme } from './theme.js';
 
 export const ANSI: Theme = new Theme(
-  'ANSI colors only',
+  'ANSI',
+  'ansi',
   {
     hljs: {
       display: 'block',

packages/cli/src/ui/themes/atom-one-dark.ts

@@ -7,7 +7,8 @@
 import { darkTheme, Theme } from './theme.js';
 
 export const AtomOneDark: Theme = new Theme(
-  'Atom One Dark',
+  'Atom One',
+  'dark',
   {
     hljs: {
       display: 'block',

packages/cli/src/ui/themes/dracula.ts

@@ -8,6 +8,7 @@ import { darkTheme, Theme } from './theme.js';
 
 export const Dracula: Theme = new Theme(
   'Dracula',
+  'dark',
   {
     hljs: {
       display: 'block',

packages/cli/src/ui/themes/github.ts

@@ -8,6 +8,7 @@ import { lightTheme, Theme } from './theme.js';
 
 export const GitHub: Theme = new Theme(
   'GitHub',
+  'light',
   {
     hljs: {
       display: 'block',

packages/cli/src/ui/themes/googlecode.ts

@@ -8,6 +8,7 @@ import { lightTheme, Theme } from './theme.js';
 
 export const GoogleCode: Theme = new Theme(
   'Google Code',
+  'light',
   {
     hljs: {
       display: 'block',

packages/cli/src/ui/themes/theme-manager.ts

@@ -11,12 +11,12 @@ import { GoogleCode } from './googlecode.js';
 import { VS } from './vs.js';
 import { VS2015 } from './vs2015.js';
 import { XCode } from './xcode.js';
-import { Theme } from './theme.js';
+import { Theme, ThemeType } from './theme.js';
 import { ANSI } from './ansi.js';
 
 export interface ThemeDisplay {
   name: string;
-  active: boolean;
+  type: ThemeType;
 }
 
 export const DEFAULT_THEME: Theme = VS2015;
@@ -43,9 +43,30 @@ class ThemeManager {
    * Returns a list of available theme names.
    */
   getAvailableThemes(): ThemeDisplay[] {
-    return this.availableThemes.map((theme) => ({
+    const sortedThemes = [...this.availableThemes].sort((a, b) => {
+      const typeOrder = (type: ThemeType): number => {
+        switch (type) {
+          case 'dark':
+            return 1;
+          case 'light':
+            return 2;
+          case 'ansi':
+            return 3;
+          default:
+            return 4;
+        }
+      };
+
+      const typeComparison = typeOrder(a.type) - typeOrder(b.type);
+      if (typeComparison !== 0) {
+        return typeComparison;
+      }
+      return a.name.localeCompare(b.name);
+    });
+
+    return sortedThemes.map((theme) => ({
       name: theme.name,
-      active: theme === this.activeTheme,
+      type: theme.type,
     }));
   }
 

packages/cli/src/ui/themes/theme.ts

@@ -5,7 +5,11 @@
  */
 
 import type { CSSProperties } from 'react';
+
+export type ThemeType = 'light' | 'dark' | 'ansi';
+
 export interface ColorsTheme {
+  type: ThemeType;
   Background: string;
   Foreground: string;
   LightBlue: string;
@@ -21,6 +25,7 @@ export interface ColorsTheme {
 }
 
 export const lightTheme: ColorsTheme = {
+  type: 'light',
   Background: '#FAFAFA',
   Foreground: '#3C3C43',
   LightBlue: '#ADD8E6',
@@ -36,6 +41,7 @@ export const lightTheme: ColorsTheme = {
 };
 
 export const darkTheme: ColorsTheme = {
+  type: 'dark',
   Background: '#1E1E2E',
   Foreground: '#CDD6F4',
   LightBlue: '#ADD8E6',
@@ -51,6 +57,7 @@ export const darkTheme: ColorsTheme = {
 };
 
 export const ansiTheme: ColorsTheme = {
+  type: 'ansi',
   Background: 'black',
   Foreground: 'white',
   LightBlue: 'blue',
@@ -250,6 +257,7 @@ export class Theme {
    */
   constructor(
     readonly name: string,
+    readonly type: ThemeType,
     rawMappings: Record<string, CSSProperties>,
     readonly colors: ColorsTheme,
   ) {

packages/cli/src/ui/themes/vs.ts

@@ -8,6 +8,7 @@ import { lightTheme, Theme } from './theme.js';
 
 export const VS: Theme = new Theme(
   'VS',
+  'light',
   {
     hljs: {
       display: 'block',

packages/cli/src/ui/themes/vs2015.ts

@@ -8,6 +8,7 @@ import { darkTheme, Theme } from './theme.js';
 
 export const VS2015: Theme = new Theme(
   'VS2015',
+  'dark',
   {
     hljs: {
       display: 'block',

packages/cli/src/ui/themes/xcode.ts

@@ -8,6 +8,7 @@ import { lightTheme, Theme } from './theme.js';
 
 export const XCode: Theme = new Theme(
   'XCode',
+  'light',
   {
     hljs: {
       display: 'block',