@drodil/backstage-plugin-qeta-react 3.28.1 → 3.29.0

package/dist/components/PostHighlightList/PostHighlightList.esm.js

@@ -1,8 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Fragment } from 'react';
-import { useRouteRef } from '@backstage/core-plugin-api';
-import { questionRouteRef, articleRouteRef } from '../../routes.esm.js';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
+import { useRouteRef } from '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import '@backstage/catalog-model';
 import 'dataloader';
@@ -15,9 +14,63 @@ import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
 import { useNavigate } from 'react-router-dom';
 import { RightListContainer, RightList } from '../Utility/RightList.esm.js';
-import { ListItem, ListItemText, Divider } from '@material-ui/core';
+import { makeStyles, ListItem, ListItemText, Box } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
+import { questionRouteRef, articleRouteRef } from '../../routes.esm.js';
+import numeral from 'numeral';
 
+const useStyles = makeStyles((theme) => ({
+  listItem: {
+    display: "flex",
+    alignItems: "center",
+    padding: "0 4px",
+    minHeight: 28,
+    cursor: "pointer",
+    transition: "background 0.2s",
+    "&:hover": {
+      background: theme.palette.action.hover
+    }
+  },
+  emptyItem: {
+    padding: "0 0 0 0.6rem"
+  },
+  voteBox: {
+    minWidth: 28,
+    maxWidth: 28,
+    height: 24,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 4,
+    fontWeight: 600,
+    fontSize: "0.9rem",
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(0.5),
+    background: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    border: `1px solid ${theme.palette.divider}`
+  },
+  voteBoxPositive: {
+    background: theme.palette.success.main,
+    color: theme.palette.getContrastText(theme.palette.success.main)
+  },
+  voteBoxNegative: {
+    background: theme.palette.error.main,
+    color: theme.palette.getContrastText(theme.palette.error.main)
+  },
+  listItemText: {
+    fontSize: "0.8rem",
+    color: theme.palette.text.primary,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    flex: 1
+  }
+}));
+function formatShortNumber(num) {
+  return num >= 1e3 ? numeral(num).format("0.0 a") : num.toString();
+}
 const PostHighlightList = (props) => {
   const {
     value: response,
@@ -42,26 +95,53 @@ const PostHighlightList = (props) => {
   const navigate = useNavigate();
   const questionRoute = useRouteRef(questionRouteRef);
   const articleRoute = useRouteRef(articleRouteRef);
+  const classes = useStyles();
   const posts = response?.posts ?? [];
   return /* @__PURE__ */ jsx(RightListContainer, { children: /* @__PURE__ */ jsxs(RightList, { title: props.title, icon: props.icon, children: [
-    loading && /* @__PURE__ */ jsx(ListItem, { className: "qetaPostHighlightListListItem", dense: true, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: "100%" }) }),
-    error && /* @__PURE__ */ jsx(ListItem, { className: "qetaPostHighlightListListItem", dense: true, children: /* @__PURE__ */ jsx(ListItemText, { children: t("highlights.loadError") }) }),
-    !error && !loading && posts.length === 0 && /* @__PURE__ */ jsx(ListItem, { className: "qetaPostHighlightListListItem", dense: true, children: /* @__PURE__ */ jsx(ListItemText, { children: props.noQuestionsLabel }) }),
+    loading && Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(ListItem, { className: classes.emptyItem, dense: true, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: "100%", height: 18 }) }, `skeleton-${i}`)),
+    error && /* @__PURE__ */ jsx(ListItem, { className: classes.emptyItem, dense: true, children: /* @__PURE__ */ jsx(
+      ListItemText,
+      {
+        primary: t("highlights.loadError"),
+        classes: { primary: classes.listItemText }
+      }
+    ) }),
+    !error && !loading && posts.length === 0 && /* @__PURE__ */ jsx(ListItem, { className: classes.emptyItem, dense: true, children: /* @__PURE__ */ jsx(
+      ListItemText,
+      {
+        primary: props.noQuestionsLabel,
+        classes: { primary: classes.listItemText }
+      }
+    ) }),
     !error && posts.map((q) => {
       const route = q.type === "question" ? questionRoute : articleRoute;
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(
-          ListItem,
-          {
-            dense: true,
-            button: true,
-            component: "a",
-            onClick: () => navigate(route({ id: q.id.toString(10) })),
-            children: /* @__PURE__ */ jsx(ListItemText, { children: q.title })
-          }
-        )
-      ] }, q.id);
+      const vote = formatShortNumber(q.score);
+      let voteBoxClass = classes.voteBox;
+      if (q.correctAnswer) {
+        voteBoxClass = `${classes.voteBox} ${classes.voteBoxPositive}`;
+      } else if (q.score < 0) {
+        voteBoxClass = `${classes.voteBox} ${classes.voteBoxNegative}`;
+      }
+      return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+        ListItem,
+        {
+          dense: true,
+          button: true,
+          className: classes.listItem,
+          onClick: () => navigate(route({ id: q.id.toString(10) })),
+          "aria-label": q.title,
+          children: [
+            /* @__PURE__ */ jsx(Box, { className: voteBoxClass, children: vote }),
+            /* @__PURE__ */ jsx(
+              ListItemText,
+              {
+                primary: q.title,
+                classes: { primary: classes.listItemText }
+              }
+            )
+          ]
+        }
+      ) }, q.id);
     })
   ] }) });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"PostHighlightList.esm.js","sources":["../../../src/components/PostHighlightList/PostHighlightList.tsx"],"sourcesContent":["import { Fragment, ReactNode } from 'react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport { PostsQuery, PostType } from '@drodil/backstage-plugin-qeta-common';\nimport { useQetaApi } from '../../hooks';\nimport { useNavigate } from 'react-router-dom';\nimport { RightList, RightListContainer } from '../Utility/RightList';\nimport { Divider, ListItem, ListItemText } from '@material-ui/core';\nimport { Skeleton } from '@material-ui/lab';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const PostHighlightList = (props: {\n  type: string;\n  title: string;\n  noQuestionsLabel: string;\n  icon?: ReactNode;\n  options?: PostsQuery;\n  postType?: PostType;\n}) => {\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api =>\n      api.getPostsList(props.type, {\n        limit: 5,\n        type: props.postType,\n        includeTags: false,\n        includeAttachments: false,\n        includeComments: false,\n        includeAnswers: false,\n        includeVotes: false,\n        includeEntities: false,\n        includeExperts: false,\n        ...props.options,\n      }),\n    [],\n  );\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const navigate = useNavigate();\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n\n  const posts = response?.posts ?? [];\n\n  return (\n    <RightListContainer>\n      <RightList title={props.title} icon={props.icon}>\n        {loading && (\n          <ListItem className=\"qetaPostHighlightListListItem\" dense>\n            <Skeleton variant=\"rect\" width=\"100%\" />\n          </ListItem>\n        )}\n        {error && (\n          <ListItem className=\"qetaPostHighlightListListItem\" dense>\n            <ListItemText>{t('highlights.loadError')}</ListItemText>\n          </ListItem>\n        )}\n        {!error && !loading && posts.length === 0 && (\n          <ListItem className=\"qetaPostHighlightListListItem\" dense>\n            <ListItemText>{props.noQuestionsLabel}</ListItemText>\n          </ListItem>\n        )}\n        {!error &&\n          posts.map(q => {\n            const route = q.type === 'question' ? questionRoute : articleRoute;\n            return (\n              <Fragment key={q.id}>\n                <Divider />\n                <ListItem\n                  dense\n                  button\n                  component=\"a\"\n                  onClick={() => navigate(route({ id: q.id.toString(10) }))}\n                >\n                  <ListItemText>{q.title}</ListItemText>\n                </ListItem>\n              </Fragment>\n            );\n          })}\n      </RightList>\n    </RightListContainer>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PostHighlightList.esm.js","sources":["../../../src/components/PostHighlightList/PostHighlightList.tsx"],"sourcesContent":["import { Fragment, ReactNode } from 'react';\nimport { PostsQuery, PostType } from '@drodil/backstage-plugin-qeta-common';\nimport { useQetaApi } from '../../hooks';\nimport { useNavigate } from 'react-router-dom';\nimport { RightList, RightListContainer } from '../Utility/RightList';\nimport { ListItem, ListItemText, Box, makeStyles } from '@material-ui/core';\nimport { Skeleton } from '@material-ui/lab';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { articleRouteRef, questionRouteRef } from '../../routes.ts';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport numeral from 'numeral';\n\nconst useStyles = makeStyles(theme => ({\n  listItem: {\n    display: 'flex',\n    alignItems: 'center',\n    padding: '0 4px',\n    minHeight: 28,\n    cursor: 'pointer',\n    transition: 'background 0.2s',\n    '&:hover': {\n      background: theme.palette.action.hover,\n    },\n  },\n  emptyItem: {\n    padding: '0 0 0 0.6rem',\n  },\n  voteBox: {\n    minWidth: 28,\n    maxWidth: 28,\n    height: 24,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 4,\n    fontWeight: 600,\n    fontSize: '0.9rem',\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(0.5),\n    background: theme.palette.background.paper,\n    color: theme.palette.text.primary,\n    border: `1px solid ${theme.palette.divider}`,\n  },\n  voteBoxPositive: {\n    background: theme.palette.success.main,\n    color: theme.palette.getContrastText(theme.palette.success.main),\n  },\n  voteBoxNegative: {\n    background: theme.palette.error.main,\n    color: theme.palette.getContrastText(theme.palette.error.main),\n  },\n  listItemText: {\n    fontSize: '0.8rem',\n    color: theme.palette.text.primary,\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    flex: 1,\n  },\n}));\nfunction formatShortNumber(num: number): string {\n  return num >= 1000 ? numeral(num).format('0.0 a') : num.toString();\n}\n\nexport const PostHighlightList = (props: {\n  type: string;\n  title: string;\n  noQuestionsLabel: string;\n  icon?: ReactNode;\n  options?: PostsQuery;\n  postType?: PostType;\n}) => {\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api =>\n      api.getPostsList(props.type, {\n        limit: 5,\n        type: props.postType,\n        includeTags: false,\n        includeAttachments: false,\n        includeComments: false,\n        includeAnswers: false,\n        includeVotes: false,\n        includeEntities: false,\n        includeExperts: false,\n        ...props.options,\n      }),\n    [],\n  );\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const navigate = useNavigate();\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n\n  const classes = useStyles();\n\n  const posts = response?.posts ?? [];\n\n  return (\n    <RightListContainer>\n      <RightList title={props.title} icon={props.icon}>\n        {loading &&\n          Array.from({ length: 5 }).map((_, i) => (\n            <ListItem className={classes.emptyItem} dense key={`skeleton-${i}`}>\n              <Skeleton variant=\"rect\" width=\"100%\" height={18} />\n            </ListItem>\n          ))}\n        {error && (\n          <ListItem className={classes.emptyItem} dense>\n            <ListItemText\n              primary={t('highlights.loadError')}\n              classes={{ primary: classes.listItemText }}\n            />\n          </ListItem>\n        )}\n        {!error && !loading && posts.length === 0 && (\n          <ListItem className={classes.emptyItem} dense>\n            <ListItemText\n              primary={props.noQuestionsLabel}\n              classes={{ primary: classes.listItemText }}\n            />\n          </ListItem>\n        )}\n        {!error &&\n          posts.map(q => {\n            const route = q.type === 'question' ? questionRoute : articleRoute;\n            const vote = formatShortNumber(q.score);\n            let voteBoxClass = classes.voteBox;\n            if (q.correctAnswer) {\n              voteBoxClass = `${classes.voteBox} ${classes.voteBoxPositive}`;\n            } else if (q.score < 0) {\n              voteBoxClass = `${classes.voteBox} ${classes.voteBoxNegative}`;\n            }\n            return (\n              <Fragment key={q.id}>\n                <ListItem\n                  dense\n                  button\n                  className={classes.listItem}\n                  onClick={() => navigate(route({ id: q.id.toString(10) }))}\n                  aria-label={q.title}\n                >\n                  <Box className={voteBoxClass}>{vote}</Box>\n                  <ListItemText\n                    primary={q.title}\n                    classes={{ primary: classes.listItemText }}\n                  />\n                </ListItem>\n              </Fragment>\n            );\n          })}\n      </RightList>\n    </RightListContainer>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/PostsContainer/PostList.esm.js

@@ -21,7 +21,8 @@ const PostList = (props) => {
     showNoQuestionsBtn = true,
     entityPage,
     tags,
-    type
+    type,
+    showTypeLabel
   } = props;
   const listRef = useRef(null);
   const { t } = useTranslationRef(qetaTranslationRef);
@@ -67,7 +68,15 @@ const PostList = (props) => {
   return /* @__PURE__ */ jsx("div", { ref: listRef, children: /* @__PURE__ */ jsxs(Box, { sx: { mt: 2 }, className: "qetaPostList", children: [
     /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, style: { paddingTop: "1em" }, children: response.posts.map((post, i) => {
       return /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
-        /* @__PURE__ */ jsx(PostListItem, { post, entity, type }),
+        /* @__PURE__ */ jsx(
+          PostListItem,
+          {
+            post,
+            entity,
+            type,
+            showTypeLabel
+          }
+        ),
         i !== response.total - 1 && /* @__PURE__ */ jsx(Divider, {})
       ] }, post.id);
     }) }) }),

package/dist/components/PostsContainer/PostList.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostList.esm.js","sources":["../../../src/components/PostsContainer/PostList.tsx"],"sourcesContent":["import { WarningPanel } from '@backstage/core-components';\nimport { ChangeEvent, useRef } from 'react';\nimport { PostListItem } from './PostListItem';\nimport { PostsResponse, PostType } from '@drodil/backstage-plugin-qeta-common';\nimport { NoPostsCard } from './NoPostsCard';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { Box, Card, Divider, Grid } from '@material-ui/core';\n\nexport const PostList = (props: {\n  loading: boolean;\n  error: any;\n  response?: PostsResponse;\n  onPageChange: (page: number) => void;\n  onPageSizeChange: (size: number) => void;\n  page: number;\n  pageSize: number;\n  pageCount: number;\n  entity?: string;\n  tags?: string[];\n  showNoQuestionsBtn?: boolean;\n  entityPage?: boolean;\n  type?: PostType;\n}) => {\n  const {\n    loading,\n    error,\n    response,\n    onPageChange,\n    entity,\n    page,\n    onPageSizeChange,\n    showNoQuestionsBtn = true,\n    entityPage,\n    tags,\n    type,\n  } = props;\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const handlePageChange = (_event: ChangeEvent<unknown>, value: number) => {\n    if (listRef.current) {\n      listRef.current.scrollIntoView();\n    }\n    onPageChange(value);\n  };\n\n  const handlePageSizeChange = (event: ChangeEvent<{ value: unknown }>) => {\n    if (listRef.current) {\n      listRef.current.scrollIntoView();\n    }\n    onPageSizeChange(Number.parseInt(event.target.value as string, 10));\n  };\n\n  if (loading) {\n    return <LoadingGrid />;\n  }\n\n  const itemType = (type ?? 'post') as any;\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel\n        severity=\"error\"\n        title={t('postsList.errorLoading', { itemType })}\n      >\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response.posts || response.posts.length === 0) {\n    return (\n      <NoPostsCard\n        showNoPostsBtn={showNoQuestionsBtn}\n        entity={entity}\n        entityPage={entityPage}\n        tags={tags}\n        type={type}\n      />\n    );\n  }\n\n  const pageCount =\n    response.total < props.pageSize\n      ? 1\n      : Math.ceil(response.total / props.pageSize);\n\n  return (\n    <div ref={listRef}>\n      <Box sx={{ mt: 2 }} className=\"qetaPostList\">\n        <Card>\n          <Grid container spacing={2} style={{ paddingTop: '1em' }}>\n            {response.posts.map((post, i) => {\n              return (\n                <Grid item xs={12} key={post.id}>\n                  <PostListItem post={post} entity={entity} type={type} />\n                  {i !== response.total - 1 && <Divider />}\n                </Grid>\n              );\n            })}\n          </Grid>\n        </Card>\n        {response.total > 0 && (\n          <QetaPagination\n            pageSize={props.pageSize}\n            handlePageChange={handlePageChange}\n            handlePageSizeChange={handlePageSizeChange}\n            page={page}\n            pageCount={pageCount}\n            tooltip={t('postsList.postsPerPage', { itemType })}\n          />\n        )}\n      </Box>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PostList.esm.js","sources":["../../../src/components/PostsContainer/PostList.tsx"],"sourcesContent":["import { WarningPanel } from '@backstage/core-components';\nimport { ChangeEvent, useRef } from 'react';\nimport { PostListItem } from './PostListItem';\nimport { PostsResponse, PostType } from '@drodil/backstage-plugin-qeta-common';\nimport { NoPostsCard } from './NoPostsCard';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { Box, Card, Divider, Grid } from '@material-ui/core';\n\nexport const PostList = (props: {\n  loading: boolean;\n  error: any;\n  response?: PostsResponse;\n  onPageChange: (page: number) => void;\n  onPageSizeChange: (size: number) => void;\n  page: number;\n  pageSize: number;\n  pageCount: number;\n  entity?: string;\n  tags?: string[];\n  showNoQuestionsBtn?: boolean;\n  entityPage?: boolean;\n  type?: PostType;\n  showTypeLabel?: boolean;\n}) => {\n  const {\n    loading,\n    error,\n    response,\n    onPageChange,\n    entity,\n    page,\n    onPageSizeChange,\n    showNoQuestionsBtn = true,\n    entityPage,\n    tags,\n    type,\n    showTypeLabel,\n  } = props;\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const handlePageChange = (_event: ChangeEvent<unknown>, value: number) => {\n    if (listRef.current) {\n      listRef.current.scrollIntoView();\n    }\n    onPageChange(value);\n  };\n\n  const handlePageSizeChange = (event: ChangeEvent<{ value: unknown }>) => {\n    if (listRef.current) {\n      listRef.current.scrollIntoView();\n    }\n    onPageSizeChange(Number.parseInt(event.target.value as string, 10));\n  };\n\n  if (loading) {\n    return <LoadingGrid />;\n  }\n\n  const itemType = (type ?? 'post') as any;\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel\n        severity=\"error\"\n        title={t('postsList.errorLoading', { itemType })}\n      >\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response.posts || response.posts.length === 0) {\n    return (\n      <NoPostsCard\n        showNoPostsBtn={showNoQuestionsBtn}\n        entity={entity}\n        entityPage={entityPage}\n        tags={tags}\n        type={type}\n      />\n    );\n  }\n\n  const pageCount =\n    response.total < props.pageSize\n      ? 1\n      : Math.ceil(response.total / props.pageSize);\n\n  return (\n    <div ref={listRef}>\n      <Box sx={{ mt: 2 }} className=\"qetaPostList\">\n        <Card>\n          <Grid container spacing={2} style={{ paddingTop: '1em' }}>\n            {response.posts.map((post, i) => {\n              return (\n                <Grid item xs={12} key={post.id}>\n                  <PostListItem\n                    post={post}\n                    entity={entity}\n                    type={type}\n                    showTypeLabel={showTypeLabel}\n                  />\n                  {i !== response.total - 1 && <Divider />}\n                </Grid>\n              );\n            })}\n          </Grid>\n        </Card>\n        {response.total > 0 && (\n          <QetaPagination\n            pageSize={props.pageSize}\n            handlePageChange={handlePageChange}\n            handlePageSizeChange={handlePageSizeChange}\n            page={page}\n            pageCount={pageCount}\n            tooltip={t('postsList.postsPerPage', { itemType })}\n          />\n        )}\n      </Box>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/PostsContainer/PostListItem.esm.js

@@ -6,39 +6,158 @@ import { truncate, removeMarkdownFormatting } from '@drodil/backstage-plugin-qet
 import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities.esm.js';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { questionRouteRef, articleRouteRef } from '../../routes.esm.js';
-import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
 import { useSignal } from '@backstage/plugin-signals-react';
-import { VoteButtons } from '../Buttons/VoteButtons.esm.js';
-import { FavoriteButton } from '../Buttons/FavoriteButton.esm.js';
-import { capitalize } from 'lodash';
-import CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';
-import HelpOutlined from '@material-ui/icons/HelpOutlined';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
-import { useEntityAuthor } from '../../hooks/useEntityAuthor.esm.js';
-import { VoteButtonContainer } from '../Utility/VoteButtonContainer.esm.js';
-import { UserLink } from '../Links/Links.esm.js';
-import { makeStyles, useTheme, Grid, Chip, Typography } from '@material-ui/core';
-import { SmallAvatar } from '../Utility/SmallAvatar.esm.js';
+import { makeStyles, useTheme, Box, Tooltip, Typography, Chip } from '@material-ui/core';
+import { AuthorBox } from '../AuthorBox/AuthorBox.esm.js';
+import numeral from 'numeral';
+import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
+import CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';
 
-const useStyles = makeStyles(() => ({
-  author: {
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    padding: theme.spacing(0.5, 2, 2, 2),
+    minHeight: 64,
+    transition: "all 0.2s ease-in-out",
+    "&:hover": {
+      "& $title": {
+        color: theme.palette.primary.main,
+        "& a": {
+          textDecoration: "underline"
+        }
+      }
+    }
+  },
+  metaCol: {
+    minWidth: 55,
+    maxWidth: 55,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-end",
+    justifyContent: "center",
+    marginRight: 16,
+    gap: 8
+  },
+  metaBox: {
+    width: 55,
+    textAlign: "center",
+    borderRadius: 6,
+    padding: "6px 0",
+    fontWeight: 600,
+    fontSize: "1rem",
+    background: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    border: `1px solid ${theme.palette.divider}`,
+    lineHeight: 1.1
+  },
+  answersBox: {
+    background: theme.palette.warning.light,
+    color: theme.palette.text.primary,
+    border: `1px solid ${theme.palette.warning.main}`
+  },
+  answersBoxAnswered: {
+    background: theme.palette.success.main,
+    color: theme.palette.getContrastText(theme.palette.success.main),
+    border: `1px solid ${theme.palette.success.dark}`
+  },
+  title: {
+    fontWeight: 700,
+    fontSize: "1.18rem",
+    color: theme.palette.text.primary,
+    marginBottom: 2,
+    marginTop: 0,
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    lineHeight: 1.2,
+    "& a": {
+      color: "inherit",
+      textDecoration: "none"
+    }
+  },
+  content: {
+    fontSize: "0.98rem",
+    color: theme.palette.text.secondary,
+    margin: "2px 0 4px 0",
+    display: "-webkit-box",
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  authorRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    marginTop: 2,
+    marginBottom: 2,
+    justifyContent: "flex-end"
+  },
+  tags: {
+    marginTop: 2,
+    display: "flex",
+    flexWrap: "wrap",
+    overflow: "hidden",
+    flex: "1 1 0",
+    minWidth: 0
+  },
+  tagsRow: {
+    display: "flex",
+    flexDirection: "row",
+    marginTop: 8,
+    gap: 8
+  },
+  authorBoxContainer: {
+    flex: "0 0 220px",
+    width: 220,
+    minWidth: 220,
+    maxWidth: 220,
+    display: "flex",
+    justifyContent: "flex-end"
+  },
+  contentContainer: {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    justifyContent: "stretch",
+    flexDirection: "column",
+    height: "100%"
+  },
+  titleContainer: {
+    display: "flex",
     alignItems: "center",
+    gap: theme.spacing(1),
+    justifyContent: "space-between"
+  },
+  titleWrapper: {
     display: "flex",
-    height: "24px",
-    marginBottom: "8px"
+    alignItems: "center",
+    gap: theme.spacing(1),
+    flex: 1,
+    minWidth: 0
   },
-  timestamp: {
-    marginLeft: "0.3em"
+  typeLabel: {
+    marginLeft: theme.spacing(1),
+    fontSize: "0.75rem",
+    padding: "0.5rem 0.5rem",
+    flexShrink: 0
   }
 }));
+function formatShortNumber(num) {
+  return num >= 1e3 ? numeral(num).format("0.0 a") : num.toString();
+}
 const PostListItem = (props) => {
-  const { post, entity, type } = props;
+  const { post, entity, showTypeLabel } = props;
   const [correctAnswer, setCorrectAnswer] = useState(post.correctAnswer);
   const [answersCount, setAnswersCount] = useState(post.answersCount);
   const [views, setViews] = useState(post.views);
   const { t } = useTranslationRef(qetaTranslationRef);
   const styles = useStyles();
+  const theme = useTheme();
   const { lastSignal } = useSignal(`qeta:post_${post.id}`);
   useEffect(() => {
     if (lastSignal?.type === "post_stats") {
@@ -49,129 +168,113 @@ const PostListItem = (props) => {
   }, [lastSignal]);
   const questionRoute = useRouteRef(questionRouteRef);
   const articleRoute = useRouteRef(articleRouteRef);
-  const { name, initials, user } = useEntityAuthor(post);
-  const theme = useTheme();
   const route = post.type === "question" ? questionRoute : articleRoute;
-  const href = entity ? `${route({
-    id: post.id.toString(10)
-  })}?entity=${entity}` : route({ id: post.id.toString(10) });
-  return /* @__PURE__ */ jsxs(
-    Grid,
-    {
-      container: true,
-      spacing: 2,
-      justifyContent: "flex-start",
-      style: { padding: "0.7em", paddingBottom: "1.0em" },
-      children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, style: { paddingTop: "0px" }, children: /* @__PURE__ */ jsxs(VoteButtonContainer, { children: [
-          /* @__PURE__ */ jsx(VoteButtons, { entity: post }),
-          /* @__PURE__ */ jsx(FavoriteButton, { entity: post })
-        ] }) }),
-        /* @__PURE__ */ jsx(
-          Grid,
+  const href = entity ? `${route({ id: post.id.toString(10) })}?entity=${entity}` : route({ id: post.id.toString(10) });
+  return /* @__PURE__ */ jsxs(Box, { className: styles.root, children: [
+    /* @__PURE__ */ jsxs(Box, { className: styles.metaCol, "aria-label": t("common.postStats"), children: [
+      /* @__PURE__ */ jsx(Tooltip, { title: post.score >= 1e3 ? post.score : "", arrow: true, children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          className: styles.metaBox,
+          "aria-label": t("common.votesCount", { count: post.score }),
+          children: [
+            formatShortNumber(post.score),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontWeight: 400,
+                  fontSize: "0.75rem",
+                  color: theme.palette.text.secondary
+                },
+                children: t("common.votes")
+              }
+            )
+          ]
+        }
+      ) }),
+      post.type === "question" && /* @__PURE__ */ jsxs(
+        Box,
+        {
+          className: correctAnswer ? `${styles.metaBox} ${styles.answersBoxAnswered}` : `${styles.metaBox} ${styles.answersBox}`,
+          "aria-label": t("common.answersCount", { count: answersCount }),
+          children: [
+            /* @__PURE__ */ jsx(Tooltip, { title: answersCount >= 1e3 ? answersCount : "", arrow: true, children: /* @__PURE__ */ jsx("span", { children: formatShortNumber(answersCount) }) }),
+            /* @__PURE__ */ jsx("div", { style: { fontWeight: 400, fontSize: "0.75rem" }, children: t("common.answers") })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { title: views >= 1e3 ? views : "", arrow: true, children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          className: styles.metaBox,
+          "aria-label": t("common.viewsCount", { count: views }),
+          children: [
+            formatShortNumber(views),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontWeight: 400,
+                  fontSize: "0.75rem",
+                  color: theme.palette.text.secondary
+                },
+                children: t("common.views")
+              }
+            )
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { className: styles.contentContainer, children: [
+      /* @__PURE__ */ jsxs(Box, { className: styles.titleContainer, children: [
+        /* @__PURE__ */ jsx(Box, { className: styles.titleWrapper, children: /* @__PURE__ */ jsx(Typography, { component: "div", className: styles.title, children: /* @__PURE__ */ jsx(
+          Link,
+          {
+            to: href,
+            className: "qetaPostListItemQuestionBtn",
+            "aria-label": post.title,
+            tabIndex: 0,
+            style: { color: "inherit", textDecoration: "none" },
+            children: post.title
+          }
+        ) }) }),
+        showTypeLabel && post.type && /* @__PURE__ */ jsx(
+          Chip,
           {
-            item: true,
-            style: { display: "inline-block", width: "calc(100% - 53px)" },
-            children: /* @__PURE__ */ jsxs(Grid, { container: true, children: [
-              /* @__PURE__ */ jsxs(
-                Grid,
-                {
-                  item: true,
-                  container: true,
-                  alignItems: "center",
-                  spacing: 0,
-                  justifyContent: "space-between",
-                  xs: 12,
-                  style: {
-                    paddingTop: "0.3em",
-                    paddingBottom: "0.0em",
-                    marginLeft: "-0.2em"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs(Grid, { item: true, children: [
-                      type === void 0 && /* @__PURE__ */ jsx(
-                        Chip,
-                        {
-                          color: "secondary",
-                          size: "small",
-                          label: `${capitalize(post.type)}`,
-                          icon: post.type === "question" ? /* @__PURE__ */ jsx(HelpOutlined, {}) : /* @__PURE__ */ jsx(CollectionsBookmarkIcon, {})
-                        }
-                      ),
-                      post.type === "question" && /* @__PURE__ */ jsx(
-                        Chip,
-                        {
-                          variant: "outlined",
-                          size: "small",
-                          style: {
-                            userSelect: "none",
-                            // eslint-disable-next-line no-nested-ternary
-                            borderColor: correctAnswer ? theme.palette.success.main : answersCount === 0 ? theme.palette.warning.main : void 0
-                          },
-                          label: t("common.answers", {
-                            count: answersCount
-                          })
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Chip,
-                        {
-                          variant: "outlined",
-                          size: "small",
-                          label: t("common.viewsShort", {
-                            count: views
-                          })
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(
-                      Typography,
-                      {
-                        variant: "caption",
-                        display: "inline",
-                        className: styles.author,
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            SmallAvatar,
-                            {
-                              src: user?.spec?.profile?.picture,
-                              alt: name,
-                              variant: "rounded",
-                              children: initials
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(UserLink, { entityRef: post.author, anonymous: post.anonymous }),
-                          " ",
-                          /* @__PURE__ */ jsx(Link, { to: href, className: styles.timestamp, children: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: post.created }) })
-                        ]
-                      }
-                    ) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, style: { paddingTop: "0px" }, children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx(Link, { to: href, className: "qetaPostListItemQuestionBtn", children: post.title }) }),
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "body2",
-                    noWrap: true,
-                    component: "div",
-                    className: "qetaPostListItemContent",
-                    style: { marginTop: "0.6em" },
-                    children: DOMPurify.sanitize(
-                      truncate(removeMarkdownFormatting(post.content), 150)
-                    )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(TagsAndEntities, { entity: post }) })
-            ] })
+            size: "small",
+            icon: post.type === "question" ? /* @__PURE__ */ jsx(QuestionAnswerIcon, {}) : /* @__PURE__ */ jsx(CollectionsBookmarkIcon, {}),
+            label: t(`common.${post.type}`),
+            className: styles.typeLabel
           }
         )
-      ]
-    }
-  );
+      ] }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "div", className: styles.content, children: /* @__PURE__ */ jsx(
+        Link,
+        {
+          to: href,
+          style: { color: "inherit", textDecoration: "none" },
+          "aria-label": t("common.readMore"),
+          children: DOMPurify.sanitize(
+            truncate(removeMarkdownFormatting(post.content), 200)
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Box, { className: styles.tagsRow, children: [
+        /* @__PURE__ */ jsx(Box, { className: styles.tags, children: /* @__PURE__ */ jsx(TagsAndEntities, { entity: post }) }),
+        /* @__PURE__ */ jsx(Box, { className: styles.authorBoxContainer, children: /* @__PURE__ */ jsx(
+          AuthorBox,
+          {
+            userEntityRef: post.author,
+            time: post.created,
+            label: t("authorBox.postedAtTime"),
+            expert: Boolean(post.experts && post.experts.length > 0),
+            anonymous: post.anonymous
+          }
+        ) })
+      ] })
+    ] })
+  ] });
 };
 
 export { PostListItem };