Insights refinements

app/scenes/Document/components/Insights.tsx

@@ -47,11 +47,13 @@ function Insights() {
             <Heading>{t("Stats")}</Heading>
             <Text type="secondary" size="small">
               <List>
-                <li>
-                  {t(`{{ count }} minute read`, {
-                    count: stats.total.readingTime,
-                  })}
-                </li>
+                {stats.total.words > 0 && (
+                  <li>
+                    {t(`{{ count }} minute read`, {
+                      count: stats.total.readingTime,
+                    })}
+                  </li>
+                )}
                 <li>{t(`{{ count }} words`, { count: stats.total.words })}</li>
                 <li>
                   {t(`{{ count }} characters`, {
@@ -80,24 +82,6 @@ function Insights() {
               </List>
             </Text>
           </Content>
-          <Content column>
-            <Heading>{t("Views")}</Heading>
-            <Text type="secondary" size="small">
-              {documentViews.length <= 1
-                ? t("No one else has viewed yet")
-                : t(`Viewed {{ count }} times by {{ teamMembers }} people`, {
-                    count: documentViews.reduce(
-                      (memo, view) => memo + view.count,
-                      0
-                    ),
-                    teamMembers: documentViews.length,
-                  })}
-              .
-            </Text>
-            <ListSpacing>
-              <DocumentViews document={document} isOpen />
-            </ListSpacing>
-          </Content>
           <Content column>
             <Heading>{t("Collaborators")}</Heading>
             <Text type="secondary" size="small">
@@ -129,6 +113,26 @@ function Insights() {
               />
             </ListSpacing>
           </Content>
+          <Content column>
+            <Heading>{t("Views")}</Heading>
+            <Text type="secondary" size="small">
+              {documentViews.length <= 1
+                ? t("No one else has viewed yet")
+                : t(`Viewed {{ count }} times by {{ teamMembers }} people`, {
+                    count: documentViews.reduce(
+                      (memo, view) => memo + view.count,
+                      0
+                    ),
+                    teamMembers: documentViews.length,
+                  })}
+              .
+            </Text>
+            {documentViews.length > 1 && (
+              <ListSpacing>
+                <DocumentViews document={document} isOpen />
+              </ListSpacing>
+            )}
+          </Content>
         </>
       ) : null}
     </Sidebar>
@@ -145,7 +149,7 @@ function useTextStats(text: string, selectedText: string) {
       words: numTotalWords,
       characters: text.length,
       emoji: matches.length ?? 0,
-      readingTime: Math.floor(numTotalWords / 200),
+      readingTime: Math.max(1, Math.floor(numTotalWords / 200)),
     },
     selected: {
       words: countWords(selectedText),
@@ -176,7 +180,7 @@ const List = styled("ul")`
     display: inline-block;
     font-weight: 600;
     color: ${(props) => props.theme.textTertiary};
-    width: 8px;
+    width: 10px;
   }
 `;
 

app/scenes/Document/components/RightSidebar.tsx

@@ -2,12 +2,14 @@ import { m } from "framer-motion";
 import { observer } from "mobx-react";
 import { BackIcon } from "outline-icons";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import ResizeBorder from "~/components/Sidebar/components/ResizeBorder";
+import Tooltip from "~/components/Tooltip";
 import usePersistedState from "~/hooks/usePersistedState";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
@@ -19,6 +21,7 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
 
 function RightSidebar({ title, onClose, children, border, className }: Props) {
   const theme = useTheme();
+  const { t } = useTranslation();
   const [width, setWidth] = usePersistedState(
     "rightSidebarWidth",
     theme.sidebarWidth
@@ -100,12 +103,14 @@ function RightSidebar({ title, onClose, children, border, className }: Props) {
       <Position style={style} column>
         <Header>
           <Title>{title}</Title>
-          <Button
-            icon={<ForwardIcon />}
-            onClick={onClose}
-            borderOnHover
-            neutral
-          />
+          <Tooltip tooltip={t("Close")} shortcut="Esc" delay={500}>
+            <Button
+              icon={<ForwardIcon />}
+              onClick={onClose}
+              borderOnHover
+              neutral
+            />
+          </Tooltip>
         </Header>
         <Scrollable topShadow>{children}</Scrollable>
         <ResizeBorder