adjust layout and make preview border non-nullable

Author: vitormv

src/components/Index.svelte renamed to src/components/Home.svelte

@@ -9,11 +9,11 @@
 </script>
 
 <main class="layout">
-  <div style="">
+  <div class="panel-about">
     <AboutPanel />
   </div>
 
-  <div style="">
+  <div class="panel-theme-options" style="">
     <Box
       title="Theme Options"
       style="display: flex; flex-direction: column; height: 100%;"
@@ -23,7 +23,7 @@
     </Box>
   </div>
 
-  <div>
+  <div class="panel-palette">
     <Box
       title="Color Palette"
       style="display: flex; flex-direction: column; height: 100%;"
@@ -33,12 +33,12 @@
     </Box>
   </div>
 
-  <div style="display: flex; gap: var(--box-gap); width: 100%;">
+  <div class="panel-color-picker" style="display: flex; gap: var(--box-gap); width: 100%;">
     <Box title="Color Picker" style="flex: 0 1 300px" contentStyle="height: 100%;">
       <ColorPicker />
     </Box>
 
-    <div style="flex: 1; display: flex; flex-direction: column; gap: 10px;">
+    <div class="panel-terminal" style="flex: 1; display: flex; flex-direction: column; gap: 10px;">
       <Box title="Preview" style="flex: 1;">
         <TerminalWindow />
       </Box>
@@ -55,9 +55,9 @@
     display: grid;
     gap: var(--box-gap);
     grid-template-columns: 350px 1fr;
+    grid-template-rows: 350px auto;
     align-items: stretch;
     justify-content: stretch;
-    grid-template-rows: 320px auto;
     align-items: stretch;
     align-content: stretch;
     height: 100%;

src/components/OptionsPanel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import FormControl from '~/components/common/FormControl.svelte';
-  import { borderTypes, infoTypes, layoutTypes } from '~/data/fzfBorders';
+  import { borderTypes, borderTypesNonNullable, infoTypes, layoutTypes } from '~/data/fzfBorders';
   import { themeStore } from '~/data/themeStore';
   import InputCycle from '~/components/common/InputCycle.svelte';
   import { boxCoordinatesToString, stringToBoxCoordinates } from '~/utils/boxCoordinates';
@@ -49,7 +49,7 @@
 
     <FormControl label="Preview">
       <InputCycle
-        items={borderTypes}
+        items={borderTypesNonNullable}
         value={$themeStore.previewBorderStyle}
         showIndex
         on:change={(e) => {
@@ -76,7 +76,7 @@
     <FormControl label="Margin">
       <input
         type="text"
-        pattern={'^[0-9](,[0-9]){0,3}$'}
+        pattern={'^[0-9]+(,[0-9]+){0,3}$'}
         value={boxCoordinatesToString($themeStore.margin)}
         on:input={(e) => {
           const coords = stringToBoxCoordinates(e.target?.value);
@@ -91,7 +91,7 @@
     <FormControl label="Padding">
       <input
         type="text"
-        pattern={'^[0-9](,[0-9]){0,3}$'}
+        pattern={'^[0-9]+(,[0-9]+){0,3}$'}
         value={boxCoordinatesToString($themeStore.padding)}
         on:input={(e) => {
           const coords = stringToBoxCoordinates(e.target?.value);

src/data/fzfBorders.ts

@@ -10,6 +10,7 @@ export type BorderTypeGlyphs = {
 };
 
 export type BorderStyle = 'rounded' | 'sharp' | 'bold' | 'double' | 'block' | 'thinblock' | 'none';
+export type BorderStyleNonNullable = Exclude<BorderStyle, 'none'>;
 
 // @todo: add border disclaimers for block and thinblock
 export const BorderStyleDefinitions: Record<BorderStyle, BorderTypeGlyphs> = {
@@ -101,6 +102,7 @@ export const BorderStyleDefinitions: Record<BorderStyle, BorderTypeGlyphs> = {
 };
 
 export const borderTypes = Object.keys(BorderStyleDefinitions) as BorderStyle[];
+export const borderTypesNonNullable = borderTypes.filter((item) => item !== 'none');
 
 export const layoutTypes = ['default' as const, 'reverse' as const, 'reverse-list' as const];
 export type Layout = (typeof layoutTypes)[number];

src/data/themeStore.ts

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store';
-import type { BorderStyle, InfoStyle, Layout } from '~/data/fzfBorders';
+import type { BorderStyle, BorderStyleNonNullable, InfoStyle, Layout } from '~/data/fzfBorders';
 
 export type BoxCoordinates = {
   top: number;
@@ -12,7 +12,7 @@ export type ThemeOptions = {
   borderStyle: BorderStyle;
   borderLabel: string;
   borderLabelPosition: number;
-  previewBorderStyle: BorderStyle;
+  previewBorderStyle: BorderStyleNonNullable;
   padding: BoxCoordinates;
   margin: BoxCoordinates;
   prompt: string;

src/main.ts

@@ -1,8 +1,8 @@
-import AppIndex from './components/Index.svelte';
+import Home from './components/Home.svelte';
 
 import './styles/main.css';
 
-const app = new AppIndex({
+const app = new Home({
   target: document.getElementById('app') as HTMLElement,
 });