feat: add widget preview pages (#9)

* feat: add widget definition system

* fix: wrong typecheck command in turbo generator

* chore: fix formatting

* feat: add widget preview page

* chore: fix formatting and type errors

* chore: fix from widget edit modal and remove some never casts

* chore: address pull request feedback

apps/nextjs/src/app/[locale]/(main)/layout.tsx

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from "react";
+
+import { AppShellMain } from "@homarr/ui";
+
+import { MainHeader } from "~/components/layout/header";
+import { ClientShell } from "~/components/layout/shell";
+
+export default function MainLayout({ children }: PropsWithChildren) {
+  return (
+    <ClientShell hasNavigation={false}>
+      <MainHeader />
+      <AppShellMain>{children}</AppShellMain>
+    </ClientShell>
+  );
+}

apps/nextjs/src/app/[locale]/(main)/page.tsx

@@ -0,0 +1,9 @@
+import { Stack, Title } from "@homarr/ui";
+
+export default function HomePage() {
+  return (
+    <Stack>
+      <Title>Home</Title>
+    </Stack>
+  );
+}

apps/nextjs/src/app/[locale]/_client-providers/modals.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+
+import { ModalsManager } from "../modals";
+
+export const ModalsProvider = ({ children }: PropsWithChildren) => {
+  return <ModalsManager>{children}</ModalsManager>;
+};

apps/nextjs/src/app/[locale]/auth/login/page.tsx

@@ -10,7 +10,7 @@ export default async function Login() {
   return (
     <Center>
       <Stack align="center" mt="xl">
-        <LogoWithTitle />
+        <LogoWithTitle size="lg" />
         <Stack gap={6} align="center">
           <Title order={3} fw={400} ta="center">
             {t("title")}

apps/nextjs/src/app/[locale]/init/user/page.tsx

@@ -23,7 +23,7 @@ export default async function InitUser() {
   return (
     <Center>
       <Stack align="center" mt="xl">
-        <LogoWithTitle />
+        <LogoWithTitle size="lg" />
         <Stack gap={6} align="center">
           <Title order={3} fw={400} ta="center">
             {t("title")}

apps/nextjs/src/app/[locale]/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 
 import "@homarr/ui/styles.css";
 import "@homarr/notifications/styles.css";
+import "@homarr/spotlight/styles.css";
 
 import { headers } from "next/headers";
 
@@ -13,6 +14,7 @@ import {
   uiConfiguration,
 } from "@homarr/ui";
 
+import { ModalsProvider } from "./_client-providers/modals";
 import { NextInternationalProvider } from "./_client-providers/next-international";
 import { TRPCReactProvider } from "./_client-providers/trpc";
 
@@ -51,8 +53,10 @@ export default function Layout(props: {
               defaultColorScheme={colorScheme}
               {...uiConfiguration}
             >
-              <Notifications />
-              {props.children}
+              <ModalsProvider>
+                <Notifications />
+                {props.children}
+              </ModalsProvider>
             </MantineProvider>
           </NextInternationalProvider>
         </TRPCReactProvider>

apps/nextjs/src/app/[locale]/modals.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { createModalManager } from "mantine-modal-manager";
+
+import { WidgetEditModal } from "@homarr/widgets";
+
+export const [ModalsManager, modalEvents] = createModalManager({
+  widgetEditModal: WidgetEditModal,
+});

apps/nextjs/src/app/[locale]/page.tsx

@@ -1,21 +0,0 @@
-import { auth } from "@homarr/auth";
-import { db } from "@homarr/db";
-import { Button, Stack, Title } from "@homarr/ui";
-
-export default async function HomePage() {
-  const currentSession = await auth();
-  const users = await db.query.users.findMany();
-
-  return (
-    <Stack>
-      <Title>Home</Title>
-      <Button>Test</Button>
-      <pre>{JSON.stringify(users)}</pre>
-      {currentSession && (
-        <span>
-          Currently logged in as <b>{currentSession.user.name}</b>
-        </span>
-      )}
-    </Stack>
-  );
-}

apps/nextjs/src/app/[locale]/widgets/[sort]/layout.tsx

@@ -0,0 +1,27 @@
+import type { PropsWithChildren } from "react";
+
+import { widgetImports } from "@homarr/widgets";
+
+import { MainNavigation } from "~/components/layout/navigation";
+import { ClientShell } from "~/components/layout/shell";
+
+const getLinks = () => {
+  return Object.entries(widgetImports).map(([key, value]) => {
+    return {
+      href: `/widgets/${key}`,
+      icon: value.definition.icon,
+      label: value.definition.sort,
+    };
+  });
+};
+
+export default function WidgetPreviewLayout({ children }: PropsWithChildren) {
+  const links = getLinks();
+
+  return (
+    <ClientShell hasHeader={false}>
+      <MainNavigation links={links} />
+      {children}
+    </ClientShell>
+  );
+}

apps/nextjs/src/app/[locale]/widgets/[sort]/page.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { useState } from "react";
+import { notFound } from "next/navigation";
+
+import { ActionIcon, Affix, Center, IconPencil } from "@homarr/ui";
+import type { WidgetSort } from "@homarr/widgets";
+import { loadWidgetDynamic, widgetImports } from "@homarr/widgets";
+
+import { modalEvents } from "../../modals";
+
+type Props = PropsWithChildren<{ params: { sort: string } }>;
+
+export default function WidgetPreview(props: Props) {
+  const [options, setOptions] = useState<Record<string, unknown>>({});
+  if (!(props.params.sort in widgetImports)) {
+    notFound();
+  }
+
+  const sort = props.params.sort as WidgetSort;
+  const Comp = loadWidgetDynamic(sort);
+
+  return (
+    <Center h="100vh">
+      <Comp options={options as never} integrations={[]} />
+      <Affix bottom={12} right={72}>
+        <ActionIcon
+          size={48}
+          variant="default"
+          radius="xl"
+          onClick={() => {
+            return modalEvents.openManagedModal({
+              modal: "widgetEditModal",
+              innerProps: {
+                sort,
+                definition: widgetImports[sort].definition.options,
+                state: [options, setOptions],
+              },
+            });
+          }}
+        >
+          <IconPencil size={24} />
+        </ActionIcon>
+      </Affix>
+    </Center>
+  );
+}

apps/nextjs/src/components/layout/header.tsx

@@ -0,0 +1,30 @@
+import Link from "next/link";
+
+import { AppShellHeader, Group, UnstyledButton } from "@homarr/ui";
+
+import { ClientBurger } from "./header/burger";
+import { DesktopSearchInput, MobileSearchButton } from "./header/search";
+import { ClientSpotlight } from "./header/spotlight";
+import { UserButton } from "./header/user";
+import { LogoWithTitle } from "./logo";
+
+export const MainHeader = () => {
+  return (
+    <AppShellHeader>
+      <Group h="100%" gap="xl" px="md" justify="apart" wrap="nowrap">
+        <Group h="100%" align="center" style={{ flex: 1 }} wrap="nowrap">
+          <ClientBurger />
+          <UnstyledButton component={Link} href="/">
+            <LogoWithTitle size="md" />
+          </UnstyledButton>
+        </Group>
+        <DesktopSearchInput />
+        <Group h="100%" align="center" justify="end" style={{ flex: 1 }}>
+          <MobileSearchButton />
+          <UserButton />
+        </Group>
+      </Group>
+      <ClientSpotlight />
+    </AppShellHeader>
+  );
+};

apps/nextjs/src/components/layout/header/burger.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useCallback } from "react";
+import { atom, useAtom } from "jotai";
+
+import { Burger } from "@homarr/ui";
+
+export const navigationCollapsedAtom = atom(true);
+
+export const ClientBurger = () => {
+  const [collapsed, setCollapsed] = useAtom(navigationCollapsedAtom);
+
+  const toggle = useCallback(() => setCollapsed((c) => !c), [setCollapsed]);
+
+  return (
+    <Burger opened={!collapsed} onClick={toggle} hiddenFrom="sm" size="sm" />
+  );
+};

apps/nextjs/src/components/layout/header/search.module.css

@@ -0,0 +1,26 @@
+.desktopSearch {
+  @mixin smaller-than $mantine-breakpoint-sm {
+    display: none;
+  }
+
+  > div {
+    --_input-bd-override: var(--_input-bd);
+
+    button:focus-within {
+      border-color: var(--_input-bd-override);
+    }
+
+    button {
+      cursor: pointer;
+      color: var(--mantine-color-placeholder);
+    }
+  }
+
+  cursor: pointer;
+}
+
+.mobileSearch {
+  @mixin larger-than $mantine-breakpoint-sm {
+    display: none;
+  }
+}

apps/nextjs/src/components/layout/header/search.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { spotlight } from "@homarr/spotlight";
+import { useScopedI18n } from "@homarr/translation/client";
+import { ActionIcon, IconSearch, TextInput, UnstyledButton } from "@homarr/ui";
+
+import classes from "./search.module.css";
+
+export const DesktopSearchInput = () => {
+  const t = useScopedI18n("common.search");
+
+  return (
+    <TextInput
+      component={UnstyledButton}
+      className={classes.desktopSearch}
+      w={400}
+      size="sm"
+      leftSection={<IconSearch size={20} stroke={1.5} />}
+      onClick={spotlight.open}
+    >
+      {t("placeholder")}
+    </TextInput>
+  );
+};
+
+export const MobileSearchButton = () => {
+  return (
+    <ActionIcon
+      className={classes.mobileSearch}
+      variant="subtle"
+      color="gray"
+      onClick={spotlight.open}
+    >
+      <IconSearch size={20} stroke={1.5} />
+    </ActionIcon>
+  );
+};

apps/nextjs/src/components/layout/header/spotlight.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Spotlight } from "@homarr/spotlight";
+import { useScopedI18n } from "@homarr/translation/client";
+import { IconSearch } from "@homarr/ui";
+
+export const ClientSpotlight = () => {
+  const t = useScopedI18n("common.search");
+
+  return (
+    <Spotlight
+      actions={[]}
+      nothingFound={t("nothingFound")}
+      highlightQuery
+      searchProps={{
+        leftSection: <IconSearch size={20} stroke={1.5} />,
+        placeholder: `${t("placeholder")}`,
+      }}
+      yOffset={12}
+    />
+  );
+};

apps/nextjs/src/components/layout/header/user.tsx

@@ -0,0 +1,11 @@
+import { UnstyledButton } from "@homarr/ui";
+
+import { UserAvatar } from "~/components/user-avatar";
+
+export const UserButton = () => {
+  return (
+    <UnstyledButton>
+      <UserAvatar size="md" />
+    </UnstyledButton>
+  );
+};

apps/nextjs/src/components/layout/logo.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 
+import type { TitleOrder } from "@homarr/ui";
 import { Group, Title } from "@homarr/ui";
 
 interface LogoProps {
@@ -7,12 +8,26 @@ interface LogoProps {
 }
 
 export const Logo = ({ size = 60 }: LogoProps) => (
-  <Image src="/logo/homarr.png" alt="homarr logo" width={size} height={size} />
+  <Image src="/logo/homarr.png" alt="Homarr logo" width={size} height={size} />
 );
 
-export const LogoWithTitle = () => (
-  <Group gap={0}>
-    <Logo size={48} />
-    <Title order={1}>lparr</Title>
-  </Group>
-);
+const logoWithTitleSizes = {
+  lg: { logoSize: 48, titleOrder: 1 },
+  md: { logoSize: 32, titleOrder: 2 },
+  sm: { logoSize: 24, titleOrder: 3 },
+} satisfies Record<string, { logoSize: number; titleOrder: TitleOrder }>;
+
+interface LogoWithTitleProps {
+  size: keyof typeof logoWithTitleSizes;
+}
+
+export const LogoWithTitle = ({ size }: LogoWithTitleProps) => {
+  const { logoSize, titleOrder } = logoWithTitleSizes[size];
+
+  return (
+    <Group gap={0} wrap="nowrap">
+      <Logo size={logoSize} />
+      <Title order={titleOrder}>lparr</Title>
+    </Group>
+  );
+};

apps/nextjs/src/components/layout/navigation.tsx

@@ -0,0 +1,88 @@
+import Link from "next/link";
+
+import {
+  AppShellNavbar,
+  AppShellSection,
+  NavLink,
+  ScrollArea,
+} from "@homarr/ui";
+import type { TablerIconsProps } from "@homarr/ui";
+
+interface MainNavigationProps {
+  headerSection?: JSX.Element;
+  footerSection?: JSX.Element;
+  links: NavigationLink[];
+}
+
+export const MainNavigation = ({
+  headerSection,
+  footerSection,
+  links,
+}: MainNavigationProps) => {
+  return (
+    <AppShellNavbar p="md">
+      {headerSection && <AppShellSection>{headerSection}</AppShellSection>}
+      <AppShellSection
+        grow
+        mt={headerSection ? "md" : undefined}
+        mb={footerSection ? "md" : undefined}
+        component={ScrollArea}
+      >
+        {links.map((link) => (
+          <CommonNavLink key={link.label} {...link} />
+        ))}
+      </AppShellSection>
+      {footerSection && <AppShellSection>{footerSection}</AppShellSection>}
+    </AppShellNavbar>
+  );
+};
+
+const CommonNavLink = (props: NavigationLink) =>
+  "href" in props ? (
+    <NavLinkHref {...props} />
+  ) : (
+    <NavLinkWithItems {...props} />
+  );
+
+const NavLinkHref = (props: NavigationLinkHref) =>
+  props.external ? (
+    <NavLink
+      component="a"
+      label={props.label}
+      leftSection={<props.icon size={20} stroke={1.5} />}
+      href={props.href}
+      target="_blank"
+    />
+  ) : (
+    <NavLink
+      component={Link}
+      label={props.label}
+      leftSection={<props.icon size={20} stroke={1.5} />}
+      href={props.href}
+    />
+  );
+
+const NavLinkWithItems = (props: NavigationLinkWithItems) => (
+  <NavLink
+    label={props.label}
+    leftSection={<props.icon size={20} stroke={1.5} />}
+  >
+    {props.items.map((item) => (
+      <NavLinkHref key={item.label} {...item} />
+    ))}
+  </NavLink>
+);
+
+interface CommonNavigationLinkProps {
+  label: string;
+  icon: (props: TablerIconsProps) => JSX.Element;
+}
+
+interface NavigationLinkHref extends CommonNavigationLinkProps {
+  href: string;
+  external?: boolean;
+}
+interface NavigationLinkWithItems extends CommonNavigationLinkProps {
+  items: NavigationLinkHref[];
+}
+export type NavigationLink = NavigationLinkHref | NavigationLinkWithItems;

apps/nextjs/src/components/layout/shell.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { useAtomValue } from "jotai";
+
+import { AppShell } from "@homarr/ui";
+
+import { navigationCollapsedAtom } from "./header/burger";
+
+interface ClientShellProps {
+  hasHeader?: boolean;
+  hasNavigation?: boolean;
+}
+
+export const ClientShell = ({
+  hasHeader = true,
+  hasNavigation = true,
+  children,
+}: PropsWithChildren<ClientShellProps>) => {
+  const collapsed = useAtomValue(navigationCollapsedAtom);
+
+  return (
+    <AppShell
+      header={hasHeader ? { height: 60 } : undefined}
+      navbar={
+        hasNavigation
+          ? {
+              width: 300,
+              breakpoint: "sm",
+              collapsed: { mobile: collapsed },
+            }
+          : undefined
+      }
+      padding="md"
+    >
+      {children}
+    </AppShell>
+  );
+};

apps/nextjs/src/components/user-avatar.tsx

@@ -0,0 +1,32 @@
+import { auth } from "@homarr/auth";
+import type { AvatarProps, MantineSize } from "@homarr/ui";
+import { Avatar } from "@homarr/ui";
+
+interface UserAvatarProps {
+  size: MantineSize;
+}
+
+export const UserAvatar = async ({ size }: UserAvatarProps) => {
+  const currentSession = await auth();
+
+  const commonProps = {
+    size,
+    color: "primaryColor",
+  } satisfies Partial<AvatarProps>;
+
+  if (!currentSession) return <Avatar {...commonProps} />;
+  if (currentSession.user.image)
+    return (
+      <Avatar
+        {...commonProps}
+        src={currentSession.user.image}
+        alt={currentSession.user.name!}
+      />
+    );
+
+  return (
+    <Avatar {...commonProps}>
+      {currentSession.user.name!.substring(0, 2).toUpperCase()}
+    </Avatar>
+  );
+};