Skip to content

Review design decisions in Inviting Collaborators #461

Open

Description

@pedrogaudencio

@pamvb while implementing the “Invite a collaborator” feature in Article Settings > Collaborators, I found a few details that were missing or unclear in the Figma files. I made the decisions below to complete the flow, so the current implementation differs from the designs in these areas.

Please confirm the intended behaviour:

Finding and adding collaborators

  • The search supports both username and name.

Collaborator table, displayed after adding a collaborator

  • Bulk actions: The design includes a “Select all” checkbox in the top left but doesn’t specify an associated action. I added “Remove selected”, which appears when one or more collaborators are selected.
  • Role dropdown: I implemented the role selector in the top right as a filter for the collaborator list.
  • Search: The design uses the placeholder “Search changes.” I adapted this to search for collaborators.
  • Profile pictures: I used circular avatars to stay consistent with the existing behavior.

Receiving an invitation

  • Inviting a collaborator creates a notification for the invited user.
  • The invited user also sees a notice bar with “Accept” and “Reject” buttons.

If any of these need to change, please update the expected behaviour and/or designs. @pieer should follow up on any required frontend updates.

Thanks! 🙏


Extra note: there is no responsive design so I didn't invest much time in the mobile version - this still needs a follow up (@pieer).

Activity

  1. pamvb commented on Oct 30, 2026

    @pamvb
    Collaborator

    Hey @pedrogaudencio, great job on this! 🙌

    I’ve updated the Settings screens and design the Collaborators flow in Figma, following what you built. I made a few changes, mostly to keep everything consistent with our design system and the rest of Forkana:

    👉 Figma – 08 · Settings and Collaborators flow

    Kept as you built it:

    • Search by username and name
    • Select all → Remove selected
    • Role filter and role per person
    • Access level dropdown
    • The picked person shown as a chip
    • “Invite {username}” button
    • Success banner after inviting
    • Notification and notice bar

    Small changes:

    • Placeholder: “Search collaborators” (the Figma said “Search changes”, a typo on my side)
    • “Invite a collaborator” instead of “Add a collaborator”, so the button and the dialog use the same word
    • Owner row at the top of the list (no checkbox, no actions)
    • “Waiting invite” shown as a Label, like “Owner”
    • Confirmation dialog before removing. “Remove” stays neutral in the list, and the red is in the dialog.
    • “Decline” instead of “Reject”
    • “User (required)” instead of “User *”. We now use “(required)” for every required field.
    • The Invite button shows “Invite” (disabled) until someone is picked, with the reason as a short line in the footer, instead of “Select a collaborator above”
    • Dialogs and the empty state now use our design system layout (same content and behaviour, different frame)

    One question: what happens if someone invites a person who’s already a collaborator? I can add those screens if needed.

    Each screen has notes underneath explaining the details, and @pieer has the front-end list in the “For Pierre” note at the top of the section.

    Maybe @taoeffect needs to review this first, but feel free to have a look and tell me what you think.

    Thanks!

  2. pedrogaudencio commented on Oct 30, 2026

    @pedrogaudencio
    CollaboratorAuthor

    Thanks @pamvb!

    One question: what happens if someone invites a person who’s already a collaborator? I can add those screens if needed.

    When inviting a collaborator, the search already removes any existing collaborators from the results so this scenario doesn't happen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions