bolt.diy/app/components/@settings/tabs/notes/NotesTab.tsx

import { useState } from 'react';
import { useStore } from '@nanostores/react';
import { notesStore, addNote, removeNote } from '~/lib/stores/notes';
import { Button } from '~/components/ui/Button';
import { classNames } from '~/utils/classNames';

export default function NotesTab() {
  const notes = useStore(notesStore);
  const [noteText, setNoteText] = useState('');

  const handleAdd = () => {
    const text = noteText.trim();

    if (!text) {
      return;
    }

    addNote(text);
    setNoteText('');
  };

  return (
    <div className="space-y-4">
      <div>
        <textarea
          value={noteText}
          onChange={(e) => setNoteText(e.target.value)}
          className={classNames(
            'w-full rounded-lg p-2',
            'bg-bolt-elements-background-depth-1',
            'border border-bolt-elements-borderColor',
            'text-bolt-elements-textPrimary',
            'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
            'min-h-[80px] resize-vertical',
          )}
          placeholder="Add a note for the AI"
        />
        <Button className="mt-2" variant="secondary" onClick={handleAdd}>
          Add Note
        </Button>
      </div>
      <div className="space-y-2">
        {notes.map((n) => (
          <div key={n.id} className="flex items-start gap-2 p-2 rounded-lg bg-bolt-elements-background-depth-2">
            <div className="flex-1 whitespace-pre-wrap text-sm text-bolt-elements-textPrimary">{n.text}</div>
            <Button size="sm" variant="ghost" onClick={() => removeNote(n.id)}>
              <div className="i-ph:trash w-4 h-4" />
            </Button>
          </div>
        ))}
        {notes.length === 0 && <p className="text-sm text-bolt-elements-textSecondary">No notes added.</p>}
      </div>
    </div>
  );
}