feat(app,api) add new border type glass option (#611)

* feat: add glass border type option
* feat: add borderType property
* feat: api schema validation borderType
* fix types
* update types
* fix lint and integration test
* update styles
* Add border type select
* update window style form settings icon

Author: riccardoperra

.changeset/red-zoos-march.md

@@ -0,0 +1,6 @@
+---
+"@codeimage/api": minor
+"@codeimage/app": minor
+---
+
+feat(app,api) add new border type glass option

apps/api/prisma/migrations/20231231115803_add_terminal_border_type_property/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "SnippetTerminal" ADD COLUMN     "borderType" TEXT;

apps/api/prisma/schema.prisma

@@ -62,6 +62,7 @@ model SnippetTerminal {
   showGlassReflection Boolean  @default(false)
   opacity             Float    @default(100)
   alternativeTheme    Boolean  @default(false)
+  borderType          String?
 }
 
 model SnippetEditorOptions {

apps/api/src/common/typebox/enum.ts

@@ -0,0 +1,10 @@
+import {TString, Type} from '@sinclair/typebox';
+
+export const enumLiteral = <T extends string>(values: T[]): TString => {
+  const literals = values.map(value => Type.Literal(value));
+  // TODO: validation should work but type must work as a string...
+  return Type.Intersect([
+    Type.Union(literals),
+    Type.String(),
+  ]) as unknown as TString;
+};

apps/api/src/modules/project/infra/prisma/prisma-project.repository.ts

@@ -105,6 +105,7 @@ export function makePrismaProjectRepository(
             showWatermark: data.terminal.showWatermark,
             textColor: data.terminal.textColor,
             type: data.terminal.type,
+            borderType: data.terminal.borderType,
           },
         },
       },
@@ -188,6 +189,7 @@ export function makePrismaProjectRepository(
             showWatermark: data.terminal.showWatermark,
             textColor: data.terminal.textColor,
             type: data.terminal.type,
+            borderType: data.terminal.borderType,
           },
         },
       },

apps/api/src/modules/project/mapper/create-project-mapper.ts

