Better dir structure

src-web/components/Button.tsx

@@ -0,0 +1,24 @@
+import classnames from 'classnames';
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+
+type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
+  color?: 'primary' | 'secondary';
+};
+
+export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
+  { className, color = 'primary', ...props }: Props,
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      className={classnames(
+        className,
+        'h-10 px-5 rounded-lg text-white',
+        { 'bg-blue-500': color === 'primary' },
+        { 'bg-violet-500': color === 'secondary' },
+      )}
+      {...props}
+    />
+  );
+});

src-web/components/Dropdown.tsx

@@ -0,0 +1,311 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { DropdownMenuRadioGroup } from '@radix-ui/react-dropdown-menu';
+import { motion } from 'framer-motion';
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+  HamburgerMenuIcon,
+} from '@radix-ui/react-icons';
+import { forwardRef, HTMLAttributes, ReactNode, useState } from 'react';
+import { Button } from './Button';
+import classnames from 'classnames';
+import { HotKey } from './HotKey';
+
+interface DropdownMenuRadioProps {
+  children: ReactNode;
+  onValueChange: (value: string) => void;
+  value: string;
+  items: {
+    label: string;
+    value: string;
+  }[];
+}
+
+export function DropdownMenuRadio({
+  children,
+  items,
+  onValueChange,
+  value,
+}: DropdownMenuRadioProps) {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenuTrigger>{children}</DropdownMenuTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuContent>
+          <DropdownMenuRadioGroup onValueChange={onValueChange} value={value}>
+            {items.map((item) => (
+              <DropdownMenuRadioItem key={item.value} value={item.value}>
+                {item.label}
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenu.Root>
+  );
+}
+
+export function Dropdown() {
+  const [bookmarksChecked, setBookmarksChecked] = useState(true);
+  const [urlsChecked, setUrlsChecked] = useState(false);
+  const [person, setPerson] = useState('pedro');
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <Button aria-label="Customise options">
+          <HamburgerMenuIcon />
+        </Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenuPortal>
+        <DropdownMenuContent>
+          <DropdownMenuItem rightSlot={<HotKey>⌘T</HotKey>}>New Tab</DropdownMenuItem>
+          <DropdownMenuItem rightSlot={<HotKey>⌘N</HotKey>}>New Window</DropdownMenuItem>
+          <DropdownMenuItem disabled rightSlot={<HotKey>⇧⌘N</HotKey>}>
+            New Private Window
+          </DropdownMenuItem>
+          <DropdownMenu.Sub>
+            <DropdownMenuSubTrigger rightSlot={<ChevronRightIcon />}>
+              More Tools
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem rightSlot={<HotKey>⌘S</HotKey>}>Save Page As…</DropdownMenuItem>
+                <DropdownMenuItem>Create Shortcut…</DropdownMenuItem>
+                <DropdownMenuItem>Name Window…</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>Developer Tools</DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenu.Sub>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuCheckboxItem
+            checked={bookmarksChecked}
+            onCheckedChange={(v) => setBookmarksChecked(!!v)}
+            rightSlot={<HotKey>⌘B</HotKey>}
+            leftSlot={
+              <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
+                <CheckIcon />
+              </DropdownMenu.ItemIndicator>
+            }
+          >
+            Show Bookmarks
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={urlsChecked}
+            onCheckedChange={(v) => setUrlsChecked(!!v)}
+            leftSlot={
+              <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
+                <CheckIcon />
+              </DropdownMenu.ItemIndicator>
+            }
+          >
+            Show Full URLs
+          </DropdownMenuCheckboxItem>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuLabel>People</DropdownMenuLabel>
+          <DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
+            <DropdownMenuRadioItem value="pedro">Pedro Duarte</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem className="DropdownMenuRadioItem" value="colm">
+              Colm Tuite
+            </DropdownMenuRadioItem>
+          </DropdownMenu.RadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenu.Root>
+  );
+}
+
+const dropdownMenuClasses = 'bg-background rounded-md shadow-lg p-1.5 border border-gray-100';
+
+interface DropdownMenuPortalProps {
+  children: ReactNode;
+}
+
+function DropdownMenuPortal({ children }: DropdownMenuPortalProps) {
+  return (
+    <DropdownMenu.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
+      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+        {children}
+      </motion.div>
+    </DropdownMenu.Portal>
+  );
+}
+
+const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenu.DropdownMenuContentProps>(
+  function DropdownMenuContent(
+    { className, children, ...props }: DropdownMenu.DropdownMenuContentProps,
+    ref,
+  ) {
+    return (
+      <DropdownMenu.Content
+        ref={ref}
+        align="start"
+        className={classnames(className, dropdownMenuClasses, 'mt-1')}
+        {...props}
+      >
+        {children}
+      </DropdownMenu.Content>
+    );
+  },
+);
+
+type DropdownMenuItemProps = DropdownMenu.DropdownMenuItemProps & ItemInnerProps;
+
+function DropdownMenuItem({
+  leftSlot,
+  rightSlot,
+  className,
+  children,
+  ...props
+}: DropdownMenuItemProps) {
+  return (
+    <DropdownMenu.Item
+      asChild
+      className={classnames(className, { 'opacity-30': props.disabled })}
+      {...props}
+    >
+      <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
+        {children}
+      </ItemInner>
+    </DropdownMenu.Item>
+  );
+}
+
+type DropdownMenuCheckboxItemProps = DropdownMenu.DropdownMenuCheckboxItemProps & ItemInnerProps;
+
+function DropdownMenuCheckboxItem({
+  leftSlot,
+  rightSlot,
+  children,
+  ...props
+}: DropdownMenuCheckboxItemProps) {
+  return (
+    <DropdownMenu.CheckboxItem asChild {...props}>
+      <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
+        {children}
+      </ItemInner>
+    </DropdownMenu.CheckboxItem>
+  );
+}
+
+type DropdownMenuSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps & ItemInnerProps;
+
+function DropdownMenuSubTrigger({
+  leftSlot,
+  rightSlot,
+  children,
+  ...props
+}: DropdownMenuSubTriggerProps) {
+  return (
+    <DropdownMenu.SubTrigger asChild {...props}>
+      <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
+        {children}
+      </ItemInner>
+    </DropdownMenu.SubTrigger>
+  );
+}
+
+type DropdownMenuRadioItemProps = Omit<
+  DropdownMenu.DropdownMenuRadioItemProps & ItemInnerProps,
+  'leftSlot'
+>;
+
+function DropdownMenuRadioItem({ rightSlot, children, ...props }: DropdownMenuRadioItemProps) {
+  return (
+    <DropdownMenu.RadioItem asChild {...props}>
+      <ItemInner
+        leftSlot={
+          <DropdownMenu.ItemIndicator>
+            <DotFilledIcon />
+          </DropdownMenu.ItemIndicator>
+        }
+        rightSlot={rightSlot}
+      >
+        {children}
+      </ItemInner>
+    </DropdownMenu.RadioItem>
+  );
+}
+
+const DropdownMenuSubContent = forwardRef<HTMLDivElement, DropdownMenu.DropdownMenuSubContentProps>(
+  function DropdownMenuSubContent(
+    { className, ...props }: DropdownMenu.DropdownMenuSubContentProps,
+    ref,
+  ) {
+    return (
+      <DropdownMenu.SubContent
+        ref={ref}
+        alignOffset={0}
+        sideOffset={4}
+        className={classnames(className, dropdownMenuClasses)}
+        {...props}
+      />
+    );
+  },
+);
+
+function DropdownMenuLabel({ className, children, ...props }: DropdownMenu.DropdownMenuLabelProps) {
+  return (
+    <DropdownMenu.Label asChild {...props}>
+      <ItemInner noHover className={classnames(className, 'opacity-50 uppercase text-sm')}>
+        {children}
+      </ItemInner>
+    </DropdownMenu.Label>
+  );
+}
+
+function DropdownMenuSeparator({ className, ...props }: DropdownMenu.DropdownMenuSeparatorProps) {
+  return (
+    <DropdownMenu.Separator
+      className={classnames(className, 'h-[1px] bg-gray-400 bg-opacity-30 my-1')}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuTrigger({ className, ...props }: DropdownMenu.DropdownMenuTriggerProps) {
+  return (
+    <DropdownMenu.Trigger
+      asChild
+      className={classnames(className, 'focus:outline-none')}
+      {...props}
+    />
+  );
+}
+
+interface ItemInnerProps extends HTMLAttributes<HTMLDivElement> {
+  leftSlot?: ReactNode;
+  rightSlot?: ReactNode;
+  children: ReactNode;
+  noHover?: boolean;
+}
+
+const ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
+  { leftSlot, rightSlot, children, className, noHover, ...props }: ItemInnerProps,
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={classnames(
+        className,
+        'outline-none px-2 py-1.5 flex items-center text-sm text-gray-700',
+        {
+          'focus:bg-gray-50 focus:text-gray-900 rounded': !noHover,
+        },
+      )}
+      {...props}
+    >
+      <div className="w-7">{leftSlot}</div>
+      <div>{children}</div>
+      {rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
+    </div>
+  );
+});

src-web/components/Editor/Editor.css

@@ -0,0 +1,39 @@
+.cm-editor {
+    width: 100%;
+    height: calc(100vh - 270px);
+    overflow: hidden;
+    border-radius: var(--border-radius-lg);
+}
+
+.cm-editor .cm-scroller {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    border-radius: var(--border-radius-lg);
+    background-color: hsl(var(--color-gray-50));
+}
+
+.cm-editor .cm-line {
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+}
+
+.cm-editor * {
+    cursor: text;
+}
+
+.cm-editor.cm-focused {
+    outline: 0;
+    box-shadow: 0 0 0 2pt rgba(180, 180, 180, 0.1);
+}
+
+.cm-editor .cm-cursor {
+    border-left: 2px solid red;
+}
+
+.cm-editor .cm-selectionBackground {
+    background-color: rgba(180, 180, 180, 0.3);
+}
+
+.cm-editor.cm-focused .cm-selectionBackground {
+    background-color: rgba(180, 180, 180, 0.3);
+}

src-web/components/Editor/Editor.tsx

@@ -0,0 +1,11 @@
+import useCodeMirror from '../../hooks/useCodemirror';
+import './Editor.css';
+
+interface Props {
+  value: string;
+}
+
+export default function Editor(props: Props) {
+  const { ref } = useCodeMirror({ value: props.value });
+  return <div ref={ref} className="m-0 text-sm overflow-hidden" />;
+}

src-web/components/Grid.tsx

@@ -0,0 +1,35 @@
+import classnames from 'classnames';
+import {HTMLAttributes} from 'react';
+
+const colsClasses = {
+  none: 'grid-cols-none',
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+};
+
+const rowsClasses = {
+  none: 'grid-rows-none',
+  1: 'grid-rows-1',
+  2: 'grid-rows-2',
+};
+
+const gapClasses = {
+  0: 'gap-0',
+  1: 'gap-1',
+  2: 'gap-2',
+};
+
+type Props = HTMLAttributes<HTMLElement> & {
+  rows?: keyof typeof rowsClasses;
+  cols?: keyof typeof colsClasses;
+  gap?: keyof typeof gapClasses;
+};
+
+export function Grid({ className, cols, gap, ...props }: Props) {
+  return (
+    <div
+      className={classnames(className, 'grid', cols && colsClasses[cols], gap && gapClasses[gap])}
+      {...props}
+    />
+  );
+}

src-web/components/HotKey.tsx

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+import classnames from 'classnames';
+
+export function HotKey({ children }: HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={classnames(
+        'bg-gray-400 bg-opacity-20 px-1.5 py-0.5 rounded text-sm',
+        'font-mono text-gray-500 tracking-widest',
+      )}
+    >
+      {children}
+    </span>
+  );
+}

