Skip to content

Mobile dashboard page overhaul #381

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

Open
jeet-parikh wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Mobile dashboard page overhaul #381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
791e743
adapt sidebysideview to mobile
jeet-parikh Apr 15, 2026
6961c7e
frozen top
jeet-parikh Apr 15, 2026
84db3f0
fixed drag issue
jeet-parikh Apr 19, 2026
29feced
info tab creation
jeet-parikh Apr 19, 2026
08980d0
fixes
jeet-parikh Apr 19, 2026
014b7aa
recentered dates
jeet-parikh Apr 19, 2026
f4b1e07
popup group avails
jeet-parikh Apr 19, 2026
37fc587
sticky headers and dismissal logic
jeet-parikh Apr 19, 2026
02c1c3b
ui changes
jeet-parikh Apr 19, 2026
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
44 changes: 24 additions & 20 deletions src/components/GroupView/UserChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ interface UserChartProps {
React.Dispatch<React.SetStateAction<boolean>>,
];
calendarHeight: number | null;
hideHeader?: boolean;
}

/**
Expand All @@ -39,6 +40,7 @@ const UserChart: React.FC<UserChartProps> = ({
thePeopleStatus,
theParticipantToggleClicked,
calendarHeight,
hideHeader = false,
}) => {
const [chartedUsers, setChartedUsers] = chartedUsersData || [
{ available: [], unavailable: [] },
Expand Down Expand Up @@ -101,26 +103,28 @@ const UserChart: React.FC<UserChartProps> = ({
)}
<div className="flex flex-row text-sm justify-center z-[9999] items-center text-center bg-white dark:bg-secondary_background-dark rounded-lg mb-3 md:mb-4 w-full overflow-y-auto">
<table className="table-fixed border-collapse w-full">
<thead>
<tr>
<th
className="border-b p-3 text-primary"
dangerouslySetInnerHTML={{
__html:
'Available (' + String(chartedUsers.available.length) + ')',
}}
></th>
<th
className="border-b p-3 text-text dark:text-text-dark"
dangerouslySetInnerHTML={{
__html:
'Unvailable (' +
String(chartedUsers.unavailable.length) +
')',
}}
></th>
</tr>
</thead>
{!hideHeader && (
<thead>
<tr>
<th
className="border-b p-3 text-primary"
dangerouslySetInnerHTML={{
__html:
'Available (' + String(chartedUsers.available.length) + ')',
}}
></th>
<th
className="border-b p-3 text-text dark:text-text-dark"
dangerouslySetInnerHTML={{
__html:
'Unvailable (' +
String(chartedUsers.unavailable.length) +
')',
}}
></th>
</tr>
</thead>
)}
<tbody>
{rows.map(([available, unavailable], idx) => (
<ChartRow
Expand Down
23 changes: 13 additions & 10 deletions src/components/SideBySideView/SharedSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ interface SharedSidebarProps {

userHasFilled: boolean;
onDecline: () => void;
hideUserChart?: boolean;
}

export default function SharedSidebar({
Expand Down Expand Up @@ -109,8 +110,10 @@ export default function SharedSidebar({
onUserSignIn,
userHasFilled,
onDecline,
hideUserChart = false,
}: SharedSidebarProps) {
const navigate = useNavigate();
const hovering = hideUserChart ? false : (chartedUsers?.hovering ?? false);
const [alertMessage, setAlertMessage] = useState<string | null>(null);
const [isDeclinePopupOpen, setIsDeclinePopupOpen] = useState(false);
const [emailNotifications, setEmailNotifications] = useState(getEmailAdmin());
Expand Down Expand Up @@ -208,11 +211,11 @@ export default function SharedSidebar({
/>

{/* Event Title & Description */}
{!chartedUsers?.hovering && (
{!hovering && (
<div className="w-full">
<div className="flex items-start justify-between gap-2">
<div
className="text-3xl font-bold flex-1 min-w-0"
className="text-3xl font-bold flex-1 min-w-0 dark:text-white"
style={{
wordBreak: 'break-word',
overflowWrap: 'break-word',
Expand Down Expand Up @@ -246,7 +249,7 @@ export default function SharedSidebar({
)}

{/* Add My Availability Button - shown when user is not signed in */}
{!chartedUsers?.hovering && !userHasSignedIn && (
{!hovering && !userHasSignedIn && (
<div className="w-full">
<ButtonSmall
bgColor="primary"
Expand All @@ -260,7 +263,7 @@ export default function SharedSidebar({
)}

{/* Share Section */}
{!chartedUsers?.hovering && (
{!hovering && (
<div className="w-full">
<div className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
Share
Expand All @@ -282,7 +285,7 @@ export default function SharedSidebar({
)}

{/* Admin Settings Section */}
{isAdmin && !chartedUsers?.hovering && (
{isAdmin && !hovering && (
<div className="w-full">
<div className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
Settings
Expand Down Expand Up @@ -318,7 +321,7 @@ export default function SharedSidebar({


{/* Google Calendar Section - only show when user is signed in */}
{!chartedUsers?.hovering && userHasSignedIn && (
{!hovering && userHasSignedIn && (
<div className="w-full">
<div
className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2 flex items-center justify-between cursor-pointer"
Expand Down Expand Up @@ -394,7 +397,7 @@ export default function SharedSidebar({
)}

{/* Decline Button - only shown when user hasnt filled availability yet. once filled it moves to the dropdown */}
{!chartedUsers?.hovering && !isAdmin && userHasSignedIn && getAccountId() !== '' && !userHasFilled && (
{!hovering && !isAdmin && userHasSignedIn && getAccountId() !== '' && !userHasFilled && (
<div>
<div className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2 flex items-center justify-between cursor-pointer">
Decline Invitation{' '}
Expand All @@ -420,7 +423,7 @@ export default function SharedSidebar({


{/* Participants Section */}
{!chartedUsers?.hovering && allPeople && allPeople.length > 0 && (
{!hovering && allPeople && allPeople.length > 0 && (
<div className="w-full">
<div className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
Participants (
Expand Down Expand Up @@ -495,7 +498,7 @@ export default function SharedSidebar({


{/* Locations Section - grouped together */}
{locationOptions.length > 0 && !chartedUsers?.hovering && (
{locationOptions.length > 0 && !hovering && (
<div className="w-full">
<div className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
Locations
Expand Down Expand Up @@ -536,7 +539,7 @@ export default function SharedSidebar({
)}

{/* Hover User Chart - shows available/unavailable when hovering on calendar */}
{chartedUsers?.hovering && (
{!hideUserChart && chartedUsers?.hovering && (
<div className="w-full">
<UserChart
chartedUsersData={[filteredChartedUsers, setChartedUsers]}
Expand Down
Loading
Loading