Convert the Single page application in browser directory into a progressive web application

Discussed in #179

Refactor the application navigation component defined here.

To do this,

• Create a new nav folder in the src/component directory
• create index.tsx in the folder
• create <component-name.tsx> for each component defined in the application navigation component
• extract the component logic and UI from the application navigation components and place them in the newly created files
• Place the application core navigation UI and logic in the index.tsx you must have created above. Import the other components which the application nav depends on into this index.tsx file
• finally, update the import path of the navigation component across the application.

• create a transverse_dir.rs module in the core/src/utils directory
• in the newly created transverse_dir.rs module, create a data structure, the data structure will contain the following fields

pub struct File {
    file_name: String, // the file name 
    file_format: String, // the file format, e.g mp4, gif, document 
    file_path: PathBuf, // ex downloads/my-awesome-picture.png
    file_size: String, // the file size calculated in kb, MB, GB, see core/src/utils/mod.rs for a function compute_file_size that helps with this
}

• implement a logic to transverse directories and find files, see ff on crates.io for a guide on how this might be implemented
• return an array of the found files using the created data structure. the returned data should be structured using the CommandData data structure, defined here

Implement a feature that allows the creation of a Wifi Hotspot on the Linux operating system in the linux_hotspot.rs module. The hotspot must be password protected.

The following projects might be helpful

• https://github.com/lakinduakash/linux-wifi-hotspot
• https://github.com/balena-os/wifi-connect

embed an SQLite database which would be built into the application
the embedded database may be accessed by sqlx and it would be useful in persisting the application configuration such as

• connection parameter
• transfer history
• settings; language, theme and first-time tutorial

The problem: Windows operating system does not allow the creation of a Wifi Hotspot unless the device is connected to a Wifi.

The Task: Implement a function to create a wifi hotspot on the Windows Operating system. See this project built in the C programming language wich attempts to achieve this feature

Checkout the module,
https://github.com/opeolluwa/send-file/blob/master/src/components/AppNavigation.tsx
there are two Icons set, the regular for example, Cog8ToothIcon and the solid, SolidCog8ToothIcon
The icon changes from regular to solid when a route path is hovered on or clicked

Make the application backend in the core src more "rusty" - more modular and we'll organized

What is in this Issue?

FileWindow is a dedicated file viewer and explorer written from ground up with filesync in mind.

The objectives are to:

• Support React and NextJs app
• Become a reusable OSS React component
• Support Video player
• Support Audio Player
• Support PDF, and docx format
• Support CSV and presentation

Integrate the application dark Mode using this color palette and TailwindCSS convection

To do this, extend tailwind.config.cjs with the theme, immediately after the default color theme

the color theme may be used alongside the TailwindCSS gray color, especially for styling text.

'app-dark':{ 
 DEFAULT: '#18122B', 
 50: '#907DC9',
  100: '#836FC3', 
 200: '#6A52B7',
  300: '#58429E', 
 400: '#483681', 
 500: '#382A65',
  600: '#281E48', 
 700: '#18122B', 
 800: '#020103', 
 900: '#000000', 
 950: '#000000'
},

Application does not build successfully

The application build doesn't exist successfully or create executable locally when yarn tauri build is executed

How to reproduce this

• create a fork of the project
• clone the repository git clone https://github.com/<your-github-id>/filesync
• navigate to the project root directory cd filesync
• in the root directory, execute yarn to install the dependencies
• execute yarn tauri build to build the application locally

System dependencies

• NodeJs v18 or greater https://nodejs.org/en
• yarn https://yarnpkg.com/
• Rust toolchain https://rustup.rs/

Nice to have but not required

• Experience with Tauri
• Experience with Rust
• Experience with TailwindCSS

Use a new window/modal to display connection options

Add roadmap on what has been done, what is in progress, and what is left to do.

I was looking to look at some issues in this repo but could not set up the development environment as I am unfamiliar with the frontend stack. Upon running yarn tauri dev I get the following screen.

Can you help me in setting up the dev environment?

My build Environment:

yarn run v1.22.19
$ tauri info

Environment
  › OS: Ubuntu 22.04 X64
  › Node.js: 16.20.0
  › npm: 8.19.4
  › pnpm: 8.6.1
  › yarn: 1.22.19
  › rustup: 1.26.0
  › rustc: 1.69.0
  › cargo: 1.69.0
  › Rust toolchain: stable-x86_64-unknown-linux-gnu 

Packages
  › @tauri-apps/cli [NPM]: 1.2.3
  › @tauri-apps/api [NPM]: 1.2.0
  › tauri [RUST]: 1.2.4,
  › tauri-build [RUST]: 1.2.1,
  › tao [RUST]: 0.15.8,
  › wry [RUST]: 0.23.4,

App
  › build-type: bundle
  › CSP: unset
  › distDir: ../out
  › devPath: http://localhost:1420/
  › framework: React (Next.js)
  › bundler: Vite

App directory structure
  ├─ public
  ├─ .vscode
  ├─ out
  ├─ .github
  ├─ src-tauri
  ├─ core
  ├─ screenshots
  ├─ .git
  ├─ src
  ├─ mobile
  ├─ node_modules
  └─ .next
Done in 11.13s.

Help refactor the readme, the readme should contain the following sections among other things

• Prerequisite: - what is required to set the application locally,
• technology stack - the technology stack used
• screenshot
• environment set up: how to setup the environment to run the application locally
• running the application locally: various commands to run that application locally
• license: the project is licensed and distributed under MIT
• roadmap*

• The Roadmap will be updated by @opeolluwa just put the heading

File thumbnail would be useful to display the file type, for simplicity
this has been reduced the the following types of file

• .pdf
• .doc
• music - all audio files should use an icon
• presentation - all presentations should use an icon
• video all video types should use an icon
  if no match was found a fallback should be used

To resolve this issue,

1. Refactor the system memory module to
   return the following information correctly:

• total available memory
• used memory
• device battery uptime in hh mm (hour and minutes)

2. Write unit test(s) for the implemented logic.

Extend the application menu with Help/Docs tab.

This will contain how to use the application. It could also be linked to an external url

Add a walkthrough guide and execute only on first-time installation

To do this,

1. consider using Sheperd.js, for the UI
2. implement the store plugin to check if it's the first time the application runs, if true, execute the walkthru. On the subsequent launch of the application, don't open the walkthrough

see the command/document.rs module, filter the array of files returned, such the returned array of files' path contains only the following extension

['doc', 'dot', 'docx', 
'docm', 'dotx', 'dotm',
 'docb', 'odt', 'fodt',
 'ott', xls', 'xlt', 'xlm',
 'xlsx', 'xlsm', 'xltx', 'xltm', 
'xla', 'xlam', 'ods', 'fods', 'ots']

Implement the application core servers with Axum

The application core built with Rust fetches the audio files from the device's
default audio directory and passes an array of these files to the UI for rendering. Implement a feature that let users open/play audio files in the user interface.

See convertFileSrc to get started and the music data structure defined here

Experience with Rust Typescript, React/Next.js and Tauri is required

The current implementation uses tabs, revamp this to use a list with paginated data, the paging
will be controlled by the intersection observer

Here are the tasks in detail

• consume the get_file_transfer_history API (this is yet to be implemented)
• build a UI component to render the file, the UI component will contain an icon on the left, followed by a bother, and finally the name of the file, the file size, the transaction type, and the transaction date.
• implement intersection observer to update the list on scroll event

Implement a Reusable React Component which will accept an argument, (sayfileType) the component should render the file type icon. Consider the included snapshot

Use the store plugin to persist app data. This will primarily contain the file transfer history and the user settings.