Started on general window layout

src-web/components/Button.tsx

@@ -1,12 +1,15 @@
 import classnames from 'classnames';
 import { ButtonHTMLAttributes, forwardRef } from 'react';
+import { Icon } from './Icon';
 
-type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   color?: 'primary' | 'secondary';
+  size?: 'sm' | 'md';
+  forDropdown?: boolean;
 };
 
-export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
-  { className, color = 'primary', ...props }: Props,
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { className, children, size = 'md', forDropdown, color, ...props }: ButtonProps,
   ref,
 ) {
   return (
@@ -14,11 +17,17 @@ export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
       ref={ref}
       className={classnames(
         className,
-        'h-10 px-5 rounded-lg text-white',
-        { 'bg-blue-500': color === 'primary' },
-        { 'bg-violet-500': color === 'secondary' },
+        'rounded-md text-white flex items-center',
+        { 'h-10 px-4': size === 'md' },
+        { 'h-8 px-3': size === 'sm' },
+        { 'hover:bg-gray-500/[0.1] active:bg-gray-500/[0.15]': color === undefined },
+        { 'bg-blue-500 hover:bg-blue-500/90 active:bg-blue-500/80': color === 'primary' },
+        { 'bg-violet-500 hover:bg-violet-500/90 active:bg-violet-500/80': color === 'secondary' },
       )}
       {...props}
-    />
+    >
+      {children}
+      {forDropdown && <Icon icon="triangle-down" className="ml-1 -mr-1" />}
+    </button>
   );
 });

src-web/components/Dropdown.tsx

