♻️ Redesign member forms, dev portfolios, and coffee chat bingo by clementroze · Pull Request #1229 · cornell-dti/idol

clementroze · 2026-11-07T05:08:22Z

Summary

Stacked on #1228. This PR targets clement-idol-redesign-1 and contains the next layer of the IDOL redesign.

Redesign the member-facing Team Event Credits, Shoutouts, Coffee Chats, and Dev Portfolio flows, including submission forms, history, detail views, and relevant modals. ADMIN side is not touched (yet)!!
Add the interactive 3D coffee chat bingo board alongside the standard board.
Add a reusable design-system table with sorting, horizontal scrolling, and loading/error/empty states.
Improve route-aware breadcrumbs (ie: Forms > Dev Porfolio > Portfolio implemented new login sequence with backend auth and sessioning #5), show the member’s profile photo in the sidebar, fix the blank combobox row, and refine shared modal behavior.
NOTE: there are a few API file changes, but it primarily is for reusing the existing backend endpoints and submission models, with frontend error handling for failed requests.

Pics

X	Pic
Shoutouts
TEC
Dev portfolio
Coffee chat normal
3d coffee chat board

Notion/Figma Link

IDOL redesign — Dev Portfolio reference

Notes

Dependency / merge order: merge ♻️ Add IDOL redesign shell, profile, appearance settings, and help #1228 first, then retarget this PR to main

coderabbitai · 2026-11-07T05:08:31Z

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

Run configuration

Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: Organization UI
Review profile: QUIET
Plan: Advanced
Run ID: a1bde74c-2399-4ca6-9530-d8dfa7e918bb

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

Trigger review

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

dti-github-bot · 2026-11-07T05:08:35Z

[diff-counting] Significant lines: 5591. This diff might be too big! Developer leads are invited to review the code.

clementroze · 2026-11-07T05:18:23Z

      return;
    }
-    await APIWrapper.delete(`${backendURL}/coffee-chat/${uuid}`);
+    const res = await APIWrapper.delete(`${backendURL}/coffee-chat/${uuid}`);


this is for checking the delete response so a failed request shows an error instead of removing the coffee chat from the UI

clementroze · 2026-11-07T05:19:11Z

+      if (options?.throwOnError && (!val || val.error)) {
+        throw new Error(val?.error || 'Could not load shoutouts.');
+      }


optional error throwing so that new UI can show retry state instead of empty result

clementroze · 2026-11-07T05:20:27Z

these files (and the next few after) are just to update the breadcrumbs path in the header correctly, cuz sometimes they're a bit wack (wrong parent, wrong child, etc.)

clementroze · 2026-11-07T05:23:23Z

+              <BaseCombobox.Empty>
+                <span className={inputStyles.emptyMessage}>No matches found.</span>


this is to fix the black space at the top bug like this:

clementroze · 2026-11-07T05:23:39Z

+          <Dialog.Popup
+            {...popupProps}
+            id={id}
+            className={styles.modal}
+            style={width ? { width } : undefined}
+          >


for dynamically sized modals

clementroze · 2026-11-07T05:32:53Z

shoutout card!

clementroze · 2026-11-07T05:34:08Z

+        <aside className={styles.periods} aria-label="Credit periods">
+          {tecDeadlines.map((deadline, index) => (
+            <Card
+              key={deadline.toISOString()}
+              header={index === period ? 'Current' : ['Past', 'Upcoming'][Number(index > period)]}
+            >
+              <h2 className={styles.periodTitle}>Period {index + 1}</h2>
+              <p>
+                Ends:{' '}
+                {deadline.toLocaleDateString('en-US', {
+                  weekday: 'short',
+                  month: 'short',
+                  day: 'numeric',
+                  timeZone: 'UTC'
+                })}


moved these cards from above the form (like in the figma originally) to the side on the right after feedback from design crit that it was taking up too much space

clementroze · 2026-11-07T05:34:53Z

looks like this -

clementroze · 2026-11-07T05:35:43Z

+
+type Route = { label: string; parent?: string };
+
+/** Navigation hierarchy is explicit because several detail URLs are siblings of their list. */


honestly this is just hardcoding the paths but i think if we have a better sidebar hierarchy/organization, eventually will become more intuitive

clementroze · 2026-11-07T05:36:11Z

  const { enabled, setEnabled } = usePreviewToggle();
  const [minimized, setMinimized] = useState(false);
  const [hasInstance, setHasInstance] = useState(false);
+  const [profilePhoto, setProfilePhoto] = useState<string>();


now sidebar can show the pfp! yay

clementroze requested a review from a team as a code owner November 7, 2026 05:08

dti-github-bot requested review from Destaq, burninglilies and oscarwang20 November 7, 2026 05:08

clementroze added this pull request to stack #1230 November 7, 2026 05:09

clementroze requested review from ladriennel and zkdlinyne and removed request for Destaq, burninglilies and oscarwang20 November 7, 2026 05:10

clementroze commented Nov 7, 2026

View reviewed changes

clementroze added 12 commits November 8, 2026 16:04

TEC page

287c40f

shoutout page

af83b10

coffee chat pages

cf4430b

3d baord!!

e9b20de

new table component

58366cd

design system/component changes

c4a59d0

bread crumb stuffy

c5d9fae

some api stuff apparently..

1501f1d

dev portfolko pages

0034659

others

32b746c

Keep admin portfolio route on the existing view

df62676

Format coffee chat member checkbox

91dd725

clementroze force-pushed the clement-idol-redesign-2 branch from 6095ccf to 91dd725 Compare November 8, 2026 21:04

dti-github-bot requested review from Destaq, burninglilies and oscarwang20 November 8, 2026 21:04

		<BaseCombobox.Empty>
		<span className={inputStyles.emptyMessage}>No matches found.</span>


		type Route = { label: string; parent?: string };

		/** Navigation hierarchy is explicit because several detail URLs are siblings of their list. */

Conversation

clementroze commented Nov 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Pics

Notion/Figma Link

Notes

Uh oh!

coderabbitai Bot commented Nov 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

dti-github-bot commented Nov 7, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

clementroze commented Nov 7, 2026 •

edited

Loading

coderabbitai Bot commented Nov 7, 2026 •

edited

Loading