Conversation
WalkthroughThis pull request introduces a new "Coming Soon" documentation section, restructures user and group management documentation from a Keycloak-centric approach to an in-UI admin interface workflow, and adds an announcement pill to the homepage. The changes include a new documentation category configuration, an index page with placeholders for upcoming features (Hub 1.5.0 and Desktop 1.19.0), significant content reorganization in the user-group-management documentation (shifting from external IAM management to in-UI workflows), new CSS styling for announcement pills, and a React component update to display the announcement on the homepage. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
src/pages/index.tsx (1)
18-22: Redundant wrapper<div>— the parent already centers inline-block childrenThe parent container has the
text--centerutility class (which setstext-align: center), so thedisplay: inline-blockpill will center itself without an extra block-level wrapper. The<div>adds no semantic value.♻️ Proposed simplification
- <div> - <Link to="/coming-soon" className={styles.announcementPill}> - ✨ Coming Soon → - </Link> - </div> + <Link to="/coming-soon" className={styles.announcementPill}> + ✨ Coming Soon → + </Link>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/index.tsx` around lines 18 - 22, Remove the redundant block-level wrapper around the announcement pill: instead of wrapping the Link (the element using className={styles.announcementPill}) in an extra <div>, render the Link directly as a child of the parent container that already has the text--center utility; this keeps the inline-block pill centered and removes the unnecessary DOM node while preserving the existing Link, its text ("✨ Coming Soon →") and the announcementPill class.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/hub/user-group-management.md`:
- Line 177: The sentence in the Hub docs contains a compound adjective that
needs suspended hyphenation; change "user and group related tasks" to "user- and
group-related tasks" in the sentence starting "You can access the Keycloak
management interface..." so the compound adjectives are correctly hyphenated.
- Around line 170-189: The release note's ":::info Enterprise Feature"
admonition is never closed and the ":::warning" was unintentionally nested;
close the enterprise info block immediately after its content by adding a
matching closing token (:::) right after the paragraph that ends with "Visit
[cryptomator.org](https://cryptomator.org/hub/) for more information about
Enterprise features.", then move the standalone ":::warning" admonition (the
paragraph about the `admin` and `syncer` accounts) outside and below that closed
info block so it applies globally; ensure you only use three-colon tokens
consistently (:::info ... ::: and :::warning ... :::) to properly open and close
each admonition.
In `@src/pages/index.module.css`:
- Around line 1-16: Add an explicit keyboard focus style and a smooth hover
transition to the .announcementPill to ensure accessible focus indication and
avoid abrupt hover changes: update the .announcementPill selector to include a
transition for background-color (and optionally color), and add a
.announcementPill:focus-visible rule that sets a clear, high-contrast outline or
box-shadow (and preserve border-radius) so keyboard users see a visible focus
ring; ensure :focus-visible only applies to the .announcementPill element and
does not rely on browser defaults.
---
Nitpick comments:
In `@src/pages/index.tsx`:
- Around line 18-22: Remove the redundant block-level wrapper around the
announcement pill: instead of wrapping the Link (the element using
className={styles.announcementPill}) in an extra <div>, render the Link directly
as a child of the parent container that already has the text--center utility;
this keeps the inline-block pill centered and removes the unnecessary DOM node
while preserving the existing Link, its text ("✨ Coming Soon →") and the
announcementPill class.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (7)
static/img/hub/group-add-member.pngis excluded by!**/*.pngstatic/img/hub/group-create.pngis excluded by!**/*.pngstatic/img/hub/group-detail.pngis excluded by!**/*.pngstatic/img/hub/group-list.pngis excluded by!**/*.pngstatic/img/hub/user-create.pngis excluded by!**/*.pngstatic/img/hub/user-detail.pngis excluded by!**/*.pngstatic/img/hub/user-list.pngis excluded by!**/*.png
📒 Files selected for processing (5)
docs/coming-soon/_category_.jsondocs/coming-soon/index.mddocs/hub/user-group-management.mdsrc/pages/index.module.csssrc/pages/index.tsx
| :::info Enterprise Feature | ||
| Connecting external identity and access management (IAM) solutions is available as an Enterprise feature. This allows you to: | ||
|
|
||
| - Synchronize users and groups from LDAP or Active Directory | ||
| - Delegate authentication via OpenID Connect or SAML | ||
| - Keep your user management centralized in your existing IAM | ||
|
|
||
| Cryptomator Hub supports user avatars. As an administrator, you can enable this feature in the administration area by creating a user "picture" profile attribute in the "User Profile" setting in the Realm in Keycloak. See [Keycloak Documentation](https://www.keycloak.org/ui-customization/avatars#_setting_a_picture_attribute_from_the_admin_console) for more information. | ||
| You can access the Keycloak management interface from the admin section of Hub. There you can perform all user and group related tasks, such as | ||
| [creating new users](https://www.keycloak.org/docs/latest/server_admin/index.html#proc-creating-user_server_administration_guide), | ||
| [deleting users](https://www.keycloak.org/docs/latest/server_admin/index.html#proc-deleting-user_server_administration_guide) or | ||
| [managing groups](https://www.keycloak.org/docs/latest/server_admin/index.html#proc-managing-groups_server_administration_guide). | ||
|
|
||
| Setting up LDAP synchronization is described in the [Keycloak documentation](https://www.keycloak.org/docs/latest/server_admin/#_ldap). | ||
| For OpenID Connect and SAML, the Keycloak documentation provides [general information](https://www.keycloak.org/docs/latest/server_admin/#_identity_broker). | ||
|
|
||
| Visit [cryptomator.org](https://cryptomator.org/hub/) for more information about Enterprise features. | ||
|
|
||
| When enabled, users can define their avatar in their Keycloak profile page. The avatar is then displayed in Cryptomator Hub, for example in the vault member list. | ||
| The avatar needs to be provided as a URL (e.g. https://path_to_image.png) or as a Base64 encoded data image (e.g. `data:image/svg+xml;base64,content`). | ||
| :::warning | ||
| Regardless of your IAM setup, your Hub instance always contains two system users: `admin` and `syncer`. **Do not edit or delete them!** These accounts are required for administration and synchronization tasks. | ||
| ::: |
There was a problem hiding this comment.
:::info Enterprise Feature is never closed — the :::warning must be outside it
Docusaurus admonitions can be nested, but require more colons for each parent level. Using the same three colons means :::warning (line 187) opens a nested directive inside the still-open :::info Enterprise Feature (line 170). The ::: at line 189 then closes only the inner warning, leaving the outer :::info unclosed and extending implicitly to the end of the file.
Beyond the parse problem, the warning text ("Regardless of your IAM setup…") applies to every user — not only enterprise users — so it should live after the enterprise info block, not inside it.
🐛 Proposed fix — close the info block before the warning
Visit [cryptomator.org](https://cryptomator.org/hub/) for more information about Enterprise features.
+:::
+
:::warning
Regardless of your IAM setup, your Hub instance always contains two system users: `admin` and `syncer`. **Do not edit or delete them!** These accounts are required for administration and synchronization tasks.
:::🧰 Tools
🪛 LanguageTool
[grammar] ~177-~177: Use a hyphen to join words.
Context: ...There you can perform all user and group related tasks, such as [creating new use...
(QB_NEW_EN_HYPHEN)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/hub/user-group-management.md` around lines 170 - 189, The release note's
":::info Enterprise Feature" admonition is never closed and the ":::warning" was
unintentionally nested; close the enterprise info block immediately after its
content by adding a matching closing token (:::) right after the paragraph that
ends with "Visit [cryptomator.org](https://cryptomator.org/hub/) for more
information about Enterprise features.", then move the standalone ":::warning"
admonition (the paragraph about the `admin` and `syncer` accounts) outside and
below that closed info block so it applies globally; ensure you only use
three-colon tokens consistently (:::info ... ::: and :::warning ... :::) to
properly open and close each admonition.
| - Keep your user management centralized in your existing IAM | ||
|
|
||
| Cryptomator Hub supports user avatars. As an administrator, you can enable this feature in the administration area by creating a user "picture" profile attribute in the "User Profile" setting in the Realm in Keycloak. See [Keycloak Documentation](https://www.keycloak.org/ui-customization/avatars#_setting_a_picture_attribute_from_the_admin_console) for more information. | ||
| You can access the Keycloak management interface from the admin section of Hub. There you can perform all user and group related tasks, such as |
There was a problem hiding this comment.
Minor grammar: hyphenate the compound adjective
"user and group related tasks" should be "user- and group-related tasks" (suspended hyphen).
✏️ Proposed fix
-There you can perform all user and group related tasks, such as
+There you can perform all user- and group-related tasks, such as📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| You can access the Keycloak management interface from the admin section of Hub. There you can perform all user and group related tasks, such as | |
| You can access the Keycloak management interface from the admin section of Hub. There you can perform all user- and group-related tasks, such as |
🧰 Tools
🪛 LanguageTool
[grammar] ~177-~177: Use a hyphen to join words.
Context: ...There you can perform all user and group related tasks, such as [creating new use...
(QB_NEW_EN_HYPHEN)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/hub/user-group-management.md` at line 177, The sentence in the Hub docs
contains a compound adjective that needs suspended hyphenation; change "user and
group related tasks" to "user- and group-related tasks" in the sentence starting
"You can access the Keycloak management interface..." so the compound adjectives
are correctly hyphenated.
| .announcementPill { | ||
| display: inline-block; | ||
| padding: 0.4rem 1rem; | ||
| margin-bottom: 1rem; | ||
| border-radius: 2rem; | ||
| background-color: rgba(255, 255, 255, 0.15); | ||
| color: white; | ||
| font-size: 0.9rem; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .announcementPill:hover { | ||
| background-color: rgba(255, 255, 255, 0.25); | ||
| color: white; | ||
| text-decoration: none; | ||
| } |
There was a problem hiding this comment.
Add a :focus-visible style for keyboard accessibility
There is no explicit focus indicator for the announcement pill. Docusaurus or the browser's default may be overridden or low-contrast against the primary hero background; adding an explicit outline ensures keyboard users always get a visible focus ring.
♿ Proposed addition
.announcementPill:hover {
background-color: rgba(255, 255, 255, 0.25);
color: white;
text-decoration: none;
}
+
+.announcementPill:focus-visible {
+ outline: 2px solid white;
+ outline-offset: 3px;
+}You may also want to add a transition for the hover background change to avoid the abrupt opacity jump:
.announcementPill {
display: inline-block;
padding: 0.4rem 1rem;
margin-bottom: 1rem;
border-radius: 2rem;
background-color: rgba(255, 255, 255, 0.15);
color: white;
font-size: 0.9rem;
text-decoration: none;
+ transition: background-color 0.2s ease;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .announcementPill { | |
| display: inline-block; | |
| padding: 0.4rem 1rem; | |
| margin-bottom: 1rem; | |
| border-radius: 2rem; | |
| background-color: rgba(255, 255, 255, 0.15); | |
| color: white; | |
| font-size: 0.9rem; | |
| text-decoration: none; | |
| } | |
| .announcementPill:hover { | |
| background-color: rgba(255, 255, 255, 0.25); | |
| color: white; | |
| text-decoration: none; | |
| } | |
| .announcementPill { | |
| display: inline-block; | |
| padding: 0.4rem 1rem; | |
| margin-bottom: 1rem; | |
| border-radius: 2rem; | |
| background-color: rgba(255, 255, 255, 0.15); | |
| color: white; | |
| font-size: 0.9rem; | |
| text-decoration: none; | |
| transition: background-color 0.2s ease; | |
| } | |
| .announcementPill:hover { | |
| background-color: rgba(255, 255, 255, 0.25); | |
| color: white; | |
| text-decoration: none; | |
| } | |
| .announcementPill:focus-visible { | |
| outline: 2px solid white; | |
| outline-offset: 3px; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/index.module.css` around lines 1 - 16, Add an explicit keyboard
focus style and a smooth hover transition to the .announcementPill to ensure
accessible focus indication and avoid abrupt hover changes: update the
.announcementPill selector to include a transition for background-color (and
optionally color), and add a .announcementPill:focus-visible rule that sets a
clear, high-contrast outline or box-shadow (and preserve border-radius) so
keyboard users see a visible focus ring; ensure :focus-visible only applies to
the .announcementPill element and does not rely on browser defaults.
2 participants
and "Coming soon" section.
Features to be included: