feat(studio): Cmd+K palette, recent-activity panel, icon/screenshot rendering (v0.21.0)
Three sweeps in a single bundle. Universal command palette (⌘K / ctrl+K): - Modal at top-of-window with a single search input. Indexes pages, installed modules, store entries, saved flows on open; filters client-side as the operator types. - Keyboard nav (↑/↓ + Enter), grouped sections, hover-to- highlight. Hit selection navigates / opens the right surface in one keystroke. Closes with Esc. - Designed to mirror the VSCode / Linear / 1Password ergonomics — gives non-CLI operators a "jump anywhere" affordance that scales with the number of installed modules. Modules page recent-activity panel: - Top-of-page strip lists the last 10 install / uninstall events from the audit log, color-coded by direction. Hidden when no relevant events exist (fresh installs). Same locale-unambiguous timestamp format used in audit. Store detail sheet now renders icons + screenshots: - `_ModuleIcon` widget loads the explicit `iconUrl` if provided, falls back to the category glyph on missing URL or load failure (no broken-image rectangle). - Screenshots strip below the description: 320×200 tiles, horizontally-scrollable, click opens full-size via the OS handler. Placeholder card on load failure. StoreItem extended with `iconUrl`, `screenshotUrls`, `docsUrl` so the new content paths through unchanged. Signed-off-by: flemming-it <stefan.a.flemming@googlemail.com>
This commit is contained in:
flemming-it
parent
fb7352d182
commit
11b0ac97a1
7 changed files with 803 additions and 30 deletions
|
|
@ -391,6 +391,9 @@ class HubService {
|
|||
status: e.status,
|
||||
installed: e.installed,
|
||||
featured: e.featured,
|
||||
iconUrl: e.iconUrl,
|
||||
screenshotUrls: e.screenshotUrls,
|
||||
docsUrl: e.docsUrl,
|
||||
),
|
||||
)
|
||||
.toList();
|
||||
|
|
@ -1065,6 +1068,16 @@ class StoreItem {
|
|||
/// featured (curated quarterly in the bundled seed.yaml).
|
||||
/// Drives the "Featured" strip at the top of the Store page.
|
||||
final bool featured;
|
||||
/// Optional icon URL — square PNG / SVG. Empty for entries
|
||||
/// that don't supply one; UI falls back to a category icon.
|
||||
final String iconUrl;
|
||||
/// Ordered list of screenshot URLs; empty when none. Studio
|
||||
/// renders them as a horizontally-scrollable strip in the
|
||||
/// detail sheet.
|
||||
final List<String> screenshotUrls;
|
||||
/// Explicit docs URL override. When empty, the hub falls back
|
||||
/// to the well-known raw-README paths off [repository].
|
||||
final String docsUrl;
|
||||
|
||||
const StoreItem({
|
||||
required this.name,
|
||||
|
|
@ -1082,5 +1095,8 @@ class StoreItem {
|
|||
required this.status,
|
||||
required this.installed,
|
||||
required this.featured,
|
||||
required this.iconUrl,
|
||||
required this.screenshotUrls,
|
||||
required this.docsUrl,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,12 +19,13 @@ import 'pages/modules.dart';
|
|||
import 'pages/store.dart';
|
||||
import 'theme/theme.dart';
|
||||
import 'theme/tokens.dart';
|
||||
import 'widgets/fai_search_palette.dart';
|
||||
import 'widgets/widgets.dart';
|
||||
|
||||
/// Studio's own build version. Bump on every UI commit so the
|
||||
/// running app self-identifies — visible in the sidebar header
|
||||
/// and quick-glance proof that you're seeing the current build.
|
||||
const String kStudioVersion = '0.20.1';
|
||||
const String kStudioVersion = '0.21.0';
|
||||
|
||||
Future<void> main() async {
|
||||
WidgetsFlutterBinding.ensureInitialized();
|
||||
|
|
@ -189,6 +190,33 @@ class _StudioShellState extends State<StudioShell> {
|
|||
super.dispose();
|
||||
}
|
||||
|
||||
void _openSearchPalette() {
|
||||
final hits = <FaiSearchHit>[
|
||||
for (var i = 0; i < _pages.length; i++)
|
||||
FaiSearchHit(
|
||||
label: _pages[i].label,
|
||||
hint: 'page · ⌘${i + 1}',
|
||||
icon: _pages[i].icon,
|
||||
group: 'Pages',
|
||||
onSelect: () {
|
||||
Navigator.of(context).pop();
|
||||
setState(() => _selectedIndex = i);
|
||||
},
|
||||
),
|
||||
FaiSearchHit(
|
||||
label: 'Settings',
|
||||
hint: 'hub endpoint, channels, system AI · ⌘;',
|
||||
icon: Icons.settings_outlined,
|
||||
group: 'Pages',
|
||||
onSelect: () {
|
||||
Navigator.of(context).pop();
|
||||
FaiSettingsDialog.show(context);
|
||||
},
|
||||
),
|
||||
];
|
||||
FaiSearchPalette.show(context, staticHits: hits);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
|
|
@ -212,6 +240,12 @@ class _StudioShellState extends State<StudioShell> {
|
|||
const _OpenSettingsIntent(),
|
||||
const SingleActivator(LogicalKeyboardKey.comma, meta: true):
|
||||
const _OpenSettingsIntent(),
|
||||
// Universal command palette. Mirrors Cmd+K from VSCode /
|
||||
// Linear / 1Password — operators jump anywhere by typing.
|
||||
const SingleActivator(LogicalKeyboardKey.keyK, meta: true):
|
||||
const _OpenSearchIntent(),
|
||||
const SingleActivator(LogicalKeyboardKey.keyK, control: true):
|
||||
const _OpenSearchIntent(),
|
||||
},
|
||||
child: Actions(
|
||||
actions: <Type, Action<Intent>>{
|
||||
|
|
@ -227,6 +261,12 @@ class _StudioShellState extends State<StudioShell> {
|
|||
return null;
|
||||
},
|
||||
),
|
||||
_OpenSearchIntent: CallbackAction<_OpenSearchIntent>(
|
||||
onInvoke: (_) {
|
||||
_openSearchPalette();
|
||||
return null;
|
||||
},
|
||||
),
|
||||
},
|
||||
child: Focus(
|
||||
autofocus: true,
|
||||
|
|
@ -285,6 +325,10 @@ class _OpenSettingsIntent extends Intent {
|
|||
const _OpenSettingsIntent();
|
||||
}
|
||||
|
||||
class _OpenSearchIntent extends Intent {
|
||||
const _OpenSearchIntent();
|
||||
}
|
||||
|
||||
class _Sidebar extends StatelessWidget {
|
||||
final int selectedIndex;
|
||||
final ValueChanged<int> onSelect;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../data/hub.dart';
|
||||
import '../theme/theme.dart';
|
||||
import '../theme/tokens.dart';
|
||||
import '../widgets/widgets.dart';
|
||||
|
||||
|
|
@ -13,15 +14,25 @@ class ModulesPage extends StatefulWidget {
|
|||
|
||||
class _ModulesPageState extends State<ModulesPage> {
|
||||
late Future<List<ModuleSummary>> _future;
|
||||
late Future<List<AuditEvent>> _historyFuture;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_future = HubService.instance.listModules();
|
||||
_historyFuture = _loadHistory();
|
||||
}
|
||||
|
||||
Future<List<AuditEvent>> _loadHistory() {
|
||||
return HubService.instance.recentEvents(
|
||||
limit: 10,
|
||||
types: const ['module.installed', 'module.uninstalled'],
|
||||
);
|
||||
}
|
||||
|
||||
void _refresh() => setState(() {
|
||||
_future = HubService.instance.listModules();
|
||||
_historyFuture = _loadHistory();
|
||||
});
|
||||
|
||||
@override
|
||||
|
|
@ -67,25 +78,27 @@ class _ModulesPageState extends State<ModulesPage> {
|
|||
'Run `fai install <capability-name>` or check ~/.fai/modules/.',
|
||||
);
|
||||
}
|
||||
return ListView.separated(
|
||||
return ListView(
|
||||
padding: const EdgeInsets.all(FaiSpace.xl),
|
||||
itemCount: modules.length,
|
||||
separatorBuilder: (_, _) => const SizedBox(height: FaiSpace.md),
|
||||
itemBuilder: (context, i) {
|
||||
final m = modules[i];
|
||||
return GestureDetector(
|
||||
onTap: () async {
|
||||
final uninstalled =
|
||||
await FaiModuleSheet.show(context, m.name);
|
||||
if (uninstalled) _refresh();
|
||||
},
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
child: _ModuleCard(module: m),
|
||||
children: [
|
||||
_RecentActivityPanel(future: _historyFuture),
|
||||
const SizedBox(height: FaiSpace.md),
|
||||
for (var i = 0; i < modules.length; i++) ...[
|
||||
if (i > 0) const SizedBox(height: FaiSpace.md),
|
||||
GestureDetector(
|
||||
onTap: () async {
|
||||
final uninstalled =
|
||||
await FaiModuleSheet.show(context, modules[i].name);
|
||||
if (uninstalled) _refresh();
|
||||
},
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
child: _ModuleCard(module: modules[i]),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
],
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
|
|
@ -158,3 +171,131 @@ class _ModuleCard extends StatelessWidget {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/// Compact "Recent activity" header listing the last few
|
||||
/// install / uninstall events from the audit log. Lets
|
||||
/// operators trace "wait, when did that module appear?"
|
||||
/// without leaving the Modules page. Hidden when the audit
|
||||
/// log has no relevant events yet.
|
||||
class _RecentActivityPanel extends StatelessWidget {
|
||||
final Future<List<AuditEvent>> future;
|
||||
const _RecentActivityPanel({required this.future});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return FutureBuilder<List<AuditEvent>>(
|
||||
future: future,
|
||||
builder: (context, snap) {
|
||||
final events = snap.data ?? const <AuditEvent>[];
|
||||
if (events.isEmpty) return const SizedBox.shrink();
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: FaiSpace.md,
|
||||
vertical: FaiSpace.sm,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.surfaceContainer,
|
||||
borderRadius: BorderRadius.circular(FaiRadius.sm),
|
||||
border: Border.all(color: theme.colorScheme.outlineVariant),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.history,
|
||||
size: 14,
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
'RECENT ACTIVITY',
|
||||
style: theme.textTheme.labelSmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
letterSpacing: 0.6,
|
||||
fontSize: 10,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: FaiSpace.sm),
|
||||
Text(
|
||||
'last ${events.length} install/uninstall events from the audit log',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: FaiSpace.xs),
|
||||
for (final e in events) _ActivityRow(event: e),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ActivityRow extends StatelessWidget {
|
||||
final AuditEvent event;
|
||||
const _ActivityRow({required this.event});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final installed = event.type == 'module.installed';
|
||||
final accent = installed ? FaiColors.success : FaiColors.warning;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 2),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
installed ? Icons.add_circle_outline : Icons.remove_circle_outline,
|
||||
size: 14,
|
||||
color: accent,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
SizedBox(
|
||||
width: 150,
|
||||
child: Text(
|
||||
_formatTimestamp(event.timestamp.toLocal()),
|
||||
style: FaiTheme.mono(
|
||||
size: 10,
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Text(
|
||||
'${installed ? "installed" : "uninstalled"} '
|
||||
'${event.moduleName ?? "(unknown)"}'
|
||||
'${event.moduleVersion != null ? " v${event.moduleVersion}" : ""}',
|
||||
style: theme.textTheme.bodySmall,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Locale-unambiguous timestamp shared by the activity rows.
|
||||
/// Same-day events get HH:mm:ss; older events get the full
|
||||
/// YYYY-MM-DD HH:mm:ss so an operator never wonders what day
|
||||
/// "21:25" was.
|
||||
String _formatTimestamp(DateTime local) {
|
||||
final now = DateTime.now();
|
||||
final hh = local.hour.toString().padLeft(2, '0');
|
||||
final mm = local.minute.toString().padLeft(2, '0');
|
||||
final ss = local.second.toString().padLeft(2, '0');
|
||||
final time = '$hh:$mm:$ss';
|
||||
final sameDay = local.year == now.year &&
|
||||
local.month == now.month &&
|
||||
local.day == now.day;
|
||||
if (sameDay) return time;
|
||||
final mo = local.month.toString().padLeft(2, '0');
|
||||
final dd = local.day.toString().padLeft(2, '0');
|
||||
return '${local.year}-$mo-$dd $time';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1032,15 +1032,10 @@ class _StoreDetailSheetState extends State<_StoreDetailSheet> {
|
|||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 26,
|
||||
backgroundColor: theme.colorScheme.primary
|
||||
.withValues(alpha: 0.12),
|
||||
child: Icon(
|
||||
_iconForCategory(item.category),
|
||||
size: 28,
|
||||
color: theme.colorScheme.primary,
|
||||
),
|
||||
_ModuleIcon(
|
||||
iconUrl: item.iconUrl,
|
||||
category: item.category,
|
||||
radius: 28,
|
||||
),
|
||||
const SizedBox(width: FaiSpace.lg),
|
||||
Expanded(
|
||||
|
|
@ -1160,7 +1155,24 @@ class _StoreDetailSheetState extends State<_StoreDetailSheet> {
|
|||
),
|
||||
const SizedBox(height: FaiSpace.lg),
|
||||
],
|
||||
if (item.repository.isNotEmpty) ...[
|
||||
if (item.screenshotUrls.isNotEmpty) ...[
|
||||
_SectionHeader('Screenshots'),
|
||||
const SizedBox(height: FaiSpace.sm),
|
||||
SizedBox(
|
||||
height: 220,
|
||||
child: ListView.separated(
|
||||
scrollDirection: Axis.horizontal,
|
||||
itemCount: item.screenshotUrls.length,
|
||||
separatorBuilder: (_, _) =>
|
||||
const SizedBox(width: FaiSpace.sm),
|
||||
itemBuilder: (context, i) => _Screenshot(
|
||||
url: item.screenshotUrls[i],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: FaiSpace.lg),
|
||||
],
|
||||
if (item.repository.isNotEmpty || item.docsUrl.isNotEmpty) ...[
|
||||
_SectionHeader('Documentation'),
|
||||
const SizedBox(height: FaiSpace.sm),
|
||||
_DocsPanel(
|
||||
|
|
@ -1644,3 +1656,139 @@ String _friendlyDocsError(String kind, String detail) {
|
|||
return detail.isEmpty ? 'Could not load README.' : detail;
|
||||
}
|
||||
}
|
||||
|
||||
/// Module icon: renders the explicit icon URL when set, falls
|
||||
/// back to the category-derived `Icons.X` glyph in a colored
|
||||
/// circle when the URL is empty or fails to load. Wraps the
|
||||
/// network image in `frameBuilder` so a load failure doesn't
|
||||
/// leave a broken-image rectangle in the hero header.
|
||||
class _ModuleIcon extends StatelessWidget {
|
||||
final String iconUrl;
|
||||
final String category;
|
||||
final double radius;
|
||||
|
||||
const _ModuleIcon({
|
||||
required this.iconUrl,
|
||||
required this.category,
|
||||
required this.radius,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final fallback = CircleAvatar(
|
||||
radius: radius,
|
||||
backgroundColor: theme.colorScheme.primary.withValues(alpha: 0.12),
|
||||
child: Icon(
|
||||
_iconForCategory(category),
|
||||
size: radius * 1.0,
|
||||
color: theme.colorScheme.primary,
|
||||
),
|
||||
);
|
||||
if (iconUrl.isEmpty) return fallback;
|
||||
return ClipOval(
|
||||
child: SizedBox(
|
||||
width: radius * 2,
|
||||
height: radius * 2,
|
||||
child: Image.network(
|
||||
iconUrl,
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (_, _, _) => fallback,
|
||||
loadingBuilder: (_, child, progress) =>
|
||||
progress == null ? child : fallback,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// One screenshot tile in the detail-sheet strip. Click opens
|
||||
/// the image full-size via the OS handler — keeps Studio
|
||||
/// chromeless. Renders a placeholder on load failure rather
|
||||
/// than the default broken-image rectangle.
|
||||
class _Screenshot extends StatelessWidget {
|
||||
final String url;
|
||||
const _Screenshot({required this.url});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return Material(
|
||||
color: theme.colorScheme.surfaceContainerHigh,
|
||||
borderRadius: BorderRadius.circular(FaiRadius.sm),
|
||||
child: InkWell(
|
||||
onTap: () => SystemActions.openInOs(url),
|
||||
borderRadius: BorderRadius.circular(FaiRadius.sm),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(FaiRadius.sm),
|
||||
child: SizedBox(
|
||||
width: 320,
|
||||
child: Image.network(
|
||||
url,
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (_, _, _) => _ScreenshotPlaceholder(
|
||||
label: 'image unavailable',
|
||||
detail: url,
|
||||
),
|
||||
loadingBuilder: (_, child, progress) {
|
||||
if (progress == null) return child;
|
||||
return const _ScreenshotPlaceholder(
|
||||
label: 'loading…',
|
||||
detail: '',
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ScreenshotPlaceholder extends StatelessWidget {
|
||||
final String label;
|
||||
final String detail;
|
||||
const _ScreenshotPlaceholder({required this.label, required this.detail});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return Container(
|
||||
color: theme.colorScheme.surfaceContainer,
|
||||
child: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(FaiSpace.md),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.image_outlined,
|
||||
size: 32,
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
label,
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
if (detail.isNotEmpty) ...[
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
detail,
|
||||
style: FaiTheme.mono(
|
||||
size: 9,
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
424
lib/widgets/fai_search_palette.dart
Normal file
424
lib/widgets/fai_search_palette.dart
Normal file
|
|
@ -0,0 +1,424 @@
|
|||
// FaiSearchPalette — global Cmd+K command bar.
|
||||
//
|
||||
// Indexes: nav destinations, installed modules, store entries,
|
||||
// saved flows. Filters client-side as the operator types.
|
||||
// Selected result navigates / opens / acts in one keystroke.
|
||||
//
|
||||
// Triggered from the shell-level Shortcuts/Actions binding so
|
||||
// the palette is reachable from every page.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
|
||||
import '../data/hub.dart';
|
||||
import 'fai_module_sheet.dart';
|
||||
|
||||
/// One row in the palette. Carries everything needed to render
|
||||
/// + dispatch — keep it serializable-shaped so we can persist
|
||||
/// recent picks later.
|
||||
class FaiSearchHit {
|
||||
final String label;
|
||||
final String hint;
|
||||
final IconData icon;
|
||||
/// Free-form group used for the section header in the
|
||||
/// results list ("Pages", "Modules", "Store", "Flows").
|
||||
final String group;
|
||||
/// Lowercase haystack — name + hint + group. Filtered against
|
||||
/// the lowercased query.
|
||||
final String haystack;
|
||||
/// Action to run when this hit is selected.
|
||||
final VoidCallback onSelect;
|
||||
|
||||
FaiSearchHit({
|
||||
required this.label,
|
||||
required this.hint,
|
||||
required this.icon,
|
||||
required this.group,
|
||||
required this.onSelect,
|
||||
}) : haystack = '$label $hint $group'.toLowerCase();
|
||||
}
|
||||
|
||||
class FaiSearchPalette extends StatefulWidget {
|
||||
/// Pages the operator can navigate to. Each entry maps to a
|
||||
/// callback that selects the right tab back in the shell.
|
||||
final List<FaiSearchHit> staticHits;
|
||||
|
||||
const FaiSearchPalette({super.key, required this.staticHits});
|
||||
|
||||
/// Convenience launcher — used from the Cmd+K shortcut.
|
||||
static Future<void> show(
|
||||
BuildContext context, {
|
||||
required List<FaiSearchHit> staticHits,
|
||||
}) {
|
||||
return showDialog<void>(
|
||||
context: context,
|
||||
barrierColor: Colors.black54,
|
||||
builder: (_) => FaiSearchPalette(staticHits: staticHits),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
State<FaiSearchPalette> createState() => _FaiSearchPaletteState();
|
||||
}
|
||||
|
||||
class _FaiSearchPaletteState extends State<FaiSearchPalette> {
|
||||
final _query = TextEditingController();
|
||||
final _focus = FocusNode();
|
||||
Future<List<FaiSearchHit>>? _dynamicFuture;
|
||||
int _highlight = 0;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_dynamicFuture = _loadDynamic();
|
||||
// Autofocus is handled by the TextField, but the focus
|
||||
// node also catches arrow keys for keyboard navigation.
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (mounted) _focus.requestFocus();
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_query.dispose();
|
||||
_focus.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
/// Pull modules / store / flows in parallel so the palette
|
||||
/// is searchable as soon as the operator finishes typing the
|
||||
/// first character.
|
||||
Future<List<FaiSearchHit>> _loadDynamic() async {
|
||||
final svc = HubService.instance;
|
||||
final results = await Future.wait([
|
||||
svc.listModules().catchError((_) => <ModuleSummary>[]),
|
||||
svc.searchStore(limit: 200).catchError((_) => <StoreItem>[]),
|
||||
svc.listFlows().catchError((_) => <SavedFlow>[]),
|
||||
]);
|
||||
final modules = results[0] as List<ModuleSummary>;
|
||||
final store = results[1] as List<StoreItem>;
|
||||
final flows = results[2] as List<SavedFlow>;
|
||||
|
||||
final hits = <FaiSearchHit>[];
|
||||
for (final m in modules) {
|
||||
hits.add(FaiSearchHit(
|
||||
label: m.name,
|
||||
hint: 'installed module · v${m.version}',
|
||||
icon: Icons.extension,
|
||||
group: 'Modules',
|
||||
onSelect: () {
|
||||
Navigator.pop(context);
|
||||
FaiModuleSheet.show(context, m.name);
|
||||
},
|
||||
));
|
||||
}
|
||||
for (final s in store) {
|
||||
hits.add(FaiSearchHit(
|
||||
label: s.name,
|
||||
hint: s.taglineEn.isEmpty
|
||||
? 'store · ${s.category.isEmpty ? "uncategorized" : s.category}'
|
||||
: 'store · ${s.taglineEn}',
|
||||
icon: Icons.storefront_outlined,
|
||||
group: 'Store',
|
||||
// Selecting a store hit just closes the palette and
|
||||
// focuses the Store tab; deep-linking to the detail
|
||||
// sheet would require thread-through plumbing we don't
|
||||
// have yet.
|
||||
onSelect: () {
|
||||
Navigator.pop(context);
|
||||
for (final h in widget.staticHits) {
|
||||
if (h.label == 'Store' && h.group == 'Pages') {
|
||||
h.onSelect();
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
));
|
||||
}
|
||||
for (final f in flows) {
|
||||
hits.add(FaiSearchHit(
|
||||
label: f.name,
|
||||
hint: 'saved flow',
|
||||
icon: Icons.account_tree_outlined,
|
||||
group: 'Flows',
|
||||
onSelect: () {
|
||||
Navigator.pop(context);
|
||||
for (final h in widget.staticHits) {
|
||||
if (h.label == 'Flows' && h.group == 'Pages') {
|
||||
h.onSelect();
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
));
|
||||
}
|
||||
return hits;
|
||||
}
|
||||
|
||||
/// Filtered + grouped result list. Empty query returns the
|
||||
/// pages first then everything else, capped to 50 rows so the
|
||||
/// dialog stays scrollable.
|
||||
List<FaiSearchHit> _resultsFor(List<FaiSearchHit> dynamic_, String raw) {
|
||||
final query = raw.trim().toLowerCase();
|
||||
final all = [...widget.staticHits, ...dynamic_];
|
||||
if (query.isEmpty) return all.take(50).toList();
|
||||
final scored = <(int, FaiSearchHit)>[];
|
||||
for (final h in all) {
|
||||
final i = h.haystack.indexOf(query);
|
||||
if (i < 0) continue;
|
||||
// Prefer label-prefix matches, then any substring.
|
||||
final isLabelPrefix = h.label.toLowerCase().startsWith(query);
|
||||
final score = (isLabelPrefix ? 0 : 1000) + i;
|
||||
scored.add((score, h));
|
||||
}
|
||||
scored.sort((a, b) => a.$1.compareTo(b.$1));
|
||||
return [for (final s in scored) s.$2].take(50).toList();
|
||||
}
|
||||
|
||||
KeyEventResult _onKeyEvent(FocusNode node, KeyEvent event, int hitCount) {
|
||||
if (event is! KeyDownEvent && event is! KeyRepeatEvent) {
|
||||
return KeyEventResult.ignored;
|
||||
}
|
||||
if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
|
||||
setState(() {
|
||||
_highlight = (_highlight + 1).clamp(0, hitCount - 1);
|
||||
});
|
||||
return KeyEventResult.handled;
|
||||
}
|
||||
if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
|
||||
setState(() {
|
||||
_highlight = (_highlight - 1).clamp(0, hitCount - 1);
|
||||
});
|
||||
return KeyEventResult.handled;
|
||||
}
|
||||
if (event.logicalKey == LogicalKeyboardKey.escape) {
|
||||
Navigator.pop(context);
|
||||
return KeyEventResult.handled;
|
||||
}
|
||||
return KeyEventResult.ignored;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return Dialog(
|
||||
alignment: Alignment.topCenter,
|
||||
insetPadding: const EdgeInsets.only(top: 80, left: 24, right: 24),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 640, maxHeight: 540),
|
||||
child: FutureBuilder<List<FaiSearchHit>>(
|
||||
future: _dynamicFuture,
|
||||
builder: (context, snap) {
|
||||
final dyn = snap.data ?? const <FaiSearchHit>[];
|
||||
return ValueListenableBuilder<TextEditingValue>(
|
||||
valueListenable: _query,
|
||||
builder: (_, value, _) {
|
||||
final hits = _resultsFor(dyn, value.text);
|
||||
if (_highlight >= hits.length) {
|
||||
_highlight = hits.isEmpty ? 0 : hits.length - 1;
|
||||
}
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 12, 16, 0),
|
||||
child: Focus(
|
||||
focusNode: _focus,
|
||||
onKeyEvent: (n, e) => _onKeyEvent(n, e, hits.length),
|
||||
child: TextField(
|
||||
controller: _query,
|
||||
autofocus: true,
|
||||
decoration: InputDecoration(
|
||||
prefixIcon:
|
||||
const Icon(Icons.search, size: 20),
|
||||
hintText:
|
||||
'Jump anywhere — modules, store, flows, pages…',
|
||||
border: InputBorder.none,
|
||||
suffixIcon: snap.connectionState ==
|
||||
ConnectionState.waiting
|
||||
? const SizedBox(
|
||||
width: 14,
|
||||
height: 14,
|
||||
child:
|
||||
CircularProgressIndicator(strokeWidth: 2),
|
||||
)
|
||||
: null,
|
||||
),
|
||||
style: theme.textTheme.titleMedium,
|
||||
onSubmitted: (_) {
|
||||
if (hits.isNotEmpty) {
|
||||
hits[_highlight].onSelect();
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
const Divider(height: 1),
|
||||
Flexible(
|
||||
child: hits.isEmpty
|
||||
? Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Text(
|
||||
snap.connectionState == ConnectionState.waiting
|
||||
? 'Indexing…'
|
||||
: 'No matches.',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
)
|
||||
: ListView.builder(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
itemCount: hits.length,
|
||||
itemBuilder: (context, i) {
|
||||
final h = hits[i];
|
||||
final highlighted = i == _highlight;
|
||||
final showHeader = i == 0 ||
|
||||
hits[i - 1].group != h.group;
|
||||
return Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (showHeader)
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
16,
|
||||
8,
|
||||
16,
|
||||
4,
|
||||
),
|
||||
child: Text(
|
||||
h.group.toUpperCase(),
|
||||
style: theme.textTheme.labelSmall
|
||||
?.copyWith(
|
||||
color: theme
|
||||
.colorScheme.onSurfaceVariant,
|
||||
letterSpacing: 0.6,
|
||||
fontSize: 10,
|
||||
),
|
||||
),
|
||||
),
|
||||
InkWell(
|
||||
onTap: h.onSelect,
|
||||
onHover: (hovered) {
|
||||
if (hovered) {
|
||||
setState(() => _highlight = i);
|
||||
}
|
||||
},
|
||||
child: Container(
|
||||
color: highlighted
|
||||
? theme.colorScheme
|
||||
.surfaceContainerHigh
|
||||
: null,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 8,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
h.icon,
|
||||
size: 18,
|
||||
color: theme.colorScheme.primary,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
h.label,
|
||||
style: theme
|
||||
.textTheme.bodyMedium
|
||||
?.copyWith(
|
||||
fontWeight:
|
||||
FontWeight.w500,
|
||||
),
|
||||
),
|
||||
if (h.hint.isNotEmpty)
|
||||
Text(
|
||||
h.hint,
|
||||
style: theme.textTheme
|
||||
.bodySmall
|
||||
?.copyWith(
|
||||
color: theme.colorScheme
|
||||
.onSurfaceVariant,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow:
|
||||
TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (highlighted)
|
||||
Icon(
|
||||
Icons.keyboard_return,
|
||||
size: 14,
|
||||
color: theme
|
||||
.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
const Divider(height: 1),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 6,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
_Hint(text: '↑↓ navigate'),
|
||||
const SizedBox(width: 12),
|
||||
_Hint(text: 'enter open'),
|
||||
const SizedBox(width: 12),
|
||||
_Hint(text: 'esc close'),
|
||||
const Spacer(),
|
||||
Text(
|
||||
'${hits.length} result${hits.length == 1 ? "" : "s"}',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Hint extends StatelessWidget {
|
||||
final String text;
|
||||
const _Hint({required this.text});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return Text(
|
||||
text,
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
fontSize: 10,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue