+ {/* Main toolbar button */}
+
+
+ {/* Expandable toolbar */}
+ {isToolbarOpen && (
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Editor area */}
+
+
setContent(e.currentTarget.innerHTML)}
+ suppressContentEditableWarning={true}
+ style={{
+ WebkitUserSelect: 'text',
+ WebkitTouchCallout: 'none',
+ overflowY: 'auto',
+ }}
+ />
+
+
+ );
+};
+
+export default NoteEditor;
diff --git a/notes/src/main.tsx b/notes/src/main.tsx
new file mode 100644
index 0000000..0c0998d
--- /dev/null
+++ b/notes/src/main.tsx
@@ -0,0 +1,32 @@
+import { invoke } from "@tauri-apps/api/core";
+import { createRoot } from 'react-dom/client';
+import React, { useState, useEffect } from 'react';
+
+
+import NoteEditor from "./claude-generated-code";
+
+const domElem = document.getElementById("editor");
+console.log(domElem);
+const root = createRoot(domElem);
+root.render(
);
+
+let greetInputEl: HTMLInputElement | null;
+let greetMsgEl: HTMLElement | null;
+
+async function greet() {
+ if (greetMsgEl && greetInputEl) {
+ // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
+ greetMsgEl.textContent = await invoke("greet", {
+ name: greetInputEl.value,
+ });
+ }
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+ greetInputEl = document.querySelector("#greet-input");
+ greetMsgEl = document.querySelector("#greet-msg");
+ document.querySelector("#greet-form")?.addEventListener("submit", (e) => {
+ e.preventDefault();
+ greet();
+ });
+});
diff --git a/notes/src/styles.css b/notes/src/styles.css
new file mode 100644
index 0000000..7011746
--- /dev/null
+++ b/notes/src/styles.css
@@ -0,0 +1,116 @@
+.logo.vite:hover {
+ filter: drop-shadow(0 0 2em #747bff);
+}
+
+.logo.typescript:hover {
+ filter: drop-shadow(0 0 2em #2d79c7);
+}
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+
+ color: #0f0f0f;
+ background-color: #f6f6f6;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+.container {
+ margin: 0;
+ padding-top: 10vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ transition: 0.75s;
+}
+
+.logo.tauri:hover {
+ filter: drop-shadow(0 0 2em #24c8db);
+}
+
+.row {
+ display: flex;
+ justify-content: center;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+
+a:hover {
+ color: #535bf2;
+}
+
+h1 {
+ text-align: center;
+}
+
+input,
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ color: #0f0f0f;
+ background-color: #ffffff;
+ transition: border-color 0.25s;
+ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+button {
+ cursor: pointer;
+}
+
+button:hover {
+ border-color: #396cd8;
+}
+button:active {
+ border-color: #396cd8;
+ background-color: #e8e8e8;
+}
+
+input,
+button {
+ outline: none;
+}
+
+#greet-input {
+ margin-right: 5px;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ color: #f6f6f6;
+ background-color: #2f2f2f;
+ }
+
+ a:hover {
+ color: #24c8db;
+ }
+
+ input,
+ button {
+ color: #ffffff;
+ background-color: #0f0f0f98;
+ }
+ button:active {
+ background-color: #0f0f0f69;
+ }
+}
diff --git a/notes/tsconfig.json b/notes/tsconfig.json
new file mode 100644
index 0000000..75abdef
--- /dev/null
+++ b/notes/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/notes/vite.config.ts b/notes/vite.config.ts
new file mode 100644
index 0000000..e8e567a
--- /dev/null
+++ b/notes/vite.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from "vite";
+
+// @ts-expect-error process is a nodejs global
+const host = process.env.TAURI_DEV_HOST;
+
+// https://vitejs.dev/config/
+export default defineConfig(async () => ({
+
+ // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+ //
+ // 1. prevent vite from obscuring rust errors
+ clearScreen: false,
+ // 2. tauri expects a fixed port, fail if that port is not available
+ server: {
+ port: 1420,
+ strictPort: true,
+ host: host || false,
+ hmr: host
+ ? {
+ protocol: "ws",
+ host,
+ port: 1421,
+ }
+ : undefined,
+ watch: {
+ // 3. tell vite to ignore watching `src-tauri`
+ ignored: ["**/src-tauri/**"],
+ },
+ },
+}));
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..394a84f
--- /dev/null
+++ b/package.json
@@ -0,0 +1 @@
+{ "dependencies": { "lucide-react": "^0.460.0", "react-dom": "^18.3.1" } }
\ No newline at end of file
+ 
+ 
+