Initial scaffold: full-stack mRemotify monorepo

Sets up the complete mRemotify project — a browser-based remote
connection manager — with a working pnpm workspace monorepo:

Frontend (React + TypeScript + Vite + Ant Design 5):
- Login page with JWT auth
- Resizable sidebar with drag-and-drop connection tree (folders + connections)
- Tabbed session area (SSH via xterm.js, RDP via guacamole-common-js)
- Connection CRUD modal with SSH/RDP-specific fields
- Zustand store for auth, tree data, and open sessions

Backend (Fastify + TypeScript + Prisma + PostgreSQL):
- JWT authentication (login + /me endpoint)
- Full CRUD REST API for folders (self-referencing) and connections
- AES-256-CBC password encryption at rest
- WebSocket proxy for SSH sessions (ssh2 <-> xterm.js)
- WebSocket proxy for RDP sessions (guacd TCP handshake + bidirectional relay)
- Admin user seeding on first start

Infrastructure:
- Docker Compose: postgres (healthcheck) + guacd + backend + frontend/nginx
- nginx: serves SPA, proxies /api and /ws (with WebSocket upgrade) to backend
- .env.example with all required variables documented

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/Layout/MainLayout.tsx

@@ -0,0 +1,95 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { Layout } from 'antd';
+import { TopNav } from '../Nav/TopNav';
+import { ConnectionTree } from '../Sidebar/ConnectionTree';
+import { SessionTabs } from '../Tabs/SessionTabs';
+
+const { Content } = Layout;
+
+const MIN_SIDEBAR = 180;
+const MAX_SIDEBAR = 600;
+const DEFAULT_SIDEBAR = 260;
+
+export const MainLayout: React.FC = () => {
+  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR);
+  const isResizing = useRef(false);
+
+  const onMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    isResizing.current = true;
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+
+    const onMouseMove = (me: MouseEvent) => {
+      if (!isResizing.current) return;
+      const newWidth = Math.min(MAX_SIDEBAR, Math.max(MIN_SIDEBAR, me.clientX));
+      setSidebarWidth(newWidth);
+    };
+
+    const onMouseUp = () => {
+      isResizing.current = false;
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  }, []);
+
+  return (
+    <Layout style={{ height: '100vh', overflow: 'hidden' }}>
+      <TopNav />
+
+      <Layout style={{ flex: 1, overflow: 'hidden' }}>
+        {/* Resizable sidebar */}
+        <div
+          style={{
+            width: sidebarWidth,
+            flexShrink: 0,
+            borderRight: '1px solid #f0f0f0',
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+            background: '#fff',
+          }}
+        >
+          <ConnectionTree />
+        </div>
+
+        {/* Resize handle */}
+        <div
+          onMouseDown={onMouseDown}
+          style={{
+            width: 4,
+            cursor: 'col-resize',
+            background: 'transparent',
+            flexShrink: 0,
+            zIndex: 10,
+            transition: 'background 0.15s',
+          }}
+          onMouseEnter={(e) => {
+            (e.currentTarget as HTMLDivElement).style.background = '#1677ff40';
+          }}
+          onMouseLeave={(e) => {
+            if (!isResizing.current)
+              (e.currentTarget as HTMLDivElement).style.background = 'transparent';
+          }}
+        />
+
+        {/* Main content area */}
+        <Content
+          style={{
+            flex: 1,
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <SessionTabs />
+        </Content>
+      </Layout>
+    </Layout>
+  );
+};