update readme with some boilerplate content

README.md

@@ -1,7 +1,86 @@
-# Tauri + Vanilla TS
+### **Kslab**
 
-This template should help get you started developing with [Tauri](https://tauri.app) & [Kaioken](https://kaioken.dev).
+A visual organization tool for notes, text, shapes, and images.
 
-## Recommended IDE Setup
+### **Table of Contents**
+
+  * [Technologies]()
+  * [Development Setup]()
+  * [Installation]()
+      * [Desktop Application]() 
+      * [Web Application]() 
+  * [Usage]()
+      * [Desktop Application]() 
+      * [Web Application]() 
+  * [Contributing]()
+  * [License]()
+
+### **Screenshots**
+
+![screenshot](./src/assets/repo/screenshot.png)
+
+### **Technologies**
+
+This project utilizes the following open-source libraries:
+
+  * **Kaioken:** A lightweight UI rendering library ([Kaioken](https://kaioken.dev))
+  * **Tauri:** A framework for building desktop and mobile applications with web technologies ([https://v2.tauri.app/](https://v2.tauri.app/))
+  * **TypeScript:** A typed superset of JavaScript that adds optional static typing
+  * **ESLint:** A linter for enforcing code style and catching potential errors
+
+### **Development Setup**
+
+1. **Clone the repository:**
+   ```bash
+   git clone https://git.klectr.dev/Klectr/kslab.git
+   ```
+2. **Install dependencies:**
+This project uses [Bun](https://bun.sh) as its package manager.
+   ```bash
+   bun install
+   ```
+
+### **Installation**
+
+#### **Desktop Application**
+
+[Instructions on how to download, install, and run the desktop application. Mention any dependencies or prerequisites.]
+
+**Note:** These instructions might involve installing Tauri and any additional dependencies for the desktop application.
+
+#### **Web Application**
+
+[Instructions on how to access and use the web application. Specify if it's a standalone web app or runs within Tauri.]
+
+**Note:** These instructions might involve running the web application directly in a browser if it's standalone.
+
+### **Usage**
+
+#### **Desktop Application**
+
+* **Add notes:** Click the "+" button to create a new note.
+* **Edit notes:** Double-click a note to edit its content.
+* **Move notes:** Drag and drop notes to reposition them on the canvas.
+* **Add shapes and images:** Use the toolbar to add various shapes and images.
+* **Customize appearance:** Change the color, size, and other properties of elements.
+
+#### **Web Application**
+
+[Instructions for using the web application, similar to the desktop application]
+
+### **Contributing**
+
+[Guidelines for contributors, including how to report bugs or submit pull requests. Mention how contributions to both Kaioken and Tauri integrations are handled. Also, emphasize the importance of following TypeScript and ESLint conventions.]
+
+### **License**
+
+[Specify the license under which the project is released (e.g., MIT, Apache License 2.0)]
+
+**Additional sections you might consider:**
+
+  * **Roadmap** - Future plans for Kslab, such as implementing an infinite canvas or adding more features.
+
+**Remember to replace the placeholder text with specific details about your project.**
+
+**Let me know if you'd like help filling in any specific sections or if you have any further questions about Kaioken, Tauri, TypeScript, or ESLint.**
 
-- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)

src/components/NoteCard.tsx

@@ -253,7 +253,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCardProps) {
       {/* HOTKEY PAPER */}
       {showHelp.value &&
         <div
-          className={"text-white absolute bg-[#1c1c1c] rounded-md p-1 z-[1000] border border-blue-500"}
+          className={"dark:text-white absolute dark:bg-[#1c1c1c] bg-[#fff] rounded-md p-1 z-[1000] border border-blue-500"}
           style={{
             top: `${item.position.y}px`,
             left: `${item.position.x - 120}px`

src/components/icons/HelpIcon.tsx

@@ -18,7 +18,7 @@ export function HelpIcon({ onMouseOver, onMouseOut }: HelpIconProps) {
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      className="w-4 h-4 hover:text-blue-500 cursor-pointer"
+      className="dark:text-[#5c5c5c] cursor-pointer w-4 h-4 text-[#9c9c9c] hover:text-blue-500 transition-color duration-300"
     >
       <circle
         cx="12"