chore: login page upd

src/features/connect/ConnectPage.tsx

@@ -2,7 +2,15 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import type { FetchBaseQueryError } from '@reduxjs/toolkit/query';
-import { Card, TextField, Button, Callout, Badge, Dialog } from '@olly/modern-sk';
+import {
+  Card,
+  TextField,
+  Button,
+  Callout,
+  Badge,
+  Dialog,
+  IconButton,
+} from '@olly/modern-sk';
 import { Icon } from '../../components/common/Icon';
 import { useAppDispatch } from '../../hooks/useAppDispatch';
 import { useConnectionStatus } from '../../hooks/useConnectionStatus';
@@ -139,7 +147,11 @@ function InstanceRow({
         }
         footer={
           <div
-            style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              gap: '0.5rem',
+            }}
           >
             <Button
               variant="ghost"
@@ -187,8 +199,9 @@ export function ConnectPage() {
     getActiveInstanceId(),
   );
   const selectedInstance = instances.find((i) => i.id === selectedId) ?? null;
+  const [instanceAddShown, setInstanceAddShown] = useState(false);
 
-  const [addUrl, setAddUrl] = useState('https://');
+  const [addUrl, setAddUrl] = useState('');
 
   const [mode, setMode] = useState<Mode>('login');
   const [username, setUsername] = useState('');
@@ -333,15 +346,27 @@ export function ConnectPage() {
                 marginTop: instances.length > 0 ? '0.5rem' : 0,
               }}
             >
-              <TextField
-                value={addUrl}
-                onChange={(e) => setAddUrl(e.target.value)}
-                placeholder={t('connect.domains.addPlaceholder')}
-                style={{ flex: 1 }}
-              />
-              <Button type="submit" variant="primary">
-                <Icon name="plus" /> {t('connect.domains.addButton')}
-              </Button>
+              {instanceAddShown ? (
+                <>
+                  <TextField
+                    value={addUrl}
+                    onChange={(e) => setAddUrl(e.target.value)}
+                    placeholder={t('connect.domains.addPlaceholder')}
+                    style={{ flex: 1 }}
+                  />
+                  <IconButton type="submit" variant="primary">
+                    <Icon name="plus" />
+                  </IconButton>
+                </>
+              ) : (
+                <Button
+                  onClick={() => setInstanceAddShown(true)}
+                  style={{ width: '100%' }}
+                  variant="ghost"
+                >
+                  <Icon name="plus" /> {t('connect.domains.addButton')}
+                </Button>
+              )}
             </form>
           </div>
         </Card>