Skip to content

Commit b0ecd0a

Browse files
author
Ajit Kumar
committed
fix(sidebar apps ui)
1 parent 8219814 commit b0ecd0a

File tree

5 files changed

+112
-57
lines changed

5 files changed

+112
-57
lines changed

‎src/pages/sponsors/sponsors.js‎

Lines changed: 57 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import ajax from "@deadlyjack/ajax";
22
import "./style.scss";
33
import Page from "components/page";
4+
import toast from "components/toast";
45
import Ref from "html-tag-js/ref";
56
import actionStack from "lib/actionStack";
67
import constants from "lib/constants";
@@ -110,48 +111,72 @@ export default function Sponsors() {
110111
app.append(page);
111112

112113
async function render() {
114+
let sponsors = [];
113115
try {
114116
const res = await ajax.get(`${constants.API_BASE}/sponsors`);
115117
if (res.error) {
116-
helpers.error(res.error);
118+
toast("Unable to load sponsors...");
119+
console.error("Error loading sponsors:", res.error);
117120
} else {
118-
titaniumSponsors.content = "";
119-
platinumSponsors.content = "";
120-
goldSponsors.content = "";
121-
silverSponsors.content = "";
122-
bronzeSponsors.content = "";
123-
crystalSponsors.content = "";
124-
125-
for (const sponsor of res) {
126-
// Append each sponsor to the corresponding tier
127-
switch (sponsor.tier) {
128-
case "titanium":
129-
titaniumSponsors.append(<SponsorCard {...sponsor} />);
130-
break;
131-
case "platinum":
132-
platinumSponsors.append(<SponsorCard {...sponsor} />);
133-
break;
134-
case "gold":
135-
goldSponsors.append(<SponsorCard {...sponsor} />);
136-
break;
137-
case "silver":
138-
silverSponsors.append(<SponsorCard {...sponsor} />);
139-
break;
140-
case "bronze":
141-
bronzeSponsors.append(<SponsorCard {...sponsor} />);
142-
break;
143-
case "crystal":
144-
crystalSponsors.append(<SponsorCard {...sponsor} />);
145-
break;
146-
}
147-
}
121+
sponsors = res;
122+
localStorage.setItem("cached_sponsors", JSON.stringify(sponsors));
148123
}
149124
} catch (error) {
150-
helpers.error(error);
125+
toast("Unable to load sponsors...");
126+
console.error("Error loading sponsors:", error);
127+
}
128+
129+
if (!sponsors.length && "cached_sponsors" in localStorage) {
130+
try {
131+
sponsors = JSON.parse(localStorage.getItem("cached_sponsors")) || [];
132+
} catch (error) {
133+
console.error("Failed to parse cached sponsors", error);
134+
}
135+
}
136+
137+
titaniumSponsors.content = "";
138+
platinumSponsors.content = "";
139+
goldSponsors.content = "";
140+
silverSponsors.content = "";
141+
bronzeSponsors.content = "";
142+
crystalSponsors.content = "";
143+
144+
for (const sponsor of sponsors) {
145+
// Append each sponsor to the corresponding tier
146+
switch (sponsor.tier) {
147+
case "titanium":
148+
titaniumSponsors.append(<SponsorCard {...sponsor} />);
149+
break;
150+
case "platinum":
151+
platinumSponsors.append(<SponsorCard {...sponsor} />);
152+
break;
153+
case "gold":
154+
goldSponsors.append(<SponsorCard {...sponsor} />);
155+
break;
156+
case "silver":
157+
silverSponsors.append(<SponsorCard {...sponsor} />);
158+
break;
159+
case "bronze":
160+
bronzeSponsors.append(<SponsorCard {...sponsor} />);
161+
break;
162+
case "crystal":
163+
crystalSponsors.append(<SponsorCard {...sponsor} />);
164+
break;
165+
}
151166
}
152167
}
153168
}
154169

