@drodil/backstage-plugin-qeta-react 3.28.2 → 3.29.1

package/dist/components/HomePageCards/ImpactCard.esm.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import numeral from 'numeral';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
 import 'react';
@@ -13,7 +13,8 @@ import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
-import { Box, Card, CardContent, Typography } from '@material-ui/core';
+import { Box, Card, CardContent, CircularProgress, Typography } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
 
 const ImpactCard = () => {
   const { t } = useTranslationRef(qetaTranslationRef);
@@ -22,19 +23,55 @@ const ImpactCard = () => {
     loading,
     error
   } = useQetaApi((api) => api.getUserImpact(), []);
-  if (loading || error || !response) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Box, { display: { md: "none", lg: "block" }, style: { marginBottom: "1em" }, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("impactCard.title") }),
-    /* @__PURE__ */ jsxs(Typography, { variant: "h5", children: [
-      response.impact >= 1e3 ? numeral(response.impact).format("0.0 a") : response.impact,
-      /* @__PURE__ */ jsx(Typography, { variant: "caption", style: { marginLeft: "1em" }, children: t("impactCard.views") })
-    ] }),
-    /* @__PURE__ */ jsx(Typography, { variant: "body2", children: t("impactCard.contributions", {
-      lastWeek: response.lastWeekImpact.toString(10)
-    }) })
-  ] }) }) });
+  const renderContent = () => {
+    if (loading) {
+      return /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: 2, children: /* @__PURE__ */ jsx(CircularProgress, { size: 24 }) });
+    }
+    if (error) {
+      return /* @__PURE__ */ jsx(Alert, { severity: "error", children: t("impactCard.error") });
+    }
+    if (!response) {
+      return null;
+    }
+    const formattedImpact = response.impact >= 1e3 ? numeral(response.impact).format("0.0 a") : response.impact;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", gutterBottom: true, children: t("impactCard.title") }),
+      /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", mb: 1, children: /* @__PURE__ */ jsxs(
+        Typography,
+        {
+          variant: "h5",
+          component: "p",
+          "aria-label": `${formattedImpact} views`,
+          children: [
+            formattedImpact,
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "caption",
+                component: "span",
+                style: { marginLeft: "1em" },
+                color: "textSecondary",
+                children: t("impactCard.views")
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: t("impactCard.contributions", {
+        lastWeek: response.lastWeekImpact.toString(10)
+      }) })
+    ] });
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      display: { md: "none", lg: "block" },
+      style: { marginBottom: "1em" },
+      role: "region",
+      "aria-label": t("impactCard.title"),
+      children: /* @__PURE__ */ jsx(Card, { elevation: 2, children: /* @__PURE__ */ jsx(CardContent, { children: renderContent() }) })
+    }
+  );
 };
 
 export { ImpactCard };

