oauth_new

oauth_new/src/components/CommentForm.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { atproto } from '../api/atproto.js'
+import { atproto, collections } from '../api/atproto.js'
 import { env } from '../config/env.js'
 
 export default function CommentForm({ user, agent, onCommentPosted }) {
@@ -16,34 +16,43 @@ export default function CommentForm({ user, agent, onCommentPosted }) {
     setError(null)
 
     try {
-      // Create ai.syui.log record structure
+      const currentUrl = url.trim()
+      const timestamp = new Date().toISOString()
+      
+      // Create ai.syui.log record structure (new unified format)
       const record = {
         repo: user.did,
         collection: env.collection,
         rkey: `comment-${Date.now()}`,
         record: {
           $type: env.collection,
-          url: url.trim(),
-          comments: [
-            {
-              url: url.trim(),
-              text: text.trim(),
-              author: {
-                did: user.did,
-                handle: user.handle,
-                displayName: user.displayName,
-                avatar: user.avatar
-              },
-              createdAt: new Date().toISOString()
-            }
-          ],
-          createdAt: new Date().toISOString()
+          url: currentUrl, // Keep for backward compatibility
+          post: {
+            url: currentUrl,
+            date: timestamp,
+            slug: new URL(currentUrl).pathname.split('/').pop()?.replace(/\.html$/, '') || '',
+            tags: [],
+            title: document.title || 'Comment',
+            language: 'ja'
+          },
+          text: text.trim(),
+          type: 'comment',
+          author: {
+            did: user.did,
+            handle: user.handle,
+            displayName: user.displayName,
+            avatar: user.avatar
+          },
+          createdAt: timestamp
         }
       }
 
       // Post the record
       await atproto.putRecord(null, record, agent)
 
+      // キャッシュを無効化
+      collections.invalidateCache(env.collection)
+
       // Clear form
       setText('')
       setUrl('')
@@ -62,14 +71,18 @@ export default function CommentForm({ user, agent, onCommentPosted }) {
 
   if (!user) {
     return (
-      <div className="comment-form-placeholder">
+      <div style={{ 
+        textAlign: 'center', 
+        padding: '40px', 
+        color: 'var(--text-secondary)'
+      }}>
         <p>ログインしてコメントを投稿</p>
       </div>
     )
   }
 
   return (
-    <div className="comment-form">
+    <div>
       <h3>コメントを投稿</h3>
       
       <form onSubmit={handleSubmit}>
@@ -83,6 +96,7 @@ export default function CommentForm({ user, agent, onCommentPosted }) {
             placeholder="https://syui.ai/posts/example"
             required
             disabled={loading}
+            className="form-input"
           />
         </div>
 
@@ -96,6 +110,7 @@ export default function CommentForm({ user, agent, onCommentPosted }) {
             rows={4}
             required
             disabled={loading}
+            className="form-input form-textarea"
           />
         </div>
 
@@ -109,92 +124,12 @@ export default function CommentForm({ user, agent, onCommentPosted }) {
           <button 
             type="submit" 
             disabled={loading || !text.trim() || !url.trim()}
-            className="submit-btn"
+            className="btn btn-primary"
           >
             {loading ? '投稿中...' : 'コメントを投稿'}
           </button>
         </div>
       </form>
-
-      <style jsx>{`
-        .comment-form {
-          border: 2px solid #007bff;
-          border-radius: 8px;
-          padding: 20px;
-          margin: 20px 0;
-          background: #f8f9fa;
-        }
-        .comment-form-placeholder {
-          border: 2px dashed #ddd;
-          border-radius: 8px;
-          padding: 20px;
-          margin: 20px 0;
-          text-align: center;
-          color: #666;
-          background: #f8f9fa;
-        }
-        .comment-form h3 {
-          margin-top: 0;
-          color: #007bff;
-        }
-        .form-group {
-          margin-bottom: 15px;
-        }
-        .form-group label {
-          display: block;
-          margin-bottom: 5px;
-          font-weight: bold;
-          color: #333;
-        }
-        .form-group input,
-        .form-group textarea {
-          width: 100%;
-          padding: 8px 12px;
-          border: 1px solid #ddd;
-          border-radius: 4px;
-          font-size: 14px;
-          box-sizing: border-box;
-        }
-        .form-group input:focus,
-        .form-group textarea:focus {
-          outline: none;
-          border-color: #007bff;
-          box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-        }
-        .form-group input:disabled,
-        .form-group textarea:disabled {
-          background: #e9ecef;
-          cursor: not-allowed;
-        }
-        .error-message {
-          background: #f8d7da;
-          color: #721c24;
-          padding: 10px;
-          border-radius: 4px;
-          margin-bottom: 15px;
-          border: 1px solid #f5c6cb;
-        }
-        .form-actions {
-          margin-top: 20px;
-        }
-        .submit-btn {
-          background: #007bff;
-          color: white;
-          border: none;
-          padding: 10px 20px;
-          border-radius: 4px;
-          font-size: 16px;
-          cursor: pointer;
-          transition: background 0.2s;
-        }
-        .submit-btn:hover:not(:disabled) {
-          background: #0056b3;
-        }
-        .submit-btn:disabled {
-          background: #6c757d;
-          cursor: not-allowed;
-        }
-      `}</style>
     </div>
   )
 }