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/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>
+  );
+};