Add footer app to display users viewing the same content node

[Copilot]

Summary

Adds a new footer app that displays the number of connected users also viewing the same content node as the current user. Clicking the count opens a modal that displays the users who are viewing the page along with their avatar.

Changes Made

Backend (C#)

• Extended SignalR Hub: Added StartViewingContent and StopViewingContent methods to ContentLockHub.cs
• Enhanced Interface: Added new methods to IContentLockHubEvents.cs for content viewing events:
  • UserStartedViewingContent(Guid contentKey, Guid userKey)
  • UserStoppedViewingContent(Guid contentKey, Guid userKey)
  • ReceiveUsersViewingContent(Guid contentKey, Guid[] viewingUserKeys)
• Content Tracking: Added concurrent dictionary to track which users are viewing specific content nodes
• Automatic Cleanup: Users are automatically removed from viewing lists when they disconnect or navigate away

Frontend (TypeScript)

• New Footer Component: Created contentlock-viewingusers-workspacefooterapp.ts that shows user count and opens modal on click
• Enhanced SignalR Context: Extended contentlock.signalr.context.ts with:
  • Methods to track users viewing specific content: getUsersViewingContent(), getViewersCountExcludingCurrentUser()
  • SignalR event handlers for content viewing updates
  • Client-side methods: startViewingContent(), stopViewingContent()
• Modal Enhancement: Modified existing online users modal to support filtering by content key
• Localization: Added English and Danish language strings for the new UI elements

Key Features

• Real-time Updates: Uses SignalR for instant updates when users join/leave content viewing
• Smart Display: Only shows footer when other users (excluding current user) are viewing the same content
• Interactive Modal: Clicking the footer opens the familiar users modal with avatars and names
• Automatic Lifecycle: Properly handles user navigation, disconnection, and component cleanup
• Seamless Integration: Works with existing ContentLock infrastructure and UI patterns

Testing

To test this feature:

1. Have multiple users log into the same Umbraco backoffice
2. Navigate both users to the same content node in the Content section
3. Observe the footer app appears showing "X other users viewing this page"
4. Click the footer to see the modal with user details and avatars
5. Navigate one user away to see real-time count updates

Screenshots

The footer app appears at the bottom of the content editor when other users are viewing the same page:

[Footer showing: 👥 2 other users viewing this page [2]]

Clicking opens a modal titled "Who's viewing this page?" with user avatars and names.

Backward Compatibility

This is a purely additive feature that doesn't modify existing functionality. All existing ContentLock features continue to work as before.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.