Prepare for release 0.2.1 (#60)

packages/ui/src/components/accounts/login-form.tsx

@@ -2,7 +2,7 @@ import { HouseIcon } from 'lucide-react';
 import { useState, Fragment, useEffect } from 'react';
 import { match } from 'ts-pattern';
 
-import { Account, Server } from '@colanode/client/types';
+import { Account, ServerDetails } from '@colanode/client/types';
 import { EmailLogin } from '@colanode/ui/components/accounts/email-login';
 import { EmailPasswordResetComplete } from '@colanode/ui/components/accounts/email-password-reset-complete';
 import { EmailPasswordResetInit } from '@colanode/ui/components/accounts/email-password-reset-init';
@@ -17,7 +17,7 @@ import { isFeatureSupported } from '@colanode/ui/lib/features';
 
 interface LoginFormProps {
   accounts: Account[];
-  servers: Server[];
+  servers: ServerDetails[];
 }
 
 type LoginPanelState = {
@@ -53,25 +53,32 @@ type PanelState =
 
 export const LoginForm = ({ accounts, servers }: LoginFormProps) => {
   const app = useApp();
-  const [server, setServer] = useState<Server | null>(servers[0] ?? null);
+
+  const [serverDomain, setServerDomain] = useState<string | null>(
+    servers[0]?.domain ?? null
+  );
   const [panel, setPanel] = useState<PanelState>({
     type: 'login',
   });
 
   useEffect(() => {
     const serverExists =
-      server !== null && servers.some((s) => s.domain === server.domain);
+      serverDomain !== null && servers.some((s) => s.domain === serverDomain);
     if (!serverExists && servers.length > 0) {
-      setServer(servers[0]!);
+      setServerDomain(servers[0]!.domain);
     }
-  }, [server, servers]);
+  }, [serverDomain, servers]);
+
+  const server = serverDomain
+    ? servers.find((s) => s.domain === serverDomain)
+    : null;
 
   return (
     <div className="flex flex-col gap-4">
       <ServerDropdown
-        value={server}
-        onChange={(server) => {
-          setServer(server);
+        value={serverDomain}
+        onChange={(serverDomain) => {
+          setServerDomain(serverDomain);
         }}
         servers={servers}
         readonly={panel.type === 'verify'}

packages/ui/src/components/root-provider.tsx

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { DndProvider } from 'react-dnd';
 
 import { AppType, Event } from '@colanode/client/types';
+import { build } from '@colanode/core';
 import { App } from '@colanode/ui/components/app';
 import { FontLoader } from '@colanode/ui/components/font-loader';
 import { Toaster } from '@colanode/ui/components/ui/sonner';
@@ -26,6 +27,8 @@ interface RootProviderProps {
 
 export const RootProvider = ({ type }: RootProviderProps) => {
   useEffect(() => {
+    console.log(`Colanode | Version: ${build.version} | SHA: ${build.sha}`);
+
     const id = window.eventBus.subscribe((event: Event) => {
       if (event.type === 'query.result.updated') {
         const result = event.result;

packages/ui/src/components/servers/server-dropdown.tsx

@@ -6,7 +6,7 @@ import {
 } from 'lucide-react';
 import { Fragment, useState } from 'react';
 
-import { Server, ServerDetails } from '@colanode/client/types';
+import { ServerDetails } from '@colanode/client/types';
 import { ServerAvatar } from '@colanode/ui/components/servers/server-avatar';
 import { ServerCreateDialog } from '@colanode/ui/components/servers/server-create-dialog';
 import { ServerDeleteDialog } from '@colanode/ui/components/servers/server-delete-dialog';
@@ -20,8 +20,8 @@ import {
 } from '@colanode/ui/components/ui/dropdown-menu';
 
 interface ServerDropdownProps {
-  value: Server | null;
-  onChange: (server: Server) => void;
+  value: string | null;
+  onChange: (server: string) => void;
   servers: ServerDetails[];
   readonly?: boolean;
 }
@@ -37,6 +37,9 @@ export const ServerDropdown = ({
   const [settingsDomain, setSettingsDomain] = useState<string | null>(null);
   const [deleteDomain, setDeleteDomain] = useState<string | null>(null);
 
+  const server = value
+    ? servers.find((server) => server.domain === value)
+    : null;
   const settingsServer = servers.find(
     (server) => server.domain === settingsDomain
   );
@@ -54,21 +57,21 @@ export const ServerDropdown = ({
       >
         <DropdownMenuTrigger asChild>
           <div className="flex w-full flex-grow flex-row items-center gap-3 rounded-md border border-input p-2 cursor-pointer hover:bg-gray-100">
-            {value ? (
+            {server ? (
               <ServerAvatar
-                url={value.avatar}
-                name={value.name}
+                url={server.avatar}
+                name={server.name}
                 className="size-8 rounded-md"
               />
             ) : (
               <ServerOffIcon className="size-8 text-muted-foreground rounded-md" />
             )}
             <div className="flex-grow">
-              {value ? (
+              {server ? (
                 <Fragment>
-                  <p className="flex-grow font-semibold">{value.name}</p>
+                  <p className="flex-grow font-semibold">{server.name}</p>
                   <p className="text-xs text-muted-foreground">
-                    {value.domain}
+                    {server.domain}
                   </p>
                 </Fragment>
               ) : (
@@ -85,8 +88,8 @@ export const ServerDropdown = ({
             <DropdownMenuItem
               key={server.domain}
               onSelect={() => {
-                if (value?.domain !== server.domain) {
-                  onChange(server);
+                if (value !== server.domain) {
+                  onChange(server.domain);
                 }
               }}
               className="group/server flex w-full flex-grow flex-row items-center gap-3 rounded-md border-b border-input p-2 cursor-pointer hover:bg-gray-100"