fix(editor): add explanation to publicly visible switch

Fixes #6479

Signed-off-by: Philip Molares <philip.molares@udo.edu>

frontend/locales/en.json

@@ -448,7 +448,8 @@
         },
         "inconsistent": "This permission is overridden by another permission",
         "visibility": "Visibility",
-        "publiclyVisible": "Show on the public explore page"
+        "publiclyVisible": "Show on the public explore page",
+        "publiclyVisibleExplanation": "Activating this does not circumvent any permissions set.\nSo only users that are otherwise allowed to view this note, can find it on the public explore page."
       },
       "shareLink": {
         "title": "Share link",

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-section-visibility.tsx

@@ -10,7 +10,7 @@ import { useUiNotifications } from '../../../../../notifications/ui-notification
 import type { PermissionDisabledProps } from './permission-disabled.prop'
 import React, { type ChangeEvent, Fragment, useCallback } from 'react'
 import { Trans } from 'react-i18next'
-import { Form } from 'react-bootstrap'
+import { Form, OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 /**
  * Section in the permissions modal for managing whether the note should be visible on the explore page.
@@ -44,16 +44,33 @@ export const PermissionSectionVisibility: React.FC<PermissionDisabledProps> = ({
       </h5>
       <ul className={'list-group'}>
         <li className={'list-group-item'}>
-          <Form.Check
-            disabled={disabled}
-            reverse={true}
-            type={'switch'}
-            className={'d-flex flex-row align-items-center justify-content-between'}>
-            <Form.Check.Label>
-              <Trans i18nKey={'editor.modal.permissions.publiclyVisible'} />
-            </Form.Check.Label>
-            <Form.Check.Input disabled={disabled} onChange={onSetChangeVisibility} checked={currentVisibility} />
-          </Form.Check>
+          <OverlayTrigger
+            placement='bottom'
+            delay={{ show: 250, hide: 400 }}
+            overlay={
+              <Tooltip id='publiclyVisibleExplanation'>
+                <Trans i18nKey={'editor.modal.permissions.publiclyVisibleExplanation'} />
+              </Tooltip>
+            }>
+            {({ ref, ...triggerHandler }) => (
+              <Form.Check
+                disabled={disabled}
+                reverse={true}
+                type={'switch'}
+                className={'d-flex flex-row align-items-center justify-content-between'}>
+                <Form.Check.Label>
+                  <Trans i18nKey={'editor.modal.permissions.publiclyVisible'} />
+                </Form.Check.Label>
+                <Form.Check.Input
+                  disabled={disabled}
+                  onChange={onSetChangeVisibility}
+                  checked={currentVisibility}
+                  ref={ref}
+                  {...triggerHandler}
+                />
+              </Form.Check>
+            )}
+          </OverlayTrigger>
         </li>
       </ul>
     </Fragment>