Expose highlight on release to web

packages/web/components/templates/article/HighlightsLayer.tsx

@@ -573,7 +573,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
   )
 
   useEffect(() => {
-    if (props.highlightOnRelease && selectionData?.wasDragEvent) {
+    if (props.highlightOnRelease) {
       handleAction('create')
       setSelectionData(null)
     }

packages/web/components/templates/article/ReaderSettingsControl.tsx

@@ -167,6 +167,37 @@ function AdvancedSettings(props: SettingsProps): JSX.Element {
           <SwitchThumb />
         </SwitchRoot>
       </HStack>
+
+      <HStack
+        css={{
+          width: '100%',
+          pr: '30px',
+          alignItems: 'center',
+          '&:hover': {
+            opacity: 0.8,
+          },
+          '&[data-state="on"]': {
+            bg: '$thBackground',
+          },
+        }}
+        alignment="start"
+        distribution="between"
+      >
+        <Label htmlFor="auto-highlight-mode" css={{ width: '100%' }}>
+          <StyledText style="displaySettingsLabel" css={{ pl: '20px' }}>
+            Auto highlight mode
+          </StyledText>
+        </Label>
+        <SwitchRoot
+          id="high-contrast-text"
+          checked={readerSettings.highlightOnRelease ?? false}
+          onCheckedChange={(checked) => {
+            readerSettings.setHighlightOnRelease(checked)
+          }}
+        >
+          <SwitchThumb />
+        </SwitchRoot>
+      </HStack>
     </VStack>
   )
 }

packages/web/lib/hooks/useReaderSettings.tsx

@@ -31,6 +31,9 @@ export type ReaderSettings = {
   setJustifyText: (set: boolean) => void
   highContrastText: boolean | undefined
   setHighContrastText: (set: boolean) => void
+
+  highlightOnRelease: boolean | undefined
+  setHighlightOnRelease: (set: boolean) => void
 }
 
 export const useReaderSettings = (): ReaderSettings => {
@@ -61,6 +64,13 @@ export const useReaderSettings = (): ReaderSettings => {
     initialValue: false,
   })
 
+  const [highlightOnRelease, setHighlightOnRelease] = usePersistedState<
+    boolean | undefined
+  >({
+    key: `--display-highlight-on-release`,
+    initialValue: false,
+  })
+
   const [justifyText, setJustifyText] = usePersistedState<boolean | undefined>({
     key: `--display-justify-text`,
     initialValue: false,
@@ -216,5 +226,7 @@ export const useReaderSettings = (): ReaderSettings => {
     setJustifyText,
     highContrastText,
     setHighContrastText,
+    highlightOnRelease,
+    setHighlightOnRelease,
   }
 }