@@ -14,7 +14,7 @@ import { HotKey } from './HotKey';
 
 interface DropdownMenuRadioProps {
   children: ReactNode;
-  onValueChange: (value: string) => void;
+  onValueChange: ((value: string) => void) | null;
   value: string;
   items: {
     label: string;
@@ -33,7 +33,7 @@ export function DropdownMenuRadio({
       <DropdownMenuTrigger>{children}</DropdownMenuTrigger>
       <DropdownMenuPortal>
         <DropdownMenuContent>
-          <DropdownMenuRadioGroup onValueChange={onValueChange} value={value}>
+          <DropdownMenuRadioGroup onValueChange={onValueChange ?? undefined} value={value}>
             {items.map((item) => (
               <DropdownMenuRadioItem key={item.value} value={item.value}>
                 {item.label}

src-web/components/Editor/Editor.css

@@ -1,6 +1,5 @@
 .cm-editor {
     width: 100%;
-    height: calc(100vh - 270px);
     overflow: hidden;
     border-radius: var(--border-radius-lg);
 }
@@ -11,20 +10,26 @@
 }
 
 .cm-editor .cm-line {
-    padding-left: 1.5em;
+    padding-left: 1em;
     padding-right: 1.5em;
     color: hsl(var(--color-gray-900));
 }
 
 .cm-editor .cm-gutters {
     background-color: transparent;
-    border-right: 1px solid hsl(var(--color-gray-100));
+    border-right: 0;
     color: hsl(var(--color-gray-300));
 }
 
+.cm-editor .cm-foldPlaceholder {
+    background-color: hsl(var(--color-gray-100));
+    border: 1px solid hsl(var(--color-gray-200));
+    padding: 0 0.3em;
+}
+
 .cm-editor .cm-activeLineGutter,
 .cm-editor .cm-activeLine {
-    background-color: hsl(var(--color-gray-100) / 0.5);
+    background-color: hsl(var(--color-gray-50));
 }
 
 .cm-editor * {
@@ -41,9 +46,9 @@
 }
 
 .cm-editor .cm-selectionBackground {
-    background-color: rgba(180, 180, 180, 0.3);
+    background-color: hsl(var(--color-gray-100));
 }
 
 .cm-editor.cm-focused .cm-selectionBackground {
-    background-color: rgba(180, 180, 180, 0.3);
+    background-color: hsl(var(--color-gray-100));
 }

src-web/components/Editor/Editor.tsx

@@ -1,4 +1,4 @@
-import useCodeMirror, { EditorLanguage } from '../../hooks/useCodemirror';
+import useCodeMirror from '../../hooks/useCodemirror';
 import './Editor.css';
 
 interface Props {

src-web/components/Icon.tsx

@@ -0,0 +1,34 @@
+import { ComponentType } from 'react';
+import {
+  ArchiveIcon,
+  CameraIcon,
+  ChevronDownIcon,
+  GearIcon,
+  HomeIcon,
+  TriangleDownIcon,
+} from '@radix-ui/react-icons';
+import classnames from 'classnames';
+
+type IconName = 'archive' | 'home' | 'camera' | 'gear' | 'triangle-down';
+
+const icons: Record<IconName, ComponentType> = {
+  archive: ArchiveIcon,
+  home: HomeIcon,
+  camera: CameraIcon,
+  gear: GearIcon,
+  'triangle-down': TriangleDownIcon,
+};
+
+export interface IconProps {
+  icon: IconName;
+  className?: string;
+}
+
+export function Icon({ icon, className }: IconProps) {
+  const Component = icons[icon];
+  return (
+    <div className={classnames(className, 'flex items-center')}>
+      <Component />
+    </div>
+  );
+}

src-web/components/IconButton.tsx

@@ -0,0 +1,16 @@
+import { forwardRef } from 'react';
+import { Icon, IconProps } from './Icon';
+import { Button, ButtonProps } from './Button';
+
+type Props = ButtonProps & IconProps;
+
+export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
+  { icon, ...props }: Props,
+  ref,
+) {
+  return (
+    <Button ref={ref} className="group" {...props}>
+      <Icon icon={icon} className="text-gray-700 group-hover:text-gray-900" />
+    </Button>
+  );
+});

src-web/components/Input.tsx

@@ -12,7 +12,7 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
 export function Input({ label, labelClassName, hideLabel, className, name, ...props }: Props) {
   const id = `input-${name}`;
   return (
-    <VStack>
+    <VStack className="w-full">
       <label
         htmlFor={name}
         className={classnames(labelClassName, 'font-semibold text-sm uppercase text-gray-700', {
@@ -25,7 +25,7 @@ export function Input({ label, labelClassName, hideLabel, className, name, ...pr
         id={id}
         className={classnames(
           className,
-          'border-2 border-gray-100 bg-gray-50 h-10 pl-5 pr-2 rounded-lg text-sm focus:outline-none',
+          'border-2 border-gray-100 bg-gray-50 h-10 pl-3 pr-2 rounded-md text-sm focus:outline-none',
         )}
         {...props}
       />

src-web/components/Stacks.tsx

@@ -1,21 +1,30 @@
 import React, { Children, Fragment, HTMLAttributes, ReactNode } from 'react';
 import classnames from 'classnames';
 
-const spaceClasses = {
-  '0': 'pt-0',
-  '1': 'pt-1',
+const spaceClassesX = {
+  0: 'pr-0',
+  1: 'pr-1',
+  2: 'pr-2',
+  3: 'pr-3',
+  4: 'pr-4',
 };
 
-type Space = keyof typeof spaceClasses;
+const spaceClassesY = {
+  0: 'pt-0',
+  1: 'pt-1',
+  2: 'pt-2',
+  3: 'pt-3',
+  4: 'pt-4',
+};
 
-interface HStackProps extends BoxProps {
-  space?: Space;
+interface HStackProps extends BaseStackProps {
+  space?: keyof typeof spaceClassesX;
   children: ReactNode;
 }
 
-export function Stacks({ className, space, children, ...props }: HStackProps) {
+export function HStack({ className, space, children, ...props }: HStackProps) {
   return (
-    <BaseStack className={classnames(className, 'flex-row')} {...props}>
+    <BaseStack className={classnames(className, 'w-full flex-row')} {...props}>
       {space
         ? Children.toArray(children)
             .filter(Boolean) // Remove null/false/undefined children
@@ -23,7 +32,7 @@ export function Stacks({ className, space, children, ...props }: HStackProps) {
               <Fragment key={i}>
                 {i > 0 ? (
                   <div
-                    className={classnames(className, spaceClasses[space], 'pointer-events-none')}
+                    className={classnames(spaceClassesX[space], 'pointer-events-none')}
                     aria-hidden
                   />
                 ) : null}
@@ -35,14 +44,14 @@ export function Stacks({ className, space, children, ...props }: HStackProps) {
   );
 }
 
-export interface VStackProps extends BoxProps {
-  space?: Space;
+export interface VStackProps extends BaseStackProps {
+  space?: keyof typeof spaceClassesY;
   children: ReactNode;
 }
 
 export function VStack({ className, space, children, ...props }: VStackProps) {
   return (
-    <BaseStack className={classnames(className, 'flex-col')} {...props}>
+    <BaseStack className={classnames(className, 'h-full flex-col')} {...props}>
       {space
         ? Children.toArray(children)
             .filter(Boolean) // Remove null/false/undefined children
@@ -50,7 +59,7 @@ export function VStack({ className, space, children, ...props }: VStackProps) {
               <Fragment key={i}>
                 {i > 0 ? (
                   <div
-                    className={classnames(spaceClasses[space], 'pointer-events-none')}
+                    className={classnames(spaceClassesY[space], 'pointer-events-none')}
                     aria-hidden
                   />
                 ) : null}
@@ -62,11 +71,23 @@ export function VStack({ className, space, children, ...props }: VStackProps) {
   );
 }
 
-interface BoxProps extends HTMLAttributes<HTMLElement> {
+interface BaseStackProps extends HTMLAttributes<HTMLElement> {
+  items?: 'start' | 'center';
+  justify?: 'start' | 'end';
   as?: React.ElementType;
 }
 
-function BaseStack({ className, as = 'div', ...props }: BoxProps) {
+function BaseStack({ className, items, justify, as = 'div', ...props }: BaseStackProps) {
   const Component = as;
-  return <Component className={classnames(className, 'flex flex-grow-0')} {...props} />;
+  return (
+    <Component
+      className={classnames(className, 'flex flex-grow-0', {
+        'items-center': items === 'center',
+        'items-start': items === 'start',
+        'justify-start': justify === 'start',
+        'justify-end': justify === 'end',
+      })}
+      {...props}
+    />
+  );
 }

src-web/components/WindowDragRegion.tsx

@@ -0,0 +1,14 @@
+import classnames from 'classnames';
+import { HTMLAttributes } from 'react';
+
+type Props = HTMLAttributes<HTMLDivElement>;
+
+export function WindowDragRegion({ className, ...props }: Props) {
+  return (
+    <div
+      className={classnames(className, 'w-full h-11 border-b border-gray-500/10')}
+      data-tauri-drag-region=""
+      {...props}
+    />
+  );
+}