Some fixes around environments

src-web/components/EnvironmentActionsDropdown.tsx

@@ -41,9 +41,9 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
           leftSlot: e.id === activeEnvironment?.id ? <Icon icon="check" /> : <Icon icon="empty" />,
           onSelect: async () => {
             if (e.id !== activeEnvironment?.id) {
-              setActiveEnvironmentId(e.id);
+              await setActiveEnvironmentId(e.id);
             } else {
-              setActiveEnvironmentId(null);
+              await setActiveEnvironmentId(null);
             }
           },
         }),

src-web/components/EnvironmentEditDialog.tsx

@@ -40,7 +40,8 @@ export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) {
   const selectedEnvironment = allEnvironments.find((e) => e.id === selectedEnvironmentId);
 
   const handleCreateEnvironment = async () => {
-    const e = await createEnvironment.mutateAsync();
+    if (baseEnvironment == null) return;
+    const e = await createEnvironment.mutateAsync(baseEnvironment);
     if (e == null) return;
     setSelectedEnvironmentId(e.id);
   };

src-web/components/ExportDataDialog.tsx

@@ -1,7 +1,9 @@
 import { save } from '@tauri-apps/plugin-dialog';
+import type { Workspace } from '@yaakapp-internal/models';
 import { useCallback, useMemo, useState } from 'react';
 import slugify from 'slugify';
-import type { Workspace } from '@yaakapp-internal/models';
+import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
+import { useWorkspaces } from '../hooks/useWorkspaces';
 import { count } from '../lib/pluralize';
 import { invokeCmd } from '../lib/tauri';
 import { Button } from './core/Button';
@@ -11,16 +13,32 @@ import { HStack, VStack } from './core/Stacks';
 interface Props {
   onHide: () => void;
   onSuccess: (path: string) => void;
-  activeWorkspace: Workspace;
-  workspaces: Workspace[];
 }
 
-export function ExportDataDialog({
+export function ExportDataDialog({ onHide, onSuccess }: Props) {
+  const allWorkspaces = useWorkspaces();
+  const activeWorkspace = useActiveWorkspace();
+  if (activeWorkspace == null || allWorkspaces.length === 0) return null;
+
+  return (
+    <ExportDataDialogContent
+      onHide={onHide}
+      onSuccess={onSuccess}
+      allWorkspaces={allWorkspaces}
+      activeWorkspace={activeWorkspace}
+    />
+  );
+}
+
+function ExportDataDialogContent({
   onHide,
   onSuccess,
   activeWorkspace,
-  workspaces: allWorkspaces,
-}: Props) {
+  allWorkspaces,
+}: Props & {
+  allWorkspaces: Workspace[];
+  activeWorkspace: Workspace;
+}) {
   const [selectedWorkspaces, setSelectedWorkspaces] = useState<Record<string, boolean>>({
     [activeWorkspace.id]: true,
   });

src-web/components/WorkpaceSettingsDialog.tsx

@@ -17,6 +17,7 @@ export function WorkspaceSettingsDialog({ workspaceId }: Props) {
 
   return (
     <VStack space={3} className="pb-3 max-h-[50vh]">
+        {workspace.id}
       <PlainInput
         label="Workspace Name"
         defaultValue={workspace.name}

src-web/components/WorkspaceActionsDropdown.tsx

@@ -35,11 +35,16 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
   const openWorkspaceNewWindow = settings?.openWorkspaceNewWindow ?? null;
   const deleteSendHistory = useDeleteSendHistory();
 
+  const orderedWorkspaces = useMemo(
+    () => [...workspaces].sort((a, b) => (a.name.localeCompare(b.name) > 0 ? 1 : -1)),
+    [workspaces],
+  );
+
   const { workspaceItems, extraItems } = useMemo<{
     workspaceItems: RadioDropdownItem[];
     extraItems: DropdownItem[];
   }>(() => {
-    const workspaceItems: RadioDropdownItem[] = workspaces.map((w) => ({
+    const workspaceItems: RadioDropdownItem[] = orderedWorkspaces.map((w) => ({
       key: w.id,
       label: w.name,
       value: w.id,
@@ -84,13 +89,13 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
 
     return { workspaceItems, extraItems };
   }, [
-    activeWorkspace,
+    activeWorkspace?.id,
     activeWorkspaceId,
     createWorkspace.mutate,
     deleteSendHistory.mutate,
     deleteWorkspace.mutate,
     dialog,
-    workspaces,
+    orderedWorkspaces,
   ]);
 
   const handleChange = useCallback(