@@ -48,6 +48,7 @@ export function createProjectRequestMapper(
         data.terminal.alternativeTheme ??
         SnippetTerminalCreateRequestSchema.properties.alternativeTheme.default,
       shadow: data.terminal.shadow ?? null,
+      borderType: data.terminal.borderType ?? null,
     },
     editorOptions: {
       fontWeight: data.editorOptions.fontWeight,

apps/api/src/modules/project/mapper/get-project-by-id-mapper.ts

@@ -30,6 +30,7 @@ export function createCompleteProjectGetByIdResponseMapper(
       accentVisible: data.terminal.accentVisible,
       alternativeTheme: data.terminal.alternativeTheme,
       shadow: data.terminal.shadow,
+      borderType: data.terminal.borderType as 'glass' | null,
     },
     editorOptions: {
       id: data.editorOptions.id,

apps/api/src/modules/project/schema/project-create.schema.ts

@@ -1,5 +1,6 @@
 import {Static, Type} from '@sinclair/typebox';
 import {Nullable} from '../../../common/typebox/nullable.js';
+import {SnippetTerminalBorderType} from './project.schema.js';
 
 export const SnippetFrameCreateRequestSchema = Type.Object(
   {
@@ -45,6 +46,7 @@ export const SnippetTerminalCreateRequestSchema = Type.Object(
     opacity: Nullable(Type.Number({minimum: 0, maximum: 100, default: 100})),
     showHeader: Type.Boolean(),
     showWatermark: Nullable(Type.Boolean({default: true})),
+    borderType: Nullable(SnippetTerminalBorderType),
   },
   {title: 'SnippetTerminalCreateRequest'},
 );

apps/api/src/modules/project/schema/project-update.schema.ts

@@ -1,5 +1,6 @@
 import {Static, Type} from '@sinclair/typebox';
 import {Nullable} from '../../../common/typebox/nullable.js';
+import {SnippetTerminalBorderType} from './project.schema.js';
 
 export const SnippetFrameUpdateRequestSchema = Type.Object(
   {
@@ -40,6 +41,7 @@ const SnippetTerminalUpdateRequestSchema = Type.Object(
     showWatermark: Type.Boolean(),
     textColor: Nullable(Type.String()),
     type: Type.String(),
+    borderType: Nullable(SnippetTerminalBorderType),
   },
   {title: 'SnippetTerminalUpdateRequest'},
 );

apps/api/src/modules/project/schema/project.schema.ts

@@ -1,4 +1,5 @@
 import {Type} from '@sinclair/typebox';
+import {enumLiteral} from '../../../common/typebox/enum.js';
 import {Nullable} from '../../../common/typebox/nullable.js';
 
 export const BaseProjectResponseSchema = Type.Object(
@@ -34,6 +35,8 @@ export const BaseSnippetFrameSchema = Type.Object({
   opacity: Type.Number(),
 });
 
+export const SnippetTerminalBorderType = enumLiteral(['glass'] as const);
+
 export const BaseSnippetTerminalSchema = Type.Object({
   id: Type.String({format: 'uuid'}),
   showHeader: Type.Boolean(),
@@ -46,6 +49,7 @@ export const BaseSnippetTerminalSchema = Type.Object({
   showGlassReflection: Type.Boolean(),
   opacity: Type.Number(),
   alternativeTheme: Type.Boolean(),
+  borderType: Nullable(SnippetTerminalBorderType),
 });
 
 export const BaseSnippetEditorOptionsSchema = Type.Object({

apps/api/test/modules/project/mapper/create-project-mapper.test.ts

@@ -22,6 +22,7 @@ test('should map ProjectCreateRequest to Prisma ProjectCreateRequest with defaul
       shadow: null,
       textColor: null,
       accentVisible: null,
+      borderType: null,
     },
     name: 'Untitled',
     editors: [],
@@ -53,6 +54,7 @@ test('should map ProjectCreateRequest to Prisma ProjectCreateRequest with defaul
       showWatermark: true,
       opacity: 100,
       showHeader: true,
+      borderType: null,
     },
     editors: [],
     name: 'Untitled',

apps/api/test/modules/project/mapper/get-project-by-id-mapper.test.ts

@@ -31,6 +31,7 @@ test('should map Prisma ProjectGetByIdResponse to schema ProjectGetByIdResponse'
       shadow: null,
       textColor: null,
       accentVisible: true,
+      borderType: 'glass',
     },
     editorOptionsId: 'editorOptionsId',
     terminalId: 'terminalId',
@@ -75,6 +76,7 @@ test('should map Prisma ProjectGetByIdResponse to schema ProjectGetByIdResponse'
       showWatermark: false,
       opacity: 100,
       showHeader: true,
+      borderType: 'glass',
     },
     editorOptions: {
       id: 'editorOptionsId',

apps/api/test/routes/v1/project/update.integration.test.ts

@@ -72,6 +72,7 @@ test<TestContext>('POST /v1/project/:id [Update Project] -> 200', async context
       alternativeTheme: true,
       accentVisible: false,
       type: 'windows',
+      borderType: 'glass',
     },
   };
 
@@ -125,7 +126,8 @@ test<TestContext>('POST /v1/project/:id [Update Project] -> 200', async context
       alternativeTheme: true,
       accentVisible: false,
       type: 'windows',
-    } as ProjectUpdateResponse['terminal'],
+      borderType: 'glass',
+    } satisfies ProjectUpdateResponse['terminal'],
     'return updated terminal',
   );
   assert.deepStrictEqual(

apps/codeimage/src/components/FeatureBadge/FeatureBadge.css.ts

@@ -12,7 +12,7 @@ export const badge = style({
   position: 'absolute',
   left: '100%',
   top: '50%',
-  transform: `translateX(10px) translateY(-50%)`,
+  transform: `translateX(2px) translateY(-50%)`,
   borderRadius: themeTokens.radii.lg,
   whiteSpace: 'nowrap',
 });

apps/codeimage/src/components/Frame/ManagedFrame.tsx

@@ -40,6 +40,7 @@ export function ManagedFrame() {
         showWatermark={terminal.showWatermark}
         opacity={terminal.opacity}
         alternativeTheme={terminal.alternativeTheme}
+        borderType={terminal.borderType}
         themeId={editor.state.options.themeId}
       >
         <Show when={getActiveEditorStore().editor()}>

apps/codeimage/src/components/Frame/PreviewFrame.tsx

@@ -121,6 +121,7 @@ export function PreviewFrame(props: VoidProps<PreviewFrameProps>) {
             showWatermark={terminal.showWatermark}
             opacity={terminal.opacity}
             alternativeTheme={terminal.alternativeTheme}
+            borderType={terminal.borderType}
             themeId={editor.state.options.themeId}
           >
             <Show when={getActiveEditorStore().editor()}>

apps/codeimage/src/components/Icons/SettingsIcon.tsx

@@ -0,0 +1,25 @@
+import {SvgIconProps} from '@codeimage/ui';
+import {SvgIcon} from '@codeui/kit';
+
+export function SettingsIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      {...props}
+    >
+      <path
+        fill-rule="evenodd"
+        d="M12 6.75a5.25 5.25 0 0 1 6.775-5.025.75.75 0 0 1 .313 1.248l-3.32 3.319c.063.475.276.934.641 1.299.365.365.824.578 1.3.64l3.318-3.319a.75.75 0 0 1 1.248.313 5.25 5.25 0 0 1-5.472 6.756c-1.018-.086-1.87.1-2.309.634L7.344 21.3A3.298 3.298 0 1 1 2.7 16.657l8.684-7.151c.533-.44.72-1.291.634-2.309A5.342 5.342 0 0 1 12 6.75ZM4.117 19.125a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Z"
+        clip-rule="evenodd"
+      />
+      <path d="m10.076 8.64-2.201-2.2V4.874a.75.75 0 0 0-.364-.643l-3.75-2.25a.75.75 0 0 0-.916.113l-.75.75a.75.75 0 0 0-.113.916l2.25 3.75a.75.75 0 0 0 .643.364h1.564l2.062 2.062 1.575-1.297Z" />
+      <path
+        fill-rule="evenodd"
+        d="m12.556 17.329 4.183 4.182a3.375 3.375 0 0 0 4.773-4.773l-3.306-3.305a6.803 6.803 0 0 1-1.53.043c-.394-.034-.682-.006-.867.042a.589.589 0 0 0-.167.063l-3.086 3.748Zm3.414-1.36a.75.75 0 0 1 1.06 0l1.875 1.876a.75.75 0 1 1-1.06 1.06L15.97 17.03a.75.75 0 0 1 0-1.06Z"
+        clip-rule="evenodd"
+      />
+    </SvgIcon>
+  );
+}

apps/codeimage/src/components/Presets/PresetPreview/PresetPreview.tsx

@@ -39,6 +39,7 @@ export function PresetPreview(props: PresetPreviewProps) {
         accentVisible={props.data.terminal.accentVisible}
         textColor={props.data.terminal.textColor}
         showHeader={props.data.terminal.showHeader}
+        borderType={props.data.terminal.borderType}
         showGlassReflection={props.data.terminal.showGlassReflection}
         showWatermark={false}
         opacity={props.data.terminal.opacity}

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

@@ -1,11 +1,13 @@
 import {useI18n} from '@codeimage/locale';
 import {getTerminalState} from '@codeimage/store/editor/terminal';
+import {VersionStore} from '@codeimage/store/version/version.store';
 import {createSelectOptions, Select} from '@codeui/kit';
 import {shadowsLabel} from '@core/configuration/shadow';
 import {getUmami} from '@core/constants/umami';
 import {SegmentedField} from '@ui/SegmentedField/SegmentedField';
 import {SkeletonLine} from '@ui/Skeleton/Skeleton';
 import {createMemo, ParentComponent, Show} from 'solid-js';
+import {provideState} from 'statebuilder';
 import {AppLocaleEntries} from '../../i18n';
 import {TerminalControlField} from './controls/TerminalControlField/TerminalControlField';
 import {PanelHeader} from './PanelHeader';
@@ -14,6 +16,7 @@ import {SuspenseEditorItem} from './SuspenseEditorItem';
 
 export const WindowStyleForm: ParentComponent = () => {
   const terminal = getTerminalState();
+  const versionStore = provideState(VersionStore);
   const [t] = useI18n<AppLocaleEntries>();
 
   const terminalShadows = createMemo(
@@ -25,6 +28,17 @@ export const WindowStyleForm: ParentComponent = () => {
     valueKey: 'value',
   });
 
+  const borderTypeSelect = createSelectOptions(
+    [
+      {label: 'None', value: 'none'},
+      {label: 'Glass', value: 'glass'},
+    ],
+    {
+      key: 'label',
+      valueKey: 'value',
+    },
+  );
+
   return (
     <>
       <PanelHeader label={t('frame.terminal')} />
@@ -151,6 +165,36 @@ export const WindowStyleForm: ParentComponent = () => {
           </SuspenseEditorItem>
         </TwoColumnPanelRow>
       </PanelRow>
+      <PanelRow
+        for={'frameSelectShadow'}
+        feature={'borderType'}
+        label={t('frame.border')}
+      >
+        <TwoColumnPanelRow>
+          <SuspenseEditorItem
+            fallback={<SkeletonLine width={'100%'} height={'24px'} />}
+          >
+            <Select
+              options={borderTypeSelect.options()}
+              {...borderTypeSelect.props()}
+              {...borderTypeSelect.controlled(
+                () => terminal.state.borderType ?? 'none',
+                border => {
+                  const isNone = border === 'none';
+                  versionStore.see('borderType', false);
+                  getUmami().track('change-border', {
+                    border: border ?? 'none',
+                  });
+                  terminal.setBorder(isNone ? null : border ?? null);
+                },
+              )}
+              aria-label={'Border'}
+              size={'xs'}
+              id={'frameSelectBorder'}
+            />
+          </SuspenseEditorItem>
+        </TwoColumnPanelRow>
+      </PanelRow>
     </>
   );
 };

apps/codeimage/src/components/PropertyEditor/controls/TerminalControlField/TerminalControlField.tsx

@@ -2,12 +2,13 @@ import {getRootEditorStore} from '@codeimage/store/editor';
 import {getTerminalState} from '@codeimage/store/editor/terminal';
 import {VersionStore} from '@codeimage/store/version/version.store';
 import {Box, RadioBlock} from '@codeimage/ui';
-import {As, Checkbox, icons} from '@codeui/kit';
+import {As, Checkbox} from '@codeui/kit';
 import {TERMINAL_SHADOWS} from '@core/configuration/shadow';
 import {AVAILABLE_TERMINAL_THEMES} from '@core/configuration/terminal-themes';
 import {createSignal, For, JSXElement, onMount, Suspense} from 'solid-js';
 import {Dynamic} from 'solid-js/web';
 import {provideState} from 'statebuilder';
+import {SettingsIcon} from '../../../Icons/SettingsIcon';
 import {SidebarPopover} from '../../SidebarPopover/SidebarPopover';
 import {SidebarPopoverTitle} from '../../SidebarPopover/SidebarPopoverTitle';
 import * as styles from './TerminalControlField.css';
@@ -66,10 +67,11 @@ export function TerminalControlField(
                 opacity={100}
                 themeId={editorState.options.themeId}
                 showGlassReflection={false}
+                borderType={null}
               />
             </Suspense>
           </Box>
-          <icons.SelectorIcon class={styles.inputIcon} />
+          <SettingsIcon class={styles.inputIcon} />
         </As>
       }
       onOpenChange={setOpen}
@@ -101,6 +103,7 @@ export function TerminalControlField(
                   opacity={100}
                   themeId={editorState.options.themeId}
                   showGlassReflection={terminalState.state.showGlassReflection}
+                  borderType={null}
                 />
               </Suspense>
             </Box>

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

@@ -53,12 +53,16 @@ export const TerminalHost: FlowComponent<TerminalHostProps> = props => {
       data-header-visible={props.showHeader}
       data-accent-header={props.accentVisible && !props.alternativeTheme}
       data-fallback-inactive-tab={tabTheme()?.shouldFallbackInactiveColor}
+      data-custom-border={props.borderType === 'glass' ? 'glass' : null}
       style={assignInlineVars({
         [styles.terminalVars.headerBackgroundColor]:
           tabTheme()?.background ?? '',
         [styles.terminalVars.backgroundColor]: background(),
         [styles.terminalVars.textColor]: props.textColor,
-        [styles.terminalVars.boxShadow]: props.shadow ?? 'unset',
+        [styles.terminalVars.boxShadow]:
+          props.shadow && props.shadow !== 'unset'
+            ? props.shadow
+            : '0 0 0 0 rgb(0, 0, 0, 0)',
         [styles.terminalVars.tabTextColor]: tabTheme()?.textColor ?? '',
         [styles.terminalVars.tabAccentActiveBackground]:
           tabTheme().activeTabBackground ?? '',

apps/codeimage/src/components/Terminal/terminal.css.ts

@@ -1,5 +1,5 @@
 import {themeVars} from '@codeimage/ui';
-import {createTheme, fallbackVar, style} from '@vanilla-extract/css';
+import {createTheme, createVar, fallbackVar, style} from '@vanilla-extract/css';
 
 export const [terminalTheme, terminalVars] = createTheme({
   headerHeight: '50px',
@@ -17,6 +17,11 @@ export const [terminalTheme, terminalVars] = createTheme({
   tabTextColor: 'unset',
 });
 
+const glassBorderDark = `0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,.90), inset 0 0 0 1.5px rgba(255, 255, 255, 0.4)`;
+const glassBorderLight = `0 0 15px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgb(0,0,0,.05), inset 0 0 0 1px rgba(255, 255, 255, 0.15)`;
+
+const glassBorderVar = createVar();
+
 export const wrapper = style([
   terminalTheme,
   {
@@ -36,13 +41,18 @@ export const wrapper = style([
       '&[data-theme-mode=light]': {
         vars: {
           [terminalVars.headerColor]: `255, 255, 255`,
+          [glassBorderVar]: glassBorderLight,
         },
       },
-      '&[data-theme-mode=dark] &': {
+      '&[data-theme-mode=dark]': {
         vars: {
+          [glassBorderVar]: glassBorderDark,
           [terminalVars.headerColor]: `0, 0, 0`,
         },
       },
+      '&[data-custom-border=glass]': {
+        boxShadow: `${glassBorderVar}, ${terminalVars.boxShadow}`,
+      },
     },
   },
 ]);