feat: add full screen toggle to interface controls (#404)

* refactor: remove unused about link

* refactor: reduce requirements of row component

* feat: add full screen toggle to interface controls

frontend/package.json

@@ -12,6 +12,7 @@
     "react-hotkeys": "^2.0.0",
     "react-jss": "^10.9.2",
     "react-router-dom": "^6.3.0",
+    "screenfull": "^6.0.2",
     "swr": "^1.3.0",
     "use-debounce": "^8.0.4"
   },

frontend/src/App.tsx

@@ -8,7 +8,6 @@ import { SOURCES_API, TRANSLATION_SOURCES_API } from './lib/consts'
 import { TranslationSourcesContext } from './lib/contexts'
 import { getLastOpened, getPosition } from './lib/utils'
 import NotFound from './screens/404'
-import About from './screens/About'
 import LineView from './screens/LineView'
 import SourceView from './screens/SourceView'
 import { SourcesResponse, TranslationSourcesResponse } from './types/api'
@@ -45,8 +44,6 @@ const App = () => {
 
             <Route path="/" element={<Navigate to={position} />} />
 
-            <Route path="/about" element={<About />} />
-
             <Route
               path="/sources/:source/page/:page/line/:line/view"
               element={<LineView sources={sources} />}

frontend/src/components/Nav.tsx

@@ -83,7 +83,7 @@ const Nav = () => {
         </div>
       </Content>
       <Modal visible={visibleCollections} setVisible={setVisibleCollections}>
-        <Collections setVisible={setVisibleCollections} />
+        <Collections setVisibleCollections={setVisibleCollections} />
       </Modal>
       <Modal visible={visibleAbout} setVisible={setVisibleAbout}>
         <About />

frontend/src/components/Row.tsx

@@ -1,7 +1,5 @@
-import { ChevronRight } from 'lucide-react'
 import { ReactNode } from 'react'
 import { createUseStyles } from 'react-jss'
-import { Link } from 'react-router-dom'
 
 import theme from '../helpers/theme'
 
@@ -21,10 +19,9 @@ const useStyles = createUseStyles( {
     '& + $row': {
       borderTop: [ '1px', 'solid', theme.Separator ],
     },
-    '& > div': {
+    '& > *': {
       display: 'flex',
       alignItems: 'center',
-
     },
   },
   disabled: {
@@ -48,23 +45,21 @@ const useStyles = createUseStyles( {
 } )
 
 type RowProps = {
-  to?: string,
-  children: ReactNode,
-  onClick?: React.MouseEventHandler<HTMLAnchorElement>,
   disabled?: boolean,
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>,
+  children: ReactNode,
 }
 
-const Row = ( { to, disabled, onClick, children }: RowProps ) => {
+const Row = ( { disabled, onClick, children }: RowProps ) => {
   const classes = useStyles()
   return (
-    <Link
-      to={( to && !disabled ) ? to : '#'}
+    <a
+      href="#"
       className={`${classes.row} ${disabled ? classes.disabled : ''}`}
       onClick={( onClick && !disabled ) ? onClick : ( () => null )}
     >
-      <div>{children}</div>
-      {to && <div><ChevronRight /></div>}
-    </Link>
+      {children}
+    </a>
   )
 }
 

frontend/src/components/Separator.tsx

@@ -0,0 +1,34 @@
+import { createUseStyles } from 'react-jss'
+
+import theme from '../helpers/theme'
+
+type SeparatorProps = {
+  height?: string,
+  margin?: string,
+}
+
+const useStyles = createUseStyles( {
+  separator: {
+    width: '100%',
+    height: '1px',
+    margin: `${theme.Gap} 0 0`,
+    padding: 0,
+    backgroundColor: `${theme.Separator}`,
+  },
+
+  '@media (prefers-color-scheme: dark)': {
+    separator: {
+      backgroundColor: `${theme.SeparatorDarkScheme}`,
+    },
+  },
+
+} )
+
+const Separator = ( { height, margin }: SeparatorProps ) => {
+  const classes = useStyles()
+  return (
+    <div className={classes.separator} style={{ height, margin }} />
+  )
+}
+
+export default Separator

frontend/src/screens/Collections.tsx

@@ -1,4 +1,6 @@
+import { ChevronRight } from 'lucide-react'
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 import AsciiGurmukhi from '../components/AsciiGurmukhi'
 import Content from '../components/Content'
@@ -23,6 +25,13 @@ const Collections = ( { setVisibleCollections }: CollectionsProps ) => {
 
   const orderId = { 1: 0, 2: 1, 11: 3, 3: 4, 4: 5, 7: 6, 6: 7, 5: 8, 8: 9, 9: 10, 10: 11 }
 
+  const navigate = useNavigate()
+
+  const handleOnClick = ( link: string ) => {
+    navigate( link )
+    setVisibleCollections( false )
+  }
+
   return (
     <Content>
       <Section>
@@ -33,10 +42,10 @@ const Collections = ( { setVisibleCollections }: CollectionsProps ) => {
           .map( ( { id, nameGurmukhi } ) => (
             <Row
               key={id}
-              to={`/sources/${id}/page/1/line/1`}
-              onClick={() => setVisibleCollections( false )}
+              onClick={() => handleOnClick( `/sources/${id}/page/1/line/0` )}
             >
               <AsciiGurmukhi>{nameGurmukhi}</AsciiGurmukhi>
+              <ChevronRight />
             </Row>
           ) )}
       </Section>

frontend/src/screens/Interface.tsx

@@ -1,19 +1,44 @@
-import { useAtom } from 'jotai'
+import { atom, useAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
+import screenfull from 'screenfull'
 
 import Content from '../components/Content'
+import Row from '../components/Row'
 import Section from '../components/Section'
+import Separator from '../components/Separator'
 import Slider from '../components/Slider'
 
 export const zoom = atomWithStorage( 'zoom', 1 )
+export const fullscreen = atom( false )
 
 const Interface = () => {
   const [ valueZoom, setValueZoom ] = useAtom( zoom )
+  const [ valueFullscreen, setValueFullscreen ] = useAtom( fullscreen )
+
+  if ( screenfull.isEnabled ) {
+    screenfull.on( 'change', () => {
+      setValueFullscreen( !!screenfull.isFullscreen )
+    } )
+  }
+
+  const toggleFullScreen = () => {
+    if ( screenfull.isEnabled ) {
+      screenfull.toggle().catch( ( err: Error ) => console.error( 'Error fetching Sources', err ) )
+    }
+  }
+
   return (
     <Content>
       <Section>
-        <h2>Zoom</h2>
-        <Slider min={1} max={4} step={0.1} units="x" value={valueZoom} setValue={setValueZoom} />
+        <div style={{ width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start' }}>
+          <p>Zoom</p>
+          <Slider min={1} max={4} step={0.1} units="x" value={valueZoom} setValue={setValueZoom} />
+        </div>
+        <Separator />
+        <Row onClick={toggleFullScreen}>
+          <p>Full screen</p>
+          <input type="checkbox" checked={!!valueFullscreen} />
+        </Row>
       </Section>
     </Content>
   )