package/dist/components/HomePageCards/ImpactCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImpactCard.esm.js","sources":["../../../src/components/HomePageCards/ImpactCard.tsx"],"sourcesContent":["import numeral from 'numeral';\nimport { useQetaApi } from '../../hooks';\nimport { Box, Card, CardContent, Typography } from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nexport const ImpactCard = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(api => api.getUserImpact(), []);\n\n  if (loading || error || !response) {\n    return null;\n  }\n\n  return (\n    <Box display={{ md: 'none', lg: 'block' }} style={{ marginBottom: '1em' }}>\n      <Card>\n        <CardContent>\n          <Typography variant=\"h5\">{t('impactCard.title')}</Typography>\n          <Typography variant=\"h5\">\n            {response.impact >= 1000\n              ? numeral(response.impact).format('0.0 a')\n              : response.impact}\n            <Typography variant=\"caption\" style={{ marginLeft: '1em' }}>\n              {t('impactCard.views')}\n            </Typography>\n          </Typography>\n          <Typography variant=\"body2\">\n            {t('impactCard.contributions', {\n              lastWeek: response.lastWeekImpact.toString(10),\n            })}\n          </Typography>\n        </CardContent>\n      </Card>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAMO,MAAM,aAAa,MAAM;AAC9B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,MACE,UAAW,CAAA,CAAA,GAAA,KAAO,IAAI,aAAc,EAAA,EAAG,EAAE,CAAA;AAE7C,EAAI,IAAA,OAAA,IAAW,KAAS,IAAA,CAAC,QAAU,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,2BACG,GAAI,EAAA,EAAA,OAAA,EAAS,EAAE,EAAA,EAAI,QAAQ,EAAI,EAAA,OAAA,EAAW,EAAA,KAAA,EAAO,EAAE,YAAc,EAAA,KAAA,IAChE,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EACC,+BAAC,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IAAM,EAAA,QAAA,EAAA,CAAA,CAAE,kBAAkB,CAAE,EAAA,CAAA;AAAA,oBAChD,IAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IACjB,EAAA,QAAA,EAAA;AAAA,MAAS,QAAA,CAAA,MAAA,IAAU,MAChB,OAAQ,CAAA,QAAA,CAAS,MAAM,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA,GACvC,QAAS,CAAA,MAAA;AAAA,sBACb,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,KAAM,EAAA,EACtD,QAAE,EAAA,CAAA,CAAA,kBAAkB,CACvB,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EACjB,YAAE,0BAA4B,EAAA;AAAA,MAC7B,QAAU,EAAA,QAAA,CAAS,cAAe,CAAA,QAAA,CAAS,EAAE;AAAA,KAC9C,CACH,EAAA;AAAA,GAAA,EACF,GACF,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ImpactCard.esm.js","sources":["../../../src/components/HomePageCards/ImpactCard.tsx"],"sourcesContent":["import numeral from 'numeral';\nimport { useQetaApi } from '../../hooks';\nimport {\n  Box,\n  Card,\n  CardContent,\n  Typography,\n  CircularProgress,\n} from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { Alert } from '@material-ui/lab';\n\ninterface ImpactResponse {\n  impact: number;\n  lastWeekImpact: number;\n}\n\nexport const ImpactCard = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi<ImpactResponse>(api => api.getUserImpact(), []);\n\n  const renderContent = () => {\n    if (loading) {\n      return (\n        <Box display=\"flex\" justifyContent=\"center\" p={2}>\n          <CircularProgress size={24} />\n        </Box>\n      );\n    }\n\n    if (error) {\n      return <Alert severity=\"error\">{t('impactCard.error')}</Alert>;\n    }\n\n    if (!response) {\n      return null;\n    }\n\n    const formattedImpact =\n      response.impact >= 1000\n        ? numeral(response.impact).format('0.0 a')\n        : response.impact;\n\n    return (\n      <>\n        <Typography variant=\"h5\" component=\"h2\" gutterBottom>\n          {t('impactCard.title')}\n        </Typography>\n        <Box display=\"flex\" alignItems=\"center\" mb={1}>\n          <Typography\n            variant=\"h5\"\n            component=\"p\"\n            aria-label={`${formattedImpact} views`}\n          >\n            {formattedImpact}\n            <Typography\n              variant=\"caption\"\n              component=\"span\"\n              style={{ marginLeft: '1em' }}\n              color=\"textSecondary\"\n            >\n              {t('impactCard.views')}\n            </Typography>\n          </Typography>\n        </Box>\n        <Typography variant=\"body2\" color=\"textSecondary\">\n          {t('impactCard.contributions', {\n            lastWeek: response.lastWeekImpact.toString(10),\n          })}\n        </Typography>\n      </>\n    );\n  };\n\n  return (\n    <Box\n      display={{ md: 'none', lg: 'block' }}\n      style={{ marginBottom: '1em' }}\n      role=\"region\"\n      aria-label={t('impactCard.title')}\n    >\n      <Card elevation={2}>\n        <CardContent>{renderContent()}</CardContent>\n      </Card>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkBO,MAAM,aAAa,MAAM;AAC9B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,MACE,UAA2B,CAAA,CAAA,GAAA,KAAO,IAAI,aAAc,EAAA,EAAG,EAAE,CAAA;AAE7D,EAAA,MAAM,gBAAgB,MAAM;AAC1B,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,uBACG,GAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,cAAe,EAAA,QAAA,EAAS,CAAG,EAAA,CAAA,EAC7C,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA,EAAiB,IAAM,EAAA,EAAA,EAAI,CAC9B,EAAA,CAAA;AAAA;AAIJ,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,2BAAQ,KAAM,EAAA,EAAA,QAAA,EAAS,OAAS,EAAA,QAAA,EAAA,CAAA,CAAE,kBAAkB,CAAE,EAAA,CAAA;AAAA;AAGxD,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAO,OAAA,IAAA;AAAA;AAGT,IAAM,MAAA,eAAA,GACJ,QAAS,CAAA,MAAA,IAAU,GACf,GAAA,OAAA,CAAQ,QAAS,CAAA,MAAM,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA,GACvC,QAAS,CAAA,MAAA;AAEf,IAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,IAAK,EAAA,SAAA,EAAU,MAAK,YAAY,EAAA,IAAA,EACjD,QAAE,EAAA,CAAA,CAAA,kBAAkB,CACvB,EAAA,CAAA;AAAA,0BACC,GAAI,EAAA,EAAA,OAAA,EAAQ,QAAO,UAAW,EAAA,QAAA,EAAS,IAAI,CAC1C,EAAA,QAAA,kBAAA,IAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAU,EAAA,GAAA;AAAA,UACV,YAAA,EAAY,GAAG,eAAe,CAAA,MAAA,CAAA;AAAA,UAE7B,QAAA,EAAA;AAAA,YAAA,eAAA;AAAA,4BACD,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,OAAQ,EAAA,SAAA;AAAA,gBACR,SAAU,EAAA,MAAA;AAAA,gBACV,KAAA,EAAO,EAAE,UAAA,EAAY,KAAM,EAAA;AAAA,gBAC3B,KAAM,EAAA,eAAA;AAAA,gBAEL,YAAE,kBAAkB;AAAA;AAAA;AACvB;AAAA;AAAA,OAEJ,EAAA,CAAA;AAAA,0BACC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAQ,KAAM,EAAA,eAAA,EAC/B,YAAE,0BAA4B,EAAA;AAAA,QAC7B,QAAU,EAAA,QAAA,CAAS,cAAe,CAAA,QAAA,CAAS,EAAE;AAAA,OAC9C,CACH,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,GAEJ;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,EAAE,EAAI,EAAA,MAAA,EAAQ,IAAI,OAAQ,EAAA;AAAA,MACnC,KAAA,EAAO,EAAE,YAAA,EAAc,KAAM,EAAA;AAAA,MAC7B,IAAK,EAAA,QAAA;AAAA,MACL,YAAA,EAAY,EAAE,kBAAkB,CAAA;AAAA,MAEhC,QAAA,kBAAA,GAAA,CAAC,QAAK,SAAW,EAAA,CAAA,EACf,8BAAC,WAAa,EAAA,EAAA,QAAA,EAAA,aAAA,IAAgB,CAChC,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/HomePageCards/PostsCard.esm.js

@@ -27,6 +27,8 @@ import '@material-ui/icons/PlaylistAdd';
 import '@material-ui/icons/AddCircle';
 import '@material-ui/icons/RemoveCircle';
 import '../Buttons/ButtonContainer.esm.js';
+import '@material-ui/icons/ViewList';
+import '@material-ui/icons/ViewModule';
 import 'lodash';
 import 'react-use/lib/useDebounce';
 import 'file-type';

package/dist/components/HomePageCards/PostsCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostsCard.esm.js","sources":["../../../src/components/HomePageCards/PostsCard.tsx"],"sourcesContent":["import { PostsQuery, PostType } from '@drodil/backstage-plugin-qeta-common';\nimport { PostListItem } from '../PostsContainer';\nimport { useQetaApi } from '../../hooks';\nimport { Card, CardHeader, Divider, Grid } from '@material-ui/core';\n\nexport const PostsCard = (props: {\n  title: string;\n  options?: PostsQuery;\n  postType?: PostType;\n}) => {\n  const { value: response } = useQetaApi(\n    api =>\n      api.getPosts({\n        limit: 3,\n        type: props.postType,\n        includeAttachments: false,\n        includeExperts: false,\n        includeAnswers: false,\n        includeComments: false,\n        includeVotes: false,\n        includeTrend: false,\n        ...props.options,\n      }),\n    [],\n  );\n\n  const posts = response?.posts ?? [];\n  if (posts.length === 0) {\n    return null;\n  }\n\n  return (\n    <Card>\n      <CardHeader style={{ paddingBottom: '8px' }} title={props.title} />\n      <Grid container spacing={2}>\n        {posts.map(question => {\n          return (\n            <Grid item xs={12} key={question.id}>\n              <PostListItem post={question} type={props.postType} />\n              <Divider />\n            </Grid>\n          );\n        })}\n      </Grid>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKa,MAAA,SAAA,GAAY,CAAC,KAIpB,KAAA;AACJ,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAa,GAAA,UAAA;AAAA,IAC1B,CAAA,GAAA,KACE,IAAI,QAAS,CAAA;AAAA,MACX,KAAO,EAAA,CAAA;AAAA,MACP,MAAM,KAAM,CAAA,QAAA;AAAA,MACZ,kBAAoB,EAAA,KAAA;AAAA,MACpB,cAAgB,EAAA,KAAA;AAAA,MAChB,cAAgB,EAAA,KAAA;AAAA,MAChB,eAAiB,EAAA,KAAA;AAAA,MACjB,YAAc,EAAA,KAAA;AAAA,MACd,YAAc,EAAA,KAAA;AAAA,MACd,GAAG,KAAM,CAAA;AAAA,KACV,CAAA;AAAA,IACH;AAAC,GACH;AAEA,EAAM,MAAA,KAAA,GAAQ,QAAU,EAAA,KAAA,IAAS,EAAC;AAClC,EAAI,IAAA,KAAA,CAAM,WAAW,CAAG,EAAA;AACtB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,4BACG,IACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,OAAO,EAAE,aAAA,EAAe,OAAS,EAAA,KAAA,EAAO,MAAM,KAAO,EAAA,CAAA;AAAA,oBACjE,GAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CACtB,EAAA,QAAA,EAAA,KAAA,CAAM,IAAI,CAAY,QAAA,KAAA;AACrB,MAAA,uBACG,IAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,IAAA,EAAM,QAAU,EAAA,IAAA,EAAM,MAAM,QAAU,EAAA,CAAA;AAAA,4BACnD,OAAQ,EAAA,EAAA;AAAA,OAAA,EAAA,EAFa,SAAS,EAGjC,CAAA;AAAA,KAEH,CACH,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"PostsCard.esm.js","sources":["../../../src/components/HomePageCards/PostsCard.tsx"],"sourcesContent":["import { PostsQuery, PostType } from '@drodil/backstage-plugin-qeta-common';\nimport { PostListItem } from '../PostsContainer';\nimport { useQetaApi } from '../../hooks';\nimport { Card, CardHeader, Divider, Grid } from '@material-ui/core';\n\nexport const PostsCard = (props: {\n  title: string;\n  options?: PostsQuery;\n  postType?: PostType;\n}) => {\n  const { value: response } = useQetaApi(\n    api =>\n      api.getPosts({\n        limit: 3,\n        type: props.postType,\n        includeAttachments: false,\n        includeExperts: false,\n        includeAnswers: false,\n        includeComments: false,\n        includeVotes: false,\n        includeTrend: false,\n        ...props.options,\n      }),\n    [],\n  );\n\n  const posts = response?.posts ?? [];\n  if (posts.length === 0) {\n    return null;\n  }\n\n  return (\n    <Card>\n      <CardHeader style={{ paddingBottom: '8px' }} title={props.title} />\n      <Grid container spacing={2}>\n        {posts.map(question => {\n          return (\n            <Grid item xs={12} key={question.id}>\n              <PostListItem post={question} type={props.postType} />\n              <Divider />\n            </Grid>\n          );\n        })}\n      </Grid>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKa,MAAA,SAAA,GAAY,CAAC,KAIpB,KAAA;AACJ,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAa,GAAA,UAAA;AAAA,IAC1B,CAAA,GAAA,KACE,IAAI,QAAS,CAAA;AAAA,MACX,KAAO,EAAA,CAAA;AAAA,MACP,MAAM,KAAM,CAAA,QAAA;AAAA,MACZ,kBAAoB,EAAA,KAAA;AAAA,MACpB,cAAgB,EAAA,KAAA;AAAA,MAChB,cAAgB,EAAA,KAAA;AAAA,MAChB,eAAiB,EAAA,KAAA;AAAA,MACjB,YAAc,EAAA,KAAA;AAAA,MACd,YAAc,EAAA,KAAA;AAAA,MACd,GAAG,KAAM,CAAA;AAAA,KACV,CAAA;AAAA,IACH;AAAC,GACH;AAEA,EAAM,MAAA,KAAA,GAAQ,QAAU,EAAA,KAAA,IAAS,EAAC;AAClC,EAAI,IAAA,KAAA,CAAM,WAAW,CAAG,EAAA;AACtB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,4BACG,IACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,OAAO,EAAE,aAAA,EAAe,OAAS,EAAA,KAAA,EAAO,MAAM,KAAO,EAAA,CAAA;AAAA,oBACjE,GAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CACtB,EAAA,QAAA,EAAA,KAAA,CAAM,IAAI,CAAY,QAAA,KAAA;AACrB,MAAA,uBACG,IAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,IAAA,EAAM,QAAU,EAAA,IAAA,EAAM,MAAM,QAAU,EAAA,CAAA;AAAA,4BACnD,OAAQ,EAAA,EAAA;AAAA,OAAA,EAAA,EAFa,SAAS,EAGjC,CAAA;AAAA,KAEH,CACH,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/LeftMenu/LeftMenu.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { makeStyles, SvgIcon, MenuList, Box, ListItemIcon, ListItem, Typography, MenuItem } from '@material-ui/core';
+import { makeStyles, SvgIcon, MenuList, Box, ListItemIcon, Typography, Divider, MenuItem } from '@material-ui/core';
 import AccountBox from '@material-ui/icons/AccountBox';
 import LoyaltyOutlined from '@material-ui/icons/LoyaltyOutlined';
 import StarIcon from '@material-ui/icons/Star';
@@ -30,34 +30,63 @@ const useStyles = makeStyles(
     return {
       leftMenu: {
         top: "0",
-        width: "165px",
-        paddingTop: "1em"
+        width: "200px",
+        paddingTop: theme.spacing(2),
+        paddingBottom: theme.spacing(2),
+        transition: "all 0.2s ease-in-out"
       },
       inPopup: {
         marginRight: 0,
-        padding: "0.5rem"
+        padding: theme.spacing(1)
       },
       outsidePopup: {
-        marginRight: theme.spacing(5),
+        marginRight: theme.spacing(3),
         float: "right",
-        position: "sticky"
+        position: "sticky",
+        top: theme.spacing(2)
       },
       selectedMenuItem: {
         color: theme.palette.primary.contrastText,
-        backgroundColor: theme.palette.primary.light,
+        backgroundColor: theme.palette.primary.main,
         borderRadius: theme.shape.borderRadius,
+        margin: theme.spacing(0.5, 1),
+        padding: theme.spacing(0.75, 1.5),
+        transition: "all 0.2s ease-in-out",
         "&:hover": {
-          backgroundColor: theme.palette.primary.dark
+          backgroundColor: theme.palette.primary.dark,
+          color: theme.palette.primary.contrastText,
+          transform: "translateX(4px)"
         },
         "& svg": {
           color: theme.palette.primary.contrastText
         }
       },
       nonSelectedMenuItem: {
-        backgroundColor: "initial"
+        margin: theme.spacing(0.5, 1),
+        padding: theme.spacing(0.75, 1.5),
+        borderRadius: theme.shape.borderRadius,
+        transition: "all 0.2s ease-in-out",
+        color: theme.palette.text.primary,
+        "&:hover": {
+          backgroundColor: theme.palette.action.hover,
+          transform: "translateX(4px)"
+        }
       },
       menuIcon: {
-        minWidth: "26px"
+        minWidth: "32px",
+        color: "inherit"
+      },
+      sectionHeader: {
+        padding: theme.spacing(1, 2, 0.5, 2),
+        marginTop: theme.spacing(2),
+        color: theme.palette.text.secondary,
+        fontWeight: 600,
+        textTransform: "uppercase",
+        letterSpacing: "0.5px"
+      },
+      divider: {
+        margin: theme.spacing(1, 2),
+        backgroundColor: theme.palette.divider
       }
     };
   },
@@ -128,7 +157,8 @@ const LeftMenu = (props) => {
               /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(Home, { fontSize: "small" }) }),
               t("leftMenu.home")
             ] }),
-            /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: t("leftMenu.content") }) }),
+            /* @__PURE__ */ jsx(Typography, { className: styles.sectionHeader, children: t("leftMenu.content") }),
+            /* @__PURE__ */ jsx(Divider, { className: styles.divider }),
             /* @__PURE__ */ jsxs(CustomMenuItem, { route: questionsRoute(), hasSubRoutes: true, children: [
               /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(HelpOutlined, { fontSize: "small" }) }),
               t("leftMenu.questions")
@@ -149,7 +179,8 @@ const LeftMenu = (props) => {
               /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(LoyaltyOutlined, { fontSize: "small" }) }),
               t("leftMenu.tags")
             ] }),
