Independent tooltip for missing permissions.

src/components/common/Tooltip.tsx

@@ -1,3 +1,5 @@
+import { Text } from "preact-i18n";
+import styled from "styled-components";
 import { Children } from "../../types/Preact";
 import Tippy, { TippyProps } from '@tippyjs/react';
 
@@ -17,3 +19,24 @@ export default function Tooltip(props: Props) {
         </Tippy>
     );
 }
+
+const PermissionTooltipBase = styled.div`
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    code {
+        font-family: 'Fira Mono';
+    }
+`;
+
+export function PermissionTooltip(props: Omit<Props, 'content'> & { permission: string }) {
+    const { permission, ...tooltipProps } = props;
+
+    return (
+        <Tooltip content={<PermissionTooltipBase>
+            <Text id="app.permissions.required" />
+            <code>{ permission }</code>
+        </PermissionTooltipBase>} {...tooltipProps} />
+    )
+}