groove-dev 0.17.3 → 0.17.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/node_modules/@groove-dev/daemon/integrations-registry.json +20 -30
- package/node_modules/@groove-dev/daemon/src/api.js +45 -43
- package/node_modules/@groove-dev/gui/dist/assets/{index-DXy6tMX5.js → index-DYqJ7W7j.js} +3 -3
- package/node_modules/@groove-dev/gui/dist/index.html +1 -1
- package/node_modules/@groove-dev/gui/src/views/IntegrationsStore.jsx +52 -20
- package/package.json +1 -1
- package/packages/daemon/integrations-registry.json +20 -30
- package/packages/daemon/src/api.js +45 -43
- package/packages/gui/dist/assets/{index-DXy6tMX5.js → index-DYqJ7W7j.js} +3 -3
- package/packages/gui/dist/index.html +1 -1
- package/packages/gui/src/views/IntegrationsStore.jsx +52 -20
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>GROOVE</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-DYqJ7W7j.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-BhjOFLBc.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
@@ -369,6 +369,10 @@ function CredentialModal({ integration, onClose }) {
|
|
|
369
369
|
function IntegrationDetailModal({ integration, installing, onInstall, onUninstall, onConfigure, onClose }) {
|
|
370
370
|
if (!integration) return null;
|
|
371
371
|
|
|
372
|
+
const isAutoAuth = integration.authType === 'none' && (integration.envKeys || []).length === 0;
|
|
373
|
+
const hasCredentials = (integration.envKeys || []).filter((ek) => !ek.hidden).length > 0
|
|
374
|
+
|| integration.authType === 'oauth-google';
|
|
375
|
+
|
|
372
376
|
return (
|
|
373
377
|
<div style={modal.overlay} onClick={onClose}>
|
|
374
378
|
<div style={modal.container} onClick={(e) => e.stopPropagation()}>
|
|
@@ -402,13 +406,14 @@ function IntegrationDetailModal({ integration, installing, onInstall, onUninstal
|
|
|
402
406
|
<div style={modal.actionBar}>
|
|
403
407
|
{integration.installed ? (
|
|
404
408
|
<div style={{ display: 'flex', gap: 8, flex: 1 }}>
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
409
|
+
{hasCredentials && (
|
|
410
|
+
<button
|
|
411
|
+
onClick={() => onConfigure(integration)}
|
|
412
|
+
style={modal.configureBtn}
|
|
413
|
+
>
|
|
414
|
+
{integration.configured ? 'Reconfigure' : 'Configure'}
|
|
415
|
+
</button>
|
|
416
|
+
)}
|
|
412
417
|
<button
|
|
413
418
|
onClick={() => onUninstall(integration.id)}
|
|
414
419
|
disabled={installing === integration.id}
|
|
@@ -435,15 +440,22 @@ function IntegrationDetailModal({ integration, installing, onInstall, onUninstal
|
|
|
435
440
|
<div style={{
|
|
436
441
|
display: 'flex', alignItems: 'center', gap: 8,
|
|
437
442
|
padding: '8px 12px', borderRadius: 6,
|
|
438
|
-
background:
|
|
439
|
-
|
|
443
|
+
background: isAutoAuth
|
|
444
|
+
? 'rgba(97, 175, 239, 0.06)'
|
|
445
|
+
: integration.configured ? 'rgba(74, 225, 104, 0.06)' : 'rgba(229, 192, 123, 0.06)',
|
|
446
|
+
border: `1px solid ${isAutoAuth ? 'var(--blue)' : integration.configured ? 'var(--green)' : 'var(--amber)'}`,
|
|
440
447
|
}}>
|
|
441
448
|
<span style={{
|
|
442
449
|
width: 8, height: 8, borderRadius: '50%',
|
|
443
|
-
background: integration.configured ? 'var(--green)' : 'var(--amber)',
|
|
450
|
+
background: isAutoAuth ? 'var(--blue)' : integration.configured ? 'var(--green)' : 'var(--amber)',
|
|
444
451
|
}} />
|
|
445
|
-
<span style={{
|
|
446
|
-
|
|
452
|
+
<span style={{
|
|
453
|
+
fontSize: 11,
|
|
454
|
+
color: isAutoAuth ? 'var(--blue)' : integration.configured ? 'var(--green)' : 'var(--amber)',
|
|
455
|
+
}}>
|
|
456
|
+
{isAutoAuth
|
|
457
|
+
? 'Installed — will sign in automatically on first use'
|
|
458
|
+
: integration.configured ? 'Connected and ready' : 'Credentials needed'}
|
|
447
459
|
</span>
|
|
448
460
|
</div>
|
|
449
461
|
</div>
|
|
@@ -544,10 +556,13 @@ function FeaturedBanner({ integrations, onSelect }) {
|
|
|
544
556
|
</div>
|
|
545
557
|
<div style={styles.featuredDesc}>{item.description}</div>
|
|
546
558
|
</div>
|
|
547
|
-
{item.installed && item.configured && (
|
|
559
|
+
{item.installed && item.authType !== 'none' && item.configured && (
|
|
548
560
|
<div style={styles.connectedBadge}>connected</div>
|
|
549
561
|
)}
|
|
550
|
-
{item.installed &&
|
|
562
|
+
{item.installed && item.authType === 'none' && (
|
|
563
|
+
<div style={styles.installedBadge}>installed</div>
|
|
564
|
+
)}
|
|
565
|
+
{item.installed && !item.configured && item.authType !== 'none' && (
|
|
551
566
|
<div style={styles.setupBadge}>needs setup</div>
|
|
552
567
|
)}
|
|
553
568
|
</div>
|
|
@@ -566,8 +581,9 @@ function IntegrationCard({ item, onSelect, hovered, onHover }) {
|
|
|
566
581
|
onMouseLeave={() => onHover(null)}
|
|
567
582
|
style={{
|
|
568
583
|
...styles.card,
|
|
569
|
-
borderColor: item.installed && item.
|
|
570
|
-
? 'var(--
|
|
584
|
+
borderColor: item.installed && item.authType === 'none'
|
|
585
|
+
? 'var(--blue)'
|
|
586
|
+
: item.installed && item.configured ? 'var(--green)'
|
|
571
587
|
: item.installed ? 'var(--amber)'
|
|
572
588
|
: hovered ? 'var(--accent)' : 'var(--border)',
|
|
573
589
|
background: hovered ? 'var(--bg-hover)' : 'var(--bg-surface)',
|
|
@@ -578,8 +594,9 @@ function IntegrationCard({ item, onSelect, hovered, onHover }) {
|
|
|
578
594
|
<div style={styles.cardTop}>
|
|
579
595
|
<div style={{
|
|
580
596
|
...styles.cardIcon,
|
|
581
|
-
background: item.installed && item.
|
|
582
|
-
? 'var(--
|
|
597
|
+
background: item.installed && item.authType === 'none'
|
|
598
|
+
? 'var(--blue)'
|
|
599
|
+
: item.installed && item.configured ? 'var(--green)'
|
|
583
600
|
: item.installed ? 'var(--amber)' : 'var(--accent)',
|
|
584
601
|
}}>
|
|
585
602
|
{ICON_MAP[item.icon] || item.name.charAt(0)}
|
|
@@ -590,10 +607,13 @@ function IntegrationCard({ item, onSelect, hovered, onHover }) {
|
|
|
590
607
|
<VerifiedBadge item={item} />
|
|
591
608
|
</div>
|
|
592
609
|
</div>
|
|
593
|
-
{item.installed && item.configured && (
|
|
610
|
+
{item.installed && item.configured && item.authType !== 'none' && (
|
|
594
611
|
<div style={styles.connectedBadgeSm}>connected</div>
|
|
595
612
|
)}
|
|
596
|
-
{item.installed &&
|
|
613
|
+
{item.installed && item.authType === 'none' && (
|
|
614
|
+
<div style={styles.installedBadgeSm}>installed</div>
|
|
615
|
+
)}
|
|
616
|
+
{item.installed && !item.configured && item.authType !== 'none' && (
|
|
597
617
|
<div style={styles.setupBadgeSm}>setup</div>
|
|
598
618
|
)}
|
|
599
619
|
{!item.installed && (
|
|
@@ -962,6 +982,12 @@ const styles = {
|
|
|
962
982
|
border: '1px solid var(--green)', borderRadius: 3,
|
|
963
983
|
padding: '1px 5px', textTransform: 'uppercase', letterSpacing: 0.5,
|
|
964
984
|
},
|
|
985
|
+
installedBadge: {
|
|
986
|
+
position: 'absolute', top: 8, right: 8,
|
|
987
|
+
fontSize: 8, fontWeight: 600, color: 'var(--blue)',
|
|
988
|
+
border: '1px solid var(--blue)', borderRadius: 3,
|
|
989
|
+
padding: '1px 5px', textTransform: 'uppercase', letterSpacing: 0.5,
|
|
990
|
+
},
|
|
965
991
|
setupBadge: {
|
|
966
992
|
position: 'absolute', top: 8, right: 8,
|
|
967
993
|
fontSize: 8, fontWeight: 600, color: 'var(--amber)',
|
|
@@ -1011,6 +1037,12 @@ const styles = {
|
|
|
1011
1037
|
padding: '1px 6px', textTransform: 'uppercase', letterSpacing: 0.5,
|
|
1012
1038
|
flexShrink: 0,
|
|
1013
1039
|
},
|
|
1040
|
+
installedBadgeSm: {
|
|
1041
|
+
fontSize: 8, fontWeight: 600, color: 'var(--blue)',
|
|
1042
|
+
border: '1px solid var(--blue)', borderRadius: 3,
|
|
1043
|
+
padding: '1px 6px', textTransform: 'uppercase', letterSpacing: 0.5,
|
|
1044
|
+
flexShrink: 0,
|
|
1045
|
+
},
|
|
1014
1046
|
setupBadgeSm: {
|
|
1015
1047
|
fontSize: 8, fontWeight: 600, color: 'var(--amber)',
|
|
1016
1048
|
border: '1px solid var(--amber)', borderRadius: 3,
|