Add descriptive text to QR code modal #6

We should add name, language, description, WAU, the preview URL and the join URL to the QR code modal.

I imagine something similar to this:

<div class="modal">
  <div class="left-section">
    <p>
      Name: XYZ<br />
      Language: %FLAG%<br />
      Description: Some descriptive text provided from the server (maybe in a code block?)<br/>
      Users: 1234<br/>
      Preview: <a href="https://example.com/r/token">https://example.com/r/token</a><br />
      Join URL: https://example.com/token?public_key=[0-f]{64} (maybe with another copy button?)
    </p>
  </div>
  <div class="right-section">
    <img src="qrcode.jpg" alt="QR code">
  </div>
</div>

.modal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.left-section {
  width: 40%; /* adjust as needed */
}
.right-section {
  width: 60%; /* adjust as needed */
}
img {
  width: 100%;
  object-fit: cover;
}

We should add name, language, description, WAU, the preview URL and the join URL to the QR code modal. I imagine something similar to this: ``` <div class="modal"> <div class="left-section"> <p> Name: XYZ<br /> Language: %FLAG%<br /> Description: Some descriptive text provided from the server (maybe in a code block?)<br/> Users: 1234<br/> Preview: <a href="https://example.com/r/token">https://example.com/r/token</a><br /> Join URL: https://example.com/token?public_key=[0-f]{64} (maybe with another copy button?) </p> </div> <div class="right-section"> <img src="qrcode.jpg" alt="QR code"> </div> </div> ``` ``` .modal { display: flex; flex-direction: row; justify-content: center; align-items: center; } .left-section { width: 40%; /* adjust as needed */ } .right-section { width: 60%; /* adjust as needed */ } img { width: 100%; object-fit: cover; } ```

This only benefits future mobile layouts with reduced info display. As the whole backend needs to be refactored before we consider restructuring the UI, this would not be good DX. It would inform the user of a QR code misclick, but those are only viable on mobile, scanning from the screen of which requires another mobile device. Low priority.

This only benefits future mobile layouts with reduced info display. As the whole backend needs to be refactored before we consider restructuring the UI, this would not be good DX. It *would* inform the user of a QR code misclick, but those are only viable on mobile, scanning from the screen of which requires another mobile device. Low priority.

@SomeGuy At this point, this is viable - a component can be constructed with placeholders for group details to be filled in on display. New priority?

Labels Milestones

Add descriptive text to QR code modal #6