Environments in URL and better rendering

2026-03-23 18:01:21 +01:00 · 2023-10-25 11:13:00 -07:00
parent 3b660ddbd0
commit 33c406ce49
44 changed files with 226 additions and 160 deletions
--- a/src-web/components/core/Banner.tsx
+++ b/src-web/components/core/Banner.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { ReactNode } from 'react';

 interface Props {
@@ -9,7 +9,7 @@ export function Banner({ children, className }: Props) {
  return (
    <div>
      <div
-        className={classnames(
+        className={classNames(
          className,
          'border border-red-500 bg-red-300/10 text-red-800 px-3 py-2 rounded select-auto cursor-text',
        )}
--- a/src-web/components/core/Button.tsx
+++ b/src-web/components/core/Button.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { forwardRef, memo, useMemo } from 'react';
 import { Icon } from './Icon';
@@ -45,7 +45,7 @@ const _Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
 ) {
  const classes = useMemo(
    () =>
-      classnames(
+      classNames(
        className,
        'flex-shrink-0 outline-none whitespace-nowrap',
        'focus-visible-or-class:ring',
--- a/src-web/components/core/Checkbox.tsx
+++ b/src-web/components/core/Checkbox.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import { useCallback } from 'react';
 import { Icon } from './Icon';

@@ -20,7 +20,7 @@ export function Checkbox({ checked, onChange, className, disabled }: Props) {
      aria-checked={checked ? 'true' : 'false'}
      disabled={disabled}
      onClick={handleClick}
-      className={classnames(
+      className={classNames(
        className,
        'flex-shrink-0 w-4 h-4 border border-gray-200 rounded',
        'focus:border-focus',
--- a/src-web/components/core/CountBadge.tsx
+++ b/src-web/components/core/CountBadge.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';

 interface Props {
  count: number;
@@ -10,7 +10,7 @@ export function CountBadge({ count, className }: Props) {
  return (
    <div
      aria-hidden
-      className={classnames(
+      className={classNames(
        className,
        'opacity-70 border border-highlight text-3xs rounded mb-0.5 px-1 ml-1 h-4 font-mono',
      )}
--- a/src-web/components/core/Dialog.tsx
+++ b/src-web/components/core/Dialog.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import { motion } from 'framer-motion';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
@@ -51,7 +51,7 @@ export function Dialog({
          <motion.div
            initial={{ top: 5, scale: 0.97 }}
            animate={{ top: 0, scale: 1 }}
-            className={classnames(
+            className={classNames(
              className,
              'gap-2 grid grid-rows-[auto_minmax(0,1fr)]',
              'relative bg-gray-50 pointer-events-auto',
--- a/src-web/components/core/Dropdown.tsx
+++ b/src-web/components/core/Dropdown.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
 import { motion } from 'framer-motion';
 import type { CSSProperties, HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
@@ -278,7 +278,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
            dir="ltr"
            ref={containerRef}
            style={containerStyles}
-            className={classnames(className, 'outline-none mt-1 pointer-events-auto fixed z-50')}
+            className={classNames(className, 'outline-none mt-1 pointer-events-auto fixed z-50')}
          >
            <span
              aria-hidden
@@ -290,7 +290,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                space={0.5}
                ref={initMenu}
                style={menuStyles}
-                className={classnames(
+                className={classNames(
                  className,
                  'h-auto bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 py-1.5 border',
                  'border-gray-200 overflow-auto mb-1 mx-0.5',
@@ -356,7 +356,7 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
      onFocus={handleFocus}
      onClick={handleClick}
      justify="start"
-      className={classnames(
+      className={classNames(
        className,
        'min-w-[8rem] outline-none px-2 mx-1.5 flex text-sm text-gray-700 whitespace-nowrap',
        'focus:bg-highlight focus:text-gray-900 rounded',
@@ -366,7 +366,7 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
    >
      {item.leftSlot && <div className="pr-2 flex justify-start">{item.leftSlot}</div>}
      <div
-        className={classnames(
+        className={classNames(
          // Add padding on right when no right slot, for some visual balance
          !item.rightSlot && 'pr-4',
        )}
--- a/src-web/components/core/Editor/Editor.tsx
+++ b/src-web/components/core/Editor/Editor.tsx
@@ -2,7 +2,7 @@ import { defaultKeymap } from '@codemirror/commands';
 import { Compartment, EditorState, Transaction } from '@codemirror/state';
 import type { ViewUpdate } from '@codemirror/view';
 import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
-import classnames from 'classnames';
+import classNames from 'classnames';
 import { EditorView } from 'codemirror';
 import type { MutableRefObject, ReactNode } from 'react';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
@@ -168,7 +168,7 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
  const cmContainer = (
    <div
      ref={initEditorRef}
-      className={classnames(
+      className={classNames(
        className,
        'cm-wrapper text-base bg-gray-50',
        type === 'password' && 'cm-obscure-text',
--- a/src-web/components/core/FormattedError.tsx
+++ b/src-web/components/core/FormattedError.tsx
@@ -1,10 +1,17 @@
+import classNames from 'classnames';
+
 interface Props {
  children: string;
 }

 export function FormattedError({ children }: Props) {
  return (
-    <pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal border border-red-500 border-dashed">
+    <pre
+      className={classNames(
+        'text-sm select-auto cursor-text bg-gray-100 p-3 rounded',
+        'whitespace-normal border border-red-500 border-dashed',
+      )}
+    >
      {children}
    </pre>
  );
--- a/src-web/components/core/Heading.tsx
+++ b/src-web/components/core/Heading.tsx
@@ -1,9 +1,9 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';

 export function Heading({ className, children, ...props }: HTMLAttributes<HTMLHeadingElement>) {
  return (
-    <h1 className={classnames(className, 'text-2xl font-semibold text-gray-900 mb-3')} {...props}>
+    <h1 className={classNames(className, 'text-2xl font-semibold text-gray-900 mb-3')} {...props}>
      {children}
    </h1>
  );
--- a/src-web/components/core/HotKey.tsx
+++ b/src-web/components/core/HotKey.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';

 interface Props {
  modifier: 'Meta' | 'Control' | 'Shift';
@@ -13,7 +13,7 @@ const keys: Record<Props['modifier'], string> = {

 export function HotKey({ modifier, keyName }: Props) {
  return (
-    <span className={classnames('text-sm text-gray-600')}>
+    <span className={classNames('text-sm text-gray-600')}>
      {keys[modifier]}
      {keyName}
    </span>
--- a/src-web/components/core/Icon.tsx
+++ b/src-web/components/core/Icon.tsx
@@ -36,7 +36,7 @@ import {
  TriangleRightIcon,
  UpdateIcon,
 } from '@radix-ui/react-icons';
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
 import { memo } from 'react';
 import { ReactComponent as LeftPanelHiddenIcon } from '../../assets/icons/LeftPanelHiddenIcon.svg';
@@ -95,7 +95,7 @@ export const Icon = memo(function Icon({ icon, spin, size = 'md', className }: I
  const Component = icons[icon] ?? icons.question;
  return (
    <Component
-      className={classnames(
+      className={classNames(
        className,
        'text-inherit',
        size === 'md' && 'h-4 w-4',
--- a/src-web/components/core/IconButton.tsx
+++ b/src-web/components/core/IconButton.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { MouseEvent } from 'react';
 import { forwardRef, useCallback } from 'react';
 import { useTimedBoolean } from '../../hooks/useTimedBoolean';
@@ -45,7 +45,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
      disabled={icon === 'empty'}
      tabIndex={tabIndex ?? icon === 'empty' ? -1 : undefined}
      onClick={handleClick}
-      className={classnames(
+      className={classNames(
        className,
        'flex-shrink-0 text-gray-700 hover:text-gray-1000',
        '!px-0',
@@ -60,7 +60,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
        size={iconSize}
        icon={confirmed ? 'check' : icon}
        spin={spin}
-        className={classnames(
+        className={classNames(
          iconClassName,
          props.disabled && 'opacity-70',
          confirmed && 'text-green-600',
--- a/src-web/components/core/InlineCode.tsx
+++ b/src-web/components/core/InlineCode.tsx
@@ -1,10 +1,10 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';

 export function InlineCode({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
  return (
    <code
-      className={classnames(
+      className={classNames(
        className,
        'font-mono text-sm bg-highlight border-0 border-gray-200 px-1.5 py-0.5 rounded text-gray-800 shadow-inner',
      )}
--- a/src-web/components/core/Input.tsx
+++ b/src-web/components/core/Input.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { EditorView } from 'codemirror';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useCallback, useMemo, useState } from 'react';
@@ -68,7 +68,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
  }, [onBlur]);

  const id = `input-${name}`;
-  const inputClassName = classnames(
+  const inputClassName = classNames(
    className,
    '!bg-transparent min-w-0 h-full w-full focus:outline-none placeholder:text-placeholder',
    // Bump things over if the slots are occupied
@@ -94,7 +94,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
    <VStack className="w-full">
      <label
        htmlFor={id}
-        className={classnames(
+        className={classNames(
          labelClassName,
          'font-semibold text-xs uppercase text-gray-700',
          hideLabel && 'sr-only',
@@ -104,7 +104,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
      </label>
      <HStack
        alignItems="center"
-        className={classnames(
+        className={classNames(
          containerClassName,
          'relative w-full rounded-md text-gray-900',
          'border',
--- a/src-web/components/core/PairEditor.tsx
+++ b/src-web/components/core/PairEditor.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import React, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { XYCoord } from 'react-dnd';
 import { useDrag, useDrop } from 'react-dnd';
@@ -134,7 +134,7 @@ export const PairEditor = memo(function PairEditor({

  return (
    <div
-      className={classnames(
+      className={classNames(
        className,
        '@container',
        'pb-2 grid overflow-auto max-h-full',
@@ -264,7 +264,7 @@ const FormRow = memo(function FormRow({
  return (
    <div
      ref={ref}
-      className={classnames(
+      className={classNames(
        className,
        'group grid grid-cols-[auto_auto_minmax(0,1fr)_auto]',
        'grid-rows-1 items-center',
@@ -273,7 +273,7 @@ const FormRow = memo(function FormRow({
    >
      {!isLast ? (
        <div
-          className={classnames(
+          className={classNames(
            'py-2 h-7 w-3 flex items-center',
            'justify-center opacity-0 hover:opacity-100',
          )}
@@ -286,11 +286,11 @@ const FormRow = memo(function FormRow({
      <Checkbox
        disabled={isLast}
        checked={isLast ? false : !!pairContainer.pair.enabled}
-        className={classnames('mr-2', isLast && '!opacity-disabled')}
+        className={classNames('mr-2', isLast && '!opacity-disabled')}
        onChange={handleChangeEnabled}
      />
      <div
-        className={classnames(
+        className={classNames(
          'grid items-center',
          '@xs:gap-2 @xs:!grid-rows-1 @xs:!grid-cols-[minmax(0,1fr)_minmax(0,1fr)]',
          'gap-0.5 grid-cols-1 grid-rows-2',
@@ -303,7 +303,7 @@ const FormRow = memo(function FormRow({
          validate={nameValidate}
          useTemplating
          forceUpdateKey={forceUpdateKey}
-          containerClassName={classnames(isLast && 'border-dashed')}
+          containerClassName={classNames(isLast && 'border-dashed')}
          defaultValue={pairContainer.pair.name}
          label="Name"
          name="name"
@@ -315,7 +315,7 @@ const FormRow = memo(function FormRow({
        <Input
          hideLabel
          size="sm"
-          containerClassName={classnames(isLast && 'border-dashed')}
+          containerClassName={classNames(isLast && 'border-dashed')}
          validate={valueValidate}
          forceUpdateKey={forceUpdateKey}
          defaultValue={pairContainer.pair.value}
--- a/src-web/components/core/Separator.tsx
+++ b/src-web/components/core/Separator.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';

 interface Props {
  orientation?: 'horizontal' | 'vertical';
@@ -14,10 +14,10 @@ export function Separator({
  label,
 }: Props) {
  return (
-    <div role="separator" className={classnames(className, 'flex items-center')}>
+    <div role="separator" className={classNames(className, 'flex items-center')}>
      {label && <div className="text-xs text-gray-500 mx-2 whitespace-nowrap">{label}</div>}
      <div
-        className={classnames(
+        className={classNames(
          variant === 'primary' && 'bg-highlight',
          variant === 'secondary' && 'bg-highlightSecondary',
          orientation === 'horizontal' && 'w-full h-[1px]',
--- a/src-web/components/core/Stacks.tsx
+++ b/src-web/components/core/Stacks.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { ComponentType, ForwardedRef, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';

@@ -25,7 +25,7 @@ export const HStack = forwardRef(function HStack(
  return (
    <BaseStack
      ref={ref}
-      className={classnames(className, 'flex-row', space != null && gapClasses[space])}
+      className={classNames(className, 'flex-row', space != null && gapClasses[space])}
      {...props}
    >
      {children}
@@ -45,7 +45,7 @@ export const VStack = forwardRef(function VStack(
  return (
    <BaseStack
      ref={ref}
-      className={classnames(className, 'flex-col', space != null && gapClasses[space])}
+      className={classNames(className, 'flex-col', space != null && gapClasses[space])}
      {...props}
    >
      {children}
@@ -69,7 +69,7 @@ const BaseStack = forwardRef(function BaseStack(
  return (
    <Component
      ref={ref}
-      className={classnames(
+      className={classNames(
        className,
        'flex',
        alignItems === 'center' && 'items-center',
--- a/src-web/components/core/StatusTag.tsx
+++ b/src-web/components/core/StatusTag.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { HttpResponse } from '../../lib/models';

 interface Props {
@@ -12,7 +12,7 @@ export function StatusTag({ response, className, showReason }: Props) {
  const label = error ? 'ERR' : status;
  return (
    <span
-      className={classnames(
+      className={classNames(
        className,
        'font-mono',
        status >= 0 && status < 100 && 'text-red-600',
--- a/src-web/components/core/Tabs/Tabs.tsx
+++ b/src-web/components/core/Tabs/Tabs.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { memo, useCallback, useEffect, useRef } from 'react';
 import { Button } from '../Button';
@@ -67,11 +67,11 @@ export function Tabs({
  return (
    <div
      ref={ref}
-      className={classnames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}
+      className={classNames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}
    >
      <div
        aria-label={label}
-        className={classnames(
+        className={classNames(
          tabListClassName,
          'flex items-center overflow-x-auto overflow-y-visible hide-scrollbars mt-1 mb-2',
          // Give space for button focus states within overflow boundary.
@@ -81,7 +81,7 @@ export function Tabs({
        <HStack space={2} className="flex-shrink-0">
          {tabs.map((t) => {
            const isActive = t.value === value;
-            const btnClassName = classnames(
+            const btnClassName = classNames(
              isActive ? '' : 'text-gray-600 hover:text-gray-800',
              '!px-2 ml-[1px]',
            );
@@ -108,7 +108,7 @@ export function Tabs({
                      : option?.label ?? 'Unknown'}
                    <Icon
                      icon="triangleDown"
-                      className={classnames('-mr-1.5', isActive ? 'opacity-100' : 'opacity-20')}
+                      className={classNames('-mr-1.5', isActive ? 'opacity-100' : 'opacity-20')}
                    />
                  </Button>
                </RadioDropdown>
@@ -149,7 +149,7 @@ export const TabContent = memo(function TabContent({
    <div
      tabIndex={-1}
      data-tab={value}
-      className={classnames(className, 'tab-content', 'hidden w-full h-full')}
+      className={classNames(className, 'tab-content', 'hidden w-full h-full')}
    >
      {children}
    </div>
--- a/src-web/components/core/WindowDragRegion.tsx
+++ b/src-web/components/core/WindowDragRegion.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { ReactNode } from 'react';

 interface Props {
@@ -10,7 +10,7 @@ export function WindowDragRegion({ className, ...props }: Props) {
  return (
    <div
      data-tauri-drag-region
-      className={classnames(className, 'w-full flex-shrink-0')}
+      className={classNames(className, 'w-full flex-shrink-0')}
      {...props}
    />
  );