PR to add a walkthrough to guide new user to pathfinder and all of its features.

package.json

@@ -13,12 +13,16 @@
     "tauri:build:debug": "tauri build --debug"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.14",
     "@tauri-apps/api": "^2.6.0",
     "@tauri-apps/plugin-global-shortcut": "^2.3.0",
     "@tauri-apps/plugin-opener": "^2",
     "fuse.js": "^7.1.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.65.0",
+    "react-router-dom": "^7.9.4",
+    "tailwindcss": "^4.1.14"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^2",

src/App.jsx

@@ -1,68 +1,35 @@
 import { useEffect, useState, useRef } from "react";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import "./App.css";
-import HomeOptions from "./components/HomeOptions";
-import ClipboardPage from "./components/ClipboardPage";
-import OnlineSearchPage from "./components/OnlineSearchPage";
-import OpenFilePage from "./components/OpenFilePage";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { useFirstLaunch } from "./hooks/useFirstLaunch";
+import Welcome from "./pages/WelcomePage";
+import Home from "./pages/HomePage";
+import Name from "./pages/Name";
+import ClipboardGuide from "./pages/ClipboardGuide";
+import About from "./pages/About";
+import OnlineSearchGuide from "./pages/OnlineSearchGuide";
+import OpenFileGuide from "./pages/OpenFileGuide";
+import GuideEnd from "./pages/GuideEnd";
 
 function App() {
-  const [query, setQuery] = useState("");
-  const inputRef = useRef(null);
-  const [currentPage, setCurrentPage] = useState("home");
-
-  useEffect(() => {
-    function handleKeyDown(e) {
-      if (e.key === "Escape") {
-        if (currentPage === "home") {
-          getCurrentWindow().hide();
-        } else {
-          setCurrentPage("home");
-          setQuery("");
-          inputRef.current?.focus();
-        }
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [currentPage]);
-
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
-
+  const isFirstLaunch = useFirstLaunch();
+
   return (
-    <div className="raycast-overlay">
-      <div className="input-wrapper">
-        <input
-          ref={inputRef}
-          placeholder="Search..."
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          className="search-input"
-        />
-      </div>
-      <div className="main-container">
-        <div className="results">
-          {currentPage === "home" && (
-            <HomeOptions
-              query={query}
-              onSelect={setCurrentPage}
-              clearQuery={() => {
-                setQuery("");
-                inputRef.current?.focus();
-              }}
-            />
-          )}
-          {currentPage === "clipboard" && <ClipboardPage query={query} />}
-          {currentPage === "online-search" && (
-            <OnlineSearchPage query={query} />
-          )}
-          {currentPage === "open-app" && <OpenFilePage query={query} />}
-        </div>
-      </div>
-    </div>
+
+      <BrowserRouter>
+      <Routes>
+        <Route path="/" element={isFirstLaunch ? <Welcome/> : <Home/>}/>
+        <Route path="/home" element={<Home />} />
+        <Route path="/welcome" element={<Welcome/>} />
+        <Route path="/name" element={<Name/>} />
+        <Route path="/About" element={<About/>} />
+        <Route path="/ClipboardGuide" element={<ClipboardGuide/>} />
+        <Route path="/OnlineSearchGuide" element={<OnlineSearchGuide/>} />
+        <Route path="/OpenFileGuide" element={<OpenFileGuide/>} />
+        <Route path="/GuideEnd" element={<GuideEnd/>} />
+      </Routes>
+    </BrowserRouter>
   );
 }
 

src/hooks/useFirstLaunch.jsx

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+export function useFirstLaunch() {
+  const [isFirstLaunch, setIsFirstLaunch] = useState(null);
+
+  useEffect(() => {
+    const flag = localStorage.getItem("firstLaunch");
+
+    if (flag === null) {
+      localStorage.setItem("firstLaunch", "true");
+      setIsFirstLaunch(true);
+    } else {
+      setIsFirstLaunch(false);
+    }
+  }, []);
+
+  return isFirstLaunch;
+}

src/pages/About.jsx

@@ -0,0 +1,24 @@
+import { Link } from "react-router-dom"
+
+
+function About(){
+ console.log(localStorage.getItem("name"))
+ const username_json = localStorage.getItem("name")
+ const username = JSON.parse(username_json);
+    return(
+        <div style={{
+                backgroundImage: "radial-gradient(circle, rgba(39, 39, 42, 1) 1.5px, transparent 1px)",
+                backgroundSize: "20px 20px",
+                backgroundRepeat: "repeat",
+                }}
+            className="flex flex-col justify-center gap-5 p-5 h-[100vh] bg-[#3D3C3C] font-sans text-white">
+            <div className="felx flex-row justify-left text-left text-4xl ">Hi {username.name}, Welcome to Pathfinder</div>
+            <div className="text-left backdrop-blur-sm">
+                A powerful Raycast-inspired launcher application built with Tauri and React. PathFinder provides instant access to your most-used tools and information through a beautiful, keyboard-driven interface. And you can access it just my pressing 
+                </div>
+            <div className="text-5xl text-center text-[#737373]">Ctrl+Shift+Space</div>
+            <Link to='/ClipboardGuide'><button className="absolute bottom-3 left-180 flex flex-row justify-center py-1 px-3 bg-black rounded-md text-center text-white ">next</button></Link>
+        </div>
+    )
+}
+export default About

src/pages/ClipboardGuide.jsx

@@ -0,0 +1,30 @@
+import { Link } from "react-router-dom"
+import snapshort1 from '../assets/snapshot1.png'
+import snapshot2 from '../assets/snapshort2.png'
+
+
+function ClipboardGuide(){
+    return(
+        <div className="flex flex-col justify-center gap-5 p-5 h-full bg-[#3D3C3C] font-sans text-white">
+            <div className="flex flex-row justify-left text-left text-4xl ">Clipboard:</div>
+            <div className="text-left backdrop-blur-sm">
+                A clipboard manager feature that displays all copied items with details like timestamp, size, and usage count. Users can easily view, search, and re-copy any saved entry, making it simple to manage frequently used texts or data efficiently.
+            </div>
+            <div className="m-5 px-10 pt-10 rounded-t-xl bg-[#929292]">
+                <img src={snapshort1} alt='snapshot1'
+                className="rounded-t-xl "/>
+            </div>
+
+            <div className="text-left mt-5 backdrop-blur-sm">
+                A clipboard search feature that lets users quickly find any saved clipboard entry by typing keywords. It filters items in real-time, showing relevant results with details like timestamp, size, and usage, enabling fast retrieval and efficient clipboard management.                </div>
+            <div className="m-5 px-10 pt-10 rounded-t-xl bg-[#929292]">
+                <img src={snapshot2} alt='snapshot2'
+                className="rounded-t-xl "/>
+            </div>
+
+            <Link to='/OnlineSearchGuide'><button className="relative bottom-3 left-170 flex flex-row justify-center py-1 px-3 bg-black rounded-md text-center text-white ">next</button></Link>
+
+        </div>
+    )
+}
+export default ClipboardGuide

src/pages/GuideEnd.jsx

@@ -0,0 +1,15 @@
+import { Link } from "react-router-dom"
+
+
+function GuideEnd(){
+
+    return(
+        <div className="flex flex-row gap-3 justify-center items-center h-[100vh] w-[100vw] bg-[#3D3C3C]">
+        <div className="text-center text-5xl">
+            All done, continue to 
+        </div>
+        <Link to='/'><button type="button" className="py-2 px-3 bg-black rounded-md text-center text-white text-5xl">Pathfinder</button></Link>
+        </div>
+    )
+} 
+export default GuideEnd

src/pages/HomePage.jsx

@@ -0,0 +1,71 @@
+import { useEffect, useState, useRef } from "react";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import "../App.css";
+import HomeOptions from "../components/HomeOptions";
+import ClipboardPage from "../components/ClipboardPage";
+import OnlineSearchPage from "../components/OnlineSearchPage";
+import OpenFilePage from "../components/OpenFilePage";
+
+function Home() {
+
+  const [query, setQuery] = useState("");
+  const inputRef = useRef(null);
+  const [currentPage, setCurrentPage] = useState("home");
+
+  useEffect(() => {
+    function handleKeyDown(e) {
+      if (e.key === "Escape") {
+        if (currentPage === "home") {
+          getCurrentWindow().hide();
+        } else {
+          setCurrentPage("home");
+          setQuery("");
+          inputRef.current?.focus();
+        }
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [currentPage]);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  return (
+
+        <div className="raycast-overlay">
+          <div className="input-wrapper">
+            <input
+              ref={inputRef}
+              placeholder="Search..."
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              className="search-input"
+            />
+          </div>
+          <div className="main-container">
+            <div className="results">
+              {currentPage === "home" && (
+                <HomeOptions
+                  query={query}
+                  onSelect={setCurrentPage}
+                  clearQuery={() => {
+                    setQuery("");
+                    inputRef.current?.focus();
+                  }}
+                />
+              )}
+              {currentPage === "clipboard" && <ClipboardPage query={query} />}
+              {currentPage === "online-search" && (
+                <OnlineSearchPage query={query} />
+              )}
+              {currentPage === "open-file" && <OpenFilePage query={query} />}
+            </div>
+          </div>
+        </div>
+  );
+}
+
+export default Home;

src/pages/Name.jsx

@@ -0,0 +1,38 @@
+import { Link } from "react-router-dom"
+import { useForm } from "react-hook-form"
+import { useNavigate } from "react-router-dom";
+
+
+function Name(){
+
+const navigate = useNavigate();
+
+const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm()
+
+  const onSubmit = (data) => {
+    localStorage.setItem("name", JSON.stringify(data))
+    // console.log(localStorage.getItem("name"))
+    navigate("/About");
+}
+
+    return(
+        <div className="flex flex-col justify-center items-center gap-5 h-[100vh] bg-[#3D3C3C] font-sans">
+            <div className="text-4xl">Enter Your Name</div>
+            <div>
+                <form onSubmit={handleSubmit(onSubmit)}>
+                    <input
+                    className="bg-white rounded-md text-2xl text-center"
+                    defaultValue="" {...register("name")} type='text' placeholder="Type"/>
+                </form>
+            </div>
+        <Link to='/About'><button type='submit' className="absolute bottom-3 right-5 flex flex-row justify-center py-1 px-3 bg-black rounded-md text-center text-white ">next</button></Link>
+
+        </div>
+    )
+}
+
+export default Name

src/pages/OnlineSearchGuide.jsx

@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom"
+import snapshot3 from '../assets/snapshort3.png'
+
+
+function OnlineSearchGuide(){
+    return(
+        <div className="flex flex-col justify-center gap-5 p-5 h-full bg-[#3D3C3C] font-sans text-white">
+            <div className="flex flex-row justify-left text-left text-4xl ">Online Search:</div>
+            <div className="text-left backdrop-blur-sm">
+                Quick-access web search allows users to instantly search the internet directly from the app. With a streamlined interface, it supports rapid queries, displays results efficiently, and saves frequently used searches, enabling fast, convenient, and productive online information retrieval.                </div>
+            <div className="m-5 px-10 pt-10 rounded-t-xl bg-[#929292]">
+                <img src={snapshot3} alt='snapshot1'
+                className="flex justify-center items-center rounded-t-xl "/>
+            </div>
+            <Link to='/OpenFileGuide'><button type="button" className="relative bottom-3 left-170 flex flex-row justify-center py-1 px-3 bg-black rounded-md text-center text-white ">next</button></Link>
+
+        </div>
+    )
+} 
+export default OnlineSearchGuide

src/pages/OpenFileGuide.jsx

@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom"
+import snapshort4 from '../assets/snapshort4.png'
+
+
+
+function OpenFileGuide(){
+    return(
+        <div className="flex flex-col justify-center gap-5 p-5 h-full bg-[#3D3C3C] font-sans text-white">
+            <div className="flex flex-row justify-left text-left text-4xl ">Open File:</div>
+            <div className="text-left backdrop-blur-sm">
+                A fast file access feature that lets users locate and open files instantly. By typing filenames or keywords, it quickly filters results, showing file paths and details, streamlining workflow and saving time when managing documents, media, or system files.                </div>
+            <div className="m-5 px-10 pt-10 rounded-t-xl bg-[#929292]">
+                <img src={snapshort4} alt='snapshot1' className="rounded-t-xl "/>
+            </div>
+            <Link to='/GuideEnd'><button type='button' className="relative bottom-3 left-170 flex flex-row justify-center py-1 px-3 bg-black rounded-md text-center text-white ">next</button></Link>
+        </div>
+    )
+} 
+export default OpenFileGuide 

src/pages/WelcomePage.jsx

@@ -0,0 +1,18 @@
+import { Link } from "react-router-dom"
+
+
+function Welcome(){
+    return(
+        <div style={{
+                backgroundImage: "radial-gradient(circle, rgba(39, 39, 42, 1) 1.5px, transparent 1px)",
+                backgroundSize: "20px 20px",
+                backgroundRepeat: "repeat",
+                }}
+            className="flex flex-col justify-center items-center gap-1 h-[100vh] bg-[#3D3C3C] font-sans">
+            <div className="flex flex-row justify-center text-6xl pb-5 font-bold">Pathfinder</div>
+            <div className="felx flex-row justify-center text-center text-3xl">A tool to make your life easy</div>
+            <Link to='/name'><button type="button" className="absolute bottom-3 right-5 flex flex-row justify-center py-1 px-3 bg-black rounded-md text-center text-white ">next</button></Link>
+        </div>
+    )
+}
+export default Welcome

vite.config.js

@@ -1,11 +1,12 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from '@tailwindcss/vite'
 
 const host = process.env.TAURI_DEV_HOST;
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
-  plugins: [react()],
+  plugins: [react(), tailwindcss(),],
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //