uqbar-dao/nectar
1
1
Fork 0
mirror of https://github.com/uqbar-dao/nectar.git synced 2024-11-26 23:27:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

more homepage

Browse Source
This commit is contained in:
dr-frmr 2024-07-26 18:06:23 +03:00
parent 340d8d1436
commit 0805f48dc1
No known key found for this signature in database
6 changed files with 67 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
kinode/packages/homepage/homepage/src/lib.rs
View File

@ -198,7 +198,7 @@ fn init(our: Address) {
Some(HashMap::new()),
vec![],
);
return;
continue;
};
// POST of a list of package names.
// go through the list and update each app in app_data to have the index of its name in the list as its order
@ -208,7 +208,7 @@ fn init(our: Address) {
Some(HashMap::new()),
vec![],
);
return;
continue;
};
let Ok(favorite_toggle) =
serde_json::from_slice::<(String, u32, bool)>(&body.bytes)
@ -218,7 +218,7 @@ fn init(our: Address) {
Some(HashMap::new()),
vec![],
);
return;
continue;
};
if let Some(app) = app_data.get_mut(&favorite_toggle.0) {
app.order = Some(favorite_toggle.1);

5
kinode/packages/homepage/ui/src/components/AppDisplay.tsx
View File

@ -10,16 +10,18 @@ const AppDisplay: React.FC<AppDisplayProps> = ({ app }) => {
return <a
id={app?.package_name}
href={app?.path}
href={app?.path || undefined}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
className="app-display"
title={isHovered ? (app?.label || app?.package_name) : (!app?.path ? "This app does not serve a UI" : undefined)}
>
{app?.base64_icon
? <img className="app-icon" src={app.base64_icon} />
: <img className="app-icon" src='/bird-orange.svg' />
}
<h6>{app?.label || app?.package_name}</h6>
{isHovered && !app?.path && <p>This app does not serve a UI</p>}
{app?.path && isHovered && <button className="app-fave-button"
onClick={(e) => {
e.preventDefault()
@ -34,4 +36,3 @@ const AppDisplay: React.FC<AppDisplayProps> = ({ app }) => {
}
export default AppDisplay

15
kinode/packages/homepage/ui/src/components/Modal.tsx
View File

@ -1,4 +1,5 @@
import { FaX } from "react-icons/fa6"
import { useEffect } from 'react';
interface Props extends React.HTMLAttributes<HTMLDivElement> {
title: string
@ -6,6 +7,20 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
}
export const Modal: React.FC<Props> = ({ title, onClose, children }) => {
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
onClose();
}
};
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [onClose]);
return (
<div className="modal">
<div className="modal-inner">

23
kinode/packages/homepage/ui/src/components/WidgetsSettingsModal.tsx
View File

@ -18,23 +18,12 @@ const WidgetsSettingsModal = () => {
<h4>{app.label}</h4>
<div>
<div>
<span>Show widget</span>
<div>
<input
type="checkbox"
checked={!widgetSettings[app.id]?.hide}
onChange={() => toggleWidgetVisibility(app.id)}
autoFocus
/>
{!widgetSettings[app.id]?.hide && (
<span
onClick={() => toggleWidgetVisibility(app.id)}
className="checkmark"
>
&#10003;
</span>
)}
</div>
<span>Show widget<input
type="checkbox"
checked={!widgetSettings[app.id]?.hide}
onChange={() => toggleWidgetVisibility(app.id)}
autoFocus
/></span>
</div>
<div>
<span>Widget size</span>

38
kinode/packages/homepage/ui/src/index.css
View File

@ -1,9 +1,11 @@
body {
width: 100%;
width: 90vw;
margin: 0 auto;
}
#homepage {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
header {
@ -32,7 +34,7 @@ header h1 {
background-color: #4f000085;
padding: 10px;
border-radius: 10px;
max-width: 90%;
width: fit-content;
margin: 0 auto;
margin-bottom: 10px;
}
@ -63,6 +65,8 @@ header h1 {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 10px;
}
@ -72,7 +76,7 @@ header h1 {
text-align: center;
position: relative;
max-width: 100%;
width: 400px;
width: 300px;
height: 400px;
overflow: hidden;
}
@ -93,18 +97,24 @@ header h1 {
}
footer {
position: absolute;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
width: 90vw;
margin: 0 auto;
max-height: 100vh;
max-width: 960px;
}
#all-apps {
border-top: 1px solid black;
border: 1px solid black;
display: flex;
flex-direction: row;
gap: 10px;
justify-content: space-evenly;
padding: 10px;
background-color: #4f000085;
border-radius: 5px 5px 0px 0px;
}
.app-icon {
@ -119,18 +129,28 @@ footer {
width: 100%;
height: 100%;
text-align: center;
background-color: #000000cc;
display: flex;
justify-content: center;
align-items: center;
}
.modal-inner {
background-color: #00000085;
width: fit-content;
text-align: center;
background-color: var(--gray);
border-radius: 25px;
border: 1px solid black;
padding: 25px;
margin: auto;
}
.modal-header {
margin-top: 20vh;
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 2em;
}
.modal .widget-settings {

12
kinode/packages/homepage/ui/src/pages/Homepage.tsx
View File

@ -20,7 +20,6 @@ function Homepage() {
]).then(([appsData, version]) => {
setVersion(version)
setApps(appsData)
console.log(appsData)
});
}
@ -38,6 +37,17 @@ function Homepage() {
})
}, [our])
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape' && allAppsExpanded) {
setAllAppsExpanded(false);
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [allAppsExpanded]);
return (
<div id="homepage">
<header>