Merge pull request #6 from Jenil-Desai/main

v3.0.1

README.md

@@ -0,0 +1,123 @@
+# 📝 Notera
+
+Welcome to **Notera**, a simple notes desktop application designed for productivity and ease of use. Built with modern technologies, **Notera** offers a sleek, user-friendly interface for managing your notes efficiently.
+
+---
+
+## 📑 Table of Contents
+
+1. [Overview](#-overview)
+2. [Technologies](#-technologies)
+3. [Packages & Libraries Used](#-packages--libraries-used)
+4. [Getting Started](#-getting-started)
+5. [Setup](#-setup)
+6. [Features](#-features)
+7. [Demo & Screenshots](#-demo--screenshots)
+8. [Acknowledgments](#-acknowledgments)
+9. [License](#-license)
+
+---
+
+## 🌟 Overview
+
+Notera is a simple and intuitive desktop application for creating, organizing, and managing notes. With local storage and rich text editing, Notera is a perfect companion for staying organized across categories. The app runs seamlessly on Windows, macOS, and Linux, making it versatile and accessible.
+
+---
+
+## 💻 Technologies
+
+Below is a breakdown of the core technologies used in this project.
+
+| 🖥️ Desktop Framework | Frontend Framework | Language |
+| -------------------- | ------------------ | -------- |
+| **Tauri**            | **React.js**       | **Rust** |
+|                      | **TypeScript**     |          |
+
+---
+
+## 📦 Packages / Libraries Used
+
+This project uses the following essential libraries and packages:
+
+| Package / Library    | Purpose                       |
+| -------------------- | ----------------------------- |
+| `Tailwind CSS`       | Styling framework             |
+| `Shadcn UI`          | Prebuilt components library   |
+| `Vite`               | Build tool                    |
+| `Wouter`             | Lightweight routing           |
+| `Tip Tap`            | Rich text editor              |
+| `Day.js`             | Lightweight date manipulation |
+| `Tauri-plugin-fs`    | File system operations        |
+| `Tauri-plugin-os`    | Operating system utilities    |
+| `Tauri-plugin-store` | Persistent local storage      |
+
+---
+
+## 🚀 Getting Started
+
+Follow these steps to set up the project in your local environment:
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/Jenil-Desai/notera.git
+   ```
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+---
+
+## ⚙️ Setup
+
+1. Start the project:
+   ```bash
+   npm run dev
+   ```
+2. A new window will open. Explore the desktop application.
+
+---
+
+## 🎯 Features
+
+Explore the unique features available in this application:
+
+1. **Notes Saved Locally**:
+   - All notes are stored locally on your machine, ensuring privacy and accessibility.
+2. **Create Categories**:
+   - Organize your notes by creating categories for better management.
+3. **Categorize Notes**:
+   - Assign notes to specific categories for quick access.
+4. **Rich Text Editor**:
+   - Create beautifully formatted notes with a powerful text editor.
+5. **Notes CRUD**:
+   - Add, edit, view, and delete notes with ease.
+
+---
+
+## 🔗 Demo & Screenshots
+
+- Install the latest version of the application from the **[Releases](https://github.com/Jenil-Desai/notera/releases)** page.
+
+| Windows                                                                            | Mac OS (May Not Work For Some Laptops)                                                                           | Linux                                                                                                                                          |
+| ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![Windows](https://cdn.intheloop.io/wp-content/uploads/2020/08/windows-button.png) | ![Mac Os](https://user-images.githubusercontent.com/37590873/219133640-8b7a0179-20a7-4e02-8887-fbbd2eaad64b.png) | ![Linux](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_JMjzMA41lYWERzzK-ixbuRW5CarzADJQh_gSjwjxYOCQdGaZ4PutyIM-EySSfCT05FQ&usqp=CAU) |
+
+---
+
+## 🙏 Acknowledgments
+
+We’d like to thank the following resources:
+
+- **[Tauri 2.0 Docs](https://tauri.app/)** - Framework documentation.
+- **[Shadcn UI Docs](https://ui.shadcn.dev/)** - Component library documentation.
+
+---
+
+## 📜 License
+
+This project is licensed under the [MIT License](LICENSE). See the [LICENSE](LICENSE) file for details.
+
+---
+
+### Enjoy exploring and contributing to Notera!

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "notera",
-  "version": "2.2.2",
+  "version": "3.0.1",
   "identifier": "com.notera.app",
   "build": {
     "beforeDevCommand": "npm run dev",
@@ -25,11 +25,11 @@
     "active": true,
     "targets": "all",
     "icon": [
-      "icons/Short-Logos/32x32.png",
-      "icons/Short-Logos/128x128.png",
-      "icons/Short-Logos/128x128@2x.png",
-      "icons/Short-Logos/icon.icns",
-      "icons/Short-Logos/icon.ico"
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
     ]
   },
   "plugins": {

src/App.tsx

@@ -5,6 +5,7 @@ import OnboardingScreen from "@/screens/OnBoarding/OnBoardingScreen.tsx";
 import {CategoryPage} from "@/screens/Category/Category.tsx";
 import HomePage from "@/screens/Home/Home.tsx";
 import {Layout} from "@/layout.tsx";
+import NoteUpdatingScreen from "./screens/NoteUpdateScreen/NoteUpdateScreen";
 
 function App() {
     return (
@@ -14,6 +15,7 @@ function App() {
                 <Route path={"/home"} component={HomePage}/>
                 <Route path={"/new-note"} component={NoteTakingScreen}/>
                 <Route path={"/category/:category"} component={CategoryPage}/>
+                <Route path={"/note/:category/:noteName"} component={NoteUpdatingScreen}/>
                 <Route>404</Route>
             </Switch>
         </Layout>

src/custom-components/AppSidebar/nav-categories.tsx

@@ -16,11 +16,16 @@ import {
     SidebarMenuItem,
     useSidebar,
 } from "@/components/ui/sidebar.tsx"
+import { BaseDirectory, remove } from "@tauri-apps/plugin-fs"
 
 
 export function NavCategories({categories}: { categories: string[] }) {
     const {isMobile} = useSidebar()
 
+    async function handleCategoryDeletion(categoryName: string) {
+        await remove("Desktop/" + categoryName, {baseDir: BaseDirectory.Desktop, recursive: true})
+    }
+
     return (
         <SidebarGroup className="group-data-[collapsible=icon]:hidden">
             <SidebarGroupLabel>Categories</SidebarGroupLabel>
@@ -45,11 +50,13 @@ export function NavCategories({categories}: { categories: string[] }) {
                                 align={isMobile ? "end" : "start"}
                             >
                                 <DropdownMenuItem>
-                                    <Folder className="text-muted-foreground"/>
-                                    <span>View Category</span>
+                                    <a href={`/category/${item}`} className="flex justify-between items-center">
+                                        <Folder className="text-muted-foreground"/>
+                                        <span>View Category</span>
+                                    </a>
                                 </DropdownMenuItem>
                                 <DropdownMenuSeparator/>
-                                <DropdownMenuItem>
+                                <DropdownMenuItem onClick={async() => await handleCategoryDeletion(item)}>
                                     <Trash2 className="text-muted-foreground"/>
                                     <span>Delete Category</span>
                                 </DropdownMenuItem>

src/screens/Category/Category.tsx

@@ -1,18 +1,20 @@
 import {Card, CardContent, CardFooter, CardHeader, CardTitle} from "@/components/ui/card"
-import {FileInfo} from "@tauri-apps/plugin-fs";
+import {BaseDirectory, FileInfo, remove} from "@tauri-apps/plugin-fs";
 import {useEffect, useState} from "react";
 import {useLocation, useParams} from "wouter";
 import dayjs from "dayjs";
 
 import {AppBreadcrums} from "@/custom-components/AppBreadcrums/AppBreadcrums.tsx";
 import {getCategoryAndNotesDetails} from "@/utils/getCategoryAndNotesDetails.ts";
 import {categoryBreadcrums} from "@/screens/Category/CategoryBreadcrums.ts";
-import {PlusCircle} from "lucide-react";
+import { PlusCircle,  Trash2} from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
 
 export function CategoryPage() {
     const [categoryData, setCategoryData] = useState<{ name: string; info: FileInfo }[] | undefined>([])
     const [location, setLocation] = useLocation();
     const params = useParams();
+    const {toast} = useToast()
 
     if (!location) console.log(location)
     useEffect(() => {
@@ -31,29 +33,53 @@ export function CategoryPage() {
         return <div>Loading...</div>
     }
 
+    async function handleNoteDeletion(noteName : string) {
+        try {
+            const path = `Desktop/${params.category}/${noteName}`
+            await remove(path,{baseDir: BaseDirectory.Desktop})
+            toast({
+                variant: "default",
+                title: "Success",
+                description: "Note Deleted Successfully",
+            })
+        } catch (error) {
+            console.log(error)
+            toast({
+                variant: "destructive",
+                title: "Error",
+                description: "Note Deletion Failed.",
+            })
+            setLocation(`/category/${params.category}`)
+        }
+
+    }
+
     return (
         <div className={"flex flex-col h-screen w-screen"}>
             <AppBreadcrums items={categoryBreadcrums}/>
             <main className={"flex-1 p-4"}>
                 <h1 className="text-3xl font-bold mb-6">{params.category} Notes</h1>
                 <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-                    <Card className="flex flex-col rounded-lg p-0 items-center justify-center cursor-pointer"
+                    <Card className="flex flex-col rounded-lg p-0 items-center justify-center cursor-pointer hover:scale-105 transition ease-in-out"
                           onClick={() => {
                               setLocation("/new-note")
                           }}>
                         <CardContent
-                            className={"flex flex-col justify-center items-center h-full space-y-2.5 rounded-lg p-0 w-full"}>
-                            <PlusCircle className="h-8 w-8 opacity-50"/>
+                            className={"flex flex-col justify-center items-center h-full space-y-2.5 rounded-lg p-1 w-full"}>
+                            <PlusCircle className="h-8 w-8 text-black"/>
                             <p className={"h-8 flex items-center"}>New Note</p>
                         </CardContent>
                     </Card>
                     {categoryData.map((note, idx) => (
-                        <Card key={idx} className="flex flex-col rounded-lg">
+                        <Card key={idx} className="flex flex-col rounded-lg hover:scale-105 transition ease-in-out"
+                            onClick={() => {
+                                setLocation(`/note/${params.category}/${note.name}`)
+                            }}>
                             <CardHeader>
                                 <CardTitle>{note.name}</CardTitle>
                             </CardHeader>
-                            <CardFooter className="flex justify-between">
-                                <p className={"text-muted-foreground"}>{dayjs(note.info.birthtime).format("DD MMM YYYY").toString()}</p>
+                            <CardFooter className="w-full">
+                                <p className={"text-muted-foreground flex justify-between items-center w-full"}>{dayjs(note.info.birthtime).format("DD MMM YYYY").toString()} <Trash2 className="w-5 h-5 cursor-pointer" onClick={async () => await handleNoteDeletion(note.name)}/></p>
                             </CardFooter>
                         </Card>
                     ))}