diff --git a/src/components/Board/Board.tsx b/src/components/Board/Board.tsx new file mode 100644 index 000000000..76e7731a7 --- /dev/null +++ b/src/components/Board/Board.tsx @@ -0,0 +1,11 @@ +import { BoardView } from './BoardView'; +import { MobileRibbons } from './Sections/Sidebar/MobileRibbon/MobileRibbon'; + +export const Board = () => { + return ( + <> + + + + ); +}; diff --git a/src/components/Dashboard/Views/DashboardView.tsx b/src/components/Board/BoardView.tsx similarity index 89% rename from src/components/Dashboard/Views/DashboardView.tsx rename to src/components/Board/BoardView.tsx index 93e161949..2c3c4c891 100644 --- a/src/components/Dashboard/Views/DashboardView.tsx +++ b/src/components/Board/BoardView.tsx @@ -10,10 +10,10 @@ import { import { useResize } from '~/hooks/use-resize'; import { useScreenLargerThan } from '~/hooks/useScreenLargerThan'; -import { BoardCategorySection } from '../../Board/Sections/CategorySection'; -import { BoardEmptySection } from '../../Board/Sections/EmptySection'; -import { DashboardSidebar } from '../Wrappers/Sidebar/Sidebar'; -import { useGridstackStore } from '../Wrappers/gridstack/store'; +import { BoardCategorySection } from './Sections/Category/CategorySection'; +import { BoardEmptySection } from './Sections/EmptySection'; +import { DashboardSidebar } from './Sections/Sidebar/SidebarSection'; +import { useGridstackStore } from './gridstack/store'; export const BoardView = () => { const boardName = useRequiredBoard().name; @@ -43,6 +43,7 @@ export const BoardView = () => { visible={!isReady} transitionDuration={500} loaderProps={{ size: 'lg', variant: 'bars' }} + h="calc(100dvh - var(--mantine-header-height))" /> { style={{ visibility: isReady ? 'visible' : 'hidden' }} > {sidebarsVisible.left && leftSidebarSection ? ( - + ) : null} @@ -70,7 +71,7 @@ export const BoardView = () => { {sidebarsVisible.right && rightSidebarSection ? ( - + ) : null} diff --git a/src/components/Dashboard/Tiles/Apps/AppTile.tsx b/src/components/Board/Items/App/AppItem.tsx similarity index 85% rename from src/components/Dashboard/Tiles/Apps/AppTile.tsx rename to src/components/Board/Items/App/AppItem.tsx index 7253aee61..0cb5a3085 100644 --- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx +++ b/src/components/Board/Items/App/AppItem.tsx @@ -4,14 +4,14 @@ import { motion } from 'framer-motion'; import Link from 'next/link'; import { AppItem } from '~/components/Board/context'; -import { useEditModeStore } from '../../Views/useEditModeStore'; -import { HomarrCardWrapper } from '../HomarrCardWrapper'; -import { BaseTileProps } from '../type'; +import { useEditModeStore } from '../../useEditModeStore'; +import { ItemWrapper } from '../ItemWrapper'; import { AppMenu } from './AppMenu'; import { AppPing } from './AppPing'; -interface AppTileProps extends BaseTileProps { +interface AppTileProps { app: AppItem; + className?: string; } const namePositions = { @@ -21,7 +21,7 @@ const namePositions = { bottom: 'column-reverse', }; -export const AppTile = ({ className, app }: AppTileProps) => { +export const BoardAppItem = ({ className, app }: AppTileProps) => { const isEditMode = useEditModeStore((x) => x.enabled); const { cx, classes } = useStyles(); const { colorScheme } = useMantineTheme(); @@ -81,7 +81,7 @@ export const AppTile = ({ className, app }: AppTileProps) => { const url = app.externalUrl ? app.externalUrl : app.internalUrl; return ( - + {!url || isEditMode ? ( { )} - + ); }; -const useStyles = createStyles((theme, _params, getRef) => ({ +const useStyles = createStyles(() => ({ base: { display: 'flex', alignItems: 'center', @@ -133,11 +133,3 @@ const useStyles = createStyles((theme, _params, getRef) => ({ gap: 4, }, })); - -export const appTileDefinition = { - component: AppTile, - minWidth: 1, - minHeight: 1, - maxWidth: 12, - maxHeight: 12, -}; diff --git a/src/components/Dashboard/Tiles/Apps/AppMenu.tsx b/src/components/Board/Items/App/AppMenu.tsx similarity index 93% rename from src/components/Dashboard/Tiles/Apps/AppMenu.tsx rename to src/components/Board/Items/App/AppMenu.tsx index 580ab9552..b84b0bb15 100644 --- a/src/components/Dashboard/Tiles/Apps/AppMenu.tsx +++ b/src/components/Board/Items/App/AppMenu.tsx @@ -1,9 +1,9 @@ +import { openRemoveItemModal, useItemActions } from '~/components/Board/Items/item-actions'; import { type AppItem, useRequiredBoard } from '~/components/Board/context'; import { useResizeGridItem } from '~/components/Board/gridstack/useResizeGridItem'; -import { openRemoveItemModal, useItemActions } from '~/components/Board/item-actions'; import { openContextModalGeneric } from '~/tools/mantineModalManagerExtensions'; -import { GenericTileMenu } from '../GenericTileMenu'; +import { CommonItemMenu } from '../CommonItemMenu'; interface TileMenuProps { app: AppItem; @@ -58,7 +58,7 @@ export const AppMenu = ({ app }: TileMenuProps) => { }; return ( - AppType>; @@ -51,7 +51,7 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => { {t('behaviour.customProtocolWarning')} - )} + )} ); diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx b/src/components/Board/Items/App/Edit/IntegrationTab/InputElements/GenericSecretInput.tsx similarity index 100% rename from src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx rename to src/components/Board/Items/App/Edit/IntegrationTab/InputElements/GenericSecretInput.tsx diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx b/src/components/Board/Items/App/Edit/IntegrationTab/InputElements/IntegrationSelector.tsx similarity index 100% rename from src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx rename to src/components/Board/Items/App/Edit/IntegrationTab/InputElements/IntegrationSelector.tsx diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx b/src/components/Board/Items/App/Edit/IntegrationTab/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx similarity index 100% rename from src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx rename to src/components/Board/Items/App/Edit/IntegrationTab/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx b/src/components/Board/Items/App/Edit/IntegrationTab/IntegrationTab.tsx similarity index 85% rename from src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx rename to src/components/Board/Items/App/Edit/IntegrationTab/IntegrationTab.tsx index 5b7fa5bd1..188ad9a9f 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx +++ b/src/components/Board/Items/App/Edit/IntegrationTab/IntegrationTab.tsx @@ -2,10 +2,10 @@ import { Alert, Divider, Tabs, Text } from '@mantine/core'; import { UseFormReturnType } from '@mantine/form'; import { IconAlertTriangle } from '@tabler/icons-react'; import { Trans, useTranslation } from 'next-i18next'; - import { AppType } from '~/types/app'; -import { IntegrationSelector } from './Components/InputElements/IntegrationSelector'; -import { IntegrationOptionsRenderer } from './Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer'; + +import { IntegrationSelector } from './InputElements/IntegrationSelector'; +import { IntegrationOptionsRenderer } from './IntegrationOptionsRenderer/IntegrationOptionsRenderer'; interface IntegrationTabProps { form: UseFormReturnType AppType>; diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx b/src/components/Board/Items/App/Edit/NetworkTab.tsx similarity index 100% rename from src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx rename to src/components/Board/Items/App/Edit/NetworkTab.tsx diff --git a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx b/src/components/Board/Items/App/EditAppModal.tsx similarity index 94% rename from src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx rename to src/components/Board/Items/App/EditAppModal.tsx index c447115d6..fc608564d 100644 --- a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx +++ b/src/components/Board/Items/App/EditAppModal.tsx @@ -12,18 +12,17 @@ import { } from '@tabler/icons-react'; import { useTranslation } from 'next-i18next'; import { useState } from 'react'; - import { useConfigContext } from '~/config/provider'; import { useConfigStore } from '~/config/store'; import { AppType } from '~/types/app'; + import { DebouncedImage } from '../../../IconSelector/DebouncedImage'; -import { useEditModeStore } from '../../Views/useEditModeStore'; -import { AppearanceTab } from './Tabs/AppereanceTab/AppereanceTab'; -import { BehaviourTab } from './Tabs/BehaviourTab/BehaviourTab'; -import { GeneralTab } from './Tabs/GeneralTab/GeneralTab'; -import { IntegrationTab } from './Tabs/IntegrationTab/IntegrationTab'; -import { NetworkTab } from './Tabs/NetworkTab/NetworkTab'; -import { EditAppModalTab } from './Tabs/type'; +import { useEditModeStore } from '../../useEditModeStore'; +import { AppearanceTab } from './Edit/AppereanceTab'; +import { BehaviourTab } from './Edit/BehaviourTab'; +import { GeneralTab } from './Edit/GeneralTab'; +import { IntegrationTab } from './Edit/IntegrationTab/IntegrationTab'; +import { NetworkTab } from './Edit/NetworkTab'; const appUrlRegex = '(https?://(?:www.|(?!www))\\[?[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\\]?.[^\\s]{2,}|www.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^\\s]{2,}|https?://(?:www.|(?!www))\\[?[a-zA-Z0-9]+\\]?.[^\\s]{2,}|www.[a-zA-Z0-9]+.[^\\s]{2,})'; @@ -240,3 +239,5 @@ const SaveButton = ({ formIsValid }: { formIsValid: boolean }) => { ); }; + +export type EditAppModalTab = 'general' | 'behaviour' | 'network' | 'appereance' | 'integration'; diff --git a/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx b/src/components/Board/Items/CommonChangePositionModal.tsx similarity index 96% rename from src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx rename to src/components/Board/Items/CommonChangePositionModal.tsx index c559df621..f6168f85b 100644 --- a/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx +++ b/src/components/Board/Items/CommonChangePositionModal.tsx @@ -2,7 +2,7 @@ import { Button, Flex, Grid, NumberInput, Select, SelectItem } from '@mantine/co import { useForm } from '@mantine/form'; import { useTranslation } from 'next-i18next'; -interface ChangePositionModalProps { +interface CommonChangePositionModalProps { initialX?: number; initialY?: number; initialWidth?: number; @@ -13,7 +13,7 @@ interface ChangePositionModalProps { onCancel: () => void; } -export const ChangePositionModal = ({ +export const CommonChangePositionModal = ({ initialX, initialY, initialWidth, @@ -22,7 +22,7 @@ export const ChangePositionModal = ({ heightData, onCancel, onSubmit, -}: ChangePositionModalProps) => { +}: CommonChangePositionModalProps) => { const form = useForm({ initialValues: { x: initialX ?? null, diff --git a/src/components/Dashboard/Tiles/GenericTileMenu.tsx b/src/components/Board/Items/CommonItemMenu.tsx similarity index 83% rename from src/components/Dashboard/Tiles/GenericTileMenu.tsx rename to src/components/Board/Items/CommonItemMenu.tsx index 6984b84dc..06b2c6d7b 100644 --- a/src/components/Dashboard/Tiles/GenericTileMenu.tsx +++ b/src/components/Board/Items/CommonItemMenu.tsx @@ -2,24 +2,21 @@ import { ActionIcon, Menu } from '@mantine/core'; import { IconLayoutKanban, IconPencil, IconSettings, IconTrash } from '@tabler/icons-react'; import { useTranslation } from 'next-i18next'; -import { useColorTheme } from '~/tools/color'; -import { useEditModeStore } from '../Views/useEditModeStore'; +import { useEditModeStore } from '../useEditModeStore'; -interface GenericTileMenuProps { +interface CommonItemMenuProps { handleClickEdit: () => void; handleClickChangePosition: () => void; handleClickDelete: () => void; displayEdit: boolean; } -export const GenericTileMenu = ( - { - handleClickEdit, - handleClickChangePosition, - handleClickDelete, - displayEdit, - }: GenericTileMenuProps -) => { +export const CommonItemMenu = ({ + handleClickEdit, + handleClickChangePosition, + handleClickDelete, + displayEdit, +}: CommonItemMenuProps) => { const { t } = useTranslation('common'); const isEditMode = useEditModeStore((x) => x.enabled); diff --git a/src/components/Dashboard/Tiles/TileWrapper.tsx b/src/components/Board/Items/GridstackItemWrapper.tsx similarity index 90% rename from src/components/Dashboard/Tiles/TileWrapper.tsx rename to src/components/Board/Items/GridstackItemWrapper.tsx index 9c81c2c1d..5922e517e 100644 --- a/src/components/Dashboard/Tiles/TileWrapper.tsx +++ b/src/components/Board/Items/GridstackItemWrapper.tsx @@ -1,9 +1,9 @@ /* eslint-disable react/no-unknown-property */ import { GridItemHTMLElement } from 'fily-publish-gridstack'; import { ReactNode, RefObject } from 'react'; -import { GridItemProvider } from '~/components/Board/item/context'; +import { GridItemProvider } from '~/components/Board/Items/context'; -interface GridstackTileWrapperProps { +interface GridstackItemWrapperProps { id: string; type: 'app' | 'widget'; x?: number; @@ -18,7 +18,7 @@ interface GridstackTileWrapperProps { children: ReactNode; } -export const GridstackTileWrapper = ({ +export const GridstackItemWrapper = ({ id, type, x, @@ -31,7 +31,7 @@ export const GridstackTileWrapper = ({ maxHeight, children, itemRef, -}: GridstackTileWrapperProps) => { +}: GridstackItemWrapperProps) => { const locationProperties = useLocationProperties(x, y); const normalizedWidth = width ?? minWidth; const normalizedHeight = height ?? minHeight; diff --git a/src/components/Dashboard/Tiles/HomarrCardWrapper.tsx b/src/components/Board/Items/ItemWrapper.tsx similarity index 63% rename from src/components/Dashboard/Tiles/HomarrCardWrapper.tsx rename to src/components/Board/Items/ItemWrapper.tsx index 89b456c23..76a6442ed 100644 --- a/src/components/Dashboard/Tiles/HomarrCardWrapper.tsx +++ b/src/components/Board/Items/ItemWrapper.tsx @@ -2,19 +2,17 @@ import { Card, CardProps } from '@mantine/core'; import { ReactNode } from 'react'; import { useCardStyles } from '../../layout/Common/useCardStyles'; -import { useEditModeStore } from '../Views/useEditModeStore'; +import { useEditModeStore } from '../useEditModeStore'; -interface HomarrCardWrapperProps extends CardProps { +interface ItemWrapperProps extends CardProps { children: ReactNode; - isCategory?: boolean; } -export const HomarrCardWrapper = ({ ...props }: HomarrCardWrapperProps) => { - const { isCategory = false, ...restProps } = props; +export const ItemWrapper = ({ ...restProps }: ItemWrapperProps) => { const { cx, classes: { card: cardClass }, - } = useCardStyles(isCategory); + } = useCardStyles(false); const isEditMode = useEditModeStore((x) => x.enabled); return ( { - const { t } = useTranslation(`modules/${type}`); +export const WidgetsMenu = ({ widget }: WidgetsMenuProps) => { + const { t } = useTranslation(`modules/${widget.sort}`); const board = useRequiredBoard(); const wrapperColumnCount = useWrapperColumnCount(); const resizeGridItem = useResizeGridItem(); @@ -58,7 +57,7 @@ export const WidgetsMenu = ({ type, widget }: WidgetsMenuProps) => { title: {t('descriptor.settings.title')}, innerProps: { widgetId: widget.id, - widgetType: type, + widgetType: widget.sort, options: widget.options, boardName: board.name, widgetOptions: widgetDefinitionObject.options, @@ -68,7 +67,7 @@ export const WidgetsMenu = ({ type, widget }: WidgetsMenuProps) => { }; return ( - - + diff --git a/src/components/Board/Sections/EmptySection.tsx b/src/components/Board/Sections/EmptySection.tsx index 4eb96a363..6c3a7329a 100644 --- a/src/components/Board/Sections/EmptySection.tsx +++ b/src/components/Board/Sections/EmptySection.tsx @@ -1,9 +1,9 @@ import { EmptySection } from '~/components/Board/context'; import { GridstackProvider } from '~/components/Board/gridstack/context'; -import { useEditModeStore } from '../../Dashboard/Views/useEditModeStore'; -import { WrapperContent } from '../../Dashboard/Wrappers/WrapperContent'; -import { useGridstack } from '../../Dashboard/Wrappers/gridstack/use-gridstack'; +import { useGridstack } from '../gridstack/use-gridstack'; +import { useEditModeStore } from '../useEditModeStore'; +import { SectionContent } from './SectionContent'; interface EmptySectionWrapperProps { section: EmptySection; @@ -28,7 +28,7 @@ export const BoardEmptySection = ({ section }: EmptySectionWrapperProps) => { ref={refs.wrapper} > {section.items.length === 0 && } - + ); diff --git a/src/components/Dashboard/Wrappers/WrapperContent.tsx b/src/components/Board/Sections/SectionContent.tsx similarity index 53% rename from src/components/Dashboard/Wrappers/WrapperContent.tsx rename to src/components/Board/Sections/SectionContent.tsx index 1c800cb3d..9f09e9f70 100644 --- a/src/components/Dashboard/Wrappers/WrapperContent.tsx +++ b/src/components/Board/Sections/SectionContent.tsx @@ -1,16 +1,13 @@ -import { GridItemHTMLElement, GridStack } from 'fily-publish-gridstack'; +import { GridItemHTMLElement } from 'fily-publish-gridstack'; import { MutableRefObject, RefObject, useMemo } from 'react'; import { AppItem, Item, WidgetItem } from '~/components/Board/context'; -import { AppType } from '~/types/app'; import { WidgetWrapper } from '~/widgets/WidgetWrapper'; -import { IWidget, IWidgetDefinition } from '~/widgets/widgets'; import Widgets from '../../../widgets'; -import { appTileDefinition } from '../Tiles/Apps/AppTile'; -import { GridstackTileWrapper } from '../Tiles/TileWrapper'; -import { useGridstackStore } from './gridstack/store'; +import { BoardAppItem } from '../Items/App/AppItem'; +import { GridstackItemWrapper } from '../Items/GridstackItemWrapper'; -interface WrapperContentProps { +interface SectionContentProps { items: Item[]; refs: { wrapper: RefObject; @@ -18,36 +15,36 @@ interface WrapperContentProps { }; } -export function WrapperContent({ items, refs }: WrapperContentProps) { +export function SectionContent({ items, refs }: SectionContentProps) { const apps = useMemo(() => items.filter((x): x is AppItem => x.type === 'app'), [items]); const widgets = useMemo(() => items.filter((x): x is WidgetItem => x.type === 'widget'), [items]); return ( <> - {apps?.map((app) => { - const { component: TileComponent, ...tile } = appTileDefinition; - return ( - - - - ); - })} + {apps?.map((app) => ( + + + + ))} {widgets.map((widget) => { const definition = Widgets[widget.sort]; if (!definition) return null; return ( - - + ); })} diff --git a/src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx b/src/components/Board/Sections/Sidebar/MobileRibbon/MobileRibbon.tsx similarity index 100% rename from src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx rename to src/components/Board/Sections/Sidebar/MobileRibbon/MobileRibbon.tsx diff --git a/src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx b/src/components/Board/Sections/Sidebar/MobileRibbon/MobileRibbonSidebarDrawer.tsx similarity index 87% rename from src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx rename to src/components/Board/Sections/Sidebar/MobileRibbon/MobileRibbonSidebarDrawer.tsx index c1c934140..17a8f9a24 100644 --- a/src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx +++ b/src/components/Board/Sections/Sidebar/MobileRibbon/MobileRibbonSidebarDrawer.tsx @@ -2,7 +2,7 @@ import { Drawer, Title } from '@mantine/core'; import { useTranslation } from 'next-i18next'; import { SidebarSection } from '~/components/Board/context'; -import { DashboardSidebar } from '../../Wrappers/Sidebar/Sidebar'; +import { DashboardSidebar } from '../SidebarSection'; interface MobileRibbonSidebarDrawerProps { onClose: () => void; @@ -32,7 +32,7 @@ export const MobileRibbonSidebarDrawer = ({ transitionProps={{ transition: `slide-${section.position === 'right' ? 'left' : 'right'}` }} {...props} > - + ); }; diff --git a/src/components/Board/Sections/Sidebar/SidebarSection.tsx b/src/components/Board/Sections/Sidebar/SidebarSection.tsx new file mode 100644 index 000000000..7fe7cbda1 --- /dev/null +++ b/src/components/Board/Sections/Sidebar/SidebarSection.tsx @@ -0,0 +1,46 @@ +import { Card } from '@mantine/core'; +import { RefObject } from 'react'; +import { SidebarSection } from '~/components/Board/context'; + +import { useCardStyles } from '../../../layout/Common/useCardStyles'; +import { useGridstack } from '../../gridstack/use-gridstack'; +import { SectionContent } from '../SectionContent'; + +interface DashboardSidebarProps extends DashboardSidebarInnerProps { + section: SidebarSection; +} +// TODO: Move mobile ribons in this directory too! +export const DashboardSidebar = ({ section }: DashboardSidebarProps) => { + const { + classes: { card: cardClass }, + } = useCardStyles(true); + const { refs } = useGridstack({ section }); + + const minRow = useMinRowForFullHeight(refs.wrapper); + + return ( + +
+ +
{' '} + + ); +}; + +interface DashboardSidebarInnerProps { + section: SidebarSection; +} + +const useMinRowForFullHeight = (wrapperRef: RefObject) => + wrapperRef.current ? Math.floor(wrapperRef.current!.offsetHeight / 128) : 2; diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx b/src/components/Board/SelectElement/Overview/AvailableElementsOverview.tsx similarity index 100% rename from src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx rename to src/components/Board/SelectElement/Overview/AvailableElementsOverview.tsx diff --git a/src/components/Dashboard/Modals/SelectElement/SelectElementModal.tsx b/src/components/Board/SelectElement/SelectElementModal.tsx similarity index 75% rename from src/components/Dashboard/Modals/SelectElement/SelectElementModal.tsx rename to src/components/Board/SelectElement/SelectElementModal.tsx index fca0a4eed..ca0852663 100644 --- a/src/components/Dashboard/Modals/SelectElement/SelectElementModal.tsx +++ b/src/components/Board/SelectElement/SelectElementModal.tsx @@ -1,9 +1,9 @@ import { ContextModalProps } from '@mantine/modals'; import { useState } from 'react'; -import { AvailableElementTypes } from './Components/Overview/AvailableElementsOverview'; -import { AvailableStaticTypes } from './Components/StaticElementsTab/AvailableStaticElementsTab'; -import { AvailableIntegrationElements } from './Components/WidgetsTab/AvailableWidgetsTab'; +import { AvailableElementTypes } from './Overview/AvailableElementsOverview'; +import { AvailableStaticTypes } from './StaticElementsTab/AvailableStaticElementsTab'; +import { AvailableIntegrationElements } from './WidgetsTab/AvailableWidgetsTab'; export const SelectElementModal = ({ context, id }: ContextModalProps) => { const [activeTab, setActiveTab] = useState(); diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx b/src/components/Board/SelectElement/Shared/GenericElementType.tsx similarity index 100% rename from src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx rename to src/components/Board/SelectElement/Shared/GenericElementType.tsx diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Shared/SelectorBackArrow.tsx b/src/components/Board/SelectElement/Shared/SelectorBackArrow.tsx similarity index 100% rename from src/components/Dashboard/Modals/SelectElement/Components/Shared/SelectorBackArrow.tsx rename to src/components/Board/SelectElement/Shared/SelectorBackArrow.tsx diff --git a/src/components/Dashboard/Modals/SelectElement/Components/Shared/styles.tsx b/src/components/Board/SelectElement/Shared/styles.tsx similarity index 100% rename from src/components/Dashboard/Modals/SelectElement/Components/Shared/styles.tsx rename to src/components/Board/SelectElement/Shared/styles.tsx diff --git a/src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx b/src/components/Board/SelectElement/StaticElementsTab/AvailableStaticElementsTab.tsx similarity index 100% rename from src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx rename to src/components/Board/SelectElement/StaticElementsTab/AvailableStaticElementsTab.tsx diff --git a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx b/src/components/Board/SelectElement/WidgetsTab/AvailableWidgetsTab.tsx similarity index 94% rename from src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx rename to src/components/Board/SelectElement/WidgetsTab/AvailableWidgetsTab.tsx index d013567a3..d1de06477 100644 --- a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx +++ b/src/components/Board/SelectElement/WidgetsTab/AvailableWidgetsTab.tsx @@ -1,7 +1,7 @@ import { Grid, Text } from '@mantine/core'; import { useTranslation } from 'next-i18next'; -import widgets from '../../../../../../widgets'; +import widgets from '../../../../widgets'; import { SelectorBackArrow } from '../Shared/SelectorBackArrow'; import { WidgetElementType } from './WidgetElementType'; diff --git a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx b/src/components/Board/SelectElement/WidgetsTab/WidgetElementType.tsx similarity index 97% rename from src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx rename to src/components/Board/SelectElement/WidgetsTab/WidgetElementType.tsx index 6a783ba12..8dac04029 100644 --- a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx +++ b/src/components/Board/SelectElement/WidgetsTab/WidgetElementType.tsx @@ -3,11 +3,11 @@ import { showNotification } from '@mantine/notifications'; import { Icon, IconChecks } from '@tabler/icons-react'; import { useTranslation } from 'next-i18next'; import { v4 as uuidv4 } from 'uuid'; - import { useConfigContext } from '~/config/provider'; import { useConfigStore } from '~/config/store'; import { IWidget, IWidgetDefinition } from '~/widgets/widgets'; -import { useEditModeStore } from '../../../../Views/useEditModeStore'; + +import { useEditModeStore } from '../../useEditModeStore'; import { GenericAvailableElementType } from '../Shared/GenericElementType'; interface WidgetElementTypeProps { diff --git a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts b/src/components/Board/gridstack/init-gridstack.ts similarity index 100% rename from src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts rename to src/components/Board/gridstack/init-gridstack.ts diff --git a/src/components/Dashboard/Wrappers/gridstack/store.tsx b/src/components/Board/gridstack/store.tsx similarity index 100% rename from src/components/Dashboard/Wrappers/gridstack/store.tsx rename to src/components/Board/gridstack/store.tsx diff --git a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts b/src/components/Board/gridstack/use-gridstack.ts similarity index 97% rename from src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts rename to src/components/Board/gridstack/use-gridstack.ts index ed1ced9be..0f6a9278d 100644 --- a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts +++ b/src/components/Board/gridstack/use-gridstack.ts @@ -7,10 +7,10 @@ import { useMemo, useRef, } from 'react'; +import { useItemActions } from '~/components/Board/Items/item-actions'; import { type Section, useRequiredBoard } from '~/components/Board/context'; -import { useItemActions } from '~/components/Board/item-actions'; -import { useEditModeStore } from '../../Views/useEditModeStore'; +import { useEditModeStore } from '../useEditModeStore'; import { initializeGridstack } from './init-gridstack'; import { useGridstackStore, useWrapperColumnCount } from './store'; diff --git a/src/components/Board/gridstack/useResizeGridItem.ts b/src/components/Board/gridstack/useResizeGridItem.ts index 55421273c..78d5e0de4 100644 --- a/src/components/Board/gridstack/useResizeGridItem.ts +++ b/src/components/Board/gridstack/useResizeGridItem.ts @@ -1,4 +1,4 @@ -import { useGridItemRef } from '../item/context'; +import { useGridItemRef } from '../Items/context'; import { useGridstackRef } from './context'; type ResizeGridItemProps = { diff --git a/src/components/Dashboard/Views/useEditModeStore.ts b/src/components/Board/useEditModeStore.ts similarity index 100% rename from src/components/Dashboard/Views/useEditModeStore.ts rename to src/components/Board/useEditModeStore.ts diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx deleted file mode 100644 index 273959309..000000000 --- a/src/components/Dashboard/Dashboard.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { MobileRibbons } from './Mobile/Ribbon/MobileRibbon'; -import { BoardView } from './Views/DashboardView'; - -export const Board = () => { - return ( - <> - {/* The following elemens are splitted because gridstack doesn't reinitialize them when using same item. */} - - - - ); -}; diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/type.ts b/src/components/Dashboard/Modals/EditAppModal/Tabs/type.ts deleted file mode 100644 index a67947134..000000000 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/type.ts +++ /dev/null @@ -1 +0,0 @@ -export type EditAppModalTab = 'general' | 'behaviour' | 'network' | 'appereance' | 'integration'; diff --git a/src/components/Dashboard/Tiles/Apps/AppIcon.tsx b/src/components/Dashboard/Tiles/Apps/AppIcon.tsx deleted file mode 100644 index 9775b9849..000000000 --- a/src/components/Dashboard/Tiles/Apps/AppIcon.tsx +++ /dev/null @@ -1,5 +0,0 @@ -interface ServiceIconProps { - size: '100%' | number; -} - -export const AppIcon = ({ size }: ServiceIconProps) => null; diff --git a/src/components/Dashboard/Tiles/EmptyTile.tsx b/src/components/Dashboard/Tiles/EmptyTile.tsx deleted file mode 100644 index 9fdb26db7..000000000 --- a/src/components/Dashboard/Tiles/EmptyTile.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { HomarrCardWrapper } from './HomarrCardWrapper'; -import { BaseTileProps } from './type'; - -export const EmptyTile = ({ className }: BaseTileProps) => ( - Empty -); diff --git a/src/components/Dashboard/Tiles/type.ts b/src/components/Dashboard/Tiles/type.ts deleted file mode 100644 index e5e860af9..000000000 --- a/src/components/Dashboard/Tiles/type.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface BaseTileProps { - className?: string; -} diff --git a/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx b/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx deleted file mode 100644 index 968398196..000000000 --- a/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { Card } from '@mantine/core'; -import { RefObject } from 'react'; -import { SidebarSection } from '~/components/Board/context'; - -import { useCardStyles } from '../../../layout/Common/useCardStyles'; -import { WrapperContent } from '../WrapperContent'; -import { useGridstack } from '../gridstack/use-gridstack'; - -interface DashboardSidebarProps extends DashboardSidebarInnerProps { - section: SidebarSection; - isGridstackReady: boolean; -} - -export const DashboardSidebar = ({ section, isGridstackReady }: DashboardSidebarProps) => { - const { - cx, - classes: { card: cardClass }, - } = useCardStyles(true); - - return ( - - {isGridstackReady && } - - ); -}; - -interface DashboardSidebarInnerProps { - section: SidebarSection; -} - -// Is Required because of the gridstack main area width. -const SidebarInner = ({ section }: DashboardSidebarInnerProps) => { - const { refs } = useGridstack({ section }); - - const minRow = useMinRowForFullHeight(refs.wrapper); - - return ( -
- -
- ); -}; - -const useMinRowForFullHeight = (wrapperRef: RefObject) => - wrapperRef.current ? Math.floor(wrapperRef.current!.offsetHeight / 128) : 2; diff --git a/src/components/layout/Templates/BoardLayout.tsx b/src/components/layout/Templates/BoardLayout.tsx index a87899856..5e4641d8d 100644 --- a/src/components/layout/Templates/BoardLayout.tsx +++ b/src/components/layout/Templates/BoardLayout.tsx @@ -15,8 +15,8 @@ import { Trans, useTranslation } from 'next-i18next'; import Link from 'next/link'; import { useRouter } from 'next/router'; import { useRequiredBoard } from '~/components/Board/context'; -import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore'; -import { useNamedWrapperColumnCount } from '~/components/Dashboard/Wrappers/gridstack/store'; +import { useNamedWrapperColumnCount } from '~/components/Board/gridstack/store'; +import { useEditModeStore } from '~/components/Board/useEditModeStore'; import { BoardHeadOverride } from '~/components/layout/Meta/BoardHeadOverride'; import { HeaderActionButton } from '~/components/layout/header/ActionButton'; import { api } from '~/utils/api'; diff --git a/src/components/layout/header/Search/MovieModal.tsx b/src/components/layout/header/Search/MovieModal.tsx index 2b043dd67..0dbfca6b0 100644 --- a/src/components/layout/header/Search/MovieModal.tsx +++ b/src/components/layout/header/Search/MovieModal.tsx @@ -20,7 +20,7 @@ import Image from 'next/image'; import { useRouter } from 'next/router'; import React, { useMemo } from 'react'; import { z } from 'zod'; -import { availableIntegrations } from '~/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector'; +import { availableIntegrations } from '~/components/Board/Items/App/Edit/IntegrationTab/InputElements/IntegrationSelector'; import { useConfigContext } from '~/config/provider'; import { RequestModal } from '~/modules/overseerr/RequestModal'; import { RouterOutputs, api } from '~/utils/api'; diff --git a/src/modals.ts b/src/modals.ts index df1e58f87..7e3c893e2 100644 --- a/src/modals.ts +++ b/src/modals.ts @@ -1,9 +1,9 @@ +import { ChangeAppPositionModal } from '~/components/Board/Items/App/ChangeAppPositionModal'; +import { EditAppModal } from '~/components/Board/Items/App/EditAppModal'; +import { ChangeWidgetPositionModal } from '~/components/Board/Items/Widget/ChangeWidgetPositionModal'; +import { WidgetsEditModal } from '~/components/Board/Items/Widget/WidgetsEditModal'; import { CategoryEditModal } from '~/components/Board/Sections/Category/CategoryEditModal'; -import { ChangeAppPositionModal } from '~/components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal'; -import { ChangeWidgetPositionModal } from '~/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal'; -import { EditAppModal } from '~/components/Dashboard/Modals/EditAppModal/EditAppModal'; -import { SelectElementModal } from '~/components/Dashboard/Modals/SelectElement/SelectElementModal'; -import { WidgetsEditModal } from '~/components/Dashboard/Tiles/Widgets/WidgetsEditModal'; +import { SelectElementModal } from '~/components/Board/SelectElement/SelectElementModal'; import { CreateBoardModal } from './components/Manage/Board/create-board.modal'; import { DeleteBoardModal } from './components/Manage/Board/delete-board.modal'; diff --git a/src/pages/board/[slug].tsx b/src/pages/board/[slug].tsx index 40ff9f598..dbb3d5629 100644 --- a/src/pages/board/[slug].tsx +++ b/src/pages/board/[slug].tsx @@ -2,8 +2,8 @@ import { TRPCError } from '@trpc/server'; import { GetServerSideProps, InferGetServerSidePropsType } from 'next'; import { SSRConfig } from 'next-i18next'; import { z } from 'zod'; +import { Board } from '~/components/Board/Board'; import { BoardProvider } from '~/components/Board/context'; -import { Board } from '~/components/Dashboard/Dashboard'; import { BoardLayout } from '~/components/layout/Templates/BoardLayout'; import { env } from '~/env'; import { createTrpcServersideHelpers } from '~/server/api/helper'; diff --git a/src/pages/board/index.tsx b/src/pages/board/index.tsx index 8faf32959..248f15dd5 100644 --- a/src/pages/board/index.tsx +++ b/src/pages/board/index.tsx @@ -1,8 +1,8 @@ import { TRPCError } from '@trpc/server'; import { GetServerSideProps, InferGetServerSidePropsType } from 'next'; import { SSRConfig } from 'next-i18next'; +import { Board } from '~/components/Board/Board'; import { BoardProvider } from '~/components/Board/context'; -import { Board } from '~/components/Dashboard/Dashboard'; import { BoardLayout } from '~/components/layout/Templates/BoardLayout'; import { env } from '~/env'; import { createTrpcServersideHelpers } from '~/server/api/helper'; diff --git a/src/widgets/WidgetWrapper.tsx b/src/widgets/WidgetWrapper.tsx index ddb9c45ef..22c43f5b4 100644 --- a/src/widgets/WidgetWrapper.tsx +++ b/src/widgets/WidgetWrapper.tsx @@ -1,21 +1,19 @@ import { ComponentType } from 'react'; +import { ItemWrapper } from '~/components/Board/Items/ItemWrapper'; +import { WidgetsMenu } from '~/components/Board/Items/Widget/WidgetsMenu'; import { WidgetItem } from '~/components/Board/context'; -import { HomarrCardWrapper } from '~/components/Dashboard/Tiles/HomarrCardWrapper'; -import { WidgetsMenu } from '~/components/Dashboard/Tiles/Widgets/WidgetsMenu'; import Widgets from '.'; import ErrorBoundary from './boundary'; -import { IWidget } from './widgets'; interface WidgetWrapperProps { - widgetType: string; widget: WidgetItem; className: string; WidgetComponent: ComponentType<{ widget: WidgetItem }>; } // If a property has no value, set it to the default value -const useWidget = (widget: T): T => { +const useWidgetWithDefaultOptionValues = (widget: T): T => { const definition = Widgets[widget.sort]; const newProps = { ...widget.options }; @@ -32,20 +30,15 @@ const useWidget = (widget: T): T => { }; }; -export const WidgetWrapper = ({ - widgetType, - widget, - className, - WidgetComponent, -}: WidgetWrapperProps) => { - const widgetWithDefaultProps = useWidget(widget); +export const WidgetWrapper = ({ widget, className, WidgetComponent }: WidgetWrapperProps) => { + const widgetWithDefaultProps = useWidgetWithDefaultOptionValues(widget); return ( - - - + + + - + ); }; diff --git a/src/widgets/bookmark/BookmarkWidgetTile.tsx b/src/widgets/bookmark/BookmarkWidgetTile.tsx index c1e6b7cb5..fa86b5970 100644 --- a/src/widgets/bookmark/BookmarkWidgetTile.tsx +++ b/src/widgets/bookmark/BookmarkWidgetTile.tsx @@ -30,7 +30,7 @@ import { useEffect } from 'react'; import React from 'react'; import { v4 } from 'uuid'; import { z } from 'zod'; -import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore'; +import { useEditModeStore } from '~/components/Board/useEditModeStore'; import { IconSelector } from '~/components/IconSelector/IconSelector'; import { defineWidget } from '../helper'; diff --git a/src/widgets/boundary.tsx b/src/widgets/boundary.tsx index ad0b7da58..4921d238b 100644 --- a/src/widgets/boundary.tsx +++ b/src/widgets/boundary.tsx @@ -4,10 +4,8 @@ import { IconBrandGithub, IconBug, IconInfoCircle, IconRefresh } from '@tabler/i import Consola from 'consola'; import { withTranslation } from 'next-i18next'; import React, { ReactNode } from 'react'; +import { WidgetsMenu } from '~/components/Board/Items/Widget/WidgetsMenu'; import { WidgetItem } from '~/components/Board/context'; -import { WidgetsMenu } from '~/components/Dashboard/Tiles/Widgets/WidgetsMenu'; - -import { IWidget } from './widgets'; type ErrorBoundaryState = { hasError: boolean; @@ -17,7 +15,6 @@ type ErrorBoundaryState = { type ErrorBoundaryProps = { t: (key: string) => string; children: ReactNode; - integration: string; widget: WidgetItem; }; @@ -56,7 +53,7 @@ class ErrorBoundary extends React.Component - +
diff --git a/src/widgets/calendar/CalendarTile.tsx b/src/widgets/calendar/CalendarTile.tsx index e41879776..27499b4e3 100644 --- a/src/widgets/calendar/CalendarTile.tsx +++ b/src/widgets/calendar/CalendarTile.tsx @@ -3,7 +3,7 @@ import { Calendar } from '@mantine/dates'; import { IconCalendarTime } from '@tabler/icons-react'; import { useSession } from 'next-auth/react'; import { useState } from 'react'; -import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore'; +import { useEditModeStore } from '~/components/Board/useEditModeStore'; import { useConfigContext } from '~/config/provider'; import { getLanguageByCode } from '~/tools/language'; import { RouterOutputs, api } from '~/utils/api'; diff --git a/src/widgets/notebook/NotebookEditor.tsx b/src/widgets/notebook/NotebookEditor.tsx index 01d44ef86..a29633625 100644 --- a/src/widgets/notebook/NotebookEditor.tsx +++ b/src/widgets/notebook/NotebookEditor.tsx @@ -6,7 +6,7 @@ import { BubbleMenu, useEditor } from '@tiptap/react'; import StarterKit from '@tiptap/starter-kit'; import { useState } from 'react'; import { useRequiredBoard } from '~/components/Board/context'; -import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore'; +import { useEditModeStore } from '~/components/Board/useEditModeStore'; import { useColorTheme } from '~/tools/color'; import { api } from '~/utils/api';