1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102
103. 103
104. 104
105. 105
106. 106
107. 107
108. 108
109. 109
110. 110
111. 111
112. 112
113. 113

// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import { HamburgerMenuIcon } from "@radix-ui/react-icons";
import {
	Box,
	type BoxProps,
	Container,
	Flex,
	Grid,
	Heading,
	IconButton,
} from "@radix-ui/themes";
import { type Workspace } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js";
import { type FC, type ReactNode, use, useCallback, useState } from "react";

import * as NavigationMenu from "../../components/NavigationMenu.ts";
import { URLContext } from "../../contexts/Router.tsx";
import { useViewTransition } from "../../hooks/useViewTransition.ts";

import * as workers from "./workers/page.tsx";

import css from "./Layout.module.css";

export interface LayoutProps extends Pick<BoxProps, "className" | "children" | "style"> {
	title: ReactNode;

	/**
	 * この画面 (シーン) にグローバルな操作・アクション。
	 * Flex コンテナ内となるため、 Fragment で渡すとレイアウトされる。
	 */
	actions?: ReactNode;

	defaultMenuOpened?: boolean;

	workspace: Workspace;
}

export const Layout: FC<LayoutProps> = ({
	children,
	title,
	actions,
	defaultMenuOpened = false,
	workspace,
	...rest
}) => {
	const viewTransition = useViewTransition();

	const url = use(URLContext);

	const [isMenuOpened, setIsMenuOpened] = useState(defaultMenuOpened);

	const toggleMenu = useCallback(() => {
		viewTransition(() => {
			setIsMenuOpened((prev) => !prev);
		});
	}, [viewTransition]);

	return (
		<Grid
			{...rest}
			inset="0"
			height="100%"
			columns={{ initial: "1", md: "minmax(15rem, max-content) minmax(0, 1fr)" }}
			rows="max-content minmax(0, 1fr)"
			gapY="2"
		>
			<Box className={css.appbar} display={{ initial: "none", md: "block" }} />
			<Flex className={css.appbar} p="2" align="center" gapX="3">
				<Box display={{ md: "none" }}>
					<IconButton variant="soft" onClick={toggleMenu}>
						<HamburgerMenuIcon />
					</IconButton>
				</Box>
				<Container size={{ initial: "4", md: "2", lg: "3" }}>
					<Flex align="center" minHeight="var(--space-6)">
						<Box flexGrow="1" flexShrink="1">
							<Heading size="3">{title}</Heading>
						</Box>
						{actions && (
							<Flex justify="end" gapX="1">
								{actions}
							</Flex>
						)}
					</Flex>
				</Container>
			</Flex>
			<Box
				className={css.menu}
				p="2"
				gridRowStart="2"
				gridColumnStart="1"
				display={{ initial: isMenuOpened ? "block" : "none", md: "block" }}
			>
				<NavigationMenu.Root>
					<NavigationMenu.Group title="労働者管理">
						<NavigationMenu.Item current={workers.pattern.test(url)}>
							<a href={`/${workspace.id?.value}/workers`}>労働者一覧</a>
						</NavigationMenu.Item>
					</NavigationMenu.Group>
				</NavigationMenu.Root>
			</Box>
			<Container
				size={{ initial: "2", lg: "3" }}
				p="2"
				gridRowStart="2"
				gridColumnStart={{ initial: "1", md: "2" }}
			>
				{children}
			</Container>
		</Grid>
	);
};