Reorg

.vscode/settings.json

@@ -13,6 +13,8 @@
     "tvos": "macos",
     "vocs": "vue",
     "rive": "animation",
+    "media": "examples",
+    "world": "public",
   },
   "material-icon-theme.files.associations": {
     "app/layout.tsx": "renovate",

client/src/app/base/Menu.tsx

@@ -2,7 +2,7 @@ import {Trans} from '@lingui/macro';
 import {View, ScrollView, Text} from 'react-native';
 import {useStyles, createStyleSheet} from 'react-native-unistyles';
 import {useFileSystem} from 'app/hooks/useFileSystem';
-import {useLists} from 'media/files/hooks/useLists';
+import {useLists} from 'media/hooks/useLists';
 import {MenuItem} from 'app/base/MenuItem';
 import {MenuHeader} from 'app/base/MenuHeader';
 import {MenuSection} from 'app/base/MenuSection';

client/src/app/routes/LayoutMain.tsx

@@ -5,7 +5,7 @@ import {useStyles, createStyleSheet} from 'react-native-unistyles';
 import {useDeviceSession} from 'app/hooks/useDeviceSession';
 import {useProfile} from 'app/data';
 import {Menu} from 'app/base/Menu';
-import {File} from 'media/files/base/File';
+import {File} from 'media/base/File';
 
 import type {useAppContext} from 'app/hooks/useAppContext';
 

client/src/app/routes/index.native.tsx

@@ -8,10 +8,10 @@ export const Screen = {
   Settings: require('../../settings/routes/ScreenSettings').default,
   Teaser: require('./ScreenTeaser').default,
   // Media
-  Browse: require('../../media/files/routes/ScreenBrowse').default,
+  Browse: require('../../media/routes/ScreenBrowse').default,
   // World
-  Map: require('../../world/map/routes/ScreenMap').default,
-  Calendar: require('../../world/events/routes/ScreenCalendar').default,
+  Map: require('../../world/routes/ScreenMap').default,
+  Calendar: require('../../world/routes/ScreenCalendar').default,
   // Dev
   Design: require('../../dev/routes/ScreenDesign').default,
   Library: require('../../dev/routes/ScreenLibrary').default,

client/src/app/routes/index.tsx

@@ -10,10 +10,10 @@ export const Screen = {
   Settings: lazy(() => import('../../settings/routes/ScreenSettings')),
   Teaser: lazy(() => import('./ScreenTeaser')),
   // Media
-  Browse: lazy(() => import('../../media/files/routes/ScreenBrowse')),
+  Browse: lazy(() => import('../../media/routes/ScreenBrowse')),
   // World
-  Map: lazy(() => import('../../world/map/routes/ScreenMap')),
-  Calendar: lazy(() => import('../../world/events/routes/ScreenCalendar')),
+  Map: lazy(() => import('../../world/routes/ScreenMap')),
+  Calendar: lazy(() => import('../../world/routes/ScreenCalendar')),
   // Dev
   Design: lazy(() => import('../../dev/routes/ScreenDesign')),
   Library: lazy(() => import('../../dev/routes/ScreenLibrary')),

client/src/app/store/index.tsx

@@ -4,7 +4,7 @@ import {PageLoading} from 'app/base/PageLoading';
 import config from 'config';
 
 import app from './app';
-import files from 'media/files/store';
+import media from 'media/store';
 import settings from 'settings/store';
 
 // https://redux-toolkit.js.org/tutorials/rtk-query/#wrap-your-application-with-the-provider
@@ -28,7 +28,7 @@ const reducer = $.persistReducer({
 }, $.combineReducers({
   router: $.history.context.routerReducer,
   app: app.reducer,
-  files: files.reducer,
+  media: media.reducer,
   settings: settings.reducer,
 }));
 

client/src/home/base/AiPrompt.tsx

@@ -1,15 +1,15 @@
 import {t} from '@lingui/macro';
 import {Icon} from 'react-exo/icon';
 import {Link} from 'react-exo/navigation';
-import {Text, View, TextInput, Pressable} from 'react-native';
-import {useStyles, createStyleSheet} from 'react-native-unistyles';
-import {useRef, useState, useMemo, memo} from 'react';
 import {useLingui} from '@lingui/react';
+import {useRef, useState, useMemo, memo} from 'react';
+import {useStyles, createStyleSheet} from 'react-native-unistyles';
+import {Text, View, TextInput, Pressable} from 'react-native';
 import {useAppContext} from 'app/hooks/useAppContext';
-import {useAI} from 'home/hooks/useAI';
-import {formatDate} from 'home/utils/time';
 import {PageLoading} from 'app/base/PageLoading';
 import {Markdown} from 'app/widgets/Markdown';
+import {formatDate} from 'home/utils/time';
+import {useAI} from 'home/hooks/useAI';
 
 const DEFAULT_MODEL = 'llama3-8b-8192';
 

client/src/home/routes/ScreenHome.tsx

@@ -18,7 +18,7 @@ export default function ScreenHome() {
   return (
     <Page
       title={<Trans id={getDayGreeting().id}/>}
-      message={profile
+      message={profile?.name
         ? <T>{`Welcome, ${profile.name}`}</T>
         : <T>{'Welcome, Human'}</T>
       }

client/src/media/files/base/DirectoryEntry.tsx → client/src/media/base/DirectoryEntry.tsx

@@ -1,7 +1,7 @@
 import {View} from 'react-native';
 import {Link} from 'react-exo/navigation';
 import {useStyles, createStyleSheet} from 'react-native-unistyles';
-import {DirectoryEntryRow} from 'media/files/base/DirectoryEntryRow';
+import {DirectoryEntryRow} from 'media/base/DirectoryEntryRow';
 
 import type {HfsDirectoryEntry} from 'react-exo/fs';
 
@@ -15,7 +15,9 @@ export function DirectoryEntry(props: DirectoryEntry) {
   const {entry} = props;
   const path = entry.isFile
     ? `#${entry.name}`
-    : `${entry.name}`;
+    : props.path
+      ? `${props.path}/${entry.name}`
+      : entry.name;
   return (
     <View style={styles.root}>
       <Link to={path}>

client/src/media/files/base/DirectoryEntryRow.tsx → client/src/media/base/DirectoryEntryRow.tsx

@@ -6,6 +6,7 @@ interface DirectoryEntryRow {
   name: string,
 }
 
+// https://github.com/kat-tax/vslite/tree/master/src/icons
 export function DirectoryEntryRow(props: DirectoryEntryRow) {
   const {styles} = useStyles(stylesheet);
   return (

client/src/media/files/base/File.tsx → client/src/media/base/File.tsx

@@ -3,9 +3,11 @@ import {useNavigate} from 'react-exo/navigation';
 import {useStyles, createStyleSheet} from 'react-native-unistyles';
 import {View, Pressable} from 'react-native';
 import {Icon} from 'react-exo/icon';
-import {resolve} from 'media/files/utils/path';
+import {resolve} from 'media/utils/path';
 
 import {FileDownload} from './FileDownload';
+import {FileMarkdown} from './FileMarkdown';
+import {FileImage} from './FileImage';
 import {FileGame} from './FileGame';
 import {FilePDF} from './FilePDF';
 
@@ -21,16 +23,36 @@ export function File(props: FileProps) {
   const navigate = useNavigate();
   const parts = resolve(file);
   const path = parts.join('/');
-  const [name, ext] = parts.slice(-1)[0].split('.') ?? [];
-  const fileUrl = `/browse/${parts.slice(0, -1).join('/')}#${name}.${ext}`;
+  const [name, extension] = parts.slice(-1)[0].split('.') ?? [];
+  const fileUrl = `/browse/${parts.slice(0, -1).join('/')}#${name}.${extension}`;
 
   const renderer = useMemo(() => {
-    if (!ext) return null;
-    const $ = {path, name};
-    switch (ext) {
+    if (!extension) return null;
+    const $ = {path, name, extension, maximized};
+    switch (extension) {
+      // Images
+      case 'jpg':
+      case 'jpeg':
+      case 'png':
+      case 'gif':
+      case 'bmp':
+      case 'ico':
+      case 'tiff':
+      case 'webp':
+      case 'avif':
+      case 'heic':
+      case 'heif':
+      case 'svg':
+      case 'raw':
+        return <FileImage {...$}/>
       // Documents
       case 'pdf':
         return <FilePDF {...$}/>
+      // Markdown
+      case 'md':
+      case 'mdx':
+      case 'markdown':
+        return <FileMarkdown {...$}/>
       // Roms
       case 'n64':
       case 'v64':
@@ -92,10 +114,10 @@ export function File(props: FileProps) {
       default:
         return <FileDownload {...$}/>
     }
-  }, [ext, name, path]);
+  }, [extension, name, path, maximized]);
 
   const resolution = useMemo(() => {
-    switch (ext) {
+    switch (extension) {
       case 'gb':
       case 'gbc':
       case 'gba':
@@ -105,7 +127,7 @@ export function File(props: FileProps) {
       default:
         return [320, 240];
     }
-  }, [ext]);
+  }, [extension]);
 
   return renderer ? (
     <Pressable
@@ -129,7 +151,7 @@ export function File(props: FileProps) {
               <Icon
                 name="ph:x"
                 size={20}
-                color={close.hovered
+                color={close.hovered || !root.hovered
                   ? theme.colors.foreground
                   : theme.colors.mutedForeground
                 }

client/src/media/files/base/FileDownload.tsx → client/src/media/base/FileDownload.tsx

@@ -5,13 +5,15 @@ import {Watermark} from './Watermark';
 interface FileDownload {
   path: string,
   name: string,
+  extension: string,
+  maximized: boolean,
 }
 
 export function FileDownload(props: FileDownload) {
   const {i18n} = useLingui();
   return (
     <Watermark
-      title={props.path}
+      title={`${props.name}.${props.extension}`}
       label={t(i18n)`Download`}
       icon="ph:download"
       onAction={() => {

client/src/media/files/base/FileGame.tsx → client/src/media/base/FileGame.tsx

@@ -1,17 +1,19 @@
 import {Game} from 'react-exo/game';
 import {useStyles, createStyleSheet} from 'react-native-unistyles';
-import {useFileDataURL} from 'media/files/hooks/useFileDataURL';
+import {useFileUrl} from 'media/hooks/useFileUrl';
 import type {GameProps} from 'react-exo/game';
 
 interface FileGame {
   path: string,
   name: string,
+  extension: string,
+  maximized: boolean,
   platform: GameProps['platform'],
 }
 
 export function FileGame(props: FileGame) {
   const {styles, theme} = useStyles(stylesheet);
-  const urlRom = useFileDataURL(props.path);
+  const urlRom = useFileUrl(props.path);
 
   return urlRom ? (
     <Game

client/src/media/base/FileImage.tsx

@@ -0,0 +1,34 @@
+import {Image} from 'react-exo/image';
+import {useStyles, createStyleSheet} from 'react-native-unistyles';
+import {useFileUrl} from 'media/hooks/useFileUrl';
+
+interface FileImage {
+  path: string,
+  name: string,
+  maximized: boolean,
+}
+
+export function FileImage(props: FileImage) {
+  const {styles} = useStyles(stylesheet);
+  const urlImage = useFileUrl(props.path);
+
+  return urlImage ? (
+    <Image
+      url={urlImage}
+      resizeMode={props.maximized ? 'contain' : 'cover'}
+      style={[
+        styles.root,
+        props.maximized && styles.maximized,
+      ]}
+    />
+  ) : null;
+}
+
+const stylesheet = createStyleSheet((theme) => ({
+  root: {
+    flex: 1,
+  },
+  maximized: {
+    margin: theme.display.space3,
+  },
+}));

client/src/media/base/FileMarkdown.tsx

@@ -0,0 +1,27 @@
+import {View} from 'react-native';
+import {useStyles, createStyleSheet} from 'react-native-unistyles';
+import {useFileText} from 'media/hooks/useFileText';
+import {Markdown} from 'app/widgets/Markdown';
+
+interface FileMarkdown {
+  path: string,
+  name: string,
+  maximized: boolean,
+}
+
+export function FileMarkdown(props: FileMarkdown) {
+  const {styles} = useStyles(stylesheet);
+  const mdText = useFileText(props.path);
+
+  return mdText ? (
+    <View style={styles.root}>
+      <Markdown text={mdText}/>
+    </View>
+  ) : null;
+}
+
+const stylesheet = createStyleSheet((theme) => ({
+  root: {
+    margin: theme.display.space3,
+  },
+}));

client/src/media/files/base/FilePDF.tsx → client/src/media/base/FilePDF.tsx

@@ -1,17 +1,19 @@
 import {View} from 'react-native';
 import {useStyles, createStyleSheet} from 'react-native-unistyles';
-import {useFileDataURL} from 'media/files/hooks/useFileDataURL';
+import {useFileUrl} from 'media/hooks/useFileUrl';
 
 interface FilePDF {
   path: string,
   name: string,
+  extension: string,
+  maximized: boolean,
 }
 
 export function FilePDF(props: FilePDF) {
   const {styles} = useStyles(stylesheet);
-  const urlPdf = useFileDataURL(props.path, 'application/pdf');
+  const urlPdf = useFileUrl(props.path, 'application/pdf');
 
-  return (
+  return urlPdf ? (
     <View style={styles.root}>
       <embed
         title={props.name}
@@ -22,7 +24,7 @@ export function FilePDF(props: FilePDF) {
         width="100%"
       />
     </View>
-  );
+  ) : null;
 }
 
 const stylesheet = createStyleSheet(() => ({

client/src/media/hooks/useFileText.ts

@@ -0,0 +1,17 @@
+import {fs} from 'react-exo/fs';
+import {useState, useEffect} from 'react';
+
+export function useFileText(path: string) {
+  const [text, setText] = useState<string>();
+
+  useEffect(() => {
+    (async () => {
+      const hfs = await fs.init();
+      const bytes = await hfs.bytes?.(path);
+      if (!bytes) return;
+      setText(new TextDecoder('utf-8').decode(bytes));
+    })();
+  }, [path]);
+
+  return text;
+}

client/src/media/files/hooks/useFileDataURL.ts → client/src/media/hooks/useFileUrl.ts

@@ -1,9 +1,9 @@
 import {fs} from 'react-exo/fs';
 import {useState, useEffect} from 'react';
 
-export function useFileDataURL(path: string, type = 'application/octet-stream') {
+export function useFileUrl(path: string, type = 'application/octet-stream') {
   const [dataURL, setDataURL] = useState<string>();
-  console.log(path);
+
   useEffect(() => {
     let url: string | undefined;
     (async () => {

client/src/media/files/hooks/useLists.ts → client/src/media/hooks/useLists.ts

@@ -1,5 +1,5 @@
 import {useSelector} from 'react-redux';
-import store from 'media/files/store';
+import store from 'media/store';
 
 export function useLists() {
   return useSelector(store.selectors.getLists);

client/src/media/files/hooks/useTasks.ts → client/src/media/hooks/useTasks.ts

@@ -1,5 +1,5 @@
 import {useSelector, useDispatch} from 'react-redux';
-import files from 'media/files/store';
+import files from 'media/store';
 import type {State} from 'app/store';
 
 export function useTasks(list?: string) {