-            /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: t("leftMenu.community") }) }),
+            /* @__PURE__ */ jsx(Typography, { className: styles.sectionHeader, children: t("leftMenu.community") }),
+            /* @__PURE__ */ jsx(Divider, { className: styles.divider }),
             /* @__PURE__ */ jsxs(CustomMenuItem, { route: collectionsRoute(), hasSubRoutes: true, children: [
               /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(PlaylistPlay, { fontSize: "small" }) }),
               t("leftMenu.collections")
@@ -167,7 +198,8 @@ const LeftMenu = (props) => {
               t("leftMenu.statistics")
             ] }),
             isModerator && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: t("leftMenu.manage") }) }),
+              /* @__PURE__ */ jsx(Typography, { className: styles.sectionHeader, children: t("leftMenu.manage") }),
+              /* @__PURE__ */ jsx(Divider, { className: styles.divider }),
               /* @__PURE__ */ jsxs(CustomMenuItem, { route: moderatorRoute(), children: [
                 /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(SettingsIcon, {}) }),
                 t("leftMenu.moderate")

package/dist/components/LeftMenu/LeftMenu.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftMenu.esm.js","sources":["../../../src/components/LeftMenu/LeftMenu.tsx"],"sourcesContent":["import {\n  Box,\n  ListItem,\n  ListItemIcon,\n  makeStyles,\n  MenuItem,\n  MenuList,\n  SvgIcon,\n  Typography,\n} from '@material-ui/core';\nimport AccountBox from '@material-ui/icons/AccountBox';\nimport LoyaltyOutlined from '@material-ui/icons/LoyaltyOutlined';\nimport StarIcon from '@material-ui/icons/Star';\nimport { KeyboardEvent, MouseEvent, ReactNode } from 'react';\nimport { useApp, useRouteRef } from '@backstage/core-plugin-api';\nimport HelpOutlined from '@material-ui/icons/HelpOutlined';\nimport { useNavigate } from 'react-router-dom';\nimport Home from '@material-ui/icons/Home';\nimport { useLocation } from 'react-use';\nimport CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';\nimport PlaylistPlay from '@material-ui/icons/PlaylistPlay';\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport { GroupIcon } from '@backstage/core-components';\nimport {\n  articlesRouteRef,\n  collectionsRouteRef,\n  entitiesRouteRef,\n  favoriteQuestionsRouteRef,\n  moderatorRouteRef,\n  qetaRouteRef,\n  questionsRouteRef,\n  statisticsRouteRef,\n  tagsRouteRef,\n  userRouteRef,\n  usersRouteRef,\n} from '../../routes';\nimport { TrophyIcon } from '../TopRankingUsersCard';\nimport { useIdentityApi, useIsModerator } from '../../hooks';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nexport type QetaLeftMenuClassKey =\n  | 'leftMenu'\n  | 'inPopup'\n  | 'outsidePopup'\n  | 'selectedMenuItem'\n  | 'nonSelectedMenuItem'\n  | 'menuIcon';\n\nexport const useStyles = makeStyles(\n  theme => {\n    return {\n      leftMenu: {\n        top: '0',\n        width: '165px',\n        paddingTop: '1em',\n      },\n      inPopup: {\n        marginRight: 0,\n        padding: '0.5rem',\n      },\n      outsidePopup: {\n        marginRight: theme.spacing(5),\n        float: 'right',\n        position: 'sticky',\n      },\n      selectedMenuItem: {\n        color: theme.palette.primary.contrastText,\n        backgroundColor: theme.palette.primary.light,\n        borderRadius: theme.shape.borderRadius,\n        '&:hover': {\n          backgroundColor: theme.palette.primary.dark,\n        },\n        '& svg': {\n          color: theme.palette.primary.contrastText,\n        },\n      },\n      nonSelectedMenuItem: {\n        backgroundColor: 'initial',\n      },\n      menuIcon: {\n        minWidth: '26px',\n      },\n    };\n  },\n  { name: 'QetaLeftMenu' },\n);\n\nexport const LeftMenu = (props: {\n  onKeyDown?: (event: KeyboardEvent) => void;\n  autoFocusItem?: boolean;\n  onClick?: (event: MouseEvent<EventTarget>) => void;\n  inPopup?: boolean;\n}) => {\n  const rootRoute = useRouteRef(qetaRouteRef);\n  const tagsRoute = useRouteRef(tagsRouteRef);\n  const favoritesRoute = useRouteRef(favoriteQuestionsRouteRef);\n  const statisticsRoute = useRouteRef(statisticsRouteRef);\n  const userRoute = useRouteRef(userRouteRef);\n  const questionsRoute = useRouteRef(questionsRouteRef);\n  const articlesRoute = useRouteRef(articlesRouteRef);\n  const collectionsRoute = useRouteRef(collectionsRouteRef);\n  const entitiesRoute = useRouteRef(entitiesRouteRef);\n  const usersRoute = useRouteRef(usersRouteRef);\n  const moderatorRoute = useRouteRef(moderatorRouteRef);\n  const styles = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const location = useLocation();\n  const navigate = useNavigate();\n  const { isModerator } = useIsModerator();\n  const app = useApp();\n  const {\n    value: user,\n    loading: loadingUser,\n    error: userError,\n  } = useIdentityApi(api => api.getBackstageIdentity(), []);\n\n  const CustomMenuItem = ({\n    route,\n    hasSubRoutes,\n    children,\n  }: {\n    route: string;\n    hasSubRoutes?: boolean;\n    children: ReactNode[];\n  }) => {\n    return (\n      <MenuItem\n        onClick={e => {\n          if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) {\n            return;\n          }\n          e.preventDefault();\n          navigate(route);\n          if (props.onClick) {\n            props.onClick(e);\n          }\n        }}\n        className={\n          route === location.pathname ||\n          (hasSubRoutes && location.pathname?.startsWith(route))\n            ? styles.selectedMenuItem\n            : styles.nonSelectedMenuItem\n        }\n        href={route}\n        component=\"a\"\n      >\n        {children}\n      </MenuItem>\n    );\n  };\n\n  const EntityIcon = app.getSystemIcon('kind:system') ?? SvgIcon;\n\n  return (\n    <MenuList\n      id=\"left-menu\"\n      className={`${styles.leftMenu} ${\n        props.inPopup ? styles.inPopup : styles.outsidePopup\n      }`}\n      onKeyDown={props.onKeyDown}\n      autoFocusItem={props.autoFocusItem}\n    >\n      <Box\n        display={\n          props.inPopup\n            ? {}\n            : { xs: 'none', sm: 'none', md: 'none', lg: 'block' }\n        }\n      >\n        <CustomMenuItem route={rootRoute()}>\n          <ListItemIcon className={styles.menuIcon}>\n            <Home fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.home')}\n        </CustomMenuItem>\n        <ListItem>\n          <Typography variant=\"subtitle2\">{t('leftMenu.content')}</Typography>\n        </ListItem>\n        <CustomMenuItem route={questionsRoute()} hasSubRoutes>\n          <ListItemIcon className={styles.menuIcon}>\n            <HelpOutlined fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.questions')}\n        </CustomMenuItem>\n        <CustomMenuItem route={articlesRoute()} hasSubRoutes>\n          <ListItemIcon className={styles.menuIcon}>\n            <CollectionsBookmarkIcon fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.articles')}\n        </CustomMenuItem>\n        <CustomMenuItem route={favoritesRoute()}>\n          <ListItemIcon className={styles.menuIcon}>\n            <StarIcon fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.favoriteQuestions')}\n        </CustomMenuItem>\n        <CustomMenuItem route={entitiesRoute()} hasSubRoutes>\n          <ListItemIcon className={styles.menuIcon}>\n            <EntityIcon fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.entities')}\n        </CustomMenuItem>\n        <CustomMenuItem route={tagsRoute()} hasSubRoutes>\n          <ListItemIcon className={styles.menuIcon}>\n            <LoyaltyOutlined fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.tags')}\n        </CustomMenuItem>\n        <ListItem>\n          <Typography variant=\"subtitle2\">{t('leftMenu.community')}</Typography>\n        </ListItem>\n        <CustomMenuItem route={collectionsRoute()} hasSubRoutes>\n          <ListItemIcon className={styles.menuIcon}>\n            <PlaylistPlay fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.collections')}\n        </CustomMenuItem>\n        <CustomMenuItem route={usersRoute()}>\n          <ListItemIcon className={styles.menuIcon}>\n            <GroupIcon fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.users')}\n        </CustomMenuItem>\n        {user && !loadingUser && !userError && (\n          <CustomMenuItem route={`${userRoute()}/${user.userEntityRef}`}>\n            <ListItemIcon className={styles.menuIcon}>\n              <AccountBox fontSize=\"small\" />\n            </ListItemIcon>\n            {t('leftMenu.profile')}\n          </CustomMenuItem>\n        )}\n        <CustomMenuItem route={statisticsRoute()}>\n          <ListItemIcon className={styles.menuIcon}>\n            <TrophyIcon />\n          </ListItemIcon>\n          {t('leftMenu.statistics')}\n        </CustomMenuItem>\n        {isModerator && (\n          <>\n            <ListItem>\n              <Typography variant=\"subtitle2\">\n                {t('leftMenu.manage')}\n              </Typography>\n            </ListItem>\n            <CustomMenuItem route={moderatorRoute()}>\n              <ListItemIcon className={styles.menuIcon}>\n                <SettingsIcon />\n              </ListItemIcon>\n              {t('leftMenu.moderate')}\n            </CustomMenuItem>\n          </>\n        )}\n      </Box>\n    </MenuList>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"LeftMenu.esm.js","sources":["../../../src/components/LeftMenu/LeftMenu.tsx"],"sourcesContent":["import {\n  Box,\n  Divider,\n  ListItemIcon,\n  makeStyles,\n  MenuItem,\n  MenuList,\n  SvgIcon,\n  Typography,\n} from '@material-ui/core';\nimport AccountBox from '@material-ui/icons/AccountBox';\nimport LoyaltyOutlined from '@material-ui/icons/LoyaltyOutlined';\nimport StarIcon from '@material-ui/icons/Star';\nimport { KeyboardEvent, MouseEvent, ReactNode } from 'react';\nimport { useApp, useRouteRef } from '@backstage/core-plugin-api';\nimport HelpOutlined from '@material-ui/icons/HelpOutlined';\nimport { useNavigate } from 'react-router-dom';\nimport Home from '@material-ui/icons/Home';\nimport { useLocation } from 'react-use';\nimport CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';\nimport PlaylistPlay from '@material-ui/icons/PlaylistPlay';\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport { GroupIcon } from '@backstage/core-components';\nimport {\n  articlesRouteRef,\n  collectionsRouteRef,\n  entitiesRouteRef,\n  favoriteQuestionsRouteRef,\n  moderatorRouteRef,\n  qetaRouteRef,\n  questionsRouteRef,\n  statisticsRouteRef,\n  tagsRouteRef,\n  userRouteRef,\n  usersRouteRef,\n} from '../../routes';\nimport { TrophyIcon } from '../TopRankingUsersCard';\nimport { useIdentityApi, useIsModerator } from '../../hooks';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nexport type QetaLeftMenuClassKey =\n  | 'leftMenu'\n  | 'inPopup'\n  | 'outsidePopup'\n  | 'selectedMenuItem'\n  | 'nonSelectedMenuItem'\n  | 'menuIcon';\n\nexport const useStyles = makeStyles(\n  theme => {\n    return {\n      leftMenu: {\n        top: '0',\n        width: '200px',\n        paddingTop: theme.spacing(2),\n        paddingBottom: theme.spacing(2),\n        transition: 'all 0.2s ease-in-out',\n      },\n      inPopup: {\n        marginRight: 0,\n        padding: theme.spacing(1),\n      },\n      outsidePopup: {\n        marginRight: theme.spacing(3),\n        float: 'right',\n        position: 'sticky',\n        top: theme.spacing(2),\n      },\n      selectedMenuItem: {\n        color: theme.palette.primary.contrastText,\n        backgroundColor: theme.palette.primary.main,\n        borderRadius: theme.shape.borderRadius,\n        margin: theme.spacing(0.5, 1),\n        padding: theme.spacing(0.75, 1.5),\n        transition: 'all 0.2s ease-in-out',\n        '&:hover': {\n          backgroundColor: theme.palette.primary.dark,\n          color: theme.palette.primary.contrastText,\n          transform: 'translateX(4px)',\n        },\n        '& svg': {\n          color: theme.palette.primary.contrastText,\n        },\n      },\n      nonSelectedMenuItem: {\n        margin: theme.spacing(0.5, 1),\n        padding: theme.spacing(0.75, 1.5),\n        borderRadius: theme.shape.borderRadius,\n        transition: 'all 0.2s ease-in-out',\n        color: theme.palette.text.primary,\n        '&:hover': {\n          backgroundColor: theme.palette.action.hover,\n          transform: 'translateX(4px)',\n        },\n      },\n      menuIcon: {\n        minWidth: '32px',\n        color: 'inherit',\n      },\n      sectionHeader: {\n        padding: theme.spacing(1, 2, 0.5, 2),\n        marginTop: theme.spacing(2),\n        color: theme.palette.text.secondary,\n        fontWeight: 600,\n        textTransform: 'uppercase',\n        letterSpacing: '0.5px',\n      },\n      divider: {\n        margin: theme.spacing(1, 2),\n        backgroundColor: theme.palette.divider,\n      },\n    };\n  },\n  { name: 'QetaLeftMenu' },\n);\n\nexport const LeftMenu = (props: {\n  onKeyDown?: (event: KeyboardEvent) => void;\n  autoFocusItem?: boolean;\n  onClick?: (event: MouseEvent<EventTarget>) => void;\n  inPopup?: boolean;\n}) => {\n  const rootRoute = useRouteRef(qetaRouteRef);\n  const tagsRoute = useRouteRef(tagsRouteRef);\n  const favoritesRoute = useRouteRef(favoriteQuestionsRouteRef);\n  const statisticsRoute = useRouteRef(statisticsRouteRef);\n  const userRoute = useRouteRef(userRouteRef);\n  const questionsRoute = useRouteRef(questionsRouteRef);\n  const articlesRoute = useRouteRef(articlesRouteRef);\n  const collectionsRoute = useRouteRef(collectionsRouteRef);\n  const entitiesRoute = useRouteRef(entitiesRouteRef);\n  const usersRoute = useRouteRef(usersRouteRef);\n  const moderatorRoute = useRouteRef(moderatorRouteRef);\n  const styles = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const location = useLocation();\n  const navigate = useNavigate();\n  const { isModerator } = useIsModerator();\n  const app = useApp();\n  const {\n    value: user,\n    loading: loadingUser,\n    error: userError,\n  } = useIdentityApi(api => api.getBackstageIdentity(), []);\n\n  const CustomMenuItem = ({\n    route,\n    hasSubRoutes,\n    children,\n  }: {\n    route: string;\n    hasSubRoutes?: boolean;\n    children: ReactNode[];\n  }) => {\n    return (\n      <MenuItem\n        onClick={e => {\n          if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) {\n            return;\n          }\n          e.preventDefault();\n          navigate(route);\n          if (props.onClick) {\n            props.onClick(e);\n          }\n        }}\n        className={\n          route === location.pathname ||\n          (hasSubRoutes && location.pathname?.startsWith(route))\n            ? styles.selectedMenuItem\n            : styles.nonSelectedMenuItem\n        }\n        href={route}\n        component=\"a\"\n      >\n        {children}\n      </MenuItem>\n    );\n  };\n\n  const EntityIcon = app.getSystemIcon('kind:system') ?? SvgIcon;\n\n  return (\n    <MenuList\n      id=\"left-menu\"\n      className={`${styles.leftMenu} ${\n        props.inPopup ? styles.inPopup : styles.outsidePopup\n      }`}\n      onKeyDown={props.onKeyDown}\n      autoFocusItem={props.autoFocusItem}\n    >\n      <Box\n        display={\n          props.inPopup\n            ? {}\n            : { xs: 'none', sm: 'none', md: 'none', lg: 'block' }\n        }\n      >\n        <CustomMenuItem route={rootRoute()}>\n          <ListItemIcon className={styles.menuIcon}>\n            <Home fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.home')}\n        </CustomMenuItem>\n\n        <Typography className={styles.sectionHeader}>\n          {t('leftMenu.content')}\n        </Typography>\n        <Divider className={styles.divider} />\n\n        <CustomMenuItem route={questionsRoute()} hasSubRoutes>\n          <ListItemIcon className={styles.menuIcon}>\n            <HelpOutlined fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.questions')}\n        </CustomMenuItem>\n\n        <CustomMenuItem route={articlesRoute()} hasSubRoutes>\n          <ListItemIcon className={styles.menuIcon}>\n            <CollectionsBookmarkIcon fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.articles')}\n        </CustomMenuItem>\n\n        <CustomMenuItem route={favoritesRoute()}>\n          <ListItemIcon className={styles.menuIcon}>\n            <StarIcon fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.favoriteQuestions')}\n        </CustomMenuItem>\n\n        <CustomMenuItem route={entitiesRoute()} hasSubRoutes>\n          <ListItemIcon className={styles.menuIcon}>\n            <EntityIcon fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.entities')}\n        </CustomMenuItem>\n\n        <CustomMenuItem route={tagsRoute()} hasSubRoutes>\n          <ListItemIcon className={styles.menuIcon}>\n            <LoyaltyOutlined fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.tags')}\n        </CustomMenuItem>\n\n        <Typography className={styles.sectionHeader}>\n          {t('leftMenu.community')}\n        </Typography>\n        <Divider className={styles.divider} />\n\n        <CustomMenuItem route={collectionsRoute()} hasSubRoutes>\n          <ListItemIcon className={styles.menuIcon}>\n            <PlaylistPlay fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.collections')}\n        </CustomMenuItem>\n\n        <CustomMenuItem route={usersRoute()}>\n          <ListItemIcon className={styles.menuIcon}>\n            <GroupIcon fontSize=\"small\" />\n          </ListItemIcon>\n          {t('leftMenu.users')}\n        </CustomMenuItem>\n\n        {user && !loadingUser && !userError && (\n          <CustomMenuItem route={`${userRoute()}/${user.userEntityRef}`}>\n            <ListItemIcon className={styles.menuIcon}>\n              <AccountBox fontSize=\"small\" />\n            </ListItemIcon>\n            {t('leftMenu.profile')}\n          </CustomMenuItem>\n        )}\n\n        <CustomMenuItem route={statisticsRoute()}>\n          <ListItemIcon className={styles.menuIcon}>\n            <TrophyIcon />\n          </ListItemIcon>\n          {t('leftMenu.statistics')}\n        </CustomMenuItem>\n\n        {isModerator && (\n          <>\n            <Typography className={styles.sectionHeader}>\n              {t('leftMenu.manage')}\n            </Typography>\n            <Divider className={styles.divider} />\n\n            <CustomMenuItem route={moderatorRoute()}>\n              <ListItemIcon className={styles.menuIcon}>\n                <SettingsIcon />\n              </ListItemIcon>\n              {t('leftMenu.moderate')}\n            </CustomMenuItem>\n          </>\n        )}\n      </Box>\n    </MenuList>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Links/Links.esm.js

