groove-dev 0.15.0 → 0.16.0

package/packages/gui/src/views/FileEditor.jsx

@@ -0,0 +1,142 @@
+// GROOVE GUI — File Editor View
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+import React, { useCallback } from 'react';
+import { useGrooveStore } from '../stores/groove';
+import FileTree from '../components/FileTree';
+import EditorTabs from '../components/EditorTabs';
+import CodeEditor from '../components/CodeEditor';
+
+export default function FileEditor() {
+  const activeFile = useGrooveStore((s) => s.editorActiveFile);
+  const files = useGrooveStore((s) => s.editorFiles);
+  const changedFiles = useGrooveStore((s) => s.editorChangedFiles);
+  const updateFileContent = useGrooveStore((s) => s.updateFileContent);
+  const saveFile = useGrooveStore((s) => s.saveFile);
+  const reloadFile = useGrooveStore((s) => s.reloadFile);
+  const dismissFileChange = useGrooveStore((s) => s.dismissFileChange);
+
+  const file = activeFile ? files[activeFile] : null;
+  const isChanged = activeFile && changedFiles[activeFile];
+
+  const onContentChange = useCallback((content) => {
+    if (activeFile) updateFileContent(activeFile, content);
+  }, [activeFile, updateFileContent]);
+
+  const onSave = useCallback(() => {
+    if (activeFile) saveFile(activeFile);
+  }, [activeFile, saveFile]);
+
+  return (
+    <div style={styles.container}>
+      {/* Tab bar */}
+      <EditorTabs />
+
+      {/* Main content row */}
+      <div style={styles.contentRow}>
+        {/* File tree sidebar */}
+        <div style={styles.sidebar}>
+          <FileTree />
+        </div>
+
+        {/* Editor area */}
+        <div style={styles.editorArea}>
+          {/* External change banner */}
+          {isChanged && (
+            <div style={styles.changeBanner}>
+              <span style={styles.bannerText}>File modified externally</span>
+              <button
+                onClick={() => reloadFile(activeFile)}
+                style={styles.bannerBtn}
+              >
+                Reload
+              </button>
+              <button
+                onClick={() => dismissFileChange(activeFile)}
+                style={styles.bannerDismiss}
+              >
+                Dismiss
+              </button>
+            </div>
+          )}
+
+          {/* Editor or empty state */}
+          {file ? (
+            <CodeEditor
+              key={activeFile}
+              content={file.content}
+              language={file.language}
+              onContentChange={onContentChange}
+              onSave={onSave}
+            />
+          ) : (
+            <div style={styles.emptyState}>
+              <div style={styles.emptyIcon}>{'\u2190'}</div>
+              <div style={styles.emptyText}>Select a file from the tree</div>
+              <div style={styles.emptyHint}>Cmd+S to save, changes detected live</div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    display: 'flex', flexDirection: 'column',
+    height: '100%', width: '100%',
+  },
+  contentRow: {
+    flex: 1, display: 'flex', overflow: 'hidden',
+  },
+  sidebar: {
+    width: 240, flexShrink: 0,
+    borderRight: '1px solid var(--border)',
+    overflow: 'hidden',
+  },
+  editorArea: {
+    flex: 1, display: 'flex', flexDirection: 'column',
+    position: 'relative', overflow: 'hidden',
+    background: 'var(--bg-base)',
+  },
+  changeBanner: {
+    position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10,
+    display: 'flex', alignItems: 'center', gap: 8,
+    padding: '6px 12px',
+    background: 'rgba(229, 192, 123, 0.15)',
+    borderBottom: '1px solid var(--amber)',
+  },
+  bannerText: {
+    fontSize: 11, color: 'var(--amber)', fontWeight: 500,
+    fontFamily: 'var(--font)', flex: 1,
+  },
+  bannerBtn: {
+    padding: '3px 10px',
+    background: 'var(--amber)', border: 'none',
+    borderRadius: 2, color: 'var(--bg-base)',
+    fontSize: 10, fontWeight: 700,
+    fontFamily: 'var(--font)', cursor: 'pointer',
+  },
+  bannerDismiss: {
+    padding: '3px 10px',
+    background: 'transparent', border: '1px solid var(--amber)',
+    borderRadius: 2, color: 'var(--amber)',
+    fontSize: 10, fontWeight: 500,
+    fontFamily: 'var(--font)', cursor: 'pointer',
+  },
+  emptyState: {
+    flex: 1, display: 'flex', flexDirection: 'column',
+    alignItems: 'center', justifyContent: 'center',
+    gap: 8,
+  },
+  emptyIcon: {
+    fontSize: 28, color: 'var(--text-muted)', opacity: 0.5,
+  },
+  emptyText: {
+    fontSize: 13, color: 'var(--text-dim)', fontWeight: 500,
+  },
+  emptyHint: {
+    fontSize: 10, color: 'var(--text-muted)',
+  },
+};

package/packages/gui/src/views/SkillsMarketplace.jsx

@@ -89,10 +89,55 @@ function sortSkills(skills, sortBy) {
   }
 }
 
+// ── Interactive Star Rating ──────────────────────────────────────────
+function StarRating({ current, onRate, disabled }) {
+  const [hover, setHover] = useState(0);
+
+  return (
+    <div style={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+      {[1, 2, 3, 4, 5].map((star) => {
+        const filled = hover > 0 ? star <= hover : star <= (current || 0);
+        return (
+          <span
+            key={star}
+            onClick={() => !disabled && onRate(star)}
+            onMouseEnter={() => !disabled && setHover(star)}
+            onMouseLeave={() => setHover(0)}
+            style={{
+              fontSize: 18,
+              cursor: disabled ? 'default' : 'pointer',
+              color: filled ? 'var(--amber)' : 'var(--bg-active)',
+              transition: 'color 0.1s, transform 0.1s',
+              transform: hover === star ? 'scale(1.2)' : 'none',
+              userSelect: 'none',
+            }}
+          >
+            {'\u2605'}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
 // ── Skill Detail Modal ──────────────────────────────────────────────
-function SkillDetailModal({ skill, content, installing, onInstall, onUninstall, onClose }) {
+function SkillDetailModal({ skill, content, installing, onInstall, onUninstall, onRate, onClose }) {
+  const [userRating, setUserRating] = useState(0);
+  const [ratingSubmitted, setRatingSubmitted] = useState(false);
+  const [submittingRating, setSubmittingRating] = useState(false);
+
   if (!skill) return null;
 
+  async function handleRate(stars) {
+    setSubmittingRating(true);
+    try {
+      await onRate(skill.id, stars);
+      setUserRating(stars);
+      setRatingSubmitted(true);
+    } catch { /* ignore */ }
+    setSubmittingRating(false);
+  }
+
   return (
     <div style={modal.overlay} onClick={onClose}>
       <div style={modal.container} onClick={(e) => e.stopPropagation()}>
@@ -162,6 +207,31 @@ function SkillDetailModal({ skill, content, installing, onInstall, onUninstall,
           {skill.price === 0 && !skill.installed && <span style={modal.freeLabel}>Free</span>}
         </div>
 
+        {/* Rating */}
+        <div style={modal.section}>
+          <div style={modal.sectionTitle}>Rating</div>
+          <div style={modal.ratingRow}>
+            <div style={modal.ratingLeft}>
+              <div style={modal.ratingBig}>{skill.rating || '-'}</div>
+              <div style={{ color: 'var(--amber)', fontSize: 13 }}>{renderStars(skill.rating)}</div>
+              <div style={modal.ratingCount}>{skill.ratingCount || 0} ratings</div>
+            </div>
+            <div style={modal.ratingRight}>
+              <div style={modal.rateLabel}>
+                {ratingSubmitted ? 'Thanks for rating!' : 'Rate this skill'}
+              </div>
+              <StarRating
+                current={userRating}
+                onRate={handleRate}
+                disabled={submittingRating || ratingSubmitted}
+              />
+              {submittingRating && (
+                <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 4 }}>Submitting...</div>
+              )}
+            </div>
+          </div>
+        </div>
+
         {/* Description */}
         <div style={modal.section}>
           <div style={modal.sectionTitle}>About</div>
@@ -413,6 +483,23 @@ export default function SkillsMarketplace() {
     setInstalling(null);
   }
 
+  async function handleRate(id, rating) {
+    const res = await fetch(`/api/skills/${id}/rate`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ rating }),
+    });
+    if (!res.ok) throw new Error('Rating failed');
+    const data = await res.json();
+    // Update the skill in local state with new rating
+    setSkills((prev) => prev.map((s) =>
+      s.id === id ? { ...s, rating: data.rating, ratingCount: data.rating_count ?? data.ratingCount } : s
+    ));
+    if (selectedSkill?.id === id) {
+      setSelectedSkill((prev) => prev ? { ...prev, rating: data.rating, ratingCount: data.rating_count ?? data.ratingCount } : null);
+    }
+  }
+
   async function handleSelect(skill) {
     setSelectedSkill(skill);
     setSkillContent(null);
@@ -561,6 +648,7 @@ export default function SkillsMarketplace() {
         installing={installing}
         onInstall={handleInstall}
         onUninstall={handleUninstall}
+        onRate={handleRate}
         onClose={() => { setSelectedSkill(null); setSkillContent(null); }}
       />
     </div>
@@ -876,6 +964,29 @@ const modal = {
   section: {
     marginBottom: 16,
   },
+  ratingRow: {
+    display: 'flex', gap: 20, alignItems: 'center',
+    padding: '12px 14px',
+    background: 'var(--bg-surface)', border: '1px solid var(--border)',
+    borderRadius: 6,
+  },
+  ratingLeft: {
+    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
+    minWidth: 70,
+  },
+  ratingBig: {
+    fontSize: 24, fontWeight: 700, color: 'var(--text-bright)',
+    lineHeight: 1,
+  },
+  ratingCount: {
+    fontSize: 9, color: 'var(--text-muted)', marginTop: 2,
+  },
+  ratingRight: {
+    flex: 1,
+  },
+  rateLabel: {
+    fontSize: 11, color: 'var(--text-dim)', marginBottom: 6,
+  },
   sectionTitle: {
     fontSize: 10, fontWeight: 600, color: 'var(--text-muted)',
     textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 8,