+
+
{title}
+
diff --git a/kinode/packages/homepage/ui/src/components/Widget.tsx b/kinode/packages/homepage/ui/src/components/Widget.tsx
index bce038dc..ce399155 100644
--- a/kinode/packages/homepage/ui/src/components/Widget.tsx
+++ b/kinode/packages/homepage/ui/src/components/Widget.tsx
@@ -1,8 +1,5 @@
-import classNames from "classnames"
import { useEffect, useState } from "react"
-import usePersistentStore from "../store/persistentStore"
import useHomepageStore from "../store/homepageStore"
-import { isMobileCheck } from "../utils/dimensions"
interface WidgetProps {
package_name: string,
@@ -10,32 +7,20 @@ interface WidgetProps {
forceLarge?: boolean
}
-const Widget: React.FC
= ({ package_name, widget, forceLarge }) => {
+const Widget: React.FC = ({ package_name, widget }) => {
const { apps } = useHomepageStore()
- const { widgetSettings } = usePersistentStore()
- const isMobile = isMobileCheck()
- const isLarge = forceLarge || widgetSettings[package_name]?.size === "large"
- const isSmall = !widgetSettings[package_name]?.size || widgetSettings[package_name]?.size === "small"
- const [tallScreen, setTallScreen] = useState(window.innerHeight > window.innerWidth)
+ const [_tallScreen, setTallScreen] = useState(window.innerHeight > window.innerWidth)
useEffect(() => {
setTallScreen(window.innerHeight > window.innerWidth)
}, [window.innerHeight, window.innerWidth])
- return
-
+ return
+
{apps.find(app => app.package_name === package_name)?.label || package_name}
diff --git a/kinode/packages/homepage/ui/src/components/Widgets.tsx b/kinode/packages/homepage/ui/src/components/Widgets.tsx
index fa7f3dd7..9c43e6cd 100644
--- a/kinode/packages/homepage/ui/src/components/Widgets.tsx
+++ b/kinode/packages/homepage/ui/src/components/Widgets.tsx
@@ -1,18 +1,12 @@
import useHomepageStore from "../store/homepageStore"
import Widget from "./Widget"
import usePersistentStore from "../store/persistentStore"
-import { isMobileCheck } from "../utils/dimensions"
-import classNames from "classnames"
const Widgets = () => {
const { apps } = useHomepageStore()
const { widgetSettings } = usePersistentStore();
- const isMobile = isMobileCheck()
- return
+ return
{apps
.filter(app => app.widget)
.map(({ widget, package_name }, _i, _appsWithWidgets) => !widgetSettings[package_name]?.hide &&
');
- background-repeat: no-repeat;
- background-position: right 1.25rem center;
- @apply appearance-none pr-16;
-}
-
-button:hover {
- @apply opacity-90 shadow-none;
-}
-
-button:disabled {
- @apply opacity-70 cursor-not-allowed bg-gray border-gray;
-}
-
-.obox,
-.card {
- @apply rounded-lg p-4 bg-orange/25;
-}
-
-.c {
- @apply place-items-center place-content-center;
-}
-
-.special-bg-homepage {
- background-color: #000000;
- background-image: radial-gradient(circle at -255% 50%, #e25f35b3 35%, transparent 86.05%), radial-gradient(circle at -7% -43%, #860001db 50%, transparent 87.05%);
-}
-
-.special-bg-loadingscreen {
- background-color: #000000;
- background-image: radial-gradient(circle at 50% 200%, #e25f35ff 37%, transparent 74.05%), linear-gradient(180deg, #22211fff 50%, transparent 150.05%);
-}
\ No newline at end of file
diff --git a/kinode/packages/homepage/ui/src/main.tsx b/kinode/packages/homepage/ui/src/main.tsx
index 55b4a7aa..07ad359c 100644
--- a/kinode/packages/homepage/ui/src/main.tsx
+++ b/kinode/packages/homepage/ui/src/main.tsx
@@ -2,9 +2,6 @@ import React from 'react'
import ReactDOM from 'react-dom/client'
import Homepage from './pages/Homepage.tsx'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
-import '@unocss/reset/tailwind.css'
-import 'uno.css'
-import './index.css'
import { Settings } from './pages/Settings.tsx'
ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/kinode/packages/homepage/ui/src/pages/Homepage.tsx b/kinode/packages/homepage/ui/src/pages/Homepage.tsx
index 6f56746c..9a144bfb 100644
--- a/kinode/packages/homepage/ui/src/pages/Homepage.tsx
+++ b/kinode/packages/homepage/ui/src/pages/Homepage.tsx
@@ -6,12 +6,8 @@ import { FaChevronDown, FaChevronUp, FaScrewdriverWrench } from 'react-icons/fa6
import AppsDock from '../components/AppsDock'
import AllApps from '../components/AllApps'
import Widgets from '../components/Widgets'
-import { isMobileCheck } from '../utils/dimensions'
-import classNames from 'classnames'
import WidgetsSettingsModal from '../components/WidgetsSettingsModal'
-import { getFetchUrl } from '../utils/fetch'
-
interface AppStoreApp {
package: string,
publisher: string,
@@ -23,28 +19,26 @@ function Homepage() {
const [our, setOur] = useState('')
const [version, setVersion] = useState('')
const [allAppsExpanded, setAllAppsExpanded] = useState(false)
- const { setApps, fetchHostedStatus, showWidgetsSettings, setShowWidgetsSettings } = useHomepageStore()
- const isMobile = isMobileCheck()
+ const { setApps, showWidgetsSettings, setShowWidgetsSettings } = useHomepageStore()
const getAppPathsAndIcons = () => {
Promise.all([
- fetch(getFetchUrl('/apps'), { credentials: 'include' }).then(res => res.json() as any as HomepageApp[]).catch(() => []),
- fetch(getFetchUrl('/main:app_store:sys/apps'), { credentials: 'include' }).then(res => res.json()).catch(() => []),
- fetch(getFetchUrl('/version'), { credentials: 'include' }).then(res => res.text()).catch(() => '')
+ fetch('/apps', { credentials: 'include' }).then(res => res.json() as any as HomepageApp[]).catch(() => []),
+ fetch('/main:app_store:sys/apps', { credentials: 'include' }).then(res => res.json()).catch(() => []),
+ fetch('/version', { credentials: 'include' }).then(res => res.text()).catch(() => '')
]).then(([appsData, appStoreData, version]) => {
- // console.log({ appsData, appStoreData, version })
setVersion(version)
- const appz = appsData.map(app => ({
+ const apps = appsData.map(app => ({
...app,
is_favorite: false, // Assuming initial state for all apps
}));
appStoreData.forEach((appStoreApp: AppStoreApp) => {
- const existingAppIndex = appz.findIndex(a => a.package_name === appStoreApp.package);
+ const existingAppIndex = apps.findIndex(a => a.package_name === appStoreApp.package);
if (existingAppIndex === -1) {
- appz.push({
+ apps.push({
package_name: appStoreApp.package,
path: '',
label: appStoreApp.package,
@@ -52,19 +46,19 @@ function Homepage() {
is_favorite: false
});
} else {
- appz[existingAppIndex] = {
- ...appz[existingAppIndex],
+ apps[existingAppIndex] = {
+ ...apps[existingAppIndex],
state: appStoreApp.state
};
}
});
- setApps(appz);
+ setApps(apps);
// TODO: be less dumb about this edge case!
for (
let i = 0;
- i < 5 && appz.find(a => a.package_name === 'app_store' && !a.base64_icon);
+ i < 5 && apps.find(a => a.package_name === 'app_store' && !a.base64_icon);
i++
) {
getAppPathsAndIcons();
@@ -77,53 +71,33 @@ function Homepage() {
}, [our]);
useEffect(() => {
- fetch(getFetchUrl('/our'), { credentials: 'include' })
+ fetch('/our', { credentials: 'include' })
.then(res => res.text())
.then(data => {
if (data.match(/^[a-zA-Z0-9\-\.]+\.[a-zA-Z]+$/)) {
setOur(data)
- fetchHostedStatus(data)
}
})
}, [our])
return (
-
-
- {our}
- v{version}
-
+ ? 
+ return