feat(app): allow zero padding

Author: SarjuHansaliya

.changeset/tame-deers-whisper.md

@@ -0,0 +1,5 @@
+---
+'@codeimage/app': minor
+---
+
+feat: allow zero padding

apps/codeimage/src/components/PropertyEditor/FrameStyleForm.tsx

@@ -12,12 +12,24 @@ import {CustomColorPicker} from './controls/ColorPicker/CustomColorPicker';
 import {PanelHeader} from './PanelHeader';
 import {PanelRow, TwoColumnPanelRow} from './PanelRow';
 import {SuspenseEditorItem} from './SuspenseEditorItem';
+import {Select, createSelectOptions} from '@codeui/kit';
 
 export const FrameStyleForm: ParentComponent = () => {
   const [t] = useI18n<AppLocaleEntries>();
   const {editorPadding, editorRadius} = appEnvironment;
   const frame = getFrameState();
 
+  const paddingOptions = createSelectOptions(
+    editorPadding.map(padding => ({
+      label: padding.label,
+      value: padding.value,
+    })),
+    {
+      key: 'label',
+      valueKey: 'value',
+    },
+  );
+
   return (
     <>
       <PanelHeader label={t('frame.frame')} />
@@ -27,16 +39,22 @@ export const FrameStyleForm: ParentComponent = () => {
           <SuspenseEditorItem
             fallback={<SkeletonLine width={'100%'} height={'26px'} />}
           >
-            <SegmentedField
-              adapt
+            <Select
+              disallowEmptySelection
+              {...paddingOptions.props()}
+              {...paddingOptions.controlled(
+                () => String(frame.store.padding),
+                padding => {
+                  if (typeof padding === 'undefined') {
+                    return;
+                  }
+                  frame.setPadding(Number(padding));
+                },
+              )}
+              options={paddingOptions.options()}
+              aria-label={'Padding'}
               id={'paddingField'}
               size={'xs'}
-              value={frame.store.padding}
-              onChange={frame.setPadding}
-              items={editorPadding.map(padding => ({
-                label: padding.toString(),
-                value: padding,
-              }))}
             />
           </SuspenseEditorItem>
         </TwoColumnPanelRow>

apps/codeimage/src/components/Terminal/TerminalHost.tsx

@@ -8,6 +8,7 @@ import {FlowComponent} from 'solid-js';
 import {TerminalGlassReflection} from './GlassReflection/TerminalGlassReflection';
 import {createTabTheme} from './Tabs/createTabTheme';
 import * as styles from './terminal.css';
+import {getFrameState} from '@codeimage/store/editor/frame';
 
 export interface BaseTerminalProps
   extends Omit<TerminalState, 'type'>,
@@ -30,6 +31,7 @@ export interface TerminalHostProps extends BaseTerminalProps {
 export const TerminalHost: FlowComponent<TerminalHostProps> = props => {
   const tabTheme = createTabTheme(() => props.themeId);
   const darkMode = () => tabTheme().darkMode;
+  const frameState = getFrameState().store;
 
   const background = () => {
     if (props.alternativeTheme) {
@@ -62,6 +64,7 @@ export const TerminalHost: FlowComponent<TerminalHostProps> = props => {
           tabTheme().activeTabBackground ?? '',
         [styles.terminalVars.tabAccentInactiveBackground]:
           tabTheme().inactiveTabBackground ?? '',
+        [styles.terminalVars.radius]: frameState.padding === 0 ? 0 : undefined,
         ...(props.style ?? {}),
       })}
     >

apps/codeimage/src/core/configuration.ts

@@ -7,7 +7,13 @@ export const [appEnvironment] = createConfiguration({
   locales: SUPPORTED_LOCALES,
   themes: [],
   languages: [],
-  editorPadding: [16, 32, 64, 128],
+  editorPadding: [
+    {label: '0', value: "0"},
+    {label: '16', value: "16"},
+    {label: '32', value: "32"},
+    {label: '64', value: "64"},
+    {label: '128', value: "128"},
+  ],
   editorRadius: [
     {label: '0', value: 0},
     {label: '8', value: 8},

apps/codeimage/src/state/editor/frame.ts

@@ -86,9 +86,11 @@ const frameState = defineStore(() => getInitialFrameState())
       .hold(store.commands.setNextPadding, (_, {state}) => {
         const availablePadding = appEnvironment.editorPadding;
         const padding = state.padding;
-        const currentIndex = appEnvironment.editorPadding.indexOf(padding);
+        const currentIndex = appEnvironment.editorPadding.findIndex(
+          item => Number(item.value) === padding,
+        );
         const next = (currentIndex + 1) % availablePadding.length;
-        return {...state, padding: availablePadding[next]};
+        return {...state, padding: Number(availablePadding[next].value)};
       })
       .hold(store.commands.setFromPreset, presetData => {
         store.set(state => ({...state, ...presetData}));