Mathis/lemma
1
0
Fork 0
mirror of https://github.com/lordmathis/lemma.git synced 2025-11-05 23:44:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate navigation to ts

Browse Source
This commit is contained in:
Matúš Námešný
2025-05-18 12:33:42 +02:00
parent 9125cbdad3
commit a8a525531e
3 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/src/components/navigation/UserMenu.jsx → app/src/components/navigation/UserMenu.tsx
View File

@@ -18,13 +18,15 @@ import { useAuth } from '../../contexts/AuthContext';
import AccountSettings from '../settings/account/AccountSettings'; import AccountSettings from '../settings/account/AccountSettings';
import AdminDashboard from '../settings/admin/AdminDashboard'; import AdminDashboard from '../settings/admin/AdminDashboard';
const UserMenu = () => { const UserMenu: React.FC = () => {
const [accountSettingsOpened, setAccountSettingsOpened] = useState(false); const [accountSettingsOpened, setAccountSettingsOpened] =
const [adminDashboardOpened, setAdminDashboardOpened] = useState(false); useState<boolean>(false);
const [opened, setOpened] = useState(false); const [adminDashboardOpened, setAdminDashboardOpened] =
useState<boolean>(false);
const [opened, setOpened] = useState<boolean>(false);
const { user, logout } = useAuth(); const { user, logout } = useAuth();
const handleLogout = () => { const handleLogout = (): void => {
logout(); logout();
}; };
@@ -57,7 +59,7 @@ const UserMenu = () => {
</Avatar> </Avatar>
<div> <div>
<Text size="sm" fw={500}> <Text size="sm" fw={500}>
{user.displayName || user.email} {user?.displayName || user?.email}
</Text> </Text>
</div> </div>
</Group> </Group>
@@ -72,7 +74,7 @@ const UserMenu = () => {
}} }}
px="sm" px="sm"
py="xs" py="xs"
style={(theme) => ({ style={(theme: any) => ({
borderRadius: theme.radius.sm, borderRadius: theme.radius.sm,
'&:hover': { '&:hover': {
backgroundColor: backgroundColor:
@@ -88,7 +90,7 @@ const UserMenu = () => {
</Group> </Group>
</UnstyledButton> </UnstyledButton>
{user.role === 'admin' && ( {user?.role === 'admin' && (
<UnstyledButton <UnstyledButton
onClick={() => { onClick={() => {
setAdminDashboardOpened(true); setAdminDashboardOpened(true);
@@ -96,7 +98,7 @@ const UserMenu = () => {
}} }}
px="sm" px="sm"
py="xs" py="xs"
style={(theme) => ({ style={(theme: any) => ({
borderRadius: theme.radius.sm, borderRadius: theme.radius.sm,
'&:hover': { '&:hover': {
backgroundColor: backgroundColor:
@@ -118,7 +120,7 @@ const UserMenu = () => {
px="sm" px="sm"
py="xs" py="xs"
color="red" color="red"
style={(theme) => ({ style={(theme: any) => ({
borderRadius: theme.radius.sm, borderRadius: theme.radius.sm,
'&:hover': { '&:hover': {
backgroundColor: backgroundColor:

31
app/src/components/navigation/WorkspaceSwitcher.jsx → app/src/components/navigation/WorkspaceSwitcher.tsx
View File

@@ -17,19 +17,20 @@ import {
import { IconFolders, IconSettings, IconFolderPlus } from '@tabler/icons-react'; import { IconFolders, IconSettings, IconFolderPlus } from '@tabler/icons-react';
import { useWorkspace } from '../../contexts/WorkspaceContext'; import { useWorkspace } from '../../contexts/WorkspaceContext';
import { useModalContext } from '../../contexts/ModalContext'; import { useModalContext } from '../../contexts/ModalContext';
import { listWorkspaces } from '../../api/git'; import { listWorkspaces } from '../../api/workspace';
import CreateWorkspaceModal from '../modals/workspace/CreateWorkspaceModal'; import CreateWorkspaceModal from '../modals/workspace/CreateWorkspaceModal';
import { Workspace } from '../../types/workspace';
const WorkspaceSwitcher = () => { const WorkspaceSwitcher: React.FC = () => {
const { currentWorkspace, switchWorkspace } = useWorkspace(); const { currentWorkspace, switchWorkspace } = useWorkspace();
const { setSettingsModalVisible, setCreateWorkspaceModalVisible } = const { setSettingsModalVisible, setCreateWorkspaceModalVisible } =
useModalContext(); useModalContext();
const [workspaces, setWorkspaces] = useState([]); const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState<boolean>(false);
const [popoverOpened, setPopoverOpened] = useState(false); const [popoverOpened, setPopoverOpened] = useState<boolean>(false);
const theme = useMantineTheme(); const theme = useMantineTheme();
const loadWorkspaces = async () => { const loadWorkspaces = async (): Promise<void> => {
setLoading(true); setLoading(true);
try { try {
const list = await listWorkspaces(); const list = await listWorkspaces();
@@ -40,12 +41,14 @@ const WorkspaceSwitcher = () => {
setLoading(false); setLoading(false);
}; };
const handleCreateWorkspace = () => { const handleCreateWorkspace = (): void => {
setPopoverOpened(false); setPopoverOpened(false);
setCreateWorkspaceModalVisible(true); setCreateWorkspaceModalVisible(true);
}; };
const handleWorkspaceCreated = async (newWorkspace) => { const handleWorkspaceCreated = async (
newWorkspace: Workspace
): Promise<void> => {
await loadWorkspaces(); await loadWorkspaces();
switchWorkspace(newWorkspace.name); switchWorkspace(newWorkspace.name);
}; };
@@ -108,7 +111,7 @@ const WorkspaceSwitcher = () => {
key={workspace.name} key={workspace.name}
p="xs" p="xs"
withBorder withBorder
style={{ style={(theme: any) => ({
backgroundColor: isSelected backgroundColor: isSelected
? theme.colors.blue[ ? theme.colors.blue[
theme.colorScheme === 'dark' ? 8 : 1 theme.colorScheme === 'dark' ? 8 : 1
@@ -119,7 +122,7 @@ const WorkspaceSwitcher = () => {
theme.colorScheme === 'dark' ? 7 : 5 theme.colorScheme === 'dark' ? 7 : 5
] ]
: undefined, : undefined,
}} })}
> >
<Group justify="space-between" wrap="nowrap"> <Group justify="space-between" wrap="nowrap">
<UnstyledButton <UnstyledButton
@@ -137,7 +140,9 @@ const WorkspaceSwitcher = () => {
c={ c={
isSelected isSelected
? theme.colors.blue[ ? theme.colors.blue[
theme.colorScheme === 'dark' ? 0 : 9 (theme as any).colorScheme === 'dark'
? 0
: 9
] ]
: undefined : undefined
} }
@@ -148,7 +153,7 @@ const WorkspaceSwitcher = () => {
size="xs" size="xs"
c={ c={
isSelected isSelected
? theme.colorScheme === 'dark' ? (theme as any).colorScheme === 'dark'
? theme.colors.blue[2] ? theme.colors.blue[2]
: theme.colors.blue[7] : theme.colors.blue[7]
: 'dimmed' : 'dimmed'
@@ -166,7 +171,7 @@ const WorkspaceSwitcher = () => {
variant="subtle" variant="subtle"
size="lg" size="lg"
color={ color={
theme.colorScheme === 'dark' (theme as any).colorScheme === 'dark'
? 'blue.2' ? 'blue.2'
: 'blue.7' : 'blue.7'
} }

2
app/src/types/workspace.ts
View File

@@ -30,10 +30,12 @@ export const DEFAULT_WORKSPACE_SETTINGS: WorkspaceSettings = {
export interface Workspace extends WorkspaceSettings { export interface Workspace extends WorkspaceSettings {
name: string; name: string;
createdAt: number;
} }
export const DEFAULT_WORKSPACE: Workspace = { export const DEFAULT_WORKSPACE: Workspace = {
name: '', name: '',
createdAt: Date.now(),
...DEFAULT_WORKSPACE_SETTINGS, ...DEFAULT_WORKSPACE_SETTINGS,
}; };