Skip to content

Commit c5cc747

Browse files
ziaghamziagham
committed
Enhance UI/UX and add new features across components
Redesigned multiple pages for improved user experience: - Updated `ApiKeys.razor` alert styling for clarity. - Enhanced `Downloads.razor` with better loading states, a stats card, and improved release accordion design. - Revamped `Upload.razor` with a modern layout, progress indicators, and detailed instructions. - Redesigned `Contact.razor` with a centered layout, FAQ accordion, quick links, and feature request CTA. Added new properties to `GitHubReleaseInfo` for richer release data: - Included `PublishedAt`, `ReleaseNotes`, `IsPrerelease`, asset sizes, and `TotalDownloads`. Updated `app.css` with styles for progress bars, hover effects, and button consistency. #47
1 parent edc8f57 commit c5cc747

6 files changed

Lines changed: 453 additions & 124 deletions

File tree

‎src/FlowSynx.Pluginregistry/Components/Pages/Account/ApiKeys.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
<div class="row mb-4">
2222
<div class="col-md-12">
23-
<div class="alert alert-info">
23+
<div class="alert border">
2424
<strong><i class="bi bi-shield-check"></i> Security Best Practices:</strong>
2525
<ul class="mb-0 mt-2">
2626
<li>Store API keys securely in environment variables or secret managers</li>

‎src/FlowSynx.Pluginregistry/Components/Pages/Downloads/Downloads.razor‎

Lines changed: 89 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,42 @@
66
@inject NavigationManager Navigation
77
@inject IGitHubReleaseService gitHubReleaseService
88

9-
<PageTitle>Downloads</PageTitle>
9+
<PageTitle>Downloads - FlowSynx Plugin Registry</PageTitle>
1010

1111
<div class="container p-5">
1212
<div class="row">
1313
@if (releases == null)
1414
{
1515
<div class="col-md-12 mx-auto">
16-
<div class="card mb-3">
16+
<!-- Enhanced Loading State -->
17+
<div class="card mb-3 border-0 shadow-sm">
1718
<div class="card-body">
18-
<p>Loading ...</p>
19+
<div class="d-flex align-items-center">
20+
<div class="spinner-border spinner-border-sm text-primary me-3" role="status">
21+
<span class="visually-hidden">Loading...</span>
22+
</div>
23+
<span class="text-muted">Loading releases...</span>
24+
</div>
25+
<!-- Skeleton Loader -->
26+
<div class="mt-3">
27+
<div class="placeholder-glow">
28+
<span class="placeholder col-12 mb-2"></span>
29+
<span class="placeholder col-8 mb-2"></span>
30+
<span class="placeholder col-6"></span>
31+
</div>
32+
</div>
1933
</div>
2034
</div>
2135
</div>
2236
}
2337
else if (releases.Count == 0)
2438
{
2539
<div class="col-md-12 mx-auto">
26-
<div class="card mb-3">
27-
<div class="card-body">
28-
<p>No releases found.</p>
40+
<div class="card mb-3 border-0 shadow-sm">
41+
<div class="card-body text-center py-5">
42+
<i class="bi bi-inbox display-4 text-muted mb-3"></i>
43+
<h5 class="text-muted">No releases found</h5>
44+
<p class="text-secondary small">Check back later for available downloads.</p>
2945
</div>
3046
</div>
3147
</div>
@@ -34,34 +50,83 @@
3450
{
3551
<div class="row">
3652
<div class="col-md-12 mx-auto">
53+
<!-- Header Section -->
54+
<div class="mb-4">
55+
<h2 class="mb-3">
56+
<i class="bi bi-download text-primary me-2"></i>FlowPack Downloads
57+
</h2>
58+
<p class="text-secondary mb-3">
59+
FlowPack is a .NET packaging utility for building, packaging, and distributing FlowSynx's plugins.
60+
It takes a .NET project, compiles it, generates metadata, and bundles it into a distributable <span class="badge bg-light text-dark">.fspack</span> file.
61+
</p>
62+
63+
<!-- Quick Stats Card -->
64+
<div class="card border mb-4">
65+
<div class="card-body">
66+
<div class="row text-center">
67+
<div class="col-md-4">
68+
<i class="bi bi-box-seam text-primary fs-4"></i>
69+
<h5 class="mt-2 mb-0">@releases.Count</h5>
70+
<small class="text-muted">Releases</small>
71+
</div>
72+
<div class="col-md-4">
73+
<i class="bi bi-laptop text-primary fs-4"></i>
74+
<h5 class="mt-2 mb-0">3</h5>
75+
<small class="text-muted">Platforms</small>
76+
</div>
77+
<div class="col-md-4">
78+
<i class="bi bi-star text-primary fs-4"></i>
79+
<h5 class="mt-2 mb-0">Latest</h5>
80+
<small class="text-muted">@releases.FirstOrDefault()?.Version</small>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
3785

38-
<h2>FlowPack</h2>
39-
<p class="text-secondary">FlowPack is a .NET packaging utility for building, packaging, and distributing FlowSynx's plugins. It takes a .NET project, compiles it, generates metadata, and bundles it into a distributable <b>.fspack</b> file.</p>
86+
<!-- Installation Instructions -->
87+
<div class="alert alert-info border-0 shadow-sm" role="alert">
88+
<i class="bi bi-info-circle-fill me-2"></i>
89+
<strong>Quick Start:</strong> Download the version for your platform, extract the archive, and add it to your PATH.
90+
</div>
91+
</div>
4092

41-
<div class="accordion d-grid gap-1" id="releasesAccordion">
93+
<!-- Releases Accordion -->
94+
<div class="accordion shadow-sm" id="releasesAccordion">
4295
@for (int i = 0; i < releases.Count; i++)
4396
{
4497
var release = releases[i];
4598
var collapseId = $"collapse-{i}";
4699
var headingId = $"heading-{i}";
100+
var isLatest = i == 0;
47101

48-
<div class="accordion-item border">
102+
<div class="accordion-item @(isLatest ? "border-primary" : "")">
49103
<h2 class="accordion-header" id="@headingId">
50-
<button class="accordion-button @(i != 0 ? "collapsed" : "")"
104+
<button class="accordion-button @(i != 0 ? "collapsed" : "") d-flex align-items-center"
51105
type="button"
52106
data-bs-toggle="collapse"
53107
data-bs-target="#@collapseId"
54108
aria-expanded="@(i == 0 ? "true" : "false")"
55109
aria-controls="@collapseId">
56-
<b>Version: @release.Version</b>
110+
<div class="d-flex align-items-center w-100">
111+
<i class="bi bi-tag-fill me-2 text-primary"></i>
112+
<strong class="me-2">Version @release.Version</strong>
113+
@if (isLatest)
114+
{
115+
<span class="badge bg-primary ms-2">Latest</span>
116+
}
117+
</div>
57118
</button>
58119
</h2>
59120
<div id="@collapseId"
60121
class="accordion-collapse collapse @(i == 0 ? "show" : "")"
61122
aria-labelledby="@headingId"
62123
data-bs-parent="#releasesAccordion">
63124
<div class="accordion-body">
64-
<div class="mb-2">
125+
<!-- Platform Downloads -->
126+
<h6 class="text-muted mb-3">
127+
<i class="bi bi-download me-1"></i>Download for your platform:
128+
</h6>
129+
<div class="d-flex flex-wrap gap-2 mb-3">
65130
@RenderDownloadButton(release.WindowsDownloadUrl, "windows", "Windows")
66131
@RenderDownloadButton(release.LinuxDownloadUrl, "tux", "Linux")
67132
@RenderDownloadButton(release.MacOsDownloadUrl, "apple", "macOS")
@@ -70,7 +135,10 @@
70135
string.IsNullOrEmpty(release.LinuxDownloadUrl) &&
71136
string.IsNullOrEmpty(release.MacOsDownloadUrl))
72137
{
73-
<span class="text-muted">No platform-specific assets available.</span>
138+
<div class="alert alert-warning mb-0 w-100" role="alert">
139+
<i class="bi bi-exclamation-triangle-fill me-2"></i>
140+
No platform-specific assets available for this release.
141+
</div>
74142
}
75143
</div>
76144
</div>
@@ -80,7 +148,7 @@
80148
</div>
81149
</div>
82150
</div>
83-
}
151+
}
84152
</div>
85153
</div>
86154

