Web version (#43)

* Create client package
* Create the UI package
* Init web app
* Use isomorphic 'ws' for web sockets
* File and asset implementations
* Use Opfs SAH version of sqlite in browser
* Generate Svg sprites for emojis and icons
* Include emojis sprite
* Improve and refactor assets
* More assets improvements
* Implement emoji and icons db import as readonly
* Improve import paths
* Handle concurrency limits for sqlite
* Fix event broadcast in web
* Pass windowId for subscribe and unsubscribe queries in desktop
* Remove asset context
* Implement avatar upload/download with the new structure
* Improve file handlings
* Move the necessary dependencies to client and ui packages
* Update packages
* Improve open file dialog
* Make sure database files are deleted in browser
* Improve avatar loading
* Improve file loading
* Fix some assets
* Implement asset caching for offline access
* Small fixes and improvements
* Use server instead of pre signed urls for file upload/download
* Cleanup some client related metadata
* Switch Axios with ky
* Refactor mutation results
* Minor concurrency fix
* Refactor web sockets
* Improve file uploading
* Handle connection close on server
* Use stream for downloading the file
* Add config options for cors
* Update document in all tabs on local change
* Include necessary icons for web
* Update docker compose
* Implement server upgrade required component
* Use correct client type and platform in web and desktop
* Improve service worker
* Improve versioning
* Fix an import
* Minor fixes
* Update some user endpoints
* Minor endpoint changes
* Enable app badge for desktop
* Add error handling in some database operations
* Update mutation naming convention
* Update query naming convention
* Update event and some metadata naming conventions
* Update event and job naming conventions in server
* Update Github workflow files
* Restructure assets directory
* Update packages
* Upgrade to Zod v4
* Upgrade to react 19
* Upgrade to tailwind v4
* Minor ui improvements
* Fix some cursor pointers
* Add browser not supported message in web
* Enhance server create flow, allow insecure connections and custom api paths
* Execute electron-rebuild as postinstall command
* Update docker compose

packages/ui/src/components/spaces/space-create-dialog.tsx

@@ -0,0 +1,145 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod/v4';
+
+import { Button } from '@colanode/ui/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@colanode/ui/components/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@colanode/ui/components/ui/form';
+import { Input } from '@colanode/ui/components/ui/input';
+import { Spinner } from '@colanode/ui/components/ui/spinner';
+import { Textarea } from '@colanode/ui/components/ui/textarea';
+import { useWorkspace } from '@colanode/ui/contexts/workspace';
+import { useMutation } from '@colanode/ui/hooks/use-mutation';
+
+const formSchema = z.object({
+  name: z.string().min(3, 'Name must be at least 3 characters long.'),
+  description: z.string(),
+});
+
+interface SpaceCreateDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const SpaceCreateDialog = ({
+  open,
+  onOpenChange,
+}: SpaceCreateDialogProps) => {
+  const workspace = useWorkspace();
+  const { mutate, isPending } = useMutation();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      description: '',
+    },
+  });
+
+  const handleCancel = () => {
+    form.reset();
+    onOpenChange(false);
+  };
+
+  const handleSubmit = async (values: z.infer<typeof formSchema>) => {
+    if (isPending) {
+      return;
+    }
+
+    if (values.name.length < 3) {
+      return;
+    }
+
+    mutate({
+      input: {
+        type: 'space.create',
+        name: values.name,
+        description: values.description,
+        accountId: workspace.accountId,
+        workspaceId: workspace.id,
+      },
+      onSuccess() {
+        onOpenChange(false);
+        form.reset();
+      },
+      onError(error) {
+        toast.error(error.message);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create space</DialogTitle>
+          <DialogDescription>
+            Create a new space to collaborate with your peers
+          </DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            className="flex flex-col"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <div className="flex-grow space-y-4 py-2 pb-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel>Name *</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Name" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Write a short description about the workspace"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={handleCancel}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isPending}>
+                {isPending && <Spinner className="mr-1" />}
+                Create
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};