Vault

Notes

+ {token ? ( + + ) : null} +

+ +

+ + + API endpoint + + setApiUrl(event.target.value)} + placeholder={DEFAULT_API_URL} + /> +

+ + {!token ? ( + + ) : ( + <> +

+ + {currentUser || "Authenticated"} + +

+ +

+ + setQuery(event.target.value)} + placeholder="Search notes" + aria-label="Search notes" + /> +

+ + +

+ +

+ {filteredNotes.length ? ( + filteredNotes.map((note) => { + const id = noteId(note); + const active = id === selectedId; + const editable = ownsNote(note, currentUser); + + return ( + + ); + }) + ) : ( +

No notes found.

+ )} +

+ + )} +

+ +

{selectedId ? (canEditSelected ? "Editing" : "Reading") : "New note"}

{draft.title || "Untitled note"}

+ +

+ + {token ? ( +

+ setDraft((current) => ({ ...current, title: event.target.value }))} + placeholder="Title" + disabled={!canEditSelected} + /> +

setDraft((current) => ({ ...current, content: event.target.value }))}
+              placeholder="Write the note..."
+              disabled={!canEditSelected}
+            />
+
+            <div className="editor-actions">
+              <button className="primary-button" type="submit" disabled={busy || !canEditSelected}>
+                <Save size={18} />
+                Save
+              </button>
+              <button className="secondary-button" type="button" onClick={newDraft}>
+                <Plus size={18} />
+                New
+              </button>
+              <button
+                className="danger-button"
+                type="button"
+                onClick={deleteNote}
+                disabled={busy || !selectedId || !canEditSelected}
+              >
+                <Trash2 size={18} />
+                Delete
+              </button>
+            </div>
+
+            {selectedId && canEditSelected ? (
+              <div className="share-row">
+                <label htmlFor="share-recipient">
+                  <Send size={16} />
+                  Share read-only
+                </label>
+                <input
+                  id="share-recipient"
+                  value={shareRecipient}
+                  onChange={(event) => setShareRecipient(event.target.value)}
+                  placeholder="Recipient username or email"
+                />
+                <button className="secondary-button" type="button" onClick={shareNote} disabled={busy || !shareRecipient.trim()}>
+                  <UserPlus size={18} />
+                  Share
+                </button>
+              </div>
+            ) : null}
+          </form>
+        ) : (
+          <section className="signed-out">
+            <KeyRound size={42} />
+            <h2>Sign in to open the vault</h2>
+            <p>Point the app at the API, register or log in, then create, edit, delete, and share notes.</p>
+          </section>
+        )}
+      </section>
+    </main>
+  );
+}
+
+function AuthPanel({ authMode, setAuthMode, authForm, setAuthForm, handleAuth, busy }) {
+  const isLogin = authMode === "login";
+
+  return (
+    <section className="panel auth-panel">
+      <div className="segmented" role="tablist" aria-label="Authentication mode">
+        <button type="button" className={isLogin ? "selected" : ""} onClick={() => setAuthMode("login")}>
+          <LogIn size={16} />
+          Login
+        </button>
+        <button type="button" className={!isLogin ? "selected" : ""} onClick={() => setAuthMode("register")}>
+          <UserPlus size={16} />
+          Register
+        </button>
+      </div>
+
+      <form onSubmit={handleAuth}>
+        <label htmlFor="auth-username">Username</label>
+        <input
+          id="auth-username"
+          value={authForm.username}
+          onChange={(event) => setAuthForm((form) => ({ ...form, username: event.target.value }))}
+          placeholder="username"
+        />
+
+        <label htmlFor="auth-password">Password</label>
+        <input
+          id="auth-password"
+          type="password"
+          value={authForm.password}
+          onChange={(event) => setAuthForm((form) => ({ ...form, password: event.target.value }))}
+          placeholder="password"
+          required
+        />
+
+        <button className="primary-button full-width" type="submit" disabled={busy}>
+          {isLogin ? <LogIn size={18} /> : <UserPlus size={18} />}
+          {isLogin ? "Sign in" : "Create account"}
+        </button>
+      </form>
+    </section>
+  );
+}
+
+function StatusBadge({ status }) {
+  return <div className={`status-badge ${status.tone}`}>{status.message}</div>;
+}
+
+function parsePayload(text) {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return text;
+  }
+}
+
+function normalizeApiUrl(value) {
+  const trimmed = value.trim();
+  if (!trimmed || trimmed === "/") return "";
+  return trimmed.replace(/\/+$/, "");
+}
+
+function buildAuthBody(form) {
+  const body = { password: form.password };
+  if (form.username.trim()) body.username = form.username.trim();
+  return body;
+}
+
+function upsertNote(notes, note) {
+  const id = noteId(note);
+  if (!id) return notes;
+  const exists = notes.some((existing) => noteId(existing) === id);
+  if (exists) {
+    return notes.map((existing) => (noteId(existing) === id ? note : existing));
+  }
+  return [note, ...notes];
+}
+
+function ownsNote(note, currentUser) {
+  const owner = String(noteOwner(note) || "").toLowerCase();
+  const user = String(currentUser || "").toLowerCase();
+  if (!owner || !user) return !note?.sharedWith && !note?.shared;
+  return owner === user || owner.includes(user) || user.includes(owner);
+}
+
+createRoot(document.getElementById("root")).render(<App />);
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..d9674fa
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,497 @@
+:root {
+  color-scheme: light;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #202326;
+  background: #f5f2eb;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled,
+input:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-columns: minmax(300px, 380px) 1fr;
+  min-height: 100vh;
+  background:
+    linear-gradient(90deg, #efe7db 0, #f5f2eb 34%, #eef5f0 100%);
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  min-height: 100vh;
+  padding: 24px;
+  border-right: 1px solid rgba(40, 43, 46, 0.12);
+  background: rgba(250, 248, 243, 0.78);
+  backdrop-filter: blur(16px);
+}
+
+.brand-row,
+.workspace-header,
+.toolbar,
+.editor-actions,
+.share-row,
+.user-strip,
+.settings-panel label {
+  display: flex;
+  align-items: center;
+}
+
+.brand-row,
+.workspace-header {
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.eyebrow {
+  margin: 0 0 4px;
+  color: #6c756f;
+  font-size: 0.76rem;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+h1,
+h2 {
+  margin: 0;
+  letter-spacing: 0;
+}
+
+h1 {
+  font-size: clamp(2rem, 4vw, 3.2rem);
+  line-height: 0.94;
+}
+
+h2 {
+  max-width: 56rem;
+  overflow-wrap: anywhere;
+  font-size: clamp(1.45rem, 2.6vw, 2.75rem);
+  line-height: 1;
+}
+
+.panel {
+  border: 1px solid rgba(42, 44, 46, 0.13);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.68);
+  box-shadow: 0 18px 60px rgba(54, 49, 40, 0.08);
+}
+
+.settings-panel,
+.auth-panel {
+  padding: 14px;
+}
+
+.settings-panel label,
+.share-row label {
+  gap: 8px;
+  margin-bottom: 8px;
+  color: #404844;
+  font-size: 0.86rem;
+  font-weight: 760;
+}
+
+input,
+textarea {
+  width: 100%;
+  border: 1px solid rgba(39, 44, 48, 0.16);
+  border-radius: 7px;
+  background: rgba(255, 255, 255, 0.9);
+  color: #202326;
+  outline: none;
+  transition:
+    border-color 140ms ease,
+    box-shadow 140ms ease,
+    background 140ms ease;
+}
+
+input {
+  min-height: 42px;
+  padding: 0 12px;
+}
+
+textarea {
+  min-height: 46vh;
+  resize: vertical;
+  padding: 16px;
+  line-height: 1.55;
+}
+
+input:focus,
+textarea:focus {
+  border-color: #297c72;
+  box-shadow: 0 0 0 4px rgba(41, 124, 114, 0.14);
+  background: #fff;
+}
+
+.segmented {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+  margin-bottom: 16px;
+  padding: 4px;
+  border: 1px solid rgba(40, 43, 46, 0.1);
+  border-radius: 8px;
+  background: #ede8df;
+}
+
+.segmented button,
+.primary-button,
+.secondary-button,
+.danger-button,
+.icon-button,
+.ghost-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 0;
+  border-radius: 7px;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.segmented button {
+  min-height: 34px;
+  color: #56615c;
+  background: transparent;
+}
+
+.segmented button.selected {
+  color: #162522;
+  background: #ffffff;
+  box-shadow: 0 8px 20px rgba(38, 38, 34, 0.1);
+}
+
+.auth-panel form {
+  display: grid;
+  gap: 9px;
+}
+
+.auth-panel label {
+  color: #4a514d;
+  font-size: 0.84rem;
+  font-weight: 760;
+}
+
+.primary-button,
+.secondary-button,
+.danger-button {
+  min-height: 42px;
+  padding: 0 14px;
+}
+
+.primary-button {
+  color: #f7fbf8;
+  background: #1e6f66;
+}
+
+.secondary-button {
+  color: #25302c;
+  background: #e5ddd2;
+}
+
+.danger-button {
+  color: #fff7f4;
+  background: #b9473c;
+}
+
+.full-width {
+  width: 100%;
+  margin-top: 8px;
+}
+
+.icon-button,
+.ghost-icon {
+  width: 42px;
+  height: 42px;
+  flex: 0 0 42px;
+}
+
+.icon-button {
+  color: #25302c;
+  background: #e4dfd6;
+}
+
+.icon-button.accent {
+  color: #fff;
+  background: #1e6f66;
+}
+
+.ghost-icon {
+  width: 32px;
+  height: 32px;
+  flex-basis: 32px;
+  color: #39413d;
+  background: transparent;
+}
+
+.user-strip {
+  gap: 9px;
+  min-height: 42px;
+  padding: 8px 10px;
+  border: 1px solid rgba(42, 44, 46, 0.12);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.62);
+  color: #39413d;
+  font-weight: 760;
+}
+
+.user-strip span {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.toolbar {
+  gap: 8px;
+}
+
+.search {
+  position: relative;
+  flex: 1;
+}
+
+.search svg {
+  position: absolute;
+  top: 13px;
+  left: 12px;
+  color: #78827d;
+}
+
+.search input {
+  padding-left: 38px;
+}
+
+.notes-list {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 180px;
+  overflow-y: auto;
+  padding-right: 3px;
+}
+
+.note-item {
+  display: grid;
+  gap: 4px;
+  width: 100%;
+  padding: 13px;
+  border: 1px solid rgba(42, 44, 46, 0.1);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.55);
+  color: inherit;
+  text-align: left;
+}
+
+.note-item.active {
+  border-color: rgba(30, 111, 102, 0.45);
+  background: #ffffff;
+  box-shadow: inset 4px 0 0 #1e6f66;
+}
+
+.note-item strong,
+.note-item span,
+.note-item small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.note-item strong {
+  font-size: 0.98rem;
+}
+
+.note-item span {
+  color: #616b66;
+  font-size: 0.88rem;
+}
+
+.note-item small {
+  color: #8a5a32;
+  font-size: 0.74rem;
+  font-weight: 850;
+  text-transform: uppercase;
+}
+
+.empty-state {
+  margin: 30px 4px;
+  color: #6c756f;
+  text-align: center;
+}
+
+.workspace {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  min-width: 0;
+  padding: 34px;
+}
+
+.workspace-header {
+  min-height: 72px;
+}
+
+.status-badge {
+  max-width: 34rem;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.7);
+  color: #59625e;
+  font-size: 0.88rem;
+  font-weight: 760;
+  overflow-wrap: anywhere;
+}
+
+.status-badge.ok {
+  color: #135b4b;
+  background: #dcefe8;
+}
+
+.status-badge.error {
+  color: #8f2d28;
+  background: #f7ded8;
+}
+
+.editor {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.title-input {
+  min-height: 58px;
+  padding: 0 16px;
+  font-size: 1.22rem;
+  font-weight: 850;
+}
+
+.editor-actions {
+  flex-wrap: wrap;
+  gap: 9px;
+}
+
+.share-row {
+  flex-wrap: wrap;
+  gap: 10px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(42, 44, 46, 0.12);
+}
+
+.share-row label {
+  margin: 0;
+}
+
+.share-row input {
+  width: min(360px, 100%);
+  flex: 1 1 240px;
+}
+
+.signed-out {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  min-height: 60vh;
+  color: #4c5550;
+  text-align: center;
+}
+
+.signed-out h2 {
+  margin-top: 18px;
+}
+
+.signed-out p {
+  max-width: 34rem;
+  margin: 12px 0 0;
+  line-height: 1.55;
+}
+
+.spin {
+  animation: spin 900ms linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 840px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    min-height: auto;
+    border-right: 0;
+    border-bottom: 1px solid rgba(40, 43, 46, 0.12);
+  }
+
+  .notes-list {
+    max-height: 320px;
+  }
+
+  .workspace {
+    padding: 22px;
+  }
+
+  .workspace-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 520px) {
+  .sidebar,
+  .workspace {
+    padding: 16px;
+  }
+
+  .toolbar {
+    align-items: stretch;
+    flex-wrap: wrap;
+  }
+
+  .search {
+    flex-basis: 100%;
+  }
+
+  .primary-button,
+  .secondary-button,
+  .danger-button {
+    flex: 1 1 130px;
+  }
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..6d22fb9
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,15 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:8080",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
+  },
+});