@@ -97,10 +165,13 @@
97165
if (!string.IsNullOrEmpty(url))
98166
{
99167
<a href="@url"
100-
class="btn btn-sm btn-outline-primary me-2"
168+
class="btn btn-outline-primary d-inline-flex align-items-center"
101169
target="_blank"
102-
rel="noopener noreferrer">
103-
<i class="bi bi-@icon"></i> Download for @platform
170+
rel="noopener noreferrer"
171+
title="Download for @platform">
172+
<i class="bi bi-@icon me-2"></i>
173+
<span>@platform</span>
174+
<i class="bi bi-download ms-2"></i>
104175
</a>
105176
}
106177
};

‎src/FlowSynx.Pluginregistry/Components/Pages/Manage/Upload.razor‎

Lines changed: 102 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,37 +13,113 @@
1313
@inject IStatsApiService Stats
1414
@attribute [Authorize]
1515

16-
<PageTitle>Upload plugin</PageTitle>
16+
<PageTitle>Upload Plugin - FlowSynx Plugin Registry</PageTitle>
1717

1818
<div class="container p-5">
19-
<h2>Upload Your Plugin (.fspack)</h2>
20-
<div class="mb-lg-5">
21-
Please upload a valid plugin package in .fspack format. The archive should include all necessary files
22-
and a plugin.json manifest describing the plugin's metadata.
23-
</div>
19+
<div class="row justify-content-center">
20+
<div class="col-lg-12">
21+
<div class="card shadow-sm border-0">
22+
<div class="card-body p-4 p-md-5">
23+
<div class="text-center mb-4">
24+
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-cloud-upload text-primary mb-3" viewBox="0 0 16 16">
25+
<path fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383"/>
26+
<path fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708z"/>
27+
</svg>
28+
<h2 class="fw-bold mb-3">Upload Your Plugin</h2>
29+
<p class="text-muted mb-0">
30+
Share your plugin with the FlowSynx community by uploading a <code>.fspack</code> package file.
31+
</p>
32+
</div>
2433

