reorder

Author: huozhi

site/app/live-editor.tsx

@@ -597,12 +597,19 @@ export function LiveEditor({
         <div className="controls flex flex-row md:flex-nowrap mt-8 md:mt-8 mb-4 md:mb-4 items-start md:items-center justify-start md:justify-center w-full">
           {/* Left controls */}
           <div className="grid grid-cols-2 md:grid-cols-3 gap-2 p-4 rounded-lg bg-[var(--app-editor-bg-color)] controls-left-panel flex-1">
-            <ControlButton id="control-control" checked={controls} onChange={setControls} text="controls" />
-            <ControlButton
-              id="control-line-numbers"
-              checked={lineNumbers}
-              onChange={setLineNumbers}
-              text="line no."
+            <DropdownMenu
+              className="dropdown-menu-highlight"
+              buttonRef={themeButtonRef}
+              buttonText={<ThemeColorBlocks theme={highlightTheme} />}
+              items={SYNTAX_THEMES.map((theme) => ({ text: theme }))}
+              onChange={(text) => {
+                setHighlightTheme(text)
+              }}
+              onNext={() => {
+                const nextIndex = SYNTAX_THEMES.indexOf(highlightTheme) + 1
+                const nextTheme = SYNTAX_THEMES[nextIndex % SYNTAX_THEMES.length]
+                setHighlightTheme(nextTheme)
+              }}
             />
             <ControlButton
               id="control-theme"
@@ -611,6 +618,12 @@ export function LiveEditor({
               text={theme === 'dark' ? 'dark' : 'light'}
               prefix={<span>{theme === 'dark' ? '🌙' : '☀️'}</span>}
             />
+            <ControlButton
+              id="control-line-numbers"
+              checked={lineNumbers}
+              onChange={setLineNumbers}
+              text="line no."
+            />
             <RangeSelector
               text="indent"
               className="range-control"
@@ -621,20 +634,6 @@ export function LiveEditor({
               onChange={setLineNumbersWidth}
               displayValue={false}
             />
-            <DropdownMenu
-              className="dropdown-menu-highlight"
-              buttonRef={themeButtonRef}
-              buttonText={<ThemeColorBlocks theme={highlightTheme} />}
-              items={SYNTAX_THEMES.map((theme) => ({ text: theme }))}
-              onChange={(text) => {
-                setHighlightTheme(text)
-              }}
-              onNext={() => {
-                const nextIndex = SYNTAX_THEMES.indexOf(highlightTheme) + 1
-                const nextTheme = SYNTAX_THEMES[nextIndex % SYNTAX_THEMES.length]
-                setHighlightTheme(nextTheme)
-              }}
-            />
             <ControlButton
               id="control-format"
               checked
@@ -665,6 +664,7 @@ export function LiveEditor({
               text="format"
               prefix={<FormatIcon width={14} height={14} stroke="currentColor" strokeWidth="2" className={isFormatting ? 'mop-animate' : ''} />}
             />
+            <ControlButton id="control-control" checked={controls} onChange={setControls} text="controls" />
           </div>
           {/* Right side screenshot button */}
           <div className="inline-flex items-center self-stretch gap-2 flex-shrink-0">