Skip to content

feat(ui): market hero search + on-demand pagination; real agent data … #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GCWing merged 1 commit into from
Feb 28, 2026
Merged

feat(ui): market hero search + on-demand pagination; real agent data … #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/apps/desktop/src/api/skill_api.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ use bitfun_core::util::process_manager;

const SKILLS_SEARCH_API_BASE: &str = "https://skills.sh";
const DEFAULT_MARKET_QUERY: &str = "skill";
const DEFAULT_MARKET_LIMIT: u8 = 12;
const MAX_MARKET_LIMIT: u8 = 50;
const DEFAULT_MARKET_LIMIT: u32 = 12;
const MAX_MARKET_LIMIT: u32 = 500;
const MAX_OUTPUT_PREVIEW_CHARS: usize = 2000;
const MARKET_DESC_FETCH_TIMEOUT_SECS: u64 = 4;
const MARKET_DESC_FETCH_CONCURRENCY: usize = 6;
Expand All @@ -44,14 +44,14 @@ pub struct SkillValidationResult {
#[serde(rename_all = "camelCase")]
pub struct SkillMarketListRequest {
pub query: Option<String>,
pub limit: Option<u8>,
pub limit: Option<u32>,
}

#[derive(Debug, Clone, Serialize, Deserialize)]
#[serde(rename_all = "camelCase")]
pub struct SkillMarketSearchRequest {
pub query: String,
pub limit: Option<u8>,
pub limit: Option<u32>,
}

#[derive(Debug, Clone, Serialize, Deserialize)]
Expand Down Expand Up @@ -463,13 +463,13 @@ pub async fn download_skill_market(
})
}

fn normalize_market_limit(value: Option<u8>) -> u8 {
fn normalize_market_limit(value: Option<u32>) -> u32 {
value
.unwrap_or(DEFAULT_MARKET_LIMIT)
.clamp(1, MAX_MARKET_LIMIT)
}

async fn fetch_skill_market(query: &str, limit: u8) -> Result<Vec<SkillMarketItem>, String> {
async fn fetch_skill_market(query: &str, limit: u32) -> Result<Vec<SkillMarketItem>, String> {
let api_base =
std::env::var("SKILLS_API_URL").unwrap_or_else(|_| SKILLS_SEARCH_API_BASE.into());
let base_url = api_base.trim_end_matches('/');
Expand Down
3 changes: 2 additions & 1 deletion src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

import React, { useState } from 'react';
import { useI18n } from '@/infrastructure/i18n';
import { Modal } from '@/component-library';
import { Modal, Badge } from '@/component-library';
import './RemoteConnectDialog.scss';

type ConnectionType = 'nat' | 'relay';
Expand Down Expand Up @@ -83,6 +83,7 @@ export const RemoteConnectDialog: React.FC<RemoteConnectDialogProps> = ({
isOpen={isOpen}
onClose={onClose}
title={t('remoteConnect.title')}
titleExtra={<Badge variant="warning">WIP</Badge>}
showCloseButton={true}
size="small"
>
Expand Down
72 changes: 72 additions & 0 deletions src/web-ui/src/app/scenes/skills/SkillsScene.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
width: 100%;
height: 100%;
overflow: hidden;

// Hero mode: center everything
&--hero {
align-items: center;
justify-content: center;
}
}

&__view-header {
Expand Down Expand Up @@ -171,6 +177,63 @@

.bitfun-market {

// ── Hero (pre-search) ─────────────────────────────────────

&__hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: $size-gap-4;
padding: $size-gap-8 $size-gap-6;
width: min(100%, 480px);
animation: bitfun-market-item-in 0.3s $easing-decelerate both;
}

&__hero-title {
font-size: $font-size-3xl;
font-weight: $font-weight-semibold;
color: var(--color-text-primary);
margin: 0;
line-height: $line-height-tight;
}

&__hero-search {
width: 100%;
margin-top: $size-gap-2;

.search__wrapper {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.03) 100%
);
border: 1px solid var(--border-subtle);
border-radius: $size-radius-lg;
}
}

// ── Source attribution ─────────────────────────────────────

&__source-note {
font-size: $font-size-xs;
color: var(--color-text-muted);
opacity: 0.6;
margin: $size-gap-2 0 0;
text-align: center;
}

&__source-link {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;

&:hover {
opacity: 0.9;
color: var(--color-primary);
}
}

// ── List container ────────────────────────────────────────

&__list {
Expand Down Expand Up @@ -523,6 +586,15 @@
}
}

@keyframes bitfun-market-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.bitfun-market__spin {
animation: bitfun-market-spin 0.8s linear infinite;
}

@keyframes bitfun-market-row-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(200%); }
Expand Down
Loading