fix: Command bar should bust cache when docs and collections are renamed

fix: Command bar should get larger on large screens
fix: Editable titles in sidebar should enforce max length

app/components/CommandBar.js

@@ -5,6 +5,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import CommandBarResults from "components/CommandBarResults";
 import rootActions from "actions/root";
 import useCommandBarActions from "hooks/useCommandBarActions";
@@ -74,7 +75,7 @@ const SearchInput = styled(KBarSearch)`
 `;
 
 const Animator = styled(KBarAnimator)`
-  max-width: 540px;
+  max-width: 600px;
   max-height: 75vh;
   width: 90vw;
   background: ${(props) => props.theme.menuBackground};
@@ -82,6 +83,11 @@ const Animator = styled(KBarAnimator)`
   border-radius: 8px;
   overflow: hidden;
   box-shadow: rgb(0 0 0 / 40%) 0px 16px 60px;
+  transition: max-width 0.2s ease-in-out;
+
+  ${breakpoint("desktopLarge")`
+    max-width: 740px;
+  `};
 `;
 
 export default observer(CommandBar);

app/components/Sidebar/components/DocumentLink.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useDrag, useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { MAX_TITLE_LENGTH } from "shared/constants";
 import Collection from "models/Collection";
 import Document from "models/Document";
 import Fade from "components/Fade";
@@ -242,6 +243,7 @@ function DocumentLink(
                       title={node.title || t("Untitled")}
                       onSubmit={handleTitleChange}
                       canUpdate={canUpdate}
+                      maxLength={MAX_TITLE_LENGTH}
                     />
                   </>
                 }

app/components/Sidebar/components/EditableTitle.js

@@ -7,9 +7,10 @@ type Props = {|
   onSubmit: (title: string) => Promise<void>,
   title: string,
   canUpdate: boolean,
+  maxLength?: number,
 |};
 
-function EditableTitle({ title, onSubmit, canUpdate }: Props) {
+function EditableTitle({ title, onSubmit, canUpdate, ...rest }: Props) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [originalValue, setOriginalValue] = React.useState(title);
   const [value, setValue] = React.useState(title);
@@ -79,6 +80,7 @@ function EditableTitle({ title, onSubmit, canUpdate }: Props) {
             onChange={handleChange}
             onBlur={handleSave}
             autoFocus
+            {...rest}
           />
         </form>
       ) : (

app/components/Sidebar/components/StarredLink.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { MAX_TITLE_LENGTH } from "shared/constants";
 import Fade from "components/Fade";
 import useStores from "../../../hooks/useStores";
 import Disclosure from "./Disclosure";
@@ -85,6 +86,7 @@ function StarredLink({ depth, title, to, documentId, collectionId }: Props) {
                 title={title || t("Untitled")}
                 onSubmit={handleTitleChange}
                 canUpdate={canUpdate}
+                maxLength={MAX_TITLE_LENGTH}
               />
             </>
           }