From 2e56bdc3884c5926fe91ac89ba7f438f77a49e7d Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 24 Oct 2021 17:26:35 -0700 Subject: [PATCH] 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/actions/definitions/collections.js | 4 +++- app/actions/definitions/documents.js | 4 +++- app/components/CommandBar.js | 8 +++++++- app/components/Sidebar/components/DocumentLink.js | 2 ++ app/components/Sidebar/components/EditableTitle.js | 4 +++- app/components/Sidebar/components/StarredLink.js | 2 ++ 6 files changed, 20 insertions(+), 4 deletions(-) diff --git a/app/actions/definitions/collections.js b/app/actions/definitions/collections.js index 51cddac6c..7fb395766 100644 --- a/app/actions/definitions/collections.js +++ b/app/actions/definitions/collections.js @@ -18,7 +18,9 @@ export const openCollection = createAction({ const collections = stores.collections.orderedData; return collections.map((collection) => ({ - id: collection.id, + // Note: using url which includes the slug rather than id here to bust + // cache if the collection is renamed + id: collection.url, name: collection.name, icon: , section: CollectionSection, diff --git a/app/actions/definitions/documents.js b/app/actions/definitions/documents.js index 2852b9dd7..f50a50114 100644 --- a/app/actions/definitions/documents.js +++ b/app/actions/definitions/documents.js @@ -23,7 +23,9 @@ export const openDocument = createAction({ return paths .filter((path) => path.type === "document") .map((path) => ({ - id: path.id, + // Note: using url which includes the slug rather than id here to bust + // cache if the document is renamed + id: path.url, name: path.title, icon: () => stores.documents.get(path.id)?.isStarred ? ( diff --git a/app/components/CommandBar.js b/app/components/CommandBar.js index 7f82ca62e..9ca483c33 100644 --- a/app/components/CommandBar.js +++ b/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); diff --git a/app/components/Sidebar/components/DocumentLink.js b/app/components/Sidebar/components/DocumentLink.js index b4c5b4643..cd9b6873f 100644 --- a/app/components/Sidebar/components/DocumentLink.js +++ b/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} /> } diff --git a/app/components/Sidebar/components/EditableTitle.js b/app/components/Sidebar/components/EditableTitle.js index 6516c42b1..ffd681238 100644 --- a/app/components/Sidebar/components/EditableTitle.js +++ b/app/components/Sidebar/components/EditableTitle.js @@ -7,9 +7,10 @@ type Props = {| onSubmit: (title: string) => Promise, 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} /> ) : ( diff --git a/app/components/Sidebar/components/StarredLink.js b/app/components/Sidebar/components/StarredLink.js index 150ba4188..88292c438 100644 --- a/app/components/Sidebar/components/StarredLink.js +++ b/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} /> }