refactor(UI): created constants file for ThemeDialog (#26446)

packages/cli/src/ui/components/ThemeDialog.constants.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/** The fraction of the dialog width allocated to the selection (left) pane. */
+export const SELECTION_PANE_WIDTH_PERCENTAGE = 0.45;
+
+/** The fraction of the dialog width allocated to the preview (right) pane. */
+export const PREVIEW_PANE_WIDTH_PERCENTAGE = 0.55;
+
+/**
+ * A safety margin to prevent text from touching the preview pane border.
+ * Note: This is specific to the ThemeDialog layout and is unrelated to
+ * SHELL_WIDTH_FRACTION in AppContainer.
+ */
+export const PREVIEW_PANE_WIDTH_SAFETY_MARGIN = 0.9;
+
+/**
+ * Combined horizontal padding from the dialog and preview pane used
+ * to calculate available width for the code preview.
+ */
+export const TOTAL_HORIZONTAL_PADDING = 4;
+
+/** Padding for the dialog container. */
+export const DIALOG_PADDING = 2;
+
+/** Fixed vertical space taken by preview pane elements (title, borders, margins). */
+export const PREVIEW_PANE_FIXED_VERTICAL_SPACE = 8;
+
+/** Height of the tab/scope selection hint at the bottom. */
+export const TAB_TO_SELECT_HEIGHT = 2;

packages/cli/src/ui/components/ThemeDialog.tsx

@@ -77,6 +77,16 @@ function generateThemeItem(
   };
 }
 
+import {
+  DIALOG_PADDING,
+  PREVIEW_PANE_FIXED_VERTICAL_SPACE,
+  PREVIEW_PANE_WIDTH_PERCENTAGE,
+  PREVIEW_PANE_WIDTH_SAFETY_MARGIN,
+  SELECTION_PANE_WIDTH_PERCENTAGE,
+  TAB_TO_SELECT_HEIGHT,
+  TOTAL_HORIZONTAL_PADDING,
+} from './ThemeDialog.constants.js';
+
 export function ThemeDialog({
   onSelect,
   onCancel,
@@ -190,14 +200,6 @@ export function ThemeDialog({
     settings,
   );
 
-  // Constants for calculating preview pane layout.
-  // These values are based on the JSX structure below.
-  const PREVIEW_PANE_WIDTH_PERCENTAGE = 0.55;
-  // A safety margin to prevent text from touching the border.
-  // This is a complete hack unrelated to the 0.9 used in App.tsx
-  const PREVIEW_PANE_WIDTH_SAFETY_MARGIN = 0.9;
-  // Combined horizontal padding from the dialog and preview pane.
-  const TOTAL_HORIZONTAL_PADDING = 4;
   const colorizeCodeWidth = Math.max(
     Math.floor(
       (terminalWidth - TOTAL_HORIZONTAL_PADDING) *
@@ -207,9 +209,7 @@ export function ThemeDialog({
     1,
   );
 
-  const DIALOG_PADDING = 2;
   const selectThemeHeight = themeItems.length + 1;
-  const TAB_TO_SELECT_HEIGHT = 2;
   availableTerminalHeight = availableTerminalHeight ?? Number.MAX_SAFE_INTEGER;
   availableTerminalHeight -= 2; // Top and bottom borders.
   availableTerminalHeight -= TAB_TO_SELECT_HEIGHT;
@@ -224,10 +224,6 @@ export function ThemeDialog({
     totalLeftHandSideHeight -= DIALOG_PADDING;
   }
 
-  // Vertical space taken by elements other than the two code blocks in the preview pane.
-  // Includes "Preview" title, borders, and margin between blocks.
-  const PREVIEW_PANE_FIXED_VERTICAL_SPACE = 8;
-
   // The right column doesn't need to ever be shorter than the left column.
   availableTerminalHeight = Math.max(
     availableTerminalHeight,
@@ -252,6 +248,9 @@ export function ThemeDialog({
     themeManager.getTheme(highlightedThemeName || DEFAULT_THEME.name) ||
     DEFAULT_THEME;
 
+  const leftColumnWidth = `${SELECTION_PANE_WIDTH_PERCENTAGE * 100}%`;
+  const rightColumnWidth = `${PREVIEW_PANE_WIDTH_PERCENTAGE * 100}%`;
+
   return (
     <Box
       borderStyle="round"
@@ -266,7 +265,7 @@ export function ThemeDialog({
       {mode === 'theme' ? (
         <Box flexDirection="row">
           {/* Left Column: Selection */}
-          <Box flexDirection="column" width="45%" paddingRight={2}>
+          <Box flexDirection="column" width={leftColumnWidth} paddingRight={2}>
             <Text bold={mode === 'theme'} wrap="truncate">
               {mode === 'theme' ? '> ' : '  '}Select Theme{' '}
               <Text color={theme.text.secondary}>
@@ -340,7 +339,7 @@ export function ThemeDialog({
           </Box>
 
           {/* Right Column: Preview */}
-          <Box flexDirection="column" width="55%" paddingLeft={2}>
+          <Box flexDirection="column" width={rightColumnWidth} paddingLeft={2}>
             <Text bold color={theme.text.primary}>
               Preview
             </Text>