refactor

client/src/app/routes/menu/menu-group.tsx

@@ -2,7 +2,6 @@ import {useState, useRef} from 'react';
 import {useStyles, createStyleSheet} from 'react-native-unistyles';
 import {Pressable, View, Text} from 'react-native';
 import {Icon} from 'react-exo/icon';
-import {isTouch} from 'app/utils/platform';
 import {useTheme} from 'app/hooks/use-theme';
 
 interface MenuGroupProps extends React.PropsWithChildren {
@@ -101,7 +100,7 @@ const stylesheet = createStyleSheet(theme => ({
     color: theme.colors.mutedForeground,
     lineHeight: theme.font.labelHeight,
     fontSize: 11,
-    ...isTouch() && {
+    ...__TOUCH__ && {
       lineHeight: 36,
       fontSize: 12,
     },

client/src/app/routes/menu/menu-item.tsx

@@ -3,7 +3,6 @@ import {View, Text} from 'react-native';
 import {useFocusable} from '@noriginmedia/norigin-spatial-navigation';
 import {useStyles, createStyleSheet} from 'react-native-unistyles';
 import {useLocation, useNavigate, Link} from 'react-exo/navigation';
-import {isTouch} from 'app/utils/platform';
 
 interface MenuItemProps extends React.PropsWithChildren {
   path: string,
@@ -81,7 +80,7 @@ const stylesheet = createStyleSheet(theme => ({
     color: theme.colors.secondaryForeground,
     lineHeight: 24,
     fontSize: 11,
-    ...isTouch() && {
+    ...__TOUCH__ && {
       marginLeft: theme.display.space2,
       lineHeight: 40,
       fontSize: 13,

client/src/env.d.ts

@@ -3,6 +3,11 @@
 import type {AppThemes, AppBreakpoints} from 'design/styles';
 import type {SvgProps} from 'react-native-svg';
 
+// Global variables
+declare global {
+  var __TOUCH__: boolean;
+}
+
 // Set Unistyles theme types
 declare module 'react-native-unistyles' {
   export interface UnistylesThemes extends AppThemes {}

client/src/global.ts

@@ -0,0 +1,3 @@
+import {isTouch} from 'app/utils/platform';
+
+globalThis.__TOUCH__ = isTouch();

client/src/index.native.tsx

@@ -1,3 +1,4 @@
+import 'global';
 import 'design/styles';
 import 'react-exo/gesture';
 import 'react-native-url-polyfill/auto';

client/src/index.tsx

@@ -1,3 +1,4 @@
+import 'global';
 import 'design/styles';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import 'react-exo/checkbox.css';

client/src/media/dir/hooks/use-dir-hfs.ts

@@ -10,8 +10,8 @@ import {isInitDirectory, INIT_DIRECTORIES} from '../utils/hfs/path';
 import {getThumbnail} from '../utils/hfs/meta';
 import {saveAs} from '../utils/hfs/fs';
 
-import type {GestureResponderEvent} from 'react-native';
 import type {HfsCtx, HfsFileEntry} from 'media/dir/types/hfs';
+import type {GestureResponderEvent} from 'react-native';
 
 export function useDirHfs(path: string, tmp?: boolean): Omit<HfsCtx, 'bar'> {
   const [list, setList] = useState<HfsFileEntry[]>([]);

client/src/media/dir/hooks/use-dir-zip.ts

@@ -1,16 +1,16 @@
 import {fs} from '@zip.js/zip.js';
 import {web} from 'react-exo/fs';
-import {useCallback, useEffect, useState, useRef} from 'react';
+import {useEffect, useCallback, useState, useRef} from 'react';
 import {usePath} from 'app/hooks/use-path';
 import {usePut} from 'app/data/store';
 import {useFile} from 'media/file/hooks/use-file';
 import {toPath} from 'app/utils/formatting';
 import media from 'media/store';
 
-import type {FS} from '@zip.js/zip.js';
 import type {Zip, ZipCtx, ZipFileEntry} from 'media/dir/types/zip';
 import type {GestureResponderEvent} from 'react-native';
 import type {HfsFileEntry} from 'media/dir/types/hfs';
+import type {FS} from '@zip.js/zip.js';
 
 export function useDirZip(path: string): ZipCtx {
   const [zip, setZip] = useState<Zip | null>(null);
@@ -99,5 +99,8 @@ export function useDirZip(path: string): ZipCtx {
     })();
   }, [buffer]);
 
-  return {zip, cmd: {extract}};
+  return {
+    zip,
+    cmd: {extract}
+  };
 }

client/src/media/dir/hooks/use-entry-hfs.ts

@@ -9,44 +9,44 @@ import media from 'media/store';
 import {is as isZip} from './use-entry-zip';
 import {is as isTorrent} from './use-entry-torrent';
 
-import type {View, GestureResponderEvent} from 'react-native';
 import type {HfsCmd, HfsFileEntry} from 'media/dir/types/hfs';
 import type {EntryHfsProps} from 'media/dir/stacks/entry-hfs';
 import type {CleanupFn} from 'app/utils/dragdrop';
+import type * as RN from 'react-native';
 
 export const {is, get, type} = $.tag<HfsFileEntry, HfsCmd>('hfs');
 
-export function useEntryHfs({item, cmd, opt, tmp}: EntryHfsProps) {
+export function useEntryHfs({item, cmd, opt}: EntryHfsProps) {
   const [dropping, setDropping] = useState(false);
   const put = usePut();
 
   // Spatial navigation
   const {focused, ref: refFoc, focusSelf: foc} = useFocusable({
-    onFocus: (_lay, _props, e) => tmp
+    onFocus: (_lay, _props, e) => opt.preview
       ? undefined
-      : cmd.select(item, e.event as unknown as GestureResponderEvent),
-    onEnterPress: () => tmp
+      : cmd.select(item, e.event as unknown as RN.GestureResponderEvent),
+    onEnterPress: () => opt.preview
       ? cmd.select(item)
       : item.isDirectory
         ? cmd.open(item)
         : cmd.select(item),
     onArrowPress: (dir) => {
-      if (dir !== 'left' || tmp) return true;
+      if (dir !== 'left' || opt.preview) return true;
       if (cmd.goUp()) return false;
       return true;
     },
   });
 
   // Drag and drop
-  const refDnd = useRef<View>(null);
+  const refDnd = useRef<RN.View>(null);
   useEffect(() => {
     if (!refDnd.current) return;
     const element = refDnd.current as unknown as HTMLElement;
     return _.combine(...[
       _.draggable({
         element,
         getInitialData: () => get(item, cmd),
-        onGenerateDragPreview: _.dragPreview(opt.selected.count),
+        onGenerateDragPreview: _.dragPreview(opt.selected?.count ?? 1),
         onDragStart: () => put(media.actions.drag(item.name)),
         onDrop: () => put(media.actions.drag(null)),
       }),
@@ -86,7 +86,7 @@ export function useEntryHfs({item, cmd, opt, tmp}: EntryHfsProps) {
         },
       }),
     ].filter(Boolean) as CleanupFn[]);
-  }, [item, cmd, opt.selected.count, put]);
+  }, [item, cmd, opt.selected?.count, put]);
 
   return {
     ext: toPath(item.name, item.isDirectory)?.ext,

client/src/media/dir/hooks/use-entry-torrent.ts

@@ -4,10 +4,10 @@ import {toPath} from 'app/utils/formatting';
 import * as dnd from 'app/utils/dragdrop';
 import * as $ from 'media/utils/entry';
 
-import type {View} from 'react-native';
-import type {CleanupFn} from 'app/utils/dragdrop';
 import type {TorrentFileEntry, TorrentCmd} from 'media/dir/types/torrent';
 import type {EntryTorrentProps} from 'media/dir/stacks/entry-torrent';
+import type {CleanupFn} from 'app/utils/dragdrop';
+import type * as RN from 'react-native';
 
 export const {is, get, type} = $.tag<TorrentFileEntry, TorrentCmd>('torrent');
 
@@ -20,7 +20,7 @@ export function useEntryTorrent({item, cmd, opt}: EntryTorrentProps) {
   });
 
   // Drag and drop
-  const refDnd = useRef<View>(null);
+  const refDnd = useRef<RN.View>(null);
   useEffect(() => {
     if (!refDnd.current) return;
     const element = refDnd.current as unknown as HTMLElement;

client/src/media/dir/hooks/use-entry-zip.ts

@@ -4,10 +4,10 @@ import {toPath} from 'app/utils/formatting';
 import * as dnd from 'app/utils/dragdrop';
 import * as $ from 'media/utils/entry';
 
-import type {View} from 'react-native';
-import type {CleanupFn} from 'app/utils/dragdrop';
 import type {ZipFileEntry, ZipCmd} from 'media/dir/types/zip';
 import type {EntryZipProps} from 'media/dir/stacks/entry-zip';
+import type {CleanupFn} from 'app/utils/dragdrop';
+import type * as RN from 'react-native';
 
 export const {is, get, type} = $.tag<ZipFileEntry, ZipCmd>('zip');
 
@@ -20,7 +20,7 @@ export function useEntryZip({item, cmd, opt}: EntryZipProps) {
   });
 
   // Drag and drop
-  const refDnd = useRef<View>(null);
+  const refDnd = useRef<RN.View>(null);
   useEffect(() => {
     if (!refDnd.current) return;
     const element = refDnd.current as unknown as HTMLElement;

client/src/media/dir/stacks/dir-hfs.tsx

@@ -1,18 +1,27 @@
 import {List} from 'media/stacks/list';
 import {EntryHfs} from 'media/dir/stacks/entry-hfs';
-import type {HfsCtx} from 'media/dir/types/hfs';
+import type {HfsCtx, HfsOpt} from 'media/dir/types/hfs';
 
 export function DirHfs({hfs, cmd, ext, bar}: HfsCtx) {
   const {list, path} = hfs;
   const {dnd, sel, tmp} = ext;
+  const layout = tmp ? 'grid' : 'list'; // This is default, make user configurable
   return (
     <List
-      {...{path, list, ext, bar}}
+      items={list}
+      data={ext}
+      opts={{
+        layout,
+        preview: tmp,
+        header: bar ? {path, actions: bar?.actions} : undefined,
+      }}
       render={({item, index}) => {
         const self = path ? `${path}/${item.name}` : item.name;
         const prev = list[index - 1];
         const next = list[index + 1];
-        const opt = {
+        const opt: Partial<HfsOpt> = {
+          layout,
+          preview: tmp,
           dragging: dnd?.includes(self),
           selected: {
             self: sel?.includes(self),
@@ -22,7 +31,7 @@ export function DirHfs({hfs, cmd, ext, bar}: HfsCtx) {
           },
         };
         return (
-          <EntryHfs {...{item, cmd, opt, tmp}}/>
+          <EntryHfs {...{item, cmd, opt}}/>
         );
       }}
     />

client/src/media/dir/stacks/dir-torrent.tsx

@@ -1,12 +1,19 @@
 import {List} from 'media/stacks/list';
 import {EntryTorrent} from 'media/dir/stacks/entry-torrent';
-import type {TorrentCtx} from 'media/dir/types/torrent';
+import type {TorrentCtx, TorrentOpt} from 'media/dir/types/torrent';
 
 export function DirTorrent({torrent, cmd}: TorrentCtx) {
   return (
     <List
-      list={torrent?.list}
-      render={({item}) => <EntryTorrent {...{item, cmd, opt: {}}}/>}
+      items={torrent?.list}
+      opts={{layout: 'grid', preview: true}}
+      render={({item}) => {
+        const opt: Partial<TorrentOpt> = {
+          layout: 'grid',
+          preview: true,
+        };
+        return <EntryTorrent {...{item, cmd, opt}}/>;
+      }}
     />
   );
 }

client/src/media/dir/stacks/dir-zip.tsx

@@ -1,13 +1,19 @@
 import {List} from 'media/stacks/list';
 import {EntryZip} from 'media/dir/stacks/entry-zip';
-import type {ZipCtx} from 'media/dir/types/zip';
+import type {ZipCtx, ZipOpt} from 'media/dir/types/zip';
 
 export function DirZip({zip, cmd}: ZipCtx) {
   return (
     <List
-      list={zip?.list}
-      ext={{tmp: true}}
-      render={({item}) => <EntryZip {...{item, cmd, opt: {}}}/>}
+      items={zip?.list}
+      opts={{layout: 'grid', preview: true}}
+      render={({item}) => {
+        const opt: Partial<ZipOpt> = {
+          layout: 'grid',
+          preview: true,
+        };
+        return <EntryZip {...{item, cmd, opt}}/>;
+      }}
     />
   );
 }

client/src/media/dir/stacks/entry-hfs.tsx

@@ -9,11 +9,10 @@ export interface EntryHfsProps {
   item: HfsFileEntry,
   cmd: HfsCmd,
   opt: HfsOpt,
-  tmp?: boolean,
 }
 
 export function EntryHfs(props: EntryHfsProps) {
-  const {item, tmp} = props;
+  const {item} = props;
   const {name, size, isFile} = item;
   const {ext, cmd, opt, ref, foc} = useEntryHfs(props);
   const dir = !isFile;
@@ -24,7 +23,7 @@ export function EntryHfs(props: EntryHfsProps) {
       onPress={cmd.select}
       onDoublePress={dir ? () => cmd.open(true) : undefined}>
       <MenuHfs {...{item, cmd}} on={() => foc()}>
-        <ListRow {...{name, size, ext, dir, tmp, opt}} img={cmd.thumbnail}/>
+        <ListRow {...{name, size, ext, dir, opt}} img={cmd.thumbnail}/>
       </MenuHfs>
     </Touch>
   );

client/src/media/dir/stacks/entry-torrent.tsx

@@ -21,8 +21,7 @@ export function EntryTorrent(props: EntryTorrentProps) {
   return (
     <Touch
       refs={ref}
-      onPress={cmd.download}
-      onDoublePress={dir ? cmd.download : undefined}>
+      onPress={cmd.download}>
       <MenuTorrent {...{item, cmd}} on={() => foc()}>
         <ListRow {...{name, size, ext, dir, opt}}/>
       </MenuTorrent>

client/src/media/dir/stacks/entry-zip.tsx

@@ -19,8 +19,7 @@ export function EntryZip(props: EntryZipProps) {
   return (
     <Touch
       refs={ref}
-      onPress={cmd.extract}
-      onDoublePress={dir ? cmd.extract : undefined}>
+      onPress={cmd.extract}>
       <MenuZip {...{item, cmd}} on={() => foc()}>
         <ListRow {...{name, size, ext, dir, opt, tmp: true}}/>
       </MenuZip>

client/src/media/dir/types/hfs.ts

@@ -19,7 +19,12 @@ export type HfsCtx = {
 }
 
 export type HfsOpt = {
-  selected: {
+  layout?: 'list' | 'grid',
+  preview?: boolean,
+  focused?: boolean,
+  dragging?: boolean,
+  dropping?: boolean,
+  selected?: {
     self: boolean,
     prev: boolean,
     next: boolean,

client/src/media/dir/types/torrent.ts

@@ -15,6 +15,13 @@ export type TorrentCtx = {
   cmd: TorrentCmd,
 }
 
+export type TorrentOpt = {
+  layout?: 'list' | 'grid',
+  preview?: boolean,
+  focused?: boolean,
+  dragging?: boolean,
+};
+
 export type TorrentCmd = {
   download: (
     file: TorrentFileEntry,

client/src/media/dir/types/zip.ts

@@ -20,6 +20,13 @@ export interface Zip {
   }>,
 }
 
+export type ZipOpt = {
+  layout?: 'list' | 'grid',
+  preview?: boolean,
+  focused?: boolean,
+  dragging?: boolean,
+};
+
 export type ZipCtx = {
   zip: Zip | null,
   cmd: ZipCmd,