widgets: resync button on the panel

A reload button (next to +) so newly-deployed widgets show up without a manual
hard-refresh after a rebuild+restart.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-26 10:29:14 +00:00
co-authored by Claude Opus 4.8
parent 9bf9b708cb
commit 8a1e8cd79e
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useClient } from 'hooks/useClient';
import { useAuth } from 'hooks/useAuth';
import { Plus, X } from 'lucide-react';
import { Plus, X, RefreshCw } from 'lucide-react';
import { useWidgetRegistry } from '../../WidgetRegistry';
import { WidgetPicker } from './WidgetPicker';
@@ -226,13 +226,23 @@ export const WidgetPanel = ({ panelId }: { panelId: string }) => {
<WidgetPicker onSelect={addWidget} />
</div>
)}
<button
type="button"
className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-colors cursor-pointer"
onClick={() => setShowPicker((v) => !v)}
>
<Plus size={20} />
</button>
<div className="flex items-center gap-2">
<button
type="button"
title="Resync widgets (reload to pick up newly-deployed widgets)"
className="flex h-10 w-10 items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-lg transition-colors hover:text-foreground cursor-pointer"
onClick={() => window.location.reload()}
>
<RefreshCw size={18} />
</button>
<button
type="button"
className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-colors cursor-pointer"
onClick={() => setShowPicker((v) => !v)}
>
<Plus size={20} />
</button>
</div>
</div>
</div>
);