25-
<InputFile OnChange="HandleFileSelected" accept=".fspack" class="form-control border-dark" />
34+
<div class="alert border mb-4" role="alert">
35+
<div class="d-flex">
36+
<div class="flex-shrink-0">
37+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-info-circle-fill" viewBox="0 0 16 16">
38+
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>
39+
</svg>
40+
</div>
41+
<div class="flex-grow-1 ms-3">
42+
<strong>Package Requirements</strong>
43+
<ul class="mb-0 mt-2 small">
44+
<li>Valid <code>.fspack</code> archive format</li>
45+
<li>Include a <code>manifest.json</code> manifest with plugin metadata</li>
46+
<li>All necessary plugin files and dependencies</li>
47+
</ul>
48+
</div>
49+
</div>
50+
</div>
2651

27-
@if (UploadMessage is not null)
28-
{
29-
<div class="alert alert-@UploadMessage.Type alert-dismissible fade show mt-3" role="alert">
30-
@UploadMessage.Text
31-
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
32-
</div>
33-
}
52+
<div class="mb-4">
53+
<label for="fileUpload" class="form-label fw-semibold">Select Plugin Package</label>
54+
<InputFile id="fileUpload" OnChange="HandleFileSelected" accept=".fspack"
55+
class="form-control form-control border-2 border-dark rounded-3"
56+
disabled="@IsUploading" />
57+
<div class="form-text mt-2">
58+
<small>Maximum file size: 50MB | Accepted format: .fspack</small>
59+
</div>
60+
</div>
3461

35-
@if (IsUploading)
36-
{
37-
<div class="mt-3">
38-
<label>Uploading: @ProgressPercentage%</label>
39-
<div class="progress">
40-
<div class="progress-bar" role="progressbar" style="width:@ProgressPercentage%"
41-
aria-valuenow="@ProgressPercentage" aria-valuemin="0" aria-valuemax="100">
42-
@ProgressPercentage%
62+
@if (UploadMessage is not null)
63+
{
64+
<div class="alert alert-@UploadMessage.Type alert-dismissible fade show border-0 shadow-sm" role="alert">
65+
<div class="d-flex align-items-center">
66+
@if (UploadMessage.Type == "success")
67+
{
68+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-check-circle-fill me-2" viewBox="0 0 16 16">
69+
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
70+
</svg>
71+
}
72+
else
73+
{
74+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
75+
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
76+
</svg>
77+
}
78+
<div class="flex-grow-1">@UploadMessage.Text</div>
79+
</div>
80+
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
81+
</div>
82+
}
83+
84+
@if (IsUploading)
85+
{
86+
<div class="card border-primary bg-light">
87+
<div class="card-body">
88+
<div class="d-flex justify-content-between align-items-center mb-2">
89+
<span class="fw-semibold">
90+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle-fill me-2" viewBox="0 0 16 16">
91+
<path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/>
92+
</svg>
93+
Uploading your plugin...
94+
</span>
95+
<span class="badge bg-primary fs-6">@ProgressPercentage%</span>
96+
</div>
97+
<div class="progress" style="height: 25px;">
98+
<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
99+
role="progressbar"
100+
style="width:@ProgressPercentage%"
101+
aria-valuenow="@ProgressPercentage"
102+
aria-valuemin="0"
103+
aria-valuemax="100">
104+
<span class="fw-semibold">@ProgressPercentage%</span>
105+
</div>
106+
</div>
107+
<small class="text-muted mt-2 d-block">Please wait while we process your plugin package...</small>
108+
</div>
109+
</div>
110+
}
43111
</div>
44112
</div>
113+
114+
<div class="mt-4 text-center text-muted">
115+
<small>
116+
Need help? Check out our
117+
<a href="/docs/plugin-development" class="text-decoration-none">plugin development guide</a> or
118+
<a href="/support" class="text-decoration-none">contact support</a>.
119+
</small>
120+
</div>
45121
</div>
46-
}
122+
</div>
47123
</div>
48124

49125
@code {
@@ -59,7 +135,7 @@
59135
{
60136
UploadMessage = new UploadMessageModel
61137
{
62-
Text = "No file selected.",
138+
Text = "No file selected. Please choose a valid .fspack file.",
63139
Type = "danger"
64140
};
65141
return;
@@ -84,15 +160,15 @@
84160

85161
UploadMessage = new UploadMessageModel
86162
{
87-
Text = "Upload successful!",
163+
Text = "🎉 Upload successful! Your plugin has been published to the registry.",
88164
Type = "success"
89165
};
90166
}
91167
catch (Exception ex)
92168
{
93169
UploadMessage = new UploadMessageModel
94170
{
95-
Text = ex.Message,
171+
Text = $"Upload failed: {ex.Message}",
96172
Type = "danger"
97173
};
98174
}

0 commit comments

Comments
 (0)