Jannis Braun
fc06e25731
Renames all domain terminology from "Server" to "Space" throughout the application — database schema, API routes, shared types, stores, components, and UI strings. Files renamed: ServerSidebar → SpaceSidebar, CreateServer → CreateSpace, JoinServer → JoinSpace, ServerSettings → SpaceSettings, serverStore → spaceStore, routes/servers → routes/spaces.
81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Modal } from '../ui/Modal';
|
|
import { useSpaceStore } from '../../stores/spaceStore';
|
|
import { useUIStore } from '../../stores/uiStore';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
export function CreateSpaceModal() {
|
|
const [name, setName] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const createSpace = useSpaceStore((s) => s.createSpace);
|
|
const activeModal = useUIStore((s) => s.activeModal);
|
|
const closeModal = useUIStore((s) => s.closeModal);
|
|
const navigate = useNavigate();
|
|
|
|
const isOpen = activeModal === 'createSpace';
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError('');
|
|
|
|
if (!name.trim()) {
|
|
setError('Space name is required');
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
const space = await createSpace(name.trim());
|
|
closeModal();
|
|
setName('');
|
|
navigate(`/channels/${space.id}`);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to create space');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={closeModal} title="Create a Space">
|
|
<form onSubmit={handleSubmit}>
|
|
{error && (
|
|
<div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
<div className="mb-4">
|
|
<label className="block text-xs font-bold text-txt-secondary uppercase mb-2">
|
|
Space Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className="w-full px-3 py-2 bg-surface-input rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary"
|
|
placeholder="My Awesome Space"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={closeModal}
|
|
className="px-4 py-2 text-sm text-txt-secondary hover:text-txt-primary transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="px-4 py-2 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded transition-colors disabled:opacity-50"
|
|
>
|
|
{isLoading ? 'Creating...' : 'Create'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
}
|