feat: Add cursor style user preference (#4199)

* feat: Add cursor style user preference

* Remove headings for now

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);
   }
 `;