\n {/* Sidebar */}\n

📝 NoteSphere

\n \n

\n\n {/* Search and Filter */}\n setSearchTerm(e.target.value)}\n style={{\n width: '100%',\n padding: '10px',\n marginBottom: '10px',\n backgroundColor: theme.inputBackground,\n border: `1px solid ${isDarkMode ? '#4a5568' : '#e2e8f0'}`,\n borderRadius: '5px'\n }}\n />\n\n {/* Note Creation Button */}\n \n\n {/* Note List */}\n

\n {filteredNotes.map(note => (\n

setSelectedNote(note)}\n style={{\n padding: '10px',\n borderBottom: `1px solid ${isDarkMode ? '#4a5568' : '#e2e8f0'}`,\n backgroundColor: theme.cardBackground,\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center'\n }}\n >\n

\n {note.title || 'Untitled'}\n {note.isPinned && 📌}\n

\n {note.tags.map(tag => `#${tag}`).join(' ')}\n

\n ))}\n

\n\n {/* Note Editor */}\n

\n {selectedNote ? (\n

\n {/* Printable Note Container */}\n

\n setSelectedNote({\n ...selectedNote,\n title: e.target.value\n })}\n style={{\n width: '100%',\n fontSize: '1.5rem',\n marginBottom: '10px',\n backgroundColor: isDarkMode ? '#2d3748' : '#ffffff',\n border: `1px solid ${isDarkMode ? '#4a5568' : '#e2e8f0'}`,\n padding: '10px',\n borderRadius: '5px'\n }}\n />\n\n

setSelectedNote({\n                  ...selectedNote,\n                  content: e.target.value\n                })}\n                style={{\n                  width: '100%',\n                  minHeight: '400px',\n                  backgroundColor: isDarkMode ? '#2d3748' : '#ffffff',\n                  border: `1px solid ${isDarkMode ? '#4a5568' : '#e2e8f0'}`,\n                  padding: '10px',\n                  borderRadius: '5px',\n                  resize: 'vertical'\n                }}\n              />\n\n              {/* Metadata for PDF */}\n              <div style={{ \n                marginTop: '10px', \n                fontSize: '0.8rem', \n                color: 'gray' \n              }}>\n                Created: {selectedNote.createdAt.toLocaleString()}\n                {selectedNote.tags.length > 0 && ` | Tags: ${selectedNote.tags.join(', ')}`}\n                {` | Category: ${selectedNote.category}`}\n              </div>\n            </div>\n\n            <div style={{ \n              display: 'flex', \n              justifyContent: 'space-between', \n              marginTop: '10px' \n            }}>\n              <div>\n                <input \n                  type=\"text\"\n                  placeholder=\"Add tags (comma separated)\"\n                  value={selectedNote.tags.join(', ')}\n                  onChange={(e) => setSelectedNote({\n                    ...selectedNote,\n                    tags: e.target.value.split(',').map(t => t.trim()).filter(Boolean)\n                  })}\n                  style={{\n                    padding: '10px',\n                    marginRight: '10px',\n                    backgroundColor: isDarkMode ? '#2d3748' : '#ffffff',\n                    border: `1px solid ${isDarkMode ? '#4a5568' : '#e2e8f0'}`,\n                    borderRadius: '5px'\n                  }}\n                />\n                <select \n                  value={selectedNote.category}\n                  onChange={(e) => setSelectedNote({\n                    ...selectedNote,\n                    category: e.target.value\n                  })}\n                  style={{\n                    padding: '10px',\n                    backgroundColor: isDarkMode ? '#2d3748' : '#ffffff',\n                    border: `1px solid ${isDarkMode ? '#4a5568' : '#e2e8f0'}`,\n                    borderRadius: '5px'\n                  }}\n                >\n                  <option value=\"Uncategorized\">Uncategorized</option>\n                  <option value=\"Work\">Work</option>\n                  <option value=\"Personal\">Personal</option>\n                  <option value=\"Ideas\">Ideas</option>\n                </select>\n              </div>\n\n              <div>\n                <button \n                  onClick={() => setSelectedNote({\n                    ...selectedNote,\n                    isPinned: !selectedNote.isPinned\n                  })}\n                  style={{\n                    marginRight: '10px',\n                    padding: '10px',\n                    backgroundColor: selectedNote.isPinned ? '#48bb78' : '#4299e1',\n                    color: 'white',\n                    border: 'none',\n                    borderRadius: '5px'\n                  }}\n                >\n                  {selectedNote.isPinned ? 'Unpin' : 'Pin'}\n                </button>\n                <button \n                  onClick={() => saveNote(selectedNote)}\n                  style={{\n                    marginRight: '10px',\n                    padding: '10px',\n                    backgroundColor: '#4299e1',\n                    color: 'white',\n                    border: 'none',\n                    borderRadius: '5px'\n                  }}\n                >\n                  Save\n                </button>\n                <button \n                  onClick={() => deleteNote(selectedNote.id)}\n                  style={{\n                    marginRight: '10px',\n                    padding: '10px',\n                    backgroundColor: '#e53e3e',\n                    color: 'white',\n                    border: 'none',\n                    borderRadius: '5px'\n                  }}\n                >\n                  Delete\n                </button>\n                <button \n                  onClick={exportNoteToPDF}\n                  style={{\n                    padding: '10px',\n                    backgroundColor: '#38a169',\n                    color: 'white',\n                    border: 'none',\n                    borderRadius: '5px'\n                  }}\n                >\n                  Export PDF 📄\n                </button>\n              </div>\n            </div>\n          </div>\n        ) : (\n          <div style={{ \n            textAlign: 'center', \n            color: 'gray', \n            marginTop: '100px' \n          }}>\n            Select a note or create a new one\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  return new Response(`\n    <html>\n      <head>\n        <title>NoteSphere</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap\" rel=\"stylesheet\">\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <style>\n          body { margin: 0; }\n          * { box-sizing: border-box; }\n        </style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"content-type\": \"text/html\" }\n  });\n}","createdAt",["D",1739724477831],"version","currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_128":129,"_130":131},"handle","Valtown12","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJzZUtmWnIxeVprRFoxUjRLQ0NzMmxvWTkwaCJ9","forkedVal","interval","slug","Valtown12/NoteSphereApp","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[140,143,146],{"_117":90,"_141":-5,"_115":142,"_112":110},"prId",["D",1739724477831],{"_117":123,"_141":-5,"_115":144,"_112":145},["D",1739724390235],"926241de-ec85-11ef-aa01-e6cdfca9ef9f",{"_117":31,"_141":-5,"_115":147,"_112":148},["D",1739724290935],"5732cd2c-ec85-11ef-b154-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":156,"_157":158,"_94":159},"single","redirect","/v/Valtown12/NoteSphereApp/versions",{"_112":110,"_113":114,"_117":90,"_115":160,"_161":99,"_100":101,"_107":108,"_128":129,"_11":96,"_162":-5,"_163":-5,"_164":-5,"_153":26,"_134":135},["D",1739724477831],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]
</article></body></html>

NoteSphereApp

Version 2