@@ -12,6 +12,7 @@ import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
 import { UserTooltip } from '../TagsAndEntities/UserChip.esm.js';
 import { Tooltip } from '@material-ui/core';
+import { useTooltipStyles } from '../../hooks/useTooltipStyles.esm.js';
 
 const UserLink = (props) => {
   const { entityRef, linkProps, anonymous } = props;
@@ -20,6 +21,7 @@ const UserLink = (props) => {
     entityRef,
     anonymous ?? entityRef === "anonymous"
   );
+  const classes = useTooltipStyles();
   return /* @__PURE__ */ jsx(
     Tooltip,
     {
@@ -27,6 +29,10 @@ const UserLink = (props) => {
       title: /* @__PURE__ */ jsx(UserTooltip, { entityRef, anonymous }),
       enterDelay: 400,
       interactive: true,
+      classes: {
+        tooltip: classes.tooltip,
+        arrow: classes.tooltipArrow
+      },
       children: /* @__PURE__ */ jsx(Link, { to: `${userRoute()}/${entityRef}`, ...linkProps, children: name })
     }
   );

package/dist/components/Links/Links.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Links.esm.js","sources":["../../../src/components/Links/Links.tsx"],"sourcesContent":["import { useRouteRef } from '@backstage/core-plugin-api';\nimport { Link, LinkProps } from '@backstage/core-components';\nimport { userRouteRef } from '../../routes';\nimport { Answer, Comment, Post } from '@drodil/backstage-plugin-qeta-common';\nimport { useUserInfo } from '../../hooks';\nimport { UserTooltip } from '../TagsAndEntities/UserChip';\nimport { Tooltip } from '@material-ui/core';\n\nexport const UserLink = (props: {\n  entityRef: string;\n  anonymous?: boolean;\n  linkProps?: LinkProps;\n}) => {\n  const { entityRef, linkProps, anonymous } = props;\n  const userRoute = useRouteRef(userRouteRef);\n  const { name } = useUserInfo(\n    entityRef,\n    anonymous ?? entityRef === 'anonymous',\n  );\n  return (\n    <Tooltip\n      arrow\n      title={<UserTooltip entityRef={entityRef} anonymous={anonymous} />}\n      enterDelay={400}\n      interactive\n    >\n      <Link to={`${userRoute()}/${entityRef}`} {...linkProps}>\n        {name}\n      </Link>\n    </Tooltip>\n  );\n};\n\nexport const AuthorLink = (props: {\n  entity: Post | Answer | Comment;\n  linkProps?: LinkProps;\n}) => {\n  const { entity, linkProps } = props;\n  return (\n    <UserLink\n      entityRef={entity.author}\n      linkProps={linkProps}\n      anonymous={'anonymous' in entity ? entity.anonymous : undefined}\n    />\n  );\n};\n\nexport const UpdatedByLink = (props: {\n  entity: Post | Answer | Comment;\n  linkProps?: LinkProps;\n}) => {\n  const { entity, linkProps } = props;\n  if (!entity.updatedBy) {\n    return null;\n  }\n  return (\n    <UserLink\n      entityRef={entity.updatedBy}\n      linkProps={linkProps}\n      anonymous={'anonymous' in entity ? entity.anonymous : undefined}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAQa,MAAA,QAAA,GAAW,CAAC,KAInB,KAAA;AACJ,EAAA,MAAM,EAAE,SAAA,EAAW,SAAW,EAAA,SAAA,EAAc,GAAA,KAAA;AAC5C,EAAM,MAAA,SAAA,GAAY,YAAY,YAAY,CAAA;AAC1C,EAAM,MAAA,EAAE,MAAS,GAAA,WAAA;AAAA,IACf,SAAA;AAAA,IACA,aAAa,SAAc,KAAA;AAAA,GAC7B;AACA,EACE,uBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAK,EAAA,IAAA;AAAA,MACL,KAAO,kBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,SAAA,EAAsB,SAAsB,EAAA,CAAA;AAAA,MAChE,UAAY,EAAA,GAAA;AAAA,MACZ,WAAW,EAAA,IAAA;AAAA,MAEX,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAI,CAAG,EAAA,SAAA,EAAW,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAAK,GAAG,SAAA,EAC1C,QACH,EAAA,IAAA,EAAA;AAAA;AAAA,GACF;AAEJ;AAEa,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAM,MAAA,EAAE,MAAQ,EAAA,SAAA,EAAc,GAAA,KAAA;AAC9B,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,MAAA;AAAA,MAClB,SAAA;AAAA,MACA,SAAW,EAAA,WAAA,IAAe,MAAS,GAAA,MAAA,CAAO,SAAY,GAAA,KAAA;AAAA;AAAA,GACxD;AAEJ;AAEa,MAAA,aAAA,GAAgB,CAAC,KAGxB,KAAA;AACJ,EAAM,MAAA,EAAE,MAAQ,EAAA,SAAA,EAAc,GAAA,KAAA;AAC9B,EAAI,IAAA,CAAC,OAAO,SAAW,EAAA;AACrB,IAAO,OAAA,IAAA;AAAA;AAET,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,SAAA;AAAA,MAClB,SAAA;AAAA,MACA,SAAW,EAAA,WAAA,IAAe,MAAS,GAAA,MAAA,CAAO,SAAY,GAAA,KAAA;AAAA;AAAA,GACxD;AAEJ;;;;"}
+{"version":3,"file":"Links.esm.js","sources":["../../../src/components/Links/Links.tsx"],"sourcesContent":["import { useRouteRef } from '@backstage/core-plugin-api';\nimport { Link, LinkProps } from '@backstage/core-components';\nimport { userRouteRef } from '../../routes';\nimport { Answer, Comment, Post } from '@drodil/backstage-plugin-qeta-common';\nimport { useUserInfo } from '../../hooks';\nimport { UserTooltip } from '../TagsAndEntities/UserChip';\nimport { Tooltip } from '@material-ui/core';\nimport { useTooltipStyles } from '../../hooks/useTooltipStyles';\n\nexport const UserLink = (props: {\n  entityRef: string;\n  anonymous?: boolean;\n  linkProps?: LinkProps;\n}) => {\n  const { entityRef, linkProps, anonymous } = props;\n  const userRoute = useRouteRef(userRouteRef);\n  const { name } = useUserInfo(\n    entityRef,\n    anonymous ?? entityRef === 'anonymous',\n  );\n  const classes = useTooltipStyles();\n  return (\n    <Tooltip\n      arrow\n      title={<UserTooltip entityRef={entityRef} anonymous={anonymous} />}\n      enterDelay={400}\n      interactive\n      classes={{\n        tooltip: classes.tooltip,\n        arrow: classes.tooltipArrow,\n      }}\n    >\n      <Link to={`${userRoute()}/${entityRef}`} {...linkProps}>\n        {name}\n      </Link>\n    </Tooltip>\n  );\n};\n\nexport const AuthorLink = (props: {\n  entity: Post | Answer | Comment;\n  linkProps?: LinkProps;\n}) => {\n  const { entity, linkProps } = props;\n  return (\n    <UserLink\n      entityRef={entity.author}\n      linkProps={linkProps}\n      anonymous={'anonymous' in entity ? entity.anonymous : undefined}\n    />\n  );\n};\n\nexport const UpdatedByLink = (props: {\n  entity: Post | Answer | Comment;\n  linkProps?: LinkProps;\n}) => {\n  const { entity, linkProps } = props;\n  if (!entity.updatedBy) {\n    return null;\n  }\n  return (\n    <UserLink\n      entityRef={entity.updatedBy}\n      linkProps={linkProps}\n      anonymous={'anonymous' in entity ? entity.anonymous : undefined}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AASa,MAAA,QAAA,GAAW,CAAC,KAInB,KAAA;AACJ,EAAA,MAAM,EAAE,SAAA,EAAW,SAAW,EAAA,SAAA,EAAc,GAAA,KAAA;AAC5C,EAAM,MAAA,SAAA,GAAY,YAAY,YAAY,CAAA;AAC1C,EAAM,MAAA,EAAE,MAAS,GAAA,WAAA;AAAA,IACf,SAAA;AAAA,IACA,aAAa,SAAc,KAAA;AAAA,GAC7B;AACA,EAAA,MAAM,UAAU,gBAAiB,EAAA;AACjC,EACE,uBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAK,EAAA,IAAA;AAAA,MACL,KAAO,kBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,SAAA,EAAsB,SAAsB,EAAA,CAAA;AAAA,MAChE,UAAY,EAAA,GAAA;AAAA,MACZ,WAAW,EAAA,IAAA;AAAA,MACX,OAAS,EAAA;AAAA,QACP,SAAS,OAAQ,CAAA,OAAA;AAAA,QACjB,OAAO,OAAQ,CAAA;AAAA,OACjB;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAI,CAAG,EAAA,SAAA,EAAW,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAAK,GAAG,SAAA,EAC1C,QACH,EAAA,IAAA,EAAA;AAAA;AAAA,GACF;AAEJ;AAEa,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAM,MAAA,EAAE,MAAQ,EAAA,SAAA,EAAc,GAAA,KAAA;AAC9B,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,MAAA;AAAA,MAClB,SAAA;AAAA,MACA,SAAW,EAAA,WAAA,IAAe,MAAS,GAAA,MAAA,CAAO,SAAY,GAAA,KAAA;AAAA;AAAA,GACxD;AAEJ;AAEa,MAAA,aAAA,GAAgB,CAAC,KAGxB,KAAA;AACJ,EAAM,MAAA,EAAE,MAAQ,EAAA,SAAA,EAAc,GAAA,KAAA;AAC9B,EAAI,IAAA,CAAC,OAAO,SAAW,EAAA;AACrB,IAAO,OAAA,IAAA;AAAA;AAET,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,SAAA;AAAA,MAClB,SAAA;AAAA,MACA,SAAW,EAAA,WAAA,IAAe,MAAS,GAAA,MAAA,CAAO,SAAY,GAAA,KAAA;AAAA;AAAA,GACxD;AAEJ;;;;"}

package/dist/components/MarkdownRenderer/MarkdownRenderer.esm.js

@@ -11,6 +11,7 @@ import rehypeToc from '@jsdevtools/rehype-toc';
 import { EntityRefLink } from '@backstage/plugin-catalog-react';
 import { useIsDarkTheme } from '../../hooks/useIsDarkTheme.esm.js';
 import LinkIcon from '@material-ui/icons/Link';
+import FileCopyIcon from '@material-ui/icons/FileCopy';
 import { useApi, alertApiRef } from '@backstage/core-plugin-api';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
@@ -24,32 +25,41 @@ const useStyles = makeStyles(
     const overrides = theme.overrides;
     return {
       markdown: {
+        lineHeight: 1.75,
         "& p": {
-          ...theme.typography?.body1
+          ...theme.typography?.body1,
+          margin: "0 0 1em 0",
+          wordBreak: "break-word"
         },
         "& h1": {
           ...theme.typography?.h1,
-          marginBottom: 2
+          marginBottom: 2,
+          marginTop: "1.5em"
         },
         "& h2": {
           ...theme.typography?.h2,
-          marginBottom: 2
+          marginBottom: 2,
+          marginTop: "1.2em"
         },
         "& h3": {
           ...theme.typography?.h3,
-          marginBottom: 2
+          marginBottom: 2,
+          marginTop: "1em"
         },
         "& h4": {
           ...theme.typography?.h4,
-          marginBottom: 2
+          marginBottom: 2,
+          marginTop: "0.8em"
         },
         "& h5": {
           ...theme.typography?.h5,
-          marginBottom: 2
+          marginBottom: 2,
+          marginTop: "0.7em"
         },
         "& h6": {
           ...theme.typography?.h6,
-          marginBottom: 2
+          marginBottom: 2,
+          marginTop: "0.6em"
         },
         "& table": {
           borderCollapse: "collapse",
@@ -88,26 +98,32 @@ const useStyles = makeStyles(
           fontStyle: "normal",
           display: "block",
           width: "100%",
-          overflowX: "auto"
+          overflowX: "auto",
+          borderRadius: 4,
+          padding: "0.2em 0.4em"
         },
         "& em": {
           fontStyle: "italic !important"
         },
         "& ol": {
-          listStyle: "decimal"
+          listStyle: "decimal",
+          marginLeft: "2em",
+          marginBottom: "1em",
+          marginTop: "1em"
         },
         "& ul": {
-          listStyle: "disc"
+          listStyle: "disc",
+          marginLeft: "2em",
+          marginBottom: "1em",
+          marginTop: "1em"
         },
         "& blockquote": {
           backgroundColor: theme.palette.background.paper,
           border: `1px solid ${theme.palette.divider}`,
-          padding: "1em"
-        },
-        "& ol, ul": {
-          marginLeft: "1em",
-          marginTop: "1em",
-          marginBottom: "1em"
+          padding: "1em 1.5em",
+          margin: "1.5em 0",
+          color: theme.palette.text.secondary,
+          borderLeft: `4px solid ${theme.palette.divider}`
         },
         "& li": {
           marginTop: "0.5em"
@@ -118,7 +134,19 @@ const useStyles = makeStyles(
         "& *:last-child": {
           marginBottom: 0
         },
-        ...overrides?.BackstageMarkdownContent ? overrides.BackstageMarkdownContent : {}
+        ...overrides?.BackstageMarkdownContent ?? {}
+      },
+      codeBlockContainer: {
+        position: "relative",
+        "& .copyCodeButton": {
+          opacity: 0,
+          pointerEvents: "none",
+          transition: "opacity 0.2s"
+        },
+        "&:hover .copyCodeButton": {
+          opacity: 1,
+          pointerEvents: "auto"
+        }
       },
       header: {
         "& .anchor-link": {
@@ -180,6 +208,14 @@ const MarkdownRenderer = (props) => {
       display: "transient"
     });
   };
+  const copyCodeToClipboard = (code) => {
+    window.navigator.clipboard.writeText(code);
+    alertApi.post({
+      message: t("code.copied"),
+      severity: "info",
+      display: "transient"
+    });
+  };
   const headingRenderer = (hProps) => {
     const { node, children } = hProps;
     const childrenArray = Children.toArray(children);
@@ -289,14 +325,15 @@ const MarkdownRenderer = (props) => {
               }
               const tagMention = tagMentions.find((m) => word === m);
               if (tagMention) {
-                return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+                return /* @__PURE__ */ jsx(
                   TagChip,
                   {
                     tag: tagMention.slice(1),
                     style: { marginBottom: 0 },
                     useHref: useBlankLinks
-                  }
-                ) });
+                  },
+                  tagMention
+                );
               }
               return /* @__PURE__ */ jsxs(Fragment, { children: [
                 word,
@@ -309,17 +346,36 @@ const MarkdownRenderer = (props) => {
         code(p) {
           const { children, className, node, ...rest } = p;
           const match = /language-(\w+)/.exec(className || "");
-          return match ? /* @__PURE__ */ jsx(
-            SyntaxHighlighter,
-            {
-              ...rest,
-              PreTag: "div",
-              language: match[1],
-              style: darkTheme ? a11yDark : a11yLight,
-              showLineNumbers: true,
-              children: String(children).replace(/\n$/, "")
-            }
-          ) : /* @__PURE__ */ jsx("code", { ...rest, className, children });
+          const codeString = String(children).replace(/\n$/, "");
+          return match ? /* @__PURE__ */ jsxs("div", { className: classes.codeBlockContainer, children: [
+            /* @__PURE__ */ jsx(
+              SyntaxHighlighter,
+              {
+                ...rest,
+                PreTag: "div",
+                language: match[1],
+                style: darkTheme ? a11yDark : a11yLight,
+                showLineNumbers: true,
+                children: codeString
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { title: t("code.aria"), children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                "aria-label": t("code.aria"),
+                size: "small",
+                className: "copyCodeButton",
+                style: {
+                  position: "absolute",
+                  top: 8,
+                  right: 8,
+                  zIndex: 2
+                },
+                onClick: () => copyCodeToClipboard(codeString),
+                children: /* @__PURE__ */ jsx(FileCopyIcon, { fontSize: "small" })
+              }
+            ) })
+          ] }) : /* @__PURE__ */ jsx("code", { ...rest, className, children });
         }
       },
       children: content