Skip to content

feat: カレンダー上のボタン行を整理して縦幅を確保 #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nakaterm merged 1 commit into from
Sep 8, 2026
Merged

feat: カレンダー上のボタン行を整理して縦幅を確保 #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions client/src/components/AddToCalendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ type Props = {
/**
* 自分の提出済み日程をカレンダーアプリに追加するボタン。
* その場で ics を生成してダウンロードさせ、各カレンダーアプリのインポート機能で読み込んでもらう。
* カレンダーの縦幅を圧迫しないよう、タイトル行に並べて置く想定（モバイルではアイコンのみ）。
*/
export function AddToCalendar({
projectName,
Expand Down Expand Up @@ -54,10 +55,15 @@ export function AddToCalendar({
};

return (
<div className="mt-2 flex items-center gap-1">
<button type="button" onClick={handleClick} className="btn btn-sm btn-outline gap-1.5">
<div className="flex shrink-0 items-center gap-1">
<button
type="button"
onClick={handleClick}
aria-label="カレンダー追加"
className="btn btn-sm btn-outline gap-1.5"
>
<LuCalendarPlus className="h-4 w-4" />
<span>カレンダー追加 (β)</span>
<span className="hidden sm:inline">カレンダー追加 (β)</span>
</button>
<button
type="button"
Expand Down
104 changes: 57 additions & 47 deletions client/src/pages/eventId/Submission.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,12 +315,25 @@ export default function SubmissionPage() {
<div>
<div className="flex items-center justify-between gap-2">
<h1 className="min-w-0 truncate font-bold text-base text-base-content sm:text-lg">{project.name}</h1>
{isHost && (
<NavLink to={`/e/${projectId}/edit`} className="btn btn-sm btn-outline shrink-0 gap-1.5">
<LuSettings2 className="h-4 w-4" />
<span>編集</span>
</NavLink>
)}
<div className="flex shrink-0 items-center gap-1.5">
{/* 自分の日程をカレンダーアプリに追加 */}
{mode === "view" && meAsGuest && meAsGuest.slots.length > 0 && (
<AddToCalendar
projectName={project.name}
projectId={projectId ?? ""}
projectDescription={project.description}
slots={meAsGuest.slots}
participationOptionIdToLabel={participationOptionIdToLabel}
participationOptionCount={project.participationOptions.length}
/>
)}
{isHost && (
<NavLink to={`/e/${projectId}/edit`} className="btn btn-sm btn-outline shrink-0 gap-1.5">
<LuSettings2 className="h-4 w-4" />
<span>編集</span>
</NavLink>
)}
</div>
</div>
{project.description &&
(() => {
Expand Down Expand Up @@ -354,18 +367,6 @@ export default function SubmissionPage() {
})()}
</div>

{/* 自分の日程をカレンダーアプリに追加 */}
{mode === "view" && meAsGuest && meAsGuest.slots.length > 0 && (
<AddToCalendar
projectName={project.name}
projectId={projectId ?? ""}
projectDescription={project.description}
slots={meAsGuest.slots}
participationOptionIdToLabel={participationOptionIdToLabel}
participationOptionCount={project.participationOptions.length}
/>
)}

{/* 参加形態選択ボタン */}
{mode === "edit" && project.participationOptions.length > 1 && selectedParticipationOptionId !== null && (
<div className="mt-3 mb-2 flex flex-wrap items-center gap-1.5">
Expand Down Expand Up @@ -402,27 +403,6 @@ export default function SubmissionPage() {
</div>
)}

{/* ハイライト操作バー */}
{mode === "view" && project.guests.length > 0 && (
<div className="mt-3 mb-2 flex flex-wrap items-center gap-1.5">
<button
type="button"
className={`btn btn-sm gap-1.5 ${highlight?.type === "maxCount" ? "btn-primary" : "btn-outline"}`}
onClick={() => setHighlight((prev) => (prev?.type === "maxCount" ? null : { type: "maxCount" }))}
>
<LuUsers className="h-4 w-4" />
最多人数
</button>
{highlight?.type === "guest" && (
<button type="button" className="btn btn-sm btn-primary gap-1.5" onClick={() => setHighlight(null)}>
<LuUser className="h-4 w-4" />
{guestIdToName[highlight.guestId] ?? "参加者"}さんの日程
<LuX className="h-4 w-4" />
</button>
)}
</div>
)}

<Calendar
startDate={project.startDate}
endDate={project.endDate}
Expand All @@ -441,14 +421,44 @@ export default function SubmissionPage() {
{/* 参加者一覧 */}
{project.guests.length > 0 && (
<div className="mt-1 pb-2">
<button
type="button"
onClick={() => setGuestListExpanded((prev) => !prev)}
className="flex items-center gap-1.5 font-medium text-base-content/80 text-sm hover:text-base-content"
>
参加者 ({project.guests.length}人)
{guestListExpanded ? <LuChevronUp className="h-4 w-4" /> : <LuChevronDown className="h-4 w-4" />}
</button>
<div className="flex items-center justify-between gap-2">
<button
type="button"
onClick={() => setGuestListExpanded((prev) => !prev)}
className="flex min-w-0 items-center gap-1.5 font-medium text-base-content/80 text-sm hover:text-base-content"
>
参加者 ({project.guests.length}人)
{guestListExpanded ? <LuChevronUp className="h-4 w-4" /> : <LuChevronDown className="h-4 w-4" />}
</button>
{/* ハイライト操作（カレンダーの縦幅を使わないようこの行に置く） */}
{mode === "view" && (
<div className="flex min-w-0 items-center gap-1.5">
{highlight?.type === "guest" && (
<button
type="button"
className="btn btn-sm btn-primary min-w-0 gap-1.5"
onClick={() => setHighlight(null)}
>
<LuUser className="h-4 w-4 shrink-0" />
<span className="truncate">{guestIdToName[highlight.guestId] ?? "参加者"}</span>
<LuX className="h-4 w-4 shrink-0" />
</button>
)}
<button
type="button"
className={`btn btn-sm shrink-0 gap-1.5 ${
highlight?.type === "maxCount" ? "btn-primary" : "btn-outline"
}`}
onClick={() =>
setHighlight((prev) => (prev?.type === "maxCount" ? null : { type: "maxCount" }))
}
>
<LuUsers className="h-4 w-4" />
最多人数
</button>
</div>
)}
</div>
{guestListExpanded && (
<ul className="mt-1 divide-y divide-base-200">
{project.guests.map((guest) => {
Expand Down
Loading