Add Library View

package.json

@@ -115,6 +115,7 @@
     "screenfull": "6.0.2",
     "sortablejs": "1.15.0",
     "swiper": "9.3.2",
+    "use-local-storage-state": "17.3.0",
     "webcomponents.js": "0.7.24",
     "whatwg-fetch": "3.6.2",
     "workbox-core": "6.6.0",

src/apps/experimental/components/library/AlphabetPicker.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+
+import Box from '@mui/material/Box';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+
+import { LibraryViewSettings } from 'types/library';
+import 'components/alphaPicker/style.scss';
+
+interface AlphabetPickerProps {
+    className?: string;
+    libraryViewSettings: LibraryViewSettings;
+    setLibraryViewSettings: React.Dispatch<
+        React.SetStateAction<LibraryViewSettings>
+    >;
+}
+
+const AlphabetPicker: React.FC<AlphabetPickerProps> = ({
+    className,
+    libraryViewSettings,
+    setLibraryViewSettings
+}) => {
+    const handleValue = useCallback(
+        (
+            event: React.MouseEvent<HTMLElement>,
+            newValue: string | null | undefined
+        ) => {
+            setLibraryViewSettings((prevState) => ({
+                ...prevState,
+                StartIndex: 0,
+                Alphabet: newValue
+            }));
+        },
+        [setLibraryViewSettings]
+    );
+
+    const containerClassName = classNames(
+        'alphaPicker',
+        className,
+        'alphaPicker-fixed-right'
+    );
+
+    const btnClassName = classNames(
+        'paper-icon-button-light',
+        'alphaPickerButton'
+    );
+
+    const letters = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+
+    return (
+        <Box
+            className={containerClassName}
+            sx={{
+                position: 'fixed',
+                bottom: '1.5em',
+                fontSize: '80%'
+            }}
+        >
+            <ToggleButtonGroup
+                orientation='vertical'
+                value={libraryViewSettings.Alphabet}
+                exclusive
+                color='primary'
+                size='small'
+                onChange={handleValue}
+            >
+                {letters.map((l) => (
+                    <ToggleButton
+                        key={l}
+                        value={l}
+                        className={btnClassName}
+                    >
+                        {l}
+                    </ToggleButton>
+                ))}
+            </ToggleButtonGroup>
+        </Box>
+    );
+};
+
+export default AlphabetPicker;