Merge branch 'issue/ui-rooms'

web/src/ChatShell.tsx

@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
 import { Flex, Box, Center, Loader, Stack, Text, Button } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconPlus } from "@tabler/icons-react";
 import { Sidebar } from "./Sidebar";
 import { ChatPanel } from "./ChatPanel";
+import { NewRoomModal } from "./NewRoomModal";
 import { bus } from "./busService";
 import type { Room, User } from "./types";
 
@@ -16,6 +19,16 @@ export function ChatShell({
   const [activeId, setActiveId] = useState<string>("");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [modalOpen, modal] = useDisclosure(false);
+
+  // Inserta la room recién creada al principio de la lista y la activa, sin
+  // recargar todo. Evita duplicar si el id ya estaba presente.
+  const handleRoomCreated = useCallback((room: Room) => {
+    setRooms((prev) =>
+      prev.some((r) => r.id === room.id) ? prev : [room, ...prev],
+    );
+    setActiveId(room.id);
+  }, []);
 
   const load = useCallback(() => {
     setLoading(true);
@@ -60,7 +73,20 @@ export function ChatShell({
   } else if (rooms.length === 0) {
     panel = (
       <Center h="100%">
-        <Text c="dimmed">No perteneces a ninguna room todavía</Text>
+        <Stack align="center" gap="sm" maw={320} ta="center">
+          <Text fw={600}>Aún no hay conversaciones</Text>
+          <Text c="dimmed" size="sm">
+            Crea tu primera room cifrada para empezar a chatear.
+          </Text>
+          <Button
+            color="brand"
+            leftSection={<IconPlus size={16} />}
+            onClick={modal.open}
+            mt="xs"
+          >
+            Crear room
+          </Button>
+        </Stack>
       </Center>
     );
   }
@@ -82,11 +108,17 @@ export function ChatShell({
           activeId={activeId}
           onSelect={setActiveId}
           onLogout={onLogout}
+          onNewRoom={modal.open}
         />
       </Box>
       <Box flex={1} h="100%" bg="dark.7" style={{ minWidth: 0 }}>
         {panel}
       </Box>
+      <NewRoomModal
+        opened={modalOpen}
+        onClose={modal.close}
+        onCreated={handleRoomCreated}
+      />
     </Flex>
   );
 }

web/src/NewRoomModal.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useState } from "react";
+import {
+  Alert,
+  Button,
+  Group,
+  Modal,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { IconAlertCircle, IconLock, IconPlus } from "@tabler/icons-react";
+import { bus, SessionError } from "./busService";
+import type { Room } from "./types";
+
+// NewRoomModal pide el asunto de una room nueva y la crea contra el bus. La room
+// que devuelve `bus.createRoom` (cifrada + firmada, propiedad del usuario) se
+// entrega al padre vía `onCreated` para insertarla en la lista sin recargar.
+export function NewRoomModal({
+  opened,
+  onClose,
+  onCreated,
+}: {
+  opened: boolean;
+  onClose: () => void;
+  onCreated: (room: Room) => void;
+}) {
+  const [subject, setSubject] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Cada vez que se abre el modal partimos de un formulario limpio.
+  useEffect(() => {
+    if (opened) {
+      setSubject("");
+      setBusy(false);
+      setError(null);
+    }
+  }, [opened]);
+
+  const create = async () => {
+    const name = subject.trim();
+    if (!name || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const room = await bus.createRoom(name);
+      onCreated(room);
+      onClose();
+    } catch (e) {
+      const msg =
+        e instanceof SessionError
+          ? "Tu sesión con el bus expiró. Vuelve a iniciar sesión."
+          : e instanceof Error
+            ? e.message
+            : "No se pudo crear la room";
+      setError(msg);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Nueva room"
+      centered
+      radius="md"
+      overlayProps={{ blur: 2 }}
+    >
+      <Stack gap="md">
+        <Text size="sm" c="dimmed">
+          Crea una conversación cifrada de extremo a extremo. Tú eres la dueña y
+          puedes invitar miembros después.
+        </Text>
+        <TextInput
+          label="Asunto"
+          placeholder="ej. equipo-infra, anuncios, 1-a-1 con ana…"
+          data-autofocus
+          value={subject}
+          onChange={(e) => setSubject(e.currentTarget.value)}
+          onKeyDown={(e) => e.key === "Enter" && void create()}
+          leftSection={<IconLock size={16} />}
+          disabled={busy}
+        />
+        {error && (
+          <Alert
+            color="red"
+            variant="light"
+            icon={<IconAlertCircle size={16} />}
+          >
+            {error}
+          </Alert>
+        )}
+        <Group justify="flex-end" gap="sm">
+          <Button variant="subtle" color="gray" onClick={onClose} disabled={busy}>
+            Cancelar
+          </Button>
+          <Button
+            color="brand"
+            leftSection={<IconPlus size={16} />}
+            onClick={() => void create()}
+            loading={busy}
+            disabled={!subject.trim()}
+          >
+            Crear room
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}

web/src/Sidebar.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import {
+  ActionIcon,
   Avatar,
   Badge,
   Box,
@@ -10,6 +11,7 @@ import {
   Stack,
   Text,
   TextInput,
+  Tooltip,
   UnstyledButton,
 } from "@mantine/core";
 import {
@@ -18,6 +20,7 @@ import {
   IconDots,
   IconLock,
   IconHash,
+  IconPlus,
 } from "@tabler/icons-react";
 import type { Room, User } from "./types";
 
@@ -94,12 +97,14 @@ export function Sidebar({
   activeId,
   onSelect,
   onLogout,
+  onNewRoom,
 }: {
   user: User;
   rooms: Room[];
   activeId: string;
   onSelect: (id: string) => void;
   onLogout: () => void;
+  onNewRoom: () => void;
 }) {
   const [q, setQ] = useState("");
   const query = q.trim().toLowerCase();
@@ -122,6 +127,19 @@ export function Sidebar({
             {user.handle}
           </Text>
         </Group>
+        <Group gap={4} wrap="nowrap">
+          <Tooltip label="Nueva room" position="bottom" withArrow>
+            <ActionIcon
+              variant="subtle"
+              color="brand"
+              size="lg"
+              radius="md"
+              onClick={onNewRoom}
+              aria-label="Crear nueva room"
+            >
+              <IconPlus size={20} />
+            </ActionIcon>
+          </Tooltip>
           <Menu position="bottom-end" withinPortal>
             <Menu.Target>
               <UnstyledButton c="dimmed">
@@ -138,6 +156,7 @@ export function Sidebar({
             </Menu.Dropdown>
           </Menu>
         </Group>
+      </Group>
 
       <Box px="sm" pb="sm">
         <TextInput
@@ -161,11 +180,28 @@ export function Sidebar({
               onClick={() => onSelect(room.id)}
             />
           ))}
-          {filtered.length === 0 && (
+          {filtered.length === 0 &&
+            (query ? (
               <Text c="dimmed" size="sm" ta="center" mt="md">
                 Sin resultados
               </Text>
-          )}
+            ) : (
+              <Stack align="center" gap="xs" mt="xl" px="md">
+                <Text c="dimmed" size="sm" ta="center">
+                  Aún no tienes ninguna room.
+                </Text>
+                <UnstyledButton
+                  onClick={onNewRoom}
+                  c="brand.4"
+                  style={{ fontSize: "var(--mantine-font-size-sm)", fontWeight: 600 }}
+                >
+                  <Group gap={4} wrap="nowrap">
+                    <IconPlus size={15} />
+                    Crear tu primera room
+                  </Group>
+                </UnstyledButton>
+              </Stack>
+            ))}
         </Stack>
       </ScrollArea>
     </Stack>