Merge branch 'dev' into release

README.md

@@ -1,9 +1,8 @@
 # FIleSync: WiFi File Sharing Application
 
-
 _⚠️ the application is still a work in progress, hence, Some features are missing. Please see the [issues](https://github.com/opeolluwa/send-file/issues) page to contribute_
 
-![screenshot](screenshots/share-files.png)
+![screenshot](screenshots/filesync.png)
 
 ## Table of Contents
 
@@ -33,8 +32,8 @@ In addition, this project uses Tauri v1.3, see [prerequisite](https://tauri.app/
 Once you have the dependencies installed, clone the project and install the required packages:
 
 ```sh
-git clone https://github.com/opeolluwa/wi-share.git wi-share
-cd wi-share # navigate to the cloned directory
+git clone https://github.com/opeolluwa/filesync.git wi-share
+cd filesync # navigate to the cloned directory
 yarn install # install the dependencies
 yarn tauri dev # run the application locally
 
@@ -56,14 +55,13 @@ WiShare is built primarily on the following technologies
 ## Features
 
 - [x] Adaptive UI
-- [x] scan to connect mobile
 - [x] build an executable for the Mac operating system
 - [x] build an executable for the Linux Operating system
+- [x] build an executable for Window
 - [ ] create a wifi hotspot
-- [ ] build the user interface for mobile devices
+- [ ] support mobile devices
 - [ ] support dark mode
 - [ ] add walkthrough after installation
-- [ ] build an executable for Window
 
 ## Acknowledgements
 

core/bindings/Settings.ts

@@ -1,3 +1,8 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export interface Settings { id: number, language: string, theme: string, firstRun: boolean, }
+export interface Settings {
+  id: number;
+  language: string;
+  theme: string;
+  firstRun: boolean;
+}

core/src/main.rs

@@ -36,9 +36,9 @@ lazy_static! {
         let db_path = format!(
             "{downloads_dir}/{db_path}",
             downloads_dir = os_default_downloads_dir.display(),
-            db_path = "store"
+            db_path = ".dat"
         );
-        // create the path if not exist path if not exist
+        //TODO create the path if not exist path if not exist
         let _ = std::fs::create_dir_all(&db_path);
     format!("sqlite://{db_path}/filesync.db")
     };
@@ -48,7 +48,7 @@ fn main() -> Result<(), tauri::Error> {
     let state = app_state::State {
         ..Default::default()
     };
-  
+
     // run core the server in a separate thread from tauri
     tauri::async_runtime::spawn(http_server::core_server());
 

core/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "filesync",
-    "version": "0.6.20"
+    "version": "0.6.21"
   },
   "tauri": {
     "allowlist": {

src/components/MemoryInformation.tsx

@@ -31,15 +31,16 @@ export const MemoryInformation = ({
           </span>
         }
 
-        <span className=" font-medium text-blue-700 text-sm">
+        <span className=" font-medium text-blue-700  dark:text-gray-500 text-sm">
           {totalMemory} of {usedMemory}
         </span>
       </div>
       <div className="w-fill bg-gray-200 rounded-md mx-4 h-2">
         <div
-          className="bg-app-400 h-1.5 rounded-full"
+          className="bg-app-400 dark:bg-app h-2 rounded-full"
           style={{ width: memBarWidth }}
-        ></div>
+        >
+        </div>
       </div>
     </div>
   );

src/components/SearchBar.tsx

@@ -30,7 +30,7 @@ export default function SearchBar({ onSearch, placeholder }: Props) {
         search files
       </label>
       <input
-        className="px-4 py-4 rounded-md block w-full border-gray-400 dark:border-transparent bg-[#fafbfd] hover:border-none  border-none shadow-md"
+        className="px-4 py-4 rounded-md block w-full border-gray-400 dark:border-transparent bg-[#fafbfd] dark:bg-dark-900 hover:border-none  border-none shadow-md"
         type="text"
         placeholder={placeholder || "search"}
         value={city}

src/components/app/AppAside.tsx

@@ -8,7 +8,7 @@ export default function Aside() {
   const { fileList } = useContext(FileContext);
 
   return (
-    <aside className="hidden lg:block lg:flex-col items-center lg:col-span-3 pt-10 px-8  h-full bg-[rgba(226,233,252,255)]">
+    <aside className="hidden lg:block lg:flex-col items-center lg:col-span-3 pt-10 px-8  h-full bg-[rgba(226,233,252,255)] dark:bg-dark-950">
       <div className="items-end  hidden">
         <Battery50Icon className="w-6 h-6 text-gray-400" />
         <BellAlertIcon className="w-6 h-6 text-gray-400" />

src/components/app/AppLayout.tsx

@@ -17,7 +17,7 @@ export default function Layout({ children }: Props) {
       }}
     >
       <Nav />
-      <main className="col-span-11 lg:col-span-7  pt-10 px-20 bg-[rgba(241,246,251,255)]  overflow-y-scroll">
+      <main className="col-span-11 lg:col-span-7  pt-10 px-20 bg-[rgba(241,246,251,255)] dark:bg-dark-800 overflow-y-scroll">
         {children}
       </main>
       <Aside />

src/components/nav/NavigationTab.tsx

@@ -23,11 +23,9 @@ export default function NavigationTab({
     <div onClick={action}>
       <Link
         href={path}
-        className={
-          router.pathname == path.trim()
-            ? "flex items-center justify-center lg:justify-start lg:items-start lg:my-6 my-4 rounded  ease-in-out  text-app  bg-app-50 py-3 px-1 lg:pl-2 first:mt-4 cursor-pointer"
-            : "flex items-center justify-center lg:justify-start lg:items-start lg:my-6 my-4 rounded  ease-in-out  hover:text-app py-3 px-1 lg:pl-2 first:mt-4  text-gray-500 cursor-pointer"
-        }
+        className={router.pathname == path.trim()
+          ? "flex items-center justify-center lg:justify-start lg:items-start lg:my-6 my-4 rounded  ease-in-out  text-app dark:bg-dark-900  bg-app-50  py-3 px-1 lg:pl-2 first:mt-4 cursor-pointer"
+          : "flex items-center justify-center lg:justify-start lg:items-start lg:my-6 my-4 rounded  ease-in-out dark:text-dark-500 hover:text-app py-3 px-1 lg:pl-2 first:mt-4  text-gray-500 cursor-pointer"}
         onBlur={() => setIcon(icon)}
         onMouseEnter={() => setIcon(alternateIcon)}
         onClick={() => setIcon(alternateIcon)}

src/components/nav/index.tsx

@@ -1,21 +1,21 @@
 "is client";
 import {
+  ClockIcon,
   Cog8ToothIcon,
-  HomeIcon,
   FolderOpenIcon,
+  HomeIcon,
   InformationCircleIcon,
   ShareIcon,
-  ClockIcon,
   SignalIcon,
 } from "@heroicons/react/24/outline";
 import {
+  ClockIcon as SolidClockIcon,
   Cog8ToothIcon as SolidCog8ToothIcon,
-  HomeIcon as SolidHomeIcon,
   FolderOpenIcon as SolidFolderIconOpen,
+  HomeIcon as SolidHomeIcon,
   InformationCircleIcon as SolidInformationIcon,
   ShareIcon as SolidShareIcon,
   SignalIcon as SolidSignalIcon,
-  ClockIcon as SolidClockIcon,
 } from "@heroicons/react/24/solid";
 import { goToPage as gotoPage } from "@/utils";
 import NavigationTab, { Route } from "./NavigationTab";
@@ -47,11 +47,9 @@ export default function Navigation() {
     }
   };
   let [systemInformation, setSystemInformation] = useState(
-    {} as SystemInformation
+    {} as SystemInformation,
   );
 
-
-
   useEffect(() => {
     // fetch sys information from app core
     invoke("get_system_information").then((sysInfo) => {
@@ -116,7 +114,7 @@ export default function Navigation() {
   return (
     <>
       <nav
-        className="col-span-1 lg:col-span-2 bg-[rgba(249,250,254,255)]  px-[1px]   text-gray-600  pt-10"
+        className="col-span-1 lg:col-span-2 bg-[rgba(249,250,254,255)] dark:bg-dark-900  px-[1px]   text-gray-600  pt-10"
         style={{
           height: "calc(100vh-200px)",
           overflowY: "hidden",

src/pages/_document.tsx

@@ -1,15 +1,14 @@
-import { Html, Head, Main, NextScript } from 'next/document'
-
+import { Head, Html, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
     <Html lang="en">
       <Head />
-      <body>
+      <body className="dark:bg-dark-950">
         <Main />
         <NextScript />
-      {/*   <Script src='@/utils/splashscreen.js' ></Script> */}
+        {/*   <Script src='@/utils/splashscreen.js' ></Script> */}
       </body>
     </Html>
-  )
+  );
 }

src/pages/index.tsx

@@ -26,25 +26,25 @@ const quickAccessTabs: QuickAccessTab[] = [
   {
     name: "Images",
     icon: (
-      <PhotoIcon className="rounded-lg my-4 mx-2 flex w-[47.5px] text-gray-100 " />
+      <PhotoIcon className="rounded-lg my-4 mx-2 flex w-[47.5px] text-gray-100 dark:text-dark-900" />
     ),
   },
   {
     name: "Music",
     icon: (
-      <MusicalNoteIcon className="rounded-lg my-4 mx-2 flex w-[47.5px]   text-gray-100" />
+      <MusicalNoteIcon className="rounded-lg my-4 mx-2 flex w-[47.5px]   text-gray-100 dark:text-dark-900" />
     ),
   },
   {
     name: "Videos",
     icon: (
-      <PlayIcon className="rounded-lg my-4 mx-2 flex w-[47.5px]   text-gray-100" />
+      <PlayIcon className="rounded-lg my-4 mx-2 flex w-[47.5px]   text-gray-100 dark:text-dark-900" />
     ),
   },
   {
     name: "Documents",
     icon: (
-      <Bars3BottomLeftIcon className="rounded-lg my-4 mx-2 flex w-[47.5px]   text-gray-100" />
+      <Bars3BottomLeftIcon className="rounded-lg my-4 mx-2 flex w-[47.5px]   text-gray-100 dark:text-dark-900" />
     ),
   },
 ];
@@ -98,14 +98,15 @@ export default function Main() {
             >
               <Link
                 href={"quick-access/" + tab.name.toLowerCase()}
-                className="rounded-[12px] shadow shadow-gray-500 px-3"
+                className="rounded-[12px] shadow shadow-gray-500 px-3 dark:shadow-none"
                 style={{
-                  backgroundColor: "#3074f5",
+                  // backgroundColor: "#3074f5",
+                  backgroundColor: "#578EF7",
                 }}
               >
-                <div className="hover:brightness-50 sepia-0">{tab.icon}</div>
+                <div className="hover:brightness-25 sepia-0">{tab.icon}</div>
               </Link>
-              <span className="text-gray-600 block mt-2 text-small">
+              <span className="text-gray-600 dark:text-dark-500 block mt-2 text-small">
                 {tab.name}
               </span>
             </li>
@@ -115,15 +116,17 @@ export default function Main() {
 
       <section className="my-16">
         <h2 className="flex justify-between mt-24 mb-4 ">
-          <span className=" font-medium dark:text-gray-400">Recent Files</span>
+          <span className=" font-medium dark:text-dark-400 text-gray-400">
+            Recent Files
+          </span>
           <Link
             href="/history"
-            className="text-gray-500 text-violet-600 dark:text-violet"
+            className="text-gray-500 text-violet-600 dark:text-dark"
           >
             view all
           </Link>
         </h2>
-        <div className="relative overflow-x-auto bg-white rounded-[24px] shadow-lg px-4 py-8 ">
+        <div className="relative overflow-x-auto bg-white rounded-[24px] shadow-lg px-4 py-8  dark:bg-dark-900 dark:shadow-none">
           <table className="w-full text-sm text-left">
             <thead className="text-gray-500">
               <tr>
@@ -139,17 +142,17 @@ export default function Main() {
               </tr>
             </thead>
             <tbody className="text-gray-500">
-              {isLoading? 
-              "Loading...":
-              transferHistory?.data?.slice(0, 5).map((file, index) => (
-                <tr key={index}>
-                  <td className="px-6 py-4">{file.fileName}</td>
-                  <td className="px-6 py-4">
-                    {computeFileSize(Number(file.fileSize))}
-                  </td>
-                  <td className="px-6 py-4">{file.date}</td>
-                </tr>
-              ))}
+              {isLoading
+                ? "Loading..."
+                : transferHistory?.data?.slice(0, 5).map((file, index) => (
+                    <tr key={index}>
+                      <td className="px-6 py-4">{file.fileName}</td>
+                      <td className="px-6 py-4">
+                        {computeFileSize(Number(file.fileSize))}
+                      </td>
+                      <td className="px-6 py-4">{file.date}</td>
+                    </tr>
+                  ))}
             </tbody>
           </table>
         </div>

tailwind.config.cjs

@@ -15,6 +15,7 @@ module.exports = {
       emerald: colors.emerald,
       indigo: colors.indigo,
       yellow: colors.yellow,
+      dark: colors.neutral,
       app: {
         DEFAULT: "#3074F5",
         50: "#DFEAFD",