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
114. 114
115. 115
116. 116
117. 117
118. 118
119. 119
120. 120
121. 121
122. 122
123. 123
124. 124
125. 125
126. 126
127. 127
128. 128
129. 129
130. 130
131. 131
132. 132
133. 133
134. 134

// 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,
	ScrollArea,
	Text,
} 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 CopyrightNotice from "../../components/CopyrightNotice.ts";
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 * as workersNew from "./workers/new/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>
			<Flex
				className={css.menu}
				p="2"
				gridRowStart="2"
				gridColumnStart="1"
				display={{ initial: isMenuOpened ? "flex" : "none", md: "flex" }}
				direction="column"
				gap="2"
			>
				<Box asChild flexGrow="1" flexShrink="1">
					<ScrollArea>
						<NavigationMenu.Root>
							<NavigationMenu.Group title="労働者管理">
								<NavigationMenu.Item current={workers.pattern.test(url)}>
									<a href={`/${workspace.id?.value}/workers`}>労働者一覧</a>
								</NavigationMenu.Item>
								{workspace.workerAddKey && (
									<NavigationMenu.Item current={workersNew.pattern.test(url)}>
										<a href={`/${workspace.id?.value}/workers/new`}>労働者登録</a>
									</NavigationMenu.Item>
								)}
							</NavigationMenu.Group>
						</NavigationMenu.Root>
					</ScrollArea>
				</Box>
				<Flex asChild align="center" justify="end" gap="4">
					<Text size="1" color="gray">
						<CopyrightNotice.ThirdParty />
						<CopyrightNotice.FirstParty />
					</Text>
				</Flex>
			</Flex>
			<Container
				size={{ initial: "2", lg: "3" }}
				p="2"
				gridRowStart="2"
				gridColumnStart={{ initial: "1", md: "2" }}
			>
				{children}
			</Container>
		</Grid>
	);
};