src-web/components/Input.tsx

@@ -0,0 +1,34 @@
+import { InputHTMLAttributes } from 'react';
+import classnames from 'classnames';
+import { VStack } from './Stacks';
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  name: string;
+  label: string;
+  hideLabel?: boolean;
+  labelClassName?: string;
+}
+
+export function Input({ label, labelClassName, hideLabel, className, name, ...props }: Props) {
+  const id = `input-${name}`;
+  return (
+    <VStack>
+      <label
+        htmlFor={name}
+        className={classnames(labelClassName, 'font-semibold text-sm uppercase text-gray-700', {
+          'sr-only': hideLabel,
+        })}
+      >
+        {label}
+      </label>
+      <input
+        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',
+        )}
+        {...props}
+      />
+    </VStack>
+  );
+}

src-web/components/Stacks.tsx

@@ -0,0 +1,72 @@
+import React, { Children, Fragment, HTMLAttributes, ReactNode } from 'react';
+import classnames from 'classnames';
+
+const spaceClasses = {
+  '0': 'pt-0',
+  '1': 'pt-1',
+};
+
+type Space = keyof typeof spaceClasses;
+
+interface HStackProps extends BoxProps {
+  space?: Space;
+  children: ReactNode;
+}
+
+export function Stacks({ className, space, children, ...props }: HStackProps) {
+  return (
+    <BaseStack className={classnames(className, 'flex-row')} {...props}>
+      {space
+        ? Children.toArray(children)
+            .filter(Boolean) // Remove null/false/undefined children
+            .map((c, i) => (
+              <Fragment key={i}>
+                {i > 0 ? (
+                  <div
+                    className={classnames(className, spaceClasses[space], 'pointer-events-none')}
+                    aria-hidden
+                  />
+                ) : null}
+                {c}
+              </Fragment>
+            ))
+        : children}
+    </BaseStack>
+  );
+}
+
+export interface VStackProps extends BoxProps {
+  space?: Space;
+  children: ReactNode;
+}
+
+export function VStack({ className, space, children, ...props }: VStackProps) {
+  return (
+    <BaseStack className={classnames(className, 'flex-col')} {...props}>
+      {space
+        ? Children.toArray(children)
+            .filter(Boolean) // Remove null/false/undefined children
+            .map((c, i) => (
+              <Fragment key={i}>
+                {i > 0 ? (
+                  <div
+                    className={classnames(spaceClasses[space], 'pointer-events-none')}
+                    aria-hidden
+                  />
+                ) : null}
+                {c}
+              </Fragment>
+            ))
+        : children}
+    </BaseStack>
+  );
+}
+
+interface BoxProps extends HTMLAttributes<HTMLElement> {
+  as?: React.ElementType;
+}
+
+function BaseStack({ className, as = 'div', ...props }: BoxProps) {
+  const Component = as;
+  return <Component className={classnames(className, 'flex flex-grow-0')} {...props} />;
+}