Can this be deployed on a Virtual LAN network?

ToDos

• Configure Docker for frontend
• Configure Docker for backend
• Create new VDS
• Configure Google Auth for additional app domain name
• Deploy!

References

• https://stackoverflow.com/questions/24537340/docker-adding-a-file-from-a-parent-directory
• https://github.com/vercel/next.js/blob/canary/examples/with-docker/README.md
• https://github.com/vercel/next.js/tree/canary/examples/with-docker-compose

Features

• UI
  • #6
  • #7
  • #18
  • 🛎️ Sound effects
    • Play only on new messages
    • Sound on / off option in "main" menu (persistent in Local Storage)
  • Sort conversations list by latest message, desc, when new message arrives
• Various
  • Refactor Prisma schema to single shared file
• Chat enhancements
  • #9
  • "Chat owner" actions
    • #11
    • Chat Info modal
    • Add / remove users
    • Set chat title
  • "Leave chat" option
  • System messages (user joined, user leave...)
  • isTyping state for ConversationParticipant
  • User Online state
• Messages enhancements
  • #14
  • Copy Text from messages context menu
  • Reply to messages (quotedMessage)
  • Edit messages
  • Forward messages
  • Pin messages
  • Upload files
• CI/CD
  • Add Sentry
  • Add Umami tracking and events
  • Write make backup script
  • Add user in Docker images
  • #3
• Deploy! 🚀

ToDos

• Create deleteConversation query on backend
• Create deleteConversation query on frontend
• Wire up delete query with menu item

ToDos

• Context menu for messages
• Call createUmamiEvent
• Mutation
  • deleteMessage resolver
  • DeleteMessage operation on frontend
  • useMutation in context menu
• Subscription
  • messageDeleted resolver
  • MessageDeleted operation on frontend
  • useSubscription on frontend

ToDos

• Sounds
  • Play sounds only for new messages (not for all conversation updates)
• Chat List
  • Fix width for mobile screens
  • Fix width for large screens
  • Fix width to avoid horizontal scrollbar
  • Tooltips for all usernames
  • Tooltip for full latest message
  • Vertical scrolling
• Chat context menu
  • Hide items unavailable to user
  • Add "Chat Info" item
• "Create New Chat" modal:
  • Search as user types
• Messages:
  • Dates in message area (like Telegram web)
  • Some kind of "no messages yet" banner
  • Use "optimistic render" for sent messages so user avatars don't flicker
  • Show avatar and username in last message only
  • Hide avatar and username if there's only 2 participants in the chat
  • Markdown in messages
• Optimise for mobile devices
  • Debug scrolling to new messages on iPad

ToDos

• Overall
  • Change "brand" color to purple
• Chat list navbar:
  • "Create chat" button
  • WhatsApp-like dropdown menu (Profile, Sounds on/off, About app, Logout)
  • Profile info modal (open from menu or click on avatar)
  • About app modal
• Chat List
  • Search box below navbar
  • "Filter unread" button
  • Hide user's avatar in list items
• Messages navbar:
  • Dropdown menu (Chat Info, Delete, Leave)
  • Hide user's avatar in navbar
• Messages:
  • "No chat selected" – style and center
  • Limit max width of the messages area
  • Auto focus message input

Hi Alexander,
You're using Chakra and only adding the dark chakra-ui-dark class after the page has loaded, so in each browser you get this flash of white. However, you are not setting any background color for that dark mode, instead relying on a browser adding a dark backdrop for you. Not all of them do, and support for that at all is very recent.
Polypane only does this when you do not have a background set on your own which, unfortunately, you do, because you add a semi-transparent white background to the body at all times: var(--chakra-colors-whiteAlpha-200).
The best solution is to be explicit and add a dark background color to your body for your dark mode.
Hope that helps,

Best,

Kilian