src-tauri/tauri.conf.json

@@ -51,12 +51,11 @@
         "icons/icon.icns",
         "icons/icon.ico"
       ],
-      "identifier": "xyz.archgrid.comic-viewer",
+      "identifier": "xyz.archgrid.comic_viewer",
       "targets": "all"
     },
     "security": {
-      "devCsp": "default-src 'self'; img-src 'self' asset: https://asset.localhost",
+      "csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost"
-      "csp": null
     },
     "updater": {
       "active": false
@@ -71,4 +70,4 @@
       }
     ]
   }
-}
+}

src/NavMenu.tsx

@@ -1,4 +1,3 @@
-//@ts-nocheck
 import { Stack, useMantineTheme } from '@mantine/core';
 import { ifElse, path, propEq } from 'ramda';
 import { FC, useMemo } from 'react';

src/components/ComicView.tsx

@@ -1,4 +1,3 @@
-//@ts-nocheck
 import { Box } from '@mantine/core';
 import { equals } from 'ramda';
 import { FC, useLayoutEffect } from 'react';

src/components/ContinuationView.tsx

@@ -1,4 +1,3 @@
-//@ts-nocheck
 import EventEmitter from 'events';
 import { indexOf, isEmpty, length, map, mergeLeft, pluck, range } from 'ramda';
 import { FC, useCallback, useContext, useMemo, useRef } from 'react';

src/components/FileList.tsx

@@ -1,4 +1,3 @@
-//@ts-nocheck
 import { Box, Center, Text } from '@mantine/core';
 import EventEmitter from 'events';
 import { includes, isEmpty, map, not, pipe, sort } from 'ramda';

src/components/FileTools.tsx

@@ -1,4 +1,3 @@
-//@ts-nocheck
 import { Button, Group, Tooltip } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { IconFolder } from '@tabler/icons-react';

src/components/PicToolbar.tsx

@@ -1,4 +1,3 @@
-//@ts-nocheck
 import {
   ActionIcon,
   Group,

src/components/SingleView.tsx

@@ -1,70 +1,5 @@
-//@ts-nocheck
+import { FC } from 'react';
-import EventEmitter from 'events';
-import { find, gt, head, indexOf, isNil, lt, max, pluck, propEq } from 'ramda';
-import { BaseSyntheticEvent, FC, useCallback, useContext, useMemo } from 'react';
-import { useLifecycles, useMeasure } from 'react-use';
-import { EventBusContext } from '../EventBus';
-import { useFileListStore } from '../states/files';
-import { useZoomState } from '../states/zoom';
 
 export const SingleView: FC = () => {
-  const files = useFileListStore.use.files();
+  return <div></div>;
-  const actives = useFileListStore.use.actives();
-  const zoom = useZoomState.use.currentZoom();
-  const viewHeight = useZoomState.use.viewHeight();
-  const updateActives = useFileListStore.use.updateActiveFiles();
-  const ebus = useContext<EventEmitter>(EventBusContext);
-  const [pageConRef, { width: pageConWidth }] = useMeasure();
-  const activeFile = useMemo(() => {
-    let firstFile = head(actives);
-    return find(propEq('filename', firstFile), files);
-  }, [files, actives]);
-  const largerThanView = useMemo(() => {
-    if (isNil(activeFile)) return false;
-    let imageHeightAfterZoom = activeFile?.height * (zoom / 100);
-    return gt(imageHeightAfterZoom, viewHeight);
-  }, [activeFile, viewHeight, zoom]);
-  const handlePaginationAction = useCallback(
-    (event: BaseSyntheticEvent) => {
-      let middle = pageConWidth / 2;
-      let pagingDirection = lt(event.nativeEvent.offsetX, middle) ? -1 : 1;
-      let targetIndex = indexOf(activeFile?.filename, pluck('filename', files)) + pagingDirection;
-      updateActives([files[max(0, targetIndex)].filename]);
-    },
-    [files, activeFile, pageConWidth]
-  );
-
-  useLifecycles(
-    () => {
-      ebus?.addListener('navigate_offset', ({ filename }) => {
-        updateActives([filename]);
-      });
-    },
-    () => {
-      ebus?.removeAllListeners('navigate_offset');
-    }
-  );
-
-  return (
-    <div
-      style={{ position: 'relative', overflow: 'auto', contain: 'strict', height: '100%' }}
-      onClick={handlePaginationAction}
-      ref={pageConRef}
-    >
-      {!isNil(activeFile) && (
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: largerThanView ? 'flex-start' : 'center',
-            alignItems: 'center',
-            width: '100%',
-            height: largerThanView ? '100%' : viewHeight
-          }}
-        >
-          <img src={activeFile.path} style={{ width: `${zoom}%` }} />
-        </div>
-      )}
-    </div>
-  );
 };

src/main.tsx

@@ -1,4 +1,3 @@
-//@ts-nocheck
 import { ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core';
 import { useColorScheme } from '@mantine/hooks';
 import { Notifications } from '@mantine/notifications';

src/theme.ts

@@ -1,20 +1,17 @@
-//@ts-nocheck
 import { MantineTheme } from '@mantine/core';
 import { useColorScheme } from '@mantine/hooks';
 import { ifElse, path, propEq } from 'ramda';
 
-const bgColorSelectFn = (lightIndex: number, darkIndex: number) =>
+const bgColorSelectFn = ifElse(
-  ifElse(
+  propEq('colorScheme', 'light'),
-    propEq('colorScheme', 'light'),
+  path(['colors', 'cbg', 8]),
-    path(['colors', 'cbg', lightIndex]),
+  path(['colors', 'cbg', 0])
-    path(['colors', 'cbg', darkIndex])
+);
-  );
+const fgColorSelectFn = ifElse(
-const fgColorSelectFn = (lightIndex: number, darkIndex: number) =>
+  propEq('colorScheme', 'light'),
-  ifElse(
+  path(['colors', 'cfg', 0]),
-    propEq('colorScheme', 'light'),
+  path(['colors', 'cfg', 8])
-    path(['colors', 'cfg', lightIndex]),
+);
-    path(['colors', 'cfg', darkIndex])
-  );
 
 export function useAppTheme(): Partial<MantineTheme> {
   const colorScheme = useColorScheme();
@@ -53,23 +50,11 @@ export function useAppTheme(): Partial<MantineTheme> {
     globalStyles: theme => ({
       'html, body': {
         height: '100vh',
-        color: fgColorSelectFn(0, 8)(theme),
+        color: fgColorSelectFn(theme),
-        backgroundColor: bgColorSelectFn(8, 0)(theme)
+        backgroundColor: bgColorSelectFn(theme)
       },
       '#root': {
         height: '100%'
-      },
-      '::-webkit-scrollbar': {
-        width: 4,
-        backgroundColor: bgColorSelectFn(6, 2)(theme)
-      },
-      '::-webkit-scrollbar-track': {
-        borderRadius: 2,
-        backgroundColor: 'transparent'
-      },
-      '::-webkit-scrollbar-thumb': {
-        borderRadius: 2,
-        backgroundColor: bgColorSelectFn(4, 4)(theme)
       }
     })
   };