170+
/**
171+
* Sponsor Card Component
172+
* @param {object} props
173+
* @param {string} props.name - The name of the sponsor
174+
* @param {string} props.image - The image URL of the sponsor
175+
* @param {string} props.website - The website URL of the sponsor
176+
* @param {string} props.tier - The tier of the sponsor
177+
* @param {string} props.tagline - The tagline of the sponsor
178+
* @returns {JSX.Element}
179+
*/
155180
function SponsorCard({ name, image, website, tier, tagline }) {
156181
// for crystal tier only text, for bronze slightly bigger text, for silver bigger clickable text,
157182
// for gold text with image, for platinum and titanium text with big image

‎src/sidebarApps/extensions/index.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,14 @@ const $header = (
3939
<div className="header">
4040
<div className="title">
4141
<span>{strings.plugins}</span>
42-
<button type="button" className="icon-button" onclick={filterPlugins}>
43-
<span className="icon tune" />
44-
</button>
45-
<button type="button" className="icon-button" onclick={addSource}>
46-
<span className="icon more_vert" />
47-
</button>
42+
<div className="actions">
43+
<button type="button" className="icon-button" onclick={filterPlugins}>
44+
<span className="icon tune" />
45+
</button>
46+
<button type="button" className="icon-button" onclick={addSource}>
47+
<span className="icon add" />
48+
</button>
49+
</div>
4850
</div>
4951
<input
5052
oninput={searchPlugin}

‎src/sidebarApps/extensions/style.scss‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,30 @@
22

33
.container.extensions {
44
.header {
5+
padding: 10px;
56
display: flex;
67
flex-direction: column;
78
border-bottom: 1px solid var(--border-color);
89

910
.title {
10-
font-size: 1.125rem;
1111
font-weight: 600;
1212
display: flex;
13-
justify-content: space-between;
13+
justify-content: space-between !important;
1414
align-items: center;
1515
width: 100%;
1616
color: var(--primary-text-color);
1717
margin-bottom: 8px;
1818

19+
.actions {
20+
display: flex;
21+
align-items: center;
22+
}
23+
1924
.icon-button {
2025
background: none;
2126
border: none;
2227
cursor: pointer;
2328
color: var(--primary-text-color);
24-
padding: 0.4rem;
2529
margin-left: 0.4rem;
2630
border-radius: 6px;
2731
transition: all 0.2s ease;

‎src/sidebarApps/notification/index.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,13 @@ const $header = (
2222
<div className="header">
2323
<div className="title">
2424
{strings["notifications"]}
25-
<span
26-
className="clear-all icon delete_outline"
25+
<button
26+
type="button"
27+
className="icon-button"
2728
onclick={() => notificationManager.clearAll()}
28-
></span>
29+
>
30+
<span data-action="clear" className="icon clearclose"></span>
31+
</button>
2932
</div>
3033
</div>
3134
);

‎src/sidebarApps/notification/style.scss‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,41 @@
1-
.container.notifications{
1+
.container.notifications {
22
display: flex;
33
flex-direction: column;
44

5-
.header{
5+
.header {
66
padding: 10px;
77
display: flex;
88
justify-content: space-between;
99
align-items: center;
1010
border-bottom: 1px solid var(--border-color);
1111

1212
.title {
13-
font-size: 20px;
14-
font-weight: 600;
15-
color: var(--primary-text-color);
13+
gap: 4px;
1614
display: flex;
15+
font-weight: 600;
1716
align-items: center;
18-
gap: 4px;
19-
}
17+
color: var(--primary-text-color);
18+
justify-content: space-between !important;
2019

21-
.clear-all {
22-
font-size: 12px;
23-
color: var(--secondary-text-color);
24-
background: none;
25-
padding: 5px;
20+
.icon-button {
21+
border: none;
22+
background: none;
23+
cursor: pointer;
24+
color: var(--primary-text-color);
25+
margin-left: 0.4rem;
26+
border-radius: 6px;
27+
transition: all 0.2s ease;
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
min-width: 32px;
32+
min-height: 32px;
33+
font-size: 1.1em;
34+
35+
&:hover {
36+
background-color: var(--primary-color);
37+
}
38+
}
2639
}
2740
}
2841

@@ -40,6 +53,7 @@
4053
padding: 20px;
4154
font-size: 14px;
4255
}
56+
4357
.notification-item {
4458
padding: 10px 12px;
4559
border-radius: 6px;
@@ -55,6 +69,7 @@
5569
background: rgba($color: #000000, $alpha: 0.2);
5670
border-color: var(--popup-border-color);
5771
}
72+
5873
.notification-icon {
5974
width: 20px;
6075
height: 20px;
@@ -64,6 +79,7 @@
6479
flex-shrink: 0;
6580
color: var(--primary-text-color);
6681
}
82+
6783
.notification-content {
6884
flex: 1;
6985
min-width: 0;
@@ -85,11 +101,13 @@
85101
color: var(--secondary-text-color);
86102
}
87103
}
104+
88105
.notification-message {
89106
font-size: 12px;
90107
color: var(--secondary-text-color);
91108
line-height: 1.4;
92109
}
110+
93111
.notification-actions {
94112
margin-top: 8px;
95113
display: flex;
@@ -113,9 +131,11 @@
113131
color: var(--primary-text-color);
114132
border-color: var(--border-color);
115133
}
134+
116135
&:active {
117136
transform: translateY(1px);
118137
}
138+
119139
&::before {
120140
content: '×';
121141
font-size: 14px;
@@ -135,8 +155,9 @@
135155
transform: translateX(100%);
136156
opacity: 0;
137157
}
158+
138159
to {
139160
transform: translateX(0);
140161
opacity: 1;
141162
}
142-
}
163+
}

0 commit comments

Comments
 (0)