feat: add description field to dataset and update related components for dataset creation and editing

src/components/CreateDatasetForm.tsx

@@ -5,6 +5,7 @@ import { createDataset } from '@/app/actions/datasets';
 
 export default function CreateDatasetForm() {
   const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
@@ -21,8 +22,12 @@ export default function CreateDatasetForm() {
 
     setLoading(true);
     try {
-      await createDataset({ name: name.trim() });
+      await createDataset({ 
+        name: name.trim(),
+        description: description.trim() || undefined
+      });
       setName('');
+      setDescription('');
       setSuccess(true);
       setTimeout(() => setSuccess(false), 3000);
       // Refresh the page to show the new dataset
@@ -53,6 +58,21 @@ export default function CreateDatasetForm() {
           />
         </div>
 
+        <div className="mb-4">
+          <label htmlFor="description" className="block text-sm font-medium mb-2">
+            Description (Optional)
+          </label>
+          <textarea
+            id="description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Enter dataset description"
+            rows={3}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+            disabled={loading}
+          />
+        </div>
+
         {error && (
           <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
             {error}

src/components/DatasetsList.tsx

@@ -21,6 +21,7 @@ export default async function DatasetsList() {
               className="border border-gray-300 rounded-lg p-4 bg-white shadow-sm hover:shadow-md transition-shadow block cursor-pointer"
             >
               <h3 className="text-lg font-semibold">{ds.name}</h3>
+              <p className="text-md text-gray-600">{ds.description}</p>
               <p className="text-sm text-gray-600 mt-2">
                 ID: {ds.id}
               </p>

src/components/EditableDatasetHeader.tsx

@@ -13,6 +13,7 @@ export default function EditableDatasetHeader({
 }: EditableDatasetHeaderProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [name, setName] = useState(dataset.name);
+  const [description, setDescription] = useState(dataset.description || '');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -26,7 +27,10 @@ export default function EditableDatasetHeader({
     setError(null);
 
     try {
-      await updateDataset(dataset.id, { name: name.trim() });
+      await updateDataset(dataset.id, { 
+        name: name.trim(),
+        description: description.trim() || undefined
+      });
       setIsEditing(false);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to update dataset');
@@ -37,6 +41,7 @@ export default function EditableDatasetHeader({
 
   function handleCancel() {
     setName(dataset.name);
+    setDescription(dataset.description || '');
     setError(null);
     setIsEditing(false);
   }
@@ -57,6 +62,18 @@ export default function EditableDatasetHeader({
             disabled={loading}
           />
 
+          <label htmlFor="description" className="block text-sm font-medium mb-2">
+            Description (Optional)
+          </label>
+          <textarea
+            id="description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={3}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4 resize-none"
+            disabled={loading}
+          />
+
           {error && (
             <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
               {error}
@@ -91,6 +108,9 @@ export default function EditableDatasetHeader({
               Edit
             </button>
           </div>
+          {dataset.description && (
+            <p className="text-gray-700 mb-4">{dataset.description}</p>
+          )}
           <div className="grid grid-cols-2 gap-4">
             <div>
               <p className="text-sm text-gray-600">Dataset ID</p>