diff --git a/applications/uk.ewsgit.photos/web/pages/search/Layout.tsx b/applications/uk.ewsgit.photos/web/pages/search/Layout.tsx index 3a92736..563844c 100644 --- a/applications/uk.ewsgit.photos/web/pages/search/Layout.tsx +++ b/applications/uk.ewsgit.photos/web/pages/search/Layout.tsx @@ -1,8 +1,8 @@ -import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.js"; -import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.jsx"; -import UKStack from "@ewsgit/uikit-solid/src/components/stack/UKStack.jsx"; -import UKStackItem from "@ewsgit/uikit-solid/src/components/stack/UKStackItem.jsx"; -import UKTopAppBar from "@ewsgit/uikit-solid/src/components/topAppBar/UKTopAppBar.jsx"; +import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.ts"; +import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.tsx"; +import UKStack from "@ewsgit/uikit-solid/src/components/stack/UKStack.tsx"; +import UKStackItem from "@ewsgit/uikit-solid/src/components/stack/UKStackItem.tsx"; +import UKTopAppBar from "@ewsgit/uikit-solid/src/components/topAppBar/UKTopAppBar.tsx"; import { useNavigate } from "@solidjs/router"; import { type Component, createSignal, For, type ParentProps } from "solid-js"; import styles from "./Layout.module.scss"; diff --git a/applications/uk.ewsgit.settings/web/pages/authentication/components/MethodPassword/components/ResetPasswordDialogue/ResetPasswordDialogue.tsx b/applications/uk.ewsgit.settings/web/pages/authentication/components/MethodPassword/components/ResetPasswordDialogue/ResetPasswordDialogue.tsx index 9545e67..092f934 100644 --- a/applications/uk.ewsgit.settings/web/pages/authentication/components/MethodPassword/components/ResetPasswordDialogue/ResetPasswordDialogue.tsx +++ b/applications/uk.ewsgit.settings/web/pages/authentication/components/MethodPassword/components/ResetPasswordDialogue/ResetPasswordDialogue.tsx @@ -1,10 +1,10 @@ import CHECK_ICON from "@material-symbols/svg-700/outlined/check.svg"; -import UKButton, { AffirmativeButtonState } from "@ewsgit/uikit-solid/src/components/button/UKButton.jsx"; +import UKButton, { AffirmativeButtonState } from "@ewsgit/uikit-solid/src/components/button/UKButton.tsx"; import UKButtonGroup from "@ewsgit/uikit-solid/src/components/buttonGroup/UKButtonGroup.tsx"; -import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.js"; -import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.jsx"; -import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.jsx"; -import UKTextField from "@ewsgit/uikit-solid/src/components/textField/UKTextField.jsx"; +import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.ts"; +import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.tsx"; +import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.tsx"; +import UKTextField from "@ewsgit/uikit-solid/src/components/textField/UKTextField.tsx"; import { type Component, createSignal } from "solid-js"; import trpc from "../../../../../../lib/trpc"; import styles from "./ResetPasswordDialogue.module.scss"; diff --git a/applications/uk.ewsgit.settings/web/pages/customization/Index.tsx b/applications/uk.ewsgit.settings/web/pages/customization/Index.tsx index ebcbf5b..c67c0ea 100644 --- a/applications/uk.ewsgit.settings/web/pages/customization/Index.tsx +++ b/applications/uk.ewsgit.settings/web/pages/customization/Index.tsx @@ -1,9 +1,9 @@ import CHEVRON_LEFT_ICON from "@material-symbols/svg-700/outlined/chevron_left.svg"; -import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.js"; -import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.jsx"; +import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.ts"; +import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.tsx"; import UKStack from "@ewsgit/uikit-solid/src/components/stack/UKStack.tsx"; import UKStackItem from "@ewsgit/uikit-solid/src/components/stack/UKStackItem.tsx"; -import UKTopAppBar from "@ewsgit/uikit-solid/src/components/topAppBar/UKTopAppBar.jsx"; +import UKTopAppBar from "@ewsgit/uikit-solid/src/components/topAppBar/UKTopAppBar.tsx"; import { useNavigate } from "@solidjs/router"; import type { Component } from "solid-js"; import ThemePreview from "./components/ThemePreview/ThemePreview.tsx"; diff --git a/applications/uk.ewsgit.settings/web/pages/customization/wallpaper/Index.tsx b/applications/uk.ewsgit.settings/web/pages/customization/wallpaper/Index.tsx index a2fbd08..d1437dc 100644 --- a/applications/uk.ewsgit.settings/web/pages/customization/wallpaper/Index.tsx +++ b/applications/uk.ewsgit.settings/web/pages/customization/wallpaper/Index.tsx @@ -4,16 +4,16 @@ import DELETE_ICON from "@material-symbols/svg-700/outlined/delete.svg"; import FOLDER_ICON from "@material-symbols/svg-700/outlined/folder.svg"; import UPLOAD_ICON from "@material-symbols/svg-700/outlined/upload.svg"; import UKButton from "@ewsgit/uikit-solid/src/components/button/UKButton.tsx"; -import UKButtonGroup from "@ewsgit/uikit-solid/src/components/buttonGroup/UKButtonGroup.jsx"; +import UKButtonGroup from "@ewsgit/uikit-solid/src/components/buttonGroup/UKButtonGroup.tsx"; import UKCircularProgressIndicator from "@ewsgit/uikit-solid/src/components/circularProgressIndicator/UKCircularProgressIndicator.tsx"; -import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.js"; -import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.jsx"; +import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.ts"; +import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.tsx"; import UKIconButton from "@ewsgit/uikit-solid/src/components/iconButton/UKIconButton.tsx"; -import UKStack from "@ewsgit/uikit-solid/src/components/stack/UKStack.jsx"; -import UKStackItem from "@ewsgit/uikit-solid/src/components/stack/UKStackItem.jsx"; -import UKStackLabel from "@ewsgit/uikit-solid/src/components/stack/UKStackLabel.jsx"; +import UKStack from "@ewsgit/uikit-solid/src/components/stack/UKStack.tsx"; +import UKStackItem from "@ewsgit/uikit-solid/src/components/stack/UKStackItem.tsx"; +import UKStackLabel from "@ewsgit/uikit-solid/src/components/stack/UKStackLabel.tsx"; import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.tsx"; -import UKTopAppBar from "@ewsgit/uikit-solid/src/components/topAppBar/UKTopAppBar.jsx"; +import UKTopAppBar from "@ewsgit/uikit-solid/src/components/topAppBar/UKTopAppBar.tsx"; import { createFileUploader } from "@solid-primitives/upload"; import { useNavigate } from "@solidjs/router"; import type { Component } from "solid-js"; diff --git a/applications/uk.ewsgit.settings/web/pages/root/index.tsx b/applications/uk.ewsgit.settings/web/pages/root/index.tsx index c76905b..223c63a 100644 --- a/applications/uk.ewsgit.settings/web/pages/root/index.tsx +++ b/applications/uk.ewsgit.settings/web/pages/root/index.tsx @@ -6,13 +6,13 @@ import PERSON_ICON from "@material-symbols/svg-700/outlined/person.svg"; import SETTINGS_APPLICATIONS_ICON from "@material-symbols/svg-700/outlined/settings_applications.svg"; import STORAGE_ICON from "@material-symbols/svg-700/outlined/storage.svg"; import WALLPAPER_ICON from "@material-symbols/svg-700/outlined/wallpaper.svg"; -import UKAvatar from "@ewsgit/uikit-solid/src/components/avatar/UKAvatar.jsx"; -import UKButton from "@ewsgit/uikit-solid/src/components/button/UKButton.jsx"; -import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.js"; -import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.jsx"; +import UKAvatar from "@ewsgit/uikit-solid/src/components/avatar/UKAvatar.tsx"; +import UKButton from "@ewsgit/uikit-solid/src/components/button/UKButton.tsx"; +import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.ts"; +import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.tsx"; import UKStack from "@ewsgit/uikit-solid/src/components/stack/UKStack.tsx"; -import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.jsx"; -import UKTopAppBar from "@ewsgit/uikit-solid/src/components/topAppBar/UKTopAppBar.jsx"; +import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.tsx"; +import UKTopAppBar from "@ewsgit/uikit-solid/src/components/topAppBar/UKTopAppBar.tsx"; import webInstanceTRPC from "@onlineworkspace/workspace-instance-web/src/lib/trpc.ts"; import { useNavigate } from "@solidjs/router"; import clsx from "clsx"; diff --git a/applications/uk.ewsgit.store/web/pages/app/Index.tsx b/applications/uk.ewsgit.store/web/pages/app/Index.tsx index 0c428e5..73f6ad9 100644 --- a/applications/uk.ewsgit.store/web/pages/app/Index.tsx +++ b/applications/uk.ewsgit.store/web/pages/app/Index.tsx @@ -1,14 +1,14 @@ import CHEVRON_LEFT_ICON from "@material-symbols/svg-700/outlined/chevron_left.svg"; import DELETE_ICON from "@material-symbols/svg-700/outlined/delete.svg"; import DOWNLOAD_ICON from "@material-symbols/svg-700/outlined/download.svg"; -import UKButton from "@ewsgit/uikit-solid/src/components/button/UKButton.jsx"; -import UKCard from "@ewsgit/uikit-solid/src/components/card/UKCard.jsx"; -import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.js"; -import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.jsx"; -import UKIcon from "@ewsgit/uikit-solid/src/components/icon/UKIcon.jsx"; -import UKStack from "@ewsgit/uikit-solid/src/components/stack/UKStack.jsx"; -import UKStackItem from "@ewsgit/uikit-solid/src/components/stack/UKStackItem.jsx"; -import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.jsx"; +import UKButton from "@ewsgit/uikit-solid/src/components/button/UKButton.tsx"; +import UKCard from "@ewsgit/uikit-solid/src/components/card/UKCard.tsx"; +import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.ts"; +import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.tsx"; +import UKIcon from "@ewsgit/uikit-solid/src/components/icon/UKIcon.tsx"; +import UKStack from "@ewsgit/uikit-solid/src/components/stack/UKStack.tsx"; +import UKStackItem from "@ewsgit/uikit-solid/src/components/stack/UKStackItem.tsx"; +import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.tsx"; import { useNavigate, useParams, useSearchParams } from "@solidjs/router"; import { type Component, createResource, For } from "solid-js"; import trpc from "../../lib/trpc"; diff --git a/applications/uk.ewsgit.store/web/pages/categories/Index.tsx b/applications/uk.ewsgit.store/web/pages/categories/Index.tsx index 725fd03..9c66a5b 100644 --- a/applications/uk.ewsgit.store/web/pages/categories/Index.tsx +++ b/applications/uk.ewsgit.store/web/pages/categories/Index.tsx @@ -1,6 +1,6 @@ -import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.js"; -import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.jsx"; -import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.jsx"; +import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.ts"; +import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.tsx"; +import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.tsx"; import type { Component } from "solid-js"; import styles from "./Index.module.scss"; diff --git a/instance/src/web/package.json b/instance/src/web/package.json index 6be0433..c966bd2 100644 --- a/instance/src/web/package.json +++ b/instance/src/web/package.json @@ -19,6 +19,7 @@ "@trpc/client": "^11.13.4", "@trpc/server": "^11.13.4", "@types/qrcode": "^1.5.6", + "@ewsgit/uikit-solid": "workspace:*", "clsx": "^2.1.1", "qrcode": "^1.5.4", "solid-devtools": "^0.34.5", diff --git a/instance/src/web/src/pages/app/components/NavigationRail/components/navigationRailApplications/NavigationRailApplications.tsx b/instance/src/web/src/pages/app/components/NavigationRail/components/navigationRailApplications/NavigationRailApplications.tsx index 730a428..d1b6867 100644 --- a/instance/src/web/src/pages/app/components/NavigationRail/components/navigationRailApplications/NavigationRailApplications.tsx +++ b/instance/src/web/src/pages/app/components/NavigationRail/components/navigationRailApplications/NavigationRailApplications.tsx @@ -1,75 +1,73 @@ -import APPS_ICON from "@material-symbols/svg-700/outlined/apps.svg"; -import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.js"; -import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.jsx"; -import UKIconButton from "@ewsgit/uikit-solid/src/components/iconButton/UKIconButton.jsx"; -import UKList from "@ewsgit/uikit-solid/src/components/list/UKList.jsx"; -import UKListItem from "@ewsgit/uikit-solid/src/components/list/UKListItem.jsx"; -import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.jsx"; -import { useNavigate } from "@solidjs/router"; -import { type Component, createResource, For, Show } from "solid-js"; -import trpc from "../../../../../../lib/trpc"; -import styles from "./NavigationRailApplications.module.scss"; -import UKCard from "@ewsgit/uikit-solid/src/components/card/UKCard.jsx"; -import UKIcon from "@ewsgit/uikit-solid/src/components/icon/UKIcon.jsx"; - -const NavigationRailApplications: Component<{ - expanded: boolean; - toggle: (text: "applications") => void; - isToggled: boolean; -}> = (props) => { - const navigate = useNavigate(); - const [applications] = createResource(() => trpc.app.navigation.getApplications.query()); - - return ( -
- { - props.toggle("applications"); - }} - /> - {props.isToggled && ( -
- - Applications - - -
- - {(app) => { - return ( - { - if (app.location.type === "local") { - navigate(app.location.value); - props.toggle("applications"); - } else if (app.location.type === "remote") { - window.location.href = app.location.value; - } - }} - > - - {app.icon.value} - - - - - - {app.label} - - - ); - }} - -
-
- )} -
- ); -}; - -export default NavigationRailApplications; +import APPS_ICON from "@material-symbols/svg-700/outlined/apps.svg"; +import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.ts"; +import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.tsx"; +import UKIconButton from "@ewsgit/uikit-solid/src/components/iconButton/UKIconButton.tsx"; +import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.tsx"; +import { useNavigate } from "@solidjs/router"; +import { type Component, createResource, For, Show } from "solid-js"; +import trpc from "../../../../../../lib/trpc"; +import styles from "./NavigationRailApplications.module.scss"; +import UKCard from "@ewsgit/uikit-solid/src/components/card/UKCard.tsx"; +import UKIcon from "@ewsgit/uikit-solid/src/components/icon/UKIcon.tsx"; + +const NavigationRailApplications: Component<{ + expanded: boolean; + toggle: (text: "applications") => void; + isToggled: boolean; +}> = (props) => { + const navigate = useNavigate(); + const [applications] = createResource(() => trpc.app.navigation.getApplications.query()); + + return ( +
+ { + props.toggle("applications"); + }} + /> + {props.isToggled && ( +
+ + Applications + + +
+ + {(app) => { + return ( + { + if (app.location.type === "local") { + navigate(app.location.value); + props.toggle("applications"); + } else if (app.location.type === "remote") { + window.location.href = app.location.value; + } + }} + > + + {app.icon.value} + + + + + + {app.label} + + + ); + }} + +
+
+ )} +
+ ); +}; + +export default NavigationRailApplications; diff --git a/instance/src/web/src/pages/app/components/NavigationRail/components/navigationRailNotifications/NavigationRailNotifications.tsx b/instance/src/web/src/pages/app/components/NavigationRail/components/navigationRailNotifications/NavigationRailNotifications.tsx index 4c44c03..0323f64 100644 --- a/instance/src/web/src/pages/app/components/NavigationRail/components/navigationRailNotifications/NavigationRailNotifications.tsx +++ b/instance/src/web/src/pages/app/components/NavigationRail/components/navigationRailNotifications/NavigationRailNotifications.tsx @@ -1,143 +1,143 @@ -import NOTIFICATIONS_ICON from "@material-symbols/svg-700/outlined/notifications.svg"; -import NOTIFICATIONS_UNREAD_ICON from "@material-symbols/svg-700/outlined/notifications_unread.svg"; -import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.js"; -import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.jsx"; -import UKIconButton from "@ewsgit/uikit-solid/src/components/iconButton/UKIconButton.jsx"; -import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.jsx"; -import { useNavigate } from "@solidjs/router"; -import { type Component, createSignal, For } from "solid-js"; -import type { WorkspacesNotification } from "../../../../../../../../systems/notifications"; -import trpc from "../../../../../../lib/trpc"; -import styles from "./NavigationRailNotifications.module.scss"; -import Notification from "./notification/Notification"; - -// const FLYOUT_NOTIFICATION_TIMEOUT = 10_000; - -const NavigationRailNotifications: Component<{ - expanded: boolean; - toggle: (text: "notifications") => void; - isToggled: boolean; -}> = (props) => { - const navigate = useNavigate(); - const [notifications, setNotifications] = createSignal([]); - const [flyoutNotifications, setFlyoutNotifications] = createSignal([]); - // let subscription: Unsubscribable; - // - // onMount(() => { - // subscription = trpc.app.notifications.listener.subscribe(undefined, { - // onData(data) { - // // @ts-ignore - // setFlyoutNotifications((not) => { - // return [...not, data]; - // }); - // - // // @ts-ignore - // setNotifications((not) => { - // return [...not, data]; - // }); - // - // // if not urgent, remove after FLYOUT_NOTIFICATION_TIMEOUT - // if (data.priority !== 2) { - // setTimeout(() => { - // setFlyoutNotifications((not) => not.filter((n) => n.uuid !== data.uuid)); - // }, FLYOUT_NOTIFICATION_TIMEOUT); - // } - // }, - // }); - // }); - // - // onCleanup(() => { - // subscription.unsubscribe(); - // }); - - return ( -
- { - props.toggle("notifications"); - }} - /> -
- - {(notification) => ( - { - if (type === "close") { - setFlyoutNotifications((notifications) => notifications.filter((n) => n.uuid !== notification.uuid)); - setNotifications((notifications) => notifications.filter((n) => n.uuid !== notification.uuid)); - - return; - } - - const responseAction = await trpc.app.notifications.respond.mutate({ - uuid: notification.uuid, - responseType: type, - value: value, - }); - - if (responseAction.action?.type === "navigate") { - navigate(responseAction.action.value); - } - - if (responseAction.action?.type === "reload") { - window.location.reload(); - } - - setFlyoutNotifications((notifications) => notifications.filter((n) => n.uuid !== notification.uuid)); - setNotifications((notifications) => notifications.filter((n) => n.uuid !== notification.uuid)); - }} - notification={notification} - /> - )} - -
- {props.isToggled && ( -
- {notifications().length > 0 ? ( - - {(notification) => ( - { - const responseAction = await trpc.app.notifications.respond.mutate({ - uuid: notification.uuid, - responseType: type as "button", - value: value, - }); - - if (responseAction.action?.type === "navigate") { - navigate(responseAction.action.value); - } - - if (responseAction.action?.type === "reload") { - window.location.reload(); - } - - setNotifications((notifications) => notifications.filter((n) => n.uuid !== notification.uuid)); - setFlyoutNotifications((notifications) => notifications.filter((n) => n.uuid !== notification.uuid)); - }} - notification={notification} - /> - )} - - ) : ( -
- - Nothing here - - - - You have no notifications, when you have a notification it will show up here. - -
- )} -
- )} -
- ); -}; - -export default NavigationRailNotifications; +import NOTIFICATIONS_ICON from "@material-symbols/svg-700/outlined/notifications.svg"; +import NOTIFICATIONS_UNREAD_ICON from "@material-symbols/svg-700/outlined/notifications_unread.svg"; +import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.ts"; +import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.tsx"; +import UKIconButton from "@ewsgit/uikit-solid/src/components/iconButton/UKIconButton.tsx"; +import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.tsx"; +import { useNavigate } from "@solidjs/router"; +import { type Component, createSignal, For } from "solid-js"; +import type { WorkspacesNotification } from "../../../../../../../../systems/notifications"; +import trpc from "../../../../../../lib/trpc"; +import styles from "./NavigationRailNotifications.module.scss"; +import Notification from "./notification/Notification"; + +// const FLYOUT_NOTIFICATION_TIMEOUT = 10_000; + +const NavigationRailNotifications: Component<{ + expanded: boolean; + toggle: (text: "notifications") => void; + isToggled: boolean; +}> = (props) => { + const navigate = useNavigate(); + const [notifications, setNotifications] = createSignal([]); + const [flyoutNotifications, setFlyoutNotifications] = createSignal([]); + // let subscription: Unsubscribable; + // + // onMount(() => { + // subscription = trpc.app.notifications.listener.subscribe(undefined, { + // onData(data) { + // // @ts-ignore + // setFlyoutNotifications((not) => { + // return [...not, data]; + // }); + // + // // @ts-ignore + // setNotifications((not) => { + // return [...not, data]; + // }); + // + // // if not urgent, remove after FLYOUT_NOTIFICATION_TIMEOUT + // if (data.priority !== 2) { + // setTimeout(() => { + // setFlyoutNotifications((not) => not.filter((n) => n.uuid !== data.uuid)); + // }, FLYOUT_NOTIFICATION_TIMEOUT); + // } + // }, + // }); + // }); + // + // onCleanup(() => { + // subscription.unsubscribe(); + // }); + + return ( +
+ { + props.toggle("notifications"); + }} + /> +
+ + {(notification) => ( + { + if (type === "close") { + setFlyoutNotifications((notifications) => notifications.filter((n) => n.uuid !== notification.uuid)); + setNotifications((notifications) => notifications.filter((n) => n.uuid !== notification.uuid)); + + return; + } + + const responseAction = await trpc.app.notifications.respond.mutate({ + uuid: notification.uuid, + responseType: type, + value: value, + }); + + if (responseAction.action?.type === "navigate") { + navigate(responseAction.action.value); + } + + if (responseAction.action?.type === "reload") { + window.location.reload(); + } + + setFlyoutNotifications((notifications) => notifications.filter((n) => n.uuid !== notification.uuid)); + setNotifications((notifications) => notifications.filter((n) => n.uuid !== notification.uuid)); + }} + notification={notification} + /> + )} + +
+ {props.isToggled && ( +
+ {notifications().length > 0 ? ( + + {(notification) => ( + { + const responseAction = await trpc.app.notifications.respond.mutate({ + uuid: notification.uuid, + responseType: type as "button", + value: value, + }); + + if (responseAction.action?.type === "navigate") { + navigate(responseAction.action.value); + } + + if (responseAction.action?.type === "reload") { + window.location.reload(); + } + + setNotifications((notifications) => notifications.filter((n) => n.uuid !== notification.uuid)); + setFlyoutNotifications((notifications) => notifications.filter((n) => n.uuid !== notification.uuid)); + }} + notification={notification} + /> + )} + + ) : ( +
+ + Nothing here + + + + You have no notifications, when you have a notification it will show up here. + +
+ )} +
+ )} +
+ ); +}; + +export default NavigationRailNotifications; diff --git a/instance/src/web/src/pages/app/components/NavigationRail/components/navigationRailNotifications/notification/Notification.tsx b/instance/src/web/src/pages/app/components/NavigationRail/components/navigationRailNotifications/notification/Notification.tsx index 210d75c..ca631af 100644 --- a/instance/src/web/src/pages/app/components/NavigationRail/components/navigationRailNotifications/notification/Notification.tsx +++ b/instance/src/web/src/pages/app/components/NavigationRail/components/navigationRailNotifications/notification/Notification.tsx @@ -1,53 +1,53 @@ -import UKButton from "@ewsgit/uikit-solid/src/components/button/UKButton.jsx"; -import UKCard from "@ewsgit/uikit-solid/src/components/card/UKCard.jsx"; -import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.js"; -import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.jsx"; -import UKIcon from "@ewsgit/uikit-solid/src/components/icon/UKIcon.jsx"; -import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.jsx"; -import { type Component, For } from "solid-js"; -import type { WorkspacesNotification } from "../../../../../../../../../systems/notifications"; -import styles from "./Notification.module.scss"; - -const Notification: Component<{ - notification: WorkspacesNotification; - respond: (type: "button" | "close", value: string) => void; -}> = (props) => { - return ( - { - if (!props.notification.options?.buttons || props.notification.options.buttons.length === 0) { - props.respond("close", ""); - } - }} - > -
-
- {props.notification.content.icon && {props.notification.content.icon}} - - {props.notification.content.title} - -
- - - {props.notification.content.body} - -
- - {(btn) => ( - { - props.respond("button", btn.id); - }} - > - {btn.label} - - )} - -
- - ); -}; - -export default Notification; +import UKButton from "@ewsgit/uikit-solid/src/components/button/UKButton.tsx"; +import UKCard from "@ewsgit/uikit-solid/src/components/card/UKCard.tsx"; +import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.ts"; +import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.tsx"; +import UKIcon from "@ewsgit/uikit-solid/src/components/icon/UKIcon.tsx"; +import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.tsx"; +import { type Component, For } from "solid-js"; +import type { WorkspacesNotification } from "../../../../../../../../../systems/notifications"; +import styles from "./Notification.module.scss"; + +const Notification: Component<{ + notification: WorkspacesNotification; + respond: (type: "button" | "close", value: string) => void; +}> = (props) => { + return ( + { + if (!props.notification.options?.buttons || props.notification.options.buttons.length === 0) { + props.respond("close", ""); + } + }} + > +
+
+ {props.notification.content.icon && {props.notification.content.icon}} + + {props.notification.content.title} + +
+ + + {props.notification.content.body} + +
+ + {(btn) => ( + { + props.respond("button", btn.id); + }} + > + {btn.label} + + )} + +
+ + ); +}; + +export default Notification; diff --git a/instance/src/web/src/pages/userSelect/signup/stages/Password/Password.tsx b/instance/src/web/src/pages/userSelect/signup/stages/Password/Password.tsx index 6f63999..f95cfd7 100644 --- a/instance/src/web/src/pages/userSelect/signup/stages/Password/Password.tsx +++ b/instance/src/web/src/pages/userSelect/signup/stages/Password/Password.tsx @@ -1,123 +1,123 @@ -import UKButton from "@ewsgit/uikit-solid/src/components/button/UKButton.jsx"; -import UKCard from "@ewsgit/uikit-solid/src/components/card/UKCard.jsx"; -import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.js"; -import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.jsx"; -import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.jsx"; -import UKTextField from "@ewsgit/uikit-solid/src/components/textField/UKTextField.jsx"; -import type { Accessor, Component, Resource } from "solid-js"; -import { UserSelectStage } from "../../Signup"; -import modalStyles from "../../Signup.module.scss"; -import Requirement from "./components/Requirement/Requirement"; -import styles from "./Password.module.scss"; - -const Password: Component<{ - password: Accessor; - setPassword(password: string): void; - confirmedPassword: Accessor; - setConfirmedPassword(password: string): void; - setStage(stage: UserSelectStage): void; - requirements: Resource<{ - email: boolean; - passwordMinimumLength?: number; - passwordContains?: { - minimumLowercase?: number; - minimumNumbers?: number; - minimumSymbols?: number; - minimumUppercase?: number; - }; - }>; -}> = (props) => { - return ( - - - Create a strong password - - - - Password Requirements - -
- (props.requirements()?.passwordMinimumLength || 0)} - label={`Is at least ${props.requirements()?.passwordMinimumLength} characters long`} - /> - = (props.requirements()?.passwordContains?.minimumLowercase || 0)} - label={`Contains at least ${props.requirements()?.passwordContains?.minimumLowercase} lowercase letter`} - /> - = (props.requirements()?.passwordContains?.minimumUppercase || 0)} - label={`Contains at least ${props.requirements()?.passwordContains?.minimumUppercase} uppercase letter`} - /> - = (props.requirements()?.passwordContains?.minimumNumbers || 0)} - label={`Contains at least ${props.requirements()?.passwordContains?.minimumNumbers} number`} - /> - = (props.requirements()?.passwordContains?.minimumSymbols || 0)} - label={`Contains at least ${props.requirements()?.passwordContains?.minimumSymbols} special character`} - /> -
- - - -
- { - if (props.requirements()?.email) { - props.setStage(UserSelectStage.VerifyEmail); - } else { - props.setStage(UserSelectStage.Username); - } - }} - color={"tonal"} - > - Back - - (props.requirements()?.passwordMinimumLength || 0) && - (props.password()?.match(/[a-z]/g)?.length || 0) >= (props.requirements()?.passwordContains?.minimumLowercase || 0) && - (props.password()?.match(/[A-Z]/g)?.length || 0) >= (props.requirements()?.passwordContains?.minimumUppercase || 0) && - (props.password()?.match(/[0-9]/g)?.length || 0) >= (props.requirements()?.passwordContains?.minimumNumbers || 0) - ) - } - onClick={() => { - props.setStage(UserSelectStage.Profile); - }} - color={"filled"} - > - Continue - -
- - ); -}; - -export default Password; +import UKButton from "@ewsgit/uikit-solid/src/components/button/UKButton.tsx"; +import UKCard from "@ewsgit/uikit-solid/src/components/card/UKCard.tsx"; +import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.ts"; +import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.tsx"; +import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.tsx"; +import UKTextField from "@ewsgit/uikit-solid/src/components/textField/UKTextField.tsx"; +import type { Accessor, Component, Resource } from "solid-js"; +import { UserSelectStage } from "../../Signup"; +import modalStyles from "../../Signup.module.scss"; +import Requirement from "./components/Requirement/Requirement"; +import styles from "./Password.module.scss"; + +const Password: Component<{ + password: Accessor; + setPassword(password: string): void; + confirmedPassword: Accessor; + setConfirmedPassword(password: string): void; + setStage(stage: UserSelectStage): void; + requirements: Resource<{ + email: boolean; + passwordMinimumLength?: number; + passwordContains?: { + minimumLowercase?: number; + minimumNumbers?: number; + minimumSymbols?: number; + minimumUppercase?: number; + }; + }>; +}> = (props) => { + return ( + + + Create a strong password + + + + Password Requirements + +
+ (props.requirements()?.passwordMinimumLength || 0)} + label={`Is at least ${props.requirements()?.passwordMinimumLength} characters long`} + /> + = (props.requirements()?.passwordContains?.minimumLowercase || 0)} + label={`Contains at least ${props.requirements()?.passwordContains?.minimumLowercase} lowercase letter`} + /> + = (props.requirements()?.passwordContains?.minimumUppercase || 0)} + label={`Contains at least ${props.requirements()?.passwordContains?.minimumUppercase} uppercase letter`} + /> + = (props.requirements()?.passwordContains?.minimumNumbers || 0)} + label={`Contains at least ${props.requirements()?.passwordContains?.minimumNumbers} number`} + /> + = (props.requirements()?.passwordContains?.minimumSymbols || 0)} + label={`Contains at least ${props.requirements()?.passwordContains?.minimumSymbols} special character`} + /> +
+ + + +
+ { + if (props.requirements()?.email) { + props.setStage(UserSelectStage.VerifyEmail); + } else { + props.setStage(UserSelectStage.Username); + } + }} + color={"tonal"} + > + Back + + (props.requirements()?.passwordMinimumLength || 0) && + (props.password()?.match(/[a-z]/g)?.length || 0) >= (props.requirements()?.passwordContains?.minimumLowercase || 0) && + (props.password()?.match(/[A-Z]/g)?.length || 0) >= (props.requirements()?.passwordContains?.minimumUppercase || 0) && + (props.password()?.match(/[0-9]/g)?.length || 0) >= (props.requirements()?.passwordContains?.minimumNumbers || 0) + ) + } + onClick={() => { + props.setStage(UserSelectStage.Profile); + }} + color={"filled"} + > + Continue + +
+ + ); +}; + +export default Password; diff --git a/instance/src/web/src/pages/userSelect/signup/stages/Profile/Profile.tsx b/instance/src/web/src/pages/userSelect/signup/stages/Profile/Profile.tsx index ea1331d..5600823 100644 --- a/instance/src/web/src/pages/userSelect/signup/stages/Profile/Profile.tsx +++ b/instance/src/web/src/pages/userSelect/signup/stages/Profile/Profile.tsx @@ -1,91 +1,91 @@ -import UKAvatar from "@ewsgit/uikit-solid/src/components/avatar/UKAvatar.jsx"; -import UKButton from "@ewsgit/uikit-solid/src/components/button/UKButton.jsx"; -import UKCard from "@ewsgit/uikit-solid/src/components/card/UKCard.jsx"; -import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.js"; -import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.jsx"; -import UKSearchableDropdownMenu from "@ewsgit/uikit-solid/src/components/searchableDropdownMenu/UKSearchableDropdownMenu.jsx"; -import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.jsx"; -import UKTextField from "@ewsgit/uikit-solid/src/components/textField/UKTextField.jsx"; -import clsx from "clsx"; -import type { Accessor, Component } from "solid-js"; -import { UserSelectStage } from "../../Signup"; -import modalStyles from "../../Signup.module.scss"; -import styles from "./Profile.module.scss"; - -const Profile: Component<{ - username: Accessor; - displayName: Accessor; - gender: Accessor; - setGender(gender: string): void; - bio: Accessor; - setBio(bio: string): void; - setDisplayName(displayName: string): void; - setStage(stage: UserSelectStage): void; -}> = (props) => { - return ( - - - Setup Profile - - - - - {props.displayName() || props.username()} - - - {`@${props.username()}`} - - - {props.gender() === "female" ? "she/her" : props.gender() === "male" ? "he/him" : "they/them"} - - - props.setGender(val.toLowerCase())} - items={[ - { - id: "female", - type: "button", - label: "Female", - }, - { - id: "male", - type: "button", - label: "Male", - }, - { - id: "other", - type: "button", - label: "Other", - }, - ]} - /> - -
- { - if (props.displayName() === "") { - props.setDisplayName(props.username()); - } - - props.setStage(UserSelectStage.TermsOfUse); - }} - color={"filled"} - > - Continue - -
- - ); -}; - -export default Profile; +import UKAvatar from "@ewsgit/uikit-solid/src/components/avatar/UKAvatar.tsx"; +import UKButton from "@ewsgit/uikit-solid/src/components/button/UKButton.tsx"; +import UKCard from "@ewsgit/uikit-solid/src/components/card/UKCard.tsx"; +import { DividerDirection } from "@ewsgit/uikit-solid/src/components/divider/lib/direction.ts"; +import UKDivider from "@ewsgit/uikit-solid/src/components/divider/UKDivider.tsx"; +import UKSearchableDropdownMenu from "@ewsgit/uikit-solid/src/components/searchableDropdownMenu/UKSearchableDropdownMenu.tsx"; +import UKText from "@ewsgit/uikit-solid/src/components/text/UKText.tsx"; +import UKTextField from "@ewsgit/uikit-solid/src/components/textField/UKTextField.tsx"; +import clsx from "clsx"; +import type { Accessor, Component } from "solid-js"; +import { UserSelectStage } from "../../Signup"; +import modalStyles from "../../Signup.module.scss"; +import styles from "./Profile.module.scss"; + +const Profile: Component<{ + username: Accessor; + displayName: Accessor; + gender: Accessor; + setGender(gender: string): void; + bio: Accessor; + setBio(bio: string): void; + setDisplayName(displayName: string): void; + setStage(stage: UserSelectStage): void; +}> = (props) => { + return ( + + + Setup Profile + + + + + {props.displayName() || props.username()} + + + {`@${props.username()}`} + + + {props.gender() === "female" ? "she/her" : props.gender() === "male" ? "he/him" : "they/them"} + + + props.setGender(val.toLowerCase())} + items={[ + { + id: "female", + type: "button", + label: "Female", + }, + { + id: "male", + type: "button", + label: "Male", + }, + { + id: "other", + type: "button", + label: "Other", + }, + ]} + /> + +
+ { + if (props.displayName() === "") { + props.setDisplayName(props.username()); + } + + props.setStage(UserSelectStage.TermsOfUse); + }} + color={"filled"} + > + Continue + +
+ + ); +}; + +export default Profile;