mirror of
https://github.com/lordmathis/lemma.git
synced 2025-11-07 16:34:26 +00:00
Rename root folders
This commit is contained in:
155
app/src/components/navigation/UserMenu.jsx
Normal file
155
app/src/components/navigation/UserMenu.jsx
Normal file
@@ -0,0 +1,155 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Avatar,
|
||||
Popover,
|
||||
Stack,
|
||||
UnstyledButton,
|
||||
Group,
|
||||
Text,
|
||||
Divider,
|
||||
} from '@mantine/core';
|
||||
import {
|
||||
IconUser,
|
||||
IconUsers,
|
||||
IconLogout,
|
||||
IconSettings,
|
||||
} from '@tabler/icons-react';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import AccountSettings from '../settings/account/AccountSettings';
|
||||
import AdminDashboard from '../settings/admin/AdminDashboard';
|
||||
|
||||
const UserMenu = () => {
|
||||
const [accountSettingsOpened, setAccountSettingsOpened] = useState(false);
|
||||
const [adminDashboardOpened, setAdminDashboardOpened] = useState(false);
|
||||
const [opened, setOpened] = useState(false);
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popover
|
||||
width={200}
|
||||
position="bottom-end"
|
||||
withArrow
|
||||
shadow="md"
|
||||
opened={opened}
|
||||
onChange={setOpened}
|
||||
>
|
||||
<Popover.Target>
|
||||
<Avatar
|
||||
radius="xl"
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => setOpened((o) => !o)}
|
||||
>
|
||||
<IconUser size={24} />
|
||||
</Avatar>
|
||||
</Popover.Target>
|
||||
|
||||
<Popover.Dropdown>
|
||||
<Stack gap="sm">
|
||||
{/* User Info Section */}
|
||||
<Group gap="sm">
|
||||
<Avatar radius="xl" size="md">
|
||||
<IconUser size={24} />
|
||||
</Avatar>
|
||||
<div>
|
||||
<Text size="sm" fw={500}>
|
||||
{user.displayName || user.email}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Menu Items */}
|
||||
<UnstyledButton
|
||||
onClick={() => {
|
||||
setAccountSettingsOpened(true);
|
||||
setOpened(false);
|
||||
}}
|
||||
px="sm"
|
||||
py="xs"
|
||||
style={(theme) => ({
|
||||
borderRadius: theme.radius.sm,
|
||||
'&:hover': {
|
||||
backgroundColor:
|
||||
theme.colorScheme === 'dark'
|
||||
? theme.colors.dark[5]
|
||||
: theme.colors.gray[0],
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Group>
|
||||
<IconSettings size={16} />
|
||||
<Text size="sm">Account Settings</Text>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
|
||||
{user.role === 'admin' && (
|
||||
<UnstyledButton
|
||||
onClick={() => {
|
||||
setAdminDashboardOpened(true);
|
||||
setOpened(false);
|
||||
}}
|
||||
px="sm"
|
||||
py="xs"
|
||||
style={(theme) => ({
|
||||
borderRadius: theme.radius.sm,
|
||||
'&:hover': {
|
||||
backgroundColor:
|
||||
theme.colorScheme === 'dark'
|
||||
? theme.colors.dark[5]
|
||||
: theme.colors.gray[0],
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Group>
|
||||
<IconUsers size={16} />
|
||||
<Text size="sm">Admin Dashboard</Text>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
)}
|
||||
|
||||
<UnstyledButton
|
||||
onClick={handleLogout}
|
||||
px="sm"
|
||||
py="xs"
|
||||
color="red"
|
||||
style={(theme) => ({
|
||||
borderRadius: theme.radius.sm,
|
||||
'&:hover': {
|
||||
backgroundColor:
|
||||
theme.colorScheme === 'dark'
|
||||
? theme.colors.dark[5]
|
||||
: theme.colors.gray[0],
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Group>
|
||||
<IconLogout size={16} color="red" />
|
||||
<Text size="sm" c="red">
|
||||
Logout
|
||||
</Text>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
|
||||
<AccountSettings
|
||||
opened={accountSettingsOpened}
|
||||
onClose={() => setAccountSettingsOpened(false)}
|
||||
/>
|
||||
|
||||
<AdminDashboard
|
||||
opened={adminDashboardOpened}
|
||||
onClose={() => setAdminDashboardOpened(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserMenu;
|
||||
197
app/src/components/navigation/WorkspaceSwitcher.jsx
Normal file
197
app/src/components/navigation/WorkspaceSwitcher.jsx
Normal file
@@ -0,0 +1,197 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Popover,
|
||||
Stack,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
Group,
|
||||
UnstyledButton,
|
||||
Text,
|
||||
Loader,
|
||||
Center,
|
||||
ActionIcon,
|
||||
Tooltip,
|
||||
useMantineTheme,
|
||||
} from '@mantine/core';
|
||||
import { IconFolders, IconSettings, IconFolderPlus } from '@tabler/icons-react';
|
||||
import { useWorkspace } from '../../contexts/WorkspaceContext';
|
||||
import { useModalContext } from '../../contexts/ModalContext';
|
||||
import { listWorkspaces } from '../../services/api';
|
||||
import CreateWorkspaceModal from '../modals/workspace/CreateWorkspaceModal';
|
||||
|
||||
const WorkspaceSwitcher = () => {
|
||||
const { currentWorkspace, switchWorkspace } = useWorkspace();
|
||||
const { setSettingsModalVisible, setCreateWorkspaceModalVisible } =
|
||||
useModalContext();
|
||||
const [workspaces, setWorkspaces] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [popoverOpened, setPopoverOpened] = useState(false);
|
||||
const theme = useMantineTheme();
|
||||
|
||||
const loadWorkspaces = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const list = await listWorkspaces();
|
||||
setWorkspaces(list);
|
||||
} catch (error) {
|
||||
console.error('Failed to load workspaces:', error);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleCreateWorkspace = () => {
|
||||
setPopoverOpened(false);
|
||||
setCreateWorkspaceModalVisible(true);
|
||||
};
|
||||
|
||||
const handleWorkspaceCreated = async (newWorkspace) => {
|
||||
await loadWorkspaces();
|
||||
switchWorkspace(newWorkspace.name);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popover
|
||||
width={300}
|
||||
position="bottom-start"
|
||||
shadow="md"
|
||||
opened={popoverOpened}
|
||||
onChange={setPopoverOpened}
|
||||
>
|
||||
<Popover.Target>
|
||||
<UnstyledButton
|
||||
onClick={() => {
|
||||
setPopoverOpened((o) => !o);
|
||||
if (!popoverOpened) {
|
||||
loadWorkspaces();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Group gap="xs">
|
||||
<IconFolders size={20} />
|
||||
<div>
|
||||
<Text size="sm" fw={500}>
|
||||
{currentWorkspace?.name || 'No workspace'}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
</Popover.Target>
|
||||
|
||||
<Popover.Dropdown p="xs">
|
||||
<Group justify="space-between" mb="md" px="xs">
|
||||
<Text size="sm" fw={600}>
|
||||
Workspaces
|
||||
</Text>
|
||||
<Tooltip label="Create New Workspace">
|
||||
<ActionIcon
|
||||
variant="default"
|
||||
size="md"
|
||||
onClick={handleCreateWorkspace}
|
||||
>
|
||||
<IconFolderPlus size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<ScrollArea.Autosize mah={400} offsetScrollbars>
|
||||
<Stack gap="xs">
|
||||
{loading ? (
|
||||
<Center p="md">
|
||||
<Loader size="sm" />
|
||||
</Center>
|
||||
) : (
|
||||
workspaces.map((workspace) => {
|
||||
const isSelected = workspace.name === currentWorkspace?.name;
|
||||
return (
|
||||
<Paper
|
||||
key={workspace.name}
|
||||
p="xs"
|
||||
withBorder
|
||||
style={{
|
||||
backgroundColor: isSelected
|
||||
? theme.colors.blue[
|
||||
theme.colorScheme === 'dark' ? 8 : 1
|
||||
]
|
||||
: undefined,
|
||||
borderColor: isSelected
|
||||
? theme.colors.blue[
|
||||
theme.colorScheme === 'dark' ? 7 : 5
|
||||
]
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<UnstyledButton
|
||||
style={{ flex: 1 }}
|
||||
onClick={() => {
|
||||
switchWorkspace(workspace.name);
|
||||
setPopoverOpened(false);
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Text
|
||||
size="sm"
|
||||
fw={500}
|
||||
truncate
|
||||
c={
|
||||
isSelected
|
||||
? theme.colors.blue[
|
||||
theme.colorScheme === 'dark' ? 0 : 9
|
||||
]
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{workspace.name}
|
||||
</Text>
|
||||
<Text
|
||||
size="xs"
|
||||
c={
|
||||
isSelected
|
||||
? theme.colorScheme === 'dark'
|
||||
? theme.colors.blue[2]
|
||||
: theme.colors.blue[7]
|
||||
: 'dimmed'
|
||||
}
|
||||
>
|
||||
{new Date(
|
||||
workspace.createdAt
|
||||
).toLocaleDateString()}
|
||||
</Text>
|
||||
</Box>
|
||||
</UnstyledButton>
|
||||
{isSelected && (
|
||||
<Tooltip label="Workspace Settings">
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
size="lg"
|
||||
color={
|
||||
theme.colorScheme === 'dark'
|
||||
? 'blue.2'
|
||||
: 'blue.7'
|
||||
}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSettingsModalVisible(true);
|
||||
setPopoverOpened(false);
|
||||
}}
|
||||
>
|
||||
<IconSettings size={18} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Group>
|
||||
</Paper>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</Stack>
|
||||
</ScrollArea.Autosize>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
<CreateWorkspaceModal onWorkspaceCreated={handleWorkspaceCreated} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkspaceSwitcher;
|
||||
Reference in New Issue
Block a user