This is a duplicate of PR#12596 with the added cypress tests fixed. Refer to PR#12596 for info and credit to @Akarshkushwaha for the implementation.

Why is this Change Important & Necessary?

Fixes #12595

In the Office Hours Queue interface, the "Show user id" feature was destructive. Clicking the eye icon would overwrite the student's name and remove the toggle button from the DOM, requiring a full page refresh to see student names again. This PR implements a non-destructive toggle that follows standard UI patterns, allowing Instructors to switch back and forth efficiently.

What is the New Behavior?

• Clicking the "eye" icon reveals the student's User ID while hiding their name.
• The icon changes to a "slashed eye" (fa-eye-slash) when the ID is visible.
• Clicking the "slashed eye" icon hides the ID and restores the student's name.
• This is achieved using CSS visibility toggling (display: inline / display: none) rather than DOM manipulation/removal.

What steps should a reviewer take to reproduce or test the bug or new feature?

1. Navigate to the Office Hours Queue page (viewing as a Instructor).
2. Click the "Show user id" (eye icon) next to their name.
3. Verify that the name is replaced by the ID and the icon changes to a slashed eye.
4. Click the slashed eye icon.
5. Verify that the student's name is restored and the icon returns to the original state.

Before:

After:-

Automated Testing & Documentation

• This change modifies existing UI templates (CurrentQueue.twig, QueueHistory.twig) and a JavaScript utility in QueueFooter.twig.
• No new automated tests were added as this is a minor UI logic fix, but manual verification ensures compatibility with existing queue interactions.
• No update to submitty.org documentation is required as this is a fix to existing behavior.

Other information

• Breaking Change? No.
• Migrations needed? No.
• Security concerns? No.