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
135. 135
136. 136
137. 137
138. 138
139. 139
140. 140
141. 141
142. 142
143. 143
144. 144
145. 145
146. 146

// SPDX-FileCopyrightText: 2025 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 User } from "@yamori/proto/yamori/workspace/v2/user_pb.js";
import { type FC, type ReactNode, useCallback, useState } from "react";

import * as CopyrightNotice from "../components/CopyrightNotice.ts";
import { Logo } from "../components/Logo.tsx";
import * as NavigationMenu from "../components/NavigationMenu.ts";
import { useViewTransition } from "../hooks/useViewTransition.ts";

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

export interface LoggedInLayoutProps extends Pick<BoxProps, "className" | "style"> {
	/**
	 * AppBar に表示するタイトル。
	 */
	title: ReactNode;

	/**
	 * ページの主要素。
	 */
	children?: ReactNode;

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

	defaultMenuOpened?: boolean;

	/**
	 * ログイン中のユーザ。
	 */
	user: User;
}

export const LoggedInLayout: FC<LoggedInLayoutProps> = ({
	title,
	children,
	actions,
	defaultMenuOpened = false,
	user,
	...rest
}) => {
	const viewTransition = useViewTransition();

	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)"
		>
			<Flex
				className={css.appbar}
				display={{ initial: "none", md: "flex" }}
				align="center"
				justify="center"
			>
				<a className={css.logo} href="/">
					<Logo />
				</a>
			</Flex>
			<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.Item current>
								<span>ホーム</span>
							</NavigationMenu.Item>
							<NavigationMenu.Group title="ユーザ管理">
								<NavigationMenu.Item>
									<span>ユーザ追加</span>
								</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>
			<Box
				overflowY="auto"
				position="relative"
				gridRowStart="2"
				gridColumnStart={{ initial: "1", md: "2" }}
			>
				{children}
			</Box>
		</Grid>
	);
};