feat: Add cursor style user preference (#4199)

* feat: Add cursor style user preference

* Remove headings for now

app/components/Breadcrumb.tsx

@@ -67,6 +67,7 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   display: flex;
   flex-shrink: 1;
   min-width: 0;
+  cursor: var(--pointer);
   color: ${(props) => props.theme.text};
   font-size: 15px;
   height: 24px;

app/components/Button.tsx

@@ -30,7 +30,7 @@ const RealButton = styled(ActionButton)<RealProps>`
   height: 32px;
   text-decoration: none;
   flex-shrink: 0;
-  cursor: pointer;
+  cursor: var(--pointer);
   user-select: none;
   appearance: none !important;
 

app/components/CommandBarItem.tsx

@@ -98,7 +98,7 @@ const Item = styled.div<{ active?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  cursor: pointer;
+  cursor: var(--pointer);
 
   text-overflow: ellipsis;
   white-space: nowrap;

app/components/ContextMenu/MenuItem.tsx

@@ -139,7 +139,7 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
       color: ${props.theme.white};
       background: ${props.dangerous ? props.theme.danger : props.theme.primary};
       box-shadow: none;
-      cursor: pointer;
+      cursor: var(--pointer);
 
       svg {
         fill: ${props.theme.white};

app/components/DocumentCard.tsx

@@ -236,6 +236,7 @@ const DocumentLink = styled(Link)<{
   width: 100%;
   height: 100%;
   border-radius: 8px;
+  cursor: var(--pointer);
   background: ${(props) => props.theme.background};
   transition: transform 50ms ease-in-out;
   border: 1px solid ${(props) => props.theme.inputBorder};

app/components/DocumentListItem.tsx

@@ -201,6 +201,7 @@ const DocumentLink = styled(Link)<{
   border-radius: 8px;
   max-height: 50vh;
   width: calc(100vw - 8px);
+  cursor: var(--pointer);
 
   &:focus-visible {
     outline: none;

app/components/Facepile.tsx

@@ -69,7 +69,7 @@ const More = styled.div<{ size: number }>`
 const Avatars = styled(Flex)`
   align-items: center;
   flex-direction: row-reverse;
-  cursor: pointer;
+  cursor: var(--pointer);
 `;
 
 export default observer(Facepile);

app/components/GroupListItem.tsx

@@ -102,7 +102,7 @@ const Image = styled(Flex)`
 const Title = styled.span`
   &:hover {
     text-decoration: underline;
-    cursor: pointer;
+    cursor: var(--pointer);
   }
 `;
 

app/components/Header.tsx

@@ -143,7 +143,7 @@ const Title = styled("div")`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  cursor: pointer;
+  cursor: var(--pointer);
   min-width: 0;
 
   ${breakpoint("tablet")`

app/components/HoverPreviewDocument.tsx

@@ -50,7 +50,7 @@ function HoverPreviewDocument({ url, children }: Props) {
 }
 
 const Content = styled(Link)`
-  cursor: pointer;
+  cursor: var(--pointer);
 `;
 
 const Heading = styled.h2`

app/components/InputSelect.tsx

@@ -288,7 +288,7 @@ const Positioner = styled(Position)`
         color: ${(props) => props.theme.white};
         background: ${(props) => props.theme.primary};
         box-shadow: none;
-        cursor: pointer;
+        cursor: var(--pointer);
 
         svg {
           fill: ${(props) => props.theme.white};

app/components/List/Item.tsx

@@ -87,7 +87,7 @@ const Wrapper = styled.a<{
     border-bottom: 0;
   }
 
-  cursor: ${({ to }) => (to ? "pointer" : "default")};
+  cursor: ${({ to }) => (to ? "var(--pointer)" : "default")};
 `;
 
 const Image = styled(Flex)`

app/components/NudeButton.tsx

@@ -27,7 +27,7 @@ const NudeButton = styled(ActionButton).attrs((props: Props) => ({
   line-height: 0;
   border: 0;
   padding: 0;
-  cursor: pointer;
+  cursor: var(--pointer);
   user-select: none;
   color: inherit;
 `;

app/components/SearchListItem.tsx

@@ -83,6 +83,7 @@ const DocumentLink = styled(Link)<{
   align-items: center;
   padding: 6px 12px;
   max-height: 50vh;
+  cursor: var(--pointer);
 
   &:not(:last-child) {
     margin-bottom: 4px;

app/components/Sidebar/components/Header.tsx

@@ -80,7 +80,7 @@ const Button = styled.button`
   &:not(:disabled):hover,
   &:not(:disabled):active {
     color: ${(props) => props.theme.textSecondary};
-    cursor: pointer;
+    cursor: var(--pointer);
   }
 `;
 

app/components/Sidebar/components/SidebarButton.tsx

@@ -68,7 +68,7 @@ const Wrapper = styled(Flex)<{ minHeight: number }>`
   text-align: left;
   overflow: hidden;
   user-select: none;
-  cursor: pointer;
+  cursor: var(--pointer);
 
   &:active,
   &:hover,

app/components/Sidebar/components/SidebarLink.tsx

@@ -179,7 +179,7 @@ const Link = styled(NavLink)<{
   color: ${(props) =>
     props.$isActiveDrop ? props.theme.white : props.theme.sidebarText};
   font-size: 16px;
-  cursor: pointer;
+  cursor: var(--pointer);
   overflow: hidden;
 
   ${(props) =>

app/components/Sidebar/components/Toggle.tsx

@@ -47,7 +47,7 @@ export const ToggleButton = styled.button<{ $direction?: "left" | "right" }>`
 
   ${breakpoint("tablet")`
     pointer-events: all;
-    cursor: pointer;
+    cursor: var(--pointer);
   `}
 
   @media (hover: none) {

app/components/Switch.tsx

@@ -86,7 +86,7 @@ const Input = styled.label<{ width: number; height: number }>`
 
 const Slider = styled.span<{ width: number; height: number }>`
   position: absolute;
-  cursor: pointer;
+  cursor: var(--pointer);
   top: 0;
   left: 0;
   right: 0;

app/components/Theme.tsx

@@ -8,7 +8,7 @@ import useMediaQuery from "~/hooks/useMediaQuery";
 import useStores from "~/hooks/useStores";
 
 const Theme: React.FC = ({ children }) => {
-  const { ui } = useStores();
+  const { auth, ui } = useStores();
   const resolvedTheme = ui.resolvedTheme === "dark" ? dark : light;
   const resolvedMobileTheme =
     ui.resolvedTheme === "dark" ? darkMobile : lightMobile;
@@ -27,7 +27,9 @@ const Theme: React.FC = ({ children }) => {
   return (
     <ThemeProvider theme={theme}>
       <>
-        <GlobalStyles />
+        <GlobalStyles
+          useCursorPointer={auth.user?.preferences?.useCursorPointer !== false}
+        />
         {children}
       </>
     </ThemeProvider>

app/editor/components/BlockMenuItem.tsx

@@ -76,7 +76,7 @@ const MenuItem = styled.button<{
   line-height: 1;
   width: 100%;
   height: 36px;
-  cursor: pointer;
+  cursor: var(--pointer);
   border: none;
   opacity: ${(props) => (props.disabled ? ".5" : "1")};
   color: ${(props) =>

app/editor/components/LinkSearchResult.tsx

@@ -61,7 +61,7 @@ const ListItem = styled.li<{
   text-decoration: none;
   overflow: hidden;
   white-space: nowrap;
-  cursor: pointer;
+  cursor: var(--pointer);
   user-select: none;
   line-height: ${(props) => (props.compact ? "inherit" : "1.2")};
   height: ${(props) => (props.compact ? "28px" : "auto")};

app/editor/components/ToolbarButton.tsx

@@ -7,7 +7,7 @@ export default styled.button<Props>`
   flex: 0;
   width: 24px;
   height: 24px;
-  cursor: pointer;
+  cursor: var(--pointer);
   border: none;
   background: none;
   transition: opacity 100ms ease-in-out;

app/models/User.ts

@@ -26,7 +26,9 @@ class User extends ParanoidModel {
   @observable
   language: string;
 
-  preferences: UserPreferences | null | undefined;
+  @Field
+  @observable
+  preferences: UserPreferences | null;
 
   email: string;
 

app/scenes/Document/components/ReferenceListItem.tsx

@@ -27,6 +27,7 @@ const DocumentLink = styled(Link)`
   min-width: 100%;
   overflow: hidden;
   position: relative;
+  cursor: var(--pointer);
 
   &:${hover},
   &:active,

app/scenes/Search/components/RecentSearches.tsx

@@ -89,6 +89,7 @@ const RecentSearch = styled(Link)`
   display: flex;
   justify-content: space-between;
   color: ${(props) => props.theme.textSecondary};
+  cursor: var(--pointer);
   padding: 1px 4px;
   border-radius: 4px;
 

app/scenes/Settings/Preferences.tsx

@@ -83,6 +83,20 @@ function Preferences() {
           ariaLabel={t("Language")}
         />
       </SettingRow>
+      <SettingRow
+        name="useCursorPointer"
+        label={t("Use pointer cursor")}
+        description={t(
+          "Show a hand cursor when hovering over interactive elements."
+        )}
+      >
+        <Switch
+          id="useCursorPointer"
+          name="useCursorPointer"
+          checked={user.preferences?.useCursorPointer !== false}
+          onChange={handlePreferenceChange}
+        />
+      </SettingRow>
       <SettingRow
         border={false}
         name="rememberLastPath"

app/scenes/Settings/components/DropToImport.tsx

@@ -116,7 +116,7 @@ const DropzoneContainer = styled.div<{
   padding: 52px;
   text-align: center;
   font-size: 15px;
-  cursor: pointer;
+  cursor: var(--pointer);
   opacity: ${(props) => (props.$disabled ? 0.5 : 1)};
 
   &:hover {

app/scenes/Settings/components/ImageInput.tsx

@@ -49,7 +49,7 @@ const ImageBox = styled(Flex)`
     bottom: 0;
     left: 0;
     opacity: 0;
-    cursor: pointer;
+    cursor: var(--pointer);
     transition: all 250ms;
   }
 

app/scenes/Settings/components/ImageUpload.tsx

@@ -158,7 +158,7 @@ const RangeInput = styled.input`
   width: 300px;
   margin-bottom: 30px;
   height: 4px;
-  cursor: pointer;
+  cursor: var(--pointer);
   color: inherit;
   border-radius: 99999px;
   background-color: #dee1e3;
@@ -170,7 +170,7 @@ const RangeInput = styled.input`
     width: 16px;
     border-radius: 50%;
     background: ${(props) => props.theme.text};
-    cursor: pointer;
+    cursor: var(--pointer);
   }
 
   &:focus {

app/scenes/Settings/components/UserListItem.tsx

@@ -43,7 +43,7 @@ const UserListItem = ({ user, showMenu }: Props) => {
 const Title = styled.span`
   &:hover {
     text-decoration: underline;
-    cursor: pointer;
+    cursor: var(--pointer);
   }
 `;
 

server/routes/api/users.ts

@@ -190,12 +190,12 @@ router.post("users.update", auth(), async (ctx) => {
   }
   if (preferences) {
     assertKeysIn(preferences, UserPreference);
-    if (has(preferences, UserPreference.RememberLastPath)) {
-      assertBoolean(preferences.rememberLastPath);
-      user.setPreference(
-        UserPreference.RememberLastPath,
-        preferences.rememberLastPath
-      );
+
+    for (const value of Object.values(UserPreference)) {
+      if (has(preferences, value)) {
+        assertBoolean(preferences[value]);
+        user.setPreference(value, preferences[value]);
+      }
     }
   }
   await user.save();

shared/editor/components/Styles.ts

@@ -347,7 +347,7 @@ h6:not(.placeholder):before {
   display: inline-block;
   color: ${props.theme.text};
   opacity: .75;
-  cursor: pointer;
+  cursor: var(--pointer);
   background: none;
   outline: none;
   border: 0;
@@ -673,7 +673,7 @@ ul.checkbox_list li::before {
 
 ul.checkbox_list li .checkbox {
   display: inline-block;
-  cursor: pointer;
+  cursor: var(--pointer);
   pointer-events: ${
     props.readOnly && !props.readOnlyWriteCheckboxes ? "none" : "initial"
   };
@@ -797,7 +797,7 @@ mark {
     font-weight: 500;
     text-decoration: none;
     flex-shrink: 0;
-    cursor: pointer;
+    cursor: var(--pointer);
     user-select: none;
     appearance: none !important;
     padding: 6px 8px;
@@ -1230,7 +1230,7 @@ table {
 
   &:hover,
   &:focus {
-    cursor: pointer;
+    cursor: var(--pointer);
     color: ${props.theme.text};
     background: ${props.theme.secondaryBackground};
   }

shared/editor/nodes/Image.tsx

@@ -551,7 +551,7 @@ const Button = styled.button`
   width: 24px;
   height: 24px;
   display: inline-block;
-  cursor: pointer;
+  cursor: var(--pointer);
   opacity: 0;
   transition: opacity 100ms ease-in-out;
 

shared/i18n/locales/en_US/translation.json

@@ -696,6 +696,8 @@
   "Delete account": "Delete account",
   "Language": "Language",
   "Choose the interface language. Community translations are accepted though our <2>translation portal</2>.": "Choose the interface language. Community translations are accepted though our <2>translation portal</2>.",
+  "Use pointer cursor": "Use pointer cursor",
+  "Show a hand cursor when hovering over interactive elements.": "Show a hand cursor when hovering over interactive elements.",
   "Remember previous location": "Remember previous location",
   "Automatically return to the document you were last viewing when the app is re-opened.": "Automatically return to the document you were last viewing when the app is re-opened.",
   "You may delete your account at any time, note that this is unrecoverable": "You may delete your account at any time, note that this is unrecoverable",

shared/styles/globals.ts

@@ -2,7 +2,9 @@ import { createGlobalStyle } from "styled-components";
 import styledNormalize from "styled-normalize";
 import { breakpoints, depths } from ".";
 
-export default createGlobalStyle`
+type Props = { useCursorPointer?: boolean };
+
+export default createGlobalStyle<Props>`
   ${styledNormalize}
 
   * {
@@ -17,6 +19,7 @@ export default createGlobalStyle`
     padding: 0;
     print-color-adjust: exact;
     -webkit-print-color-adjust: exact;
+    --pointer: ${(props) => (props.useCursorPointer ? "pointer" : "default")};
   }
 
   body,

shared/types.ts

@@ -46,6 +46,7 @@ export type IntegrationSettings<T> = T extends IntegrationType.Embed
 
 export enum UserPreference {
   RememberLastPath = "rememberLastPath",
+  UseCursorPointer = "useCursorPointer",
 }
 
 export type UserPreferences = { [key in UserPreference]?: boolean };