Refactor commands and DB

src-web/components/GrpcConnectionLayout.tsx

@@ -1,7 +1,8 @@
+import useResizeObserver from '@react-hook/resize-observer';
 import classNames from 'classnames';
 import { format } from 'date-fns';
 import type { CSSProperties, FormEvent } from 'react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { useAlert } from '../hooks/useAlert';
 import type { GrpcMessage } from '../hooks/useGrpc';
 import { useGrpc } from '../hooks/useGrpc';
@@ -129,6 +130,12 @@ export function GrpcConnectionLayout({ style }: Props) {
     return { value, options };
   }, [grpc.schema, method.value, service.value]);
 
+  const [paneSize, setPaneSize] = useState(99999);
+  const urlContainerEl = useRef<HTMLDivElement>(null);
+  useResizeObserver<HTMLDivElement>(urlContainerEl.current, (entry) => {
+    setPaneSize(entry.contentRect.width);
+  });
+
   if (url.isLoading || url.value == null) {
     return null;
   }
@@ -138,7 +145,13 @@ export function GrpcConnectionLayout({ style }: Props) {
       style={style}
       leftSlot={() => (
         <VStack space={2}>
-          <div className="grid grid-cols-[minmax(0,1fr)_auto_auto] gap-1.5">
+          <div
+            ref={urlContainerEl}
+            className={classNames(
+              'grid grid-cols-[minmax(0,1fr)_auto_auto] gap-1.5',
+              paneSize < 350 && '!grid-cols-1',
+            )}
+          >
             <UrlBar
               id="foo"
               url={url.value ?? ''}
@@ -150,32 +163,34 @@ export function GrpcConnectionLayout({ style }: Props) {
               isLoading={grpc.unary.isLoading}
               onUrlChange={url.set}
             />
-            <Select
-              hideLabel
-              name="service"
-              label="Service"
-              className="text-gray-800"
-              size="sm"
-              value={select.value}
-              onChange={handleChangeService}
-              options={select.options}
-            />
-            <IconButton
-              className="border border-highlight"
-              size="sm"
-              title="ofo"
-              hotkeyAction="request.send"
-              onClick={handleConnect}
-              icon={
-                !activeMethod?.clientStreaming && activeMethod?.serverStreaming
-                  ? 'arrowDownToDot'
-                  : activeMethod?.clientStreaming && !activeMethod?.serverStreaming
-                  ? 'arrowUpFromDot'
-                  : activeMethod?.clientStreaming && activeMethod?.serverStreaming
-                  ? 'arrowUpDown'
-                  : 'sendHorizontal'
-              }
-            />
+            <HStack space={1.5}>
+              <Select
+                hideLabel
+                name="service"
+                label="Service"
+                className="text-gray-800"
+                size="sm"
+                value={select.value}
+                onChange={handleChangeService}
+                options={select.options}
+              />
+              <IconButton
+                className="border border-highlight"
+                size="sm"
+                title="ofo"
+                hotkeyAction="request.send"
+                onClick={handleConnect}
+                icon={
+                  !activeMethod?.clientStreaming && activeMethod?.serverStreaming
+                    ? 'arrowDownToDot'
+                    : activeMethod?.clientStreaming && !activeMethod?.serverStreaming
+                    ? 'arrowUpFromDot'
+                    : activeMethod?.clientStreaming && activeMethod?.serverStreaming
+                    ? 'arrowUpDown'
+                    : 'sendHorizontal'
+                }
+              />
+            </HStack>
           </div>
           <GrpcEditor
             forceUpdateKey={[service, method].join('::')}

src-web/components/SettingsDropdown.tsx

@@ -102,7 +102,7 @@ export function SettingsDropdown() {
           label: 'Check for Updates',
           leftSlot: <Icon icon="update" />,
           onSelect: async () => {
-            const hasUpdate: boolean = await invoke('check_for_updates');
+            const hasUpdate: boolean = await invoke('cmd_check_for_updates');
             if (!hasUpdate) {
               alert({
                 id: 'no-updates',

src-web/components/WorkspaceActionsDropdown.tsx

@@ -59,7 +59,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
                   onClick={async () => {
                     hide();
                     const environmentId = (await getRecentEnvironments(w.id))[0];
-                    await invoke('new_window', {
+                    await invoke('cmd_new_window', {
                       url: routes.paths.workspace({ workspaceId: w.id, environmentId }),
                     });
                   }}

src-web/components/core/Stacks.tsx

@@ -6,6 +6,7 @@ const gapClasses = {
   0: 'gap-0',
   0.5: 'gap-0.5',
   1: 'gap-1',
+  1.5: 'gap-1.5',
   2: 'gap-2',
   3: 'gap-3',
   4: 'gap-4',