fix(ui): refine narrow layouts and enable tab swipes

This commit is contained in:
Levi committed 2026-09-15 23:01:48 +08:00
1 parent e47a20a1bd
commit c703c52cbc
17 files changed
+624 -182

No files matched your search

@@ -15,6 +15,7 @@ import '../../../../core/utils/compact_count_formatter.dart';
import '../../../../core/window/app_window_chrome.dart';
import '../../../../shared/theme/app_design_tokens.dart';
import '../../../../shared/theme/app_palette.dart';
import '../../../../shared/widgets/app_swipe_tabs.dart';
import '../../../../shared/widgets/app_primary_button.dart';
import '../../../../shared/widgets/app_text_field.dart';
import '../../../../shared/widgets/app_tooltip.dart';
@@ -391,80 +392,86 @@ class _Content extends StatelessWidget {
child: _FilterBar(state: state, onFilter: onFilter),
),
Expanded(
child: CustomScrollView(
key: const ValueKey('extensions-list-scroll-view'),
controller: scrollController,
slivers: [
if ((state.loadingInstalled || state.loadingStore) && state.displayItems.isEmpty)
SliverPadding(
padding: EdgeInsets.fromLTRB(horizontalPadding, 0, horizontalPadding, 20),
sliver: const _ExtensionSkeletonGrid(key: ValueKey('extensions-initial-skeleton')),
)
else if (state.displayItems.isEmpty)
SliverFillRemaining(
child: Center(
child: Text(
context.l10n.noExtensions,
style: TextStyle(color: palette.textSecondary, fontSize: 14),
),
),
)
else
SliverPadding(
padding: EdgeInsets.fromLTRB(horizontalPadding, 0, horizontalPadding, 20),
sliver: SliverLayoutBuilder(
builder: (context, constraints) {
final width = constraints.crossAxisExtent;
final crossAxisCount = _extensionGridColumnCount(width);
return SliverGrid(
delegate: SliverChildBuilderDelegate(
(context, index) => _ExtensionCard(
item: state.displayItems[index],
busy: state.busyExtensionIds.contains(state.displayItems[index].id),
canUpdate: _canUpdate(state, state.displayItems[index]),
onAction: onItemAction,
onOpenDetails: onOpenDetails,
onOpenSettings: onOpenSettings,
),
childCount: state.displayItems.length,
),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
mainAxisSpacing: _extensionGridSpacing,
crossAxisSpacing: _extensionGridSpacing,
mainAxisExtent: 178,
),
);
},
),
),
if (state.listFilter == ExtensionListFilter.market && state.loadingMoreStore)
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(bottom: 24, top: 4),
child: Center(
child: const SizedBox.square(dimension: 18, child: shad.CircularProgressIndicator()),
),
),
),
if (state.listFilter == ExtensionListFilter.market &&
state.displayItems.isNotEmpty &&
state.storePagination != null &&
!state.storePagination!.hasNext &&
!state.loadingMoreStore)
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(bottom: 24, top: 4),
child: AppSwipeTabs<ExtensionListFilter>(
enabled: !isDesktop,
values: const [ExtensionListFilter.market, ExtensionListFilter.installed],
selectedValue: state.listFilter,
onSelected: onFilter,
child: CustomScrollView(
key: const ValueKey('extensions-list-scroll-view'),
controller: scrollController,
slivers: [
if ((state.loadingInstalled || state.loadingStore) && state.displayItems.isEmpty)
SliverPadding(
padding: EdgeInsets.fromLTRB(horizontalPadding, 0, horizontalPadding, 20),
sliver: const _ExtensionSkeletonGrid(key: ValueKey('extensions-initial-skeleton')),
)
else if (state.displayItems.isEmpty)
SliverFillRemaining(
child: Center(
child: Text(
context.l10n.extensionNoMore,
key: const ValueKey('extensions-no-more-indicator'),
style: TextStyle(color: palette.textMuted, fontSize: 12),
context.l10n.noExtensions,
style: TextStyle(color: palette.textSecondary, fontSize: 14),
),
),
)
else
SliverPadding(
padding: EdgeInsets.fromLTRB(horizontalPadding, 0, horizontalPadding, 20),
sliver: SliverLayoutBuilder(
builder: (context, constraints) {
final width = constraints.crossAxisExtent;
final crossAxisCount = _extensionGridColumnCount(width);
return SliverGrid(
delegate: SliverChildBuilderDelegate(
(context, index) => _ExtensionCard(
item: state.displayItems[index],
busy: state.busyExtensionIds.contains(state.displayItems[index].id),
canUpdate: _canUpdate(state, state.displayItems[index]),
onAction: onItemAction,
onOpenDetails: onOpenDetails,
onOpenSettings: onOpenSettings,
),
childCount: state.displayItems.length,
),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
mainAxisSpacing: _extensionGridSpacing,
crossAxisSpacing: _extensionGridSpacing,
mainAxisExtent: 178,
),
);
},
),
),
if (state.listFilter == ExtensionListFilter.market && state.loadingMoreStore)
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(bottom: 24, top: 4),
child: Center(
child: const SizedBox.square(dimension: 18, child: shad.CircularProgressIndicator()),
),
),
),
),
],
if (state.listFilter == ExtensionListFilter.market &&
state.displayItems.isNotEmpty &&
state.storePagination != null &&
!state.storePagination!.hasNext &&
!state.loadingMoreStore)
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(bottom: 24, top: 4),
child: Center(
child: Text(
context.l10n.extensionNoMore,
key: const ValueKey('extensions-no-more-indicator'),
style: TextStyle(color: palette.textMuted, fontSize: 12),
),
),
),
),
],
),
),
),
],