Resize titlebar and tweak things

index.html

@@ -5,7 +5,7 @@
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Yaak App</title>
-  <script src="http://localhost:8097"></script>
+<!--  <script src="http://localhost:8097"></script>-->
   <style>
       body {
           background-color: white;

src-tauri/src/window_ext.rs

@@ -1,7 +1,7 @@
 use tauri::{Runtime, Window};
 
-const TRAFFIC_LIGHT_OFFSET_X: f64 = 15.0;
+const TRAFFIC_LIGHT_OFFSET_X: f64 = 10.0;
-const TRAFFIC_LIGHT_OFFSET_Y: f64 = 22.0;
+const TRAFFIC_LIGHT_OFFSET_Y: f64 = 16.0;
 
 pub trait WindowExt {
     fn position_traffic_lights(&self);

src-web/components/App.tsx

@@ -1,6 +1,5 @@
 import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { persistQueryClient } from '@tanstack/react-query-persist-client';
 import { invoke } from '@tauri-apps/api';
 import { listen } from '@tauri-apps/api/event';
@@ -161,7 +160,7 @@ export function App() {
         <HelmetProvider>
           <DndProvider backend={HTML5Backend}>
             <AppRouter />
-            <ReactQueryDevtools initialIsOpen={false} />
+            {/*<ReactQueryDevtools initialIsOpen={false}  />*/}
           </DndProvider>
         </HelmetProvider>
       </MotionConfig>

src-web/components/GraphQLEditor.tsx

@@ -54,15 +54,17 @@ export function GraphQLEditor({ defaultValue, onChange, ...extraEditorProps }: P
         defaultValue={query ?? ''}
         onChange={handleChangeQuery}
         contentType="application/graphql"
+        placeholder="..."
         format={formatSdl}
-        placeholder={`query { }`}
         {...extraEditorProps}
       />
-      <Separator />
+      <Separator variant="primary" />
+      {/*<Separator variant="secondary" />*/}
       <p className="pt-1 text-gray-500 text-sm">Variables</p>
       <Editor
         useTemplating
         heightMode="auto"
+        placeholder="{}"
         defaultValue={JSON.stringify(variables, null, 2)}
         onChange={handleChangeVariables}
         contentType="application/json"

src-web/components/RequestPane.tsx

@@ -24,7 +24,7 @@ export function RequestPane({ fullHeight, className }: Props) {
   const activeRequestId = activeRequest?.id ?? null;
   const updateRequest = useUpdateRequest(activeRequestId);
   const activeTab = useKeyValue<string>({
-    key: ['active_request_body_tab', activeRequestId ?? 'n/a'],
+    key: ['active_request_body_tab'],
     defaultValue: 'body',
   });
 
@@ -96,6 +96,7 @@ export function RequestPane({ fullHeight, className }: Props) {
                 <Editor
                   key={activeRequest.id}
                   useTemplating
+                  placeholder="..."
                   className="!bg-gray-50"
                   heightMode={fullHeight ? 'full' : 'auto'}
                   defaultValue={activeRequest.body ?? ''}
@@ -107,6 +108,7 @@ export function RequestPane({ fullHeight, className }: Props) {
                 <Editor
                   key={activeRequest.id}
                   useTemplating
+                  placeholder="..."
                   className="!bg-gray-50"
                   heightMode={fullHeight ? 'full' : 'auto'}
                   defaultValue={activeRequest.body ?? ''}

src-web/components/Sidebar.tsx

@@ -3,7 +3,6 @@ import type { ForwardedRef, KeyboardEvent, MouseEvent as ReactMouseEvent } from
 import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
 import type { XYCoord } from 'react-dnd';
 import { useDrag, useDrop } from 'react-dnd';
-import { Helmet } from 'react-helmet-async';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useCreateRequest } from '../hooks/useCreateRequest';
 import { useDeleteRequest } from '../hooks/useDeleteRequest';
@@ -81,12 +80,6 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
 
   return (
     <div className="relative">
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-      {isResizing && (
-        <Helmet>
-          <html className="cursor-ew-resize" />
-        </Helmet>
-      )}
       <div
         aria-hidden
         className="group absolute z-10 right-0 w-2 top-0 bottom-0 cursor-ew-resize flex justify-end"
@@ -294,8 +287,8 @@ const _SidebarItem = forwardRef(function SidebarItem(
             'w-full',
             editing && 'focus-within:border-focus',
             active
-              ? 'bg-gray-200/70 text-gray-900'
+              ? 'bg-highlight text-gray-900'
-              : 'text-gray-600 group-hover/item:text-gray-800 active:bg-gray-200/30',
+              : 'text-gray-600 group-hover/item:text-gray-800 active:bg-highlightSecondary',
             // Move out of the way when trash is shown
             'group-hover/item:pr-7',
           )}

src-web/components/UrlBar.tsx

@@ -31,6 +31,7 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
   return (
     <form onSubmit={handleSubmit} className={classnames('url-bar', className)}>
       <Input
+        size="sm"
         key={requestId}
         hideLabel
         useTemplating
@@ -41,9 +42,13 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
         containerClassName="shadow shadow-gray-100 dark:shadow-gray-0"
         onChange={handleUrlChange}
         defaultValue={url}
-        placeholder="Enter a URL..."
+        placeholder="https://example.com"
         leftSlot={
-          <RequestMethodDropdown method={method} onChange={handleMethodChange} className="mx-0.5" />
+          <RequestMethodDropdown
+            method={method}
+            onChange={handleMethodChange}
+            className="mx-0.5 h-full my-1"
+          />
         }
         rightSlot={
           <IconButton

src-web/components/Workspace.tsx

@@ -39,7 +39,7 @@ export default function Workspace() {
         <HStack
           as={WindowDragRegion}
           justifyContent="center"
-          className="px-3 bg-gray-50 text-gray-900 border-b border-b-gray-200 pt-[1px]"
+          className="px-3 bg-gray-50 text-gray-900 border-b border-b-highlight pt-[1px]"
           alignItems="center"
         >
           <div className="flex-1 -ml-2 pointer-events-none">

src-web/components/core/Button.tsx

@@ -59,14 +59,14 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
     return (
       <Link ref={ref} to={to} className={classes} {...props}>
         {children}
-        {forDropdown && <Icon icon="triangleDown" className="ml-1 -mr-1" />}
+        {forDropdown && <Icon icon="chevronDown" className="ml-1 -mr-1" />}
       </Link>
     );
   } else {
     return (
       <button ref={ref} className={classes} {...props}>
         {children}
-        {forDropdown && <Icon icon="triangleDown" className="ml-1 -mr-1" />}
+        {forDropdown && <Icon icon="chevronDown" size="sm" className="ml-1 -mr-1" />}
       </button>
     );
   }

src-web/components/core/Icon.tsx

@@ -3,6 +3,7 @@ import {
   CameraIcon,
   CheckboxIcon,
   CheckIcon,
+  ChevronDownIcon,
   ClockIcon,
   CodeIcon,
   ColorWheelIcon,
@@ -49,6 +50,7 @@ const icons = {
   home: HomeIcon,
   listBullet: ListBulletIcon,
   magicWand: MagicWandIcon,
+  chevronDown: ChevronDownIcon,
   magnifyingGlass: MagnifyingGlassIcon,
   moon: MoonIcon,
   paperPlane: PaperPlaneIcon,

src-web/components/core/Input.tsx

@@ -80,7 +80,7 @@ export function Input({
         className={classnames(
           containerClassName,
           'relative w-full rounded-md text-gray-900',
-          'border border-gray-200 focus-within:border-focus',
+          'border border-highlight focus-within:border-focus',
           !isValid && '!border-invalid',
           size === 'md' && 'h-md leading-md',
           size === 'sm' && 'h-sm leading-sm',

src-web/components/core/PairEditor.tsx

@@ -271,7 +271,6 @@ const FormRow = memo(function FormRow({
         onChange={handleChangeEnabled}
       />
       <div
-        onDragStart={(e) => e.preventDefault()}
         className={classnames(
           'grid items-center',
           '@xs:gap-2 @xs:!grid-rows-1 @xs:!grid-cols-[minmax(0,1fr)_minmax(0,1fr)]',

src-web/components/core/Separator.tsx

@@ -2,16 +2,18 @@ import classnames from 'classnames';
 
 interface Props {
   orientation?: 'horizontal' | 'vertical';
+  variant?: 'primary' | 'secondary';
   className?: string;
 }
 
-export function Separator({ className, orientation = 'horizontal' }: Props) {
+export function Separator({ className, variant = 'primary', orientation = 'horizontal' }: Props) {
   return (
     <div
       role="separator"
       className={classnames(
         className,
-        'bg-gray-300/40',
+        variant === 'primary' && 'bg-highlight',
+        variant === 'secondary' && 'bg-highlightSecondary',
         orientation === 'horizontal' && 'w-full h-[1px]',
         orientation === 'vertical' && 'h-full w-[1px]',
       )}

src-web/components/core/WindowDragRegion.tsx

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

src-web/lib/theme/window.ts

@@ -30,13 +30,13 @@ const lightTheme: AppTheme = {
     root: {
       colors: {
         gray: '#7f8fb0',
-        red: '#da4545',
+        red: '#ec3f87',
-        orange: '#e38511',
+        orange: '#ff8b00',
-        yellow: '#e0c514',
+        yellow: '#deda00',
-        green: '#29d229',
+        green: '#00d365',
-        blue: '#1365ff',
+        blue: '#0090ff',
-        pink: '#ff69dc',
+        pink: '#f670f6',
-        violet: '#9959ff',
+        violet: '#ac6cff',
       },
     },
   },

tailwind.config.cjs

@@ -1,3 +1,8 @@
+const height = {
+  "sm": "2rem",
+  "md": "2.5rem"
+};
+
 /** @type {import("tailwindcss").Config} */
 module.exports = {
   darkMode: ["class", "[data-appearance=\"dark\"]"],
@@ -8,20 +13,14 @@ module.exports = {
   theme: {
     extend: {
       opacity: {
-        'disabled': '0.3',
+        "disabled": "0.3"
-      },
-      height: {
-        'sm': '2rem',
-        'md': '2.5rem',
-      },
-      lineHeight: {
-        'sm': '2rem',
-        'md': '2.5rem',
       },
+      height,
+      lineHeight: height
     },
     fontFamily: {
       "mono": ["JetBrains Mono", "Menlo", "monospace"],
-      "sans": ["Inter", "sans-serif"],
+      "sans": ["Inter", "sans-serif"]
     },
     fontSize: {
       sm: "0.9rem",
@@ -36,7 +35,8 @@ module.exports = {
       selection: "hsl(var(--color-violet-500) / 0.4)",
       focus: "hsl(var(--color-blue-500) / 0.6)",
       invalid: "hsl(var(--color-red-500))",
-      highlight: "hsl(var(--color-gray-200) / 0.3)",
+      highlight: "hsl(var(--color-gray-300) / 0.35)",
+      highlightSecondary: "hsl(var(--color-gray-300) / 0.2)",
       transparent: "transparent",
       white: "hsl(0 100% 100% / <alpha-value>)",
       black: "hsl(0 100% 0% / <alpha-value>)",
@@ -52,7 +52,7 @@ module.exports = {
     }
   },
   plugins: [
-    require('@tailwindcss/container-queries'),
+    require("@tailwindcss/container-queries")
   ]
 };