chore(release): automatic release v0.1.0

.gitignore

@@ -48,7 +48,7 @@ yarn-error.log*
 .turbo
 
 # database
-db.sqlite
+*.sqlite
 
 # logs
 *.log

apps/nextjs/package.json

@@ -22,7 +22,7 @@
     "@homarr/db": "workspace:^0.1.0",
     "@homarr/definitions": "workspace:^0.1.0",
     "@homarr/form": "workspace:^0.1.0",
-    "@homarr/gridstack": "^1.0.0",
+    "@homarr/gridstack": "^1.0.3",
     "@homarr/integrations": "workspace:^0.1.0",
     "@homarr/log": "workspace:^",
     "@homarr/modals": "workspace:^0.1.0",
@@ -32,11 +32,11 @@
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
     "@homarr/widgets": "workspace:^0.1.0",
-    "@mantine/colors-generator": "^7.12.0",
-    "@mantine/core": "^7.12.0",
-    "@mantine/hooks": "^7.12.0",
-    "@mantine/modals": "^7.12.0",
-    "@mantine/tiptap": "^7.12.0",
+    "@mantine/colors-generator": "^7.12.1",
+    "@mantine/core": "^7.12.1",
+    "@mantine/hooks": "^7.12.1",
+    "@mantine/modals": "^7.12.1",
+    "@mantine/tiptap": "^7.12.1",
     "@homarr/server-settings": "workspace:^0.1.0",
     "@t3-oss/env-nextjs": "^0.11.0",
     "@tanstack/react-query": "^5.51.23",
@@ -56,7 +56,7 @@
     "dotenv": "^16.4.5",
     "flag-icons": "^7.2.3",
     "glob": "^11.0.0",
-    "jotai": "^2.9.2",
+    "jotai": "^2.9.3",
     "mantine-react-table": "2.0.0-beta.6",
     "next": "^14.2.5",
     "postcss-preset-mantine": "^1.17.0",
@@ -74,12 +74,12 @@
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
     "@types/chroma-js": "2.4.4",
-    "@types/node": "^20.14.15",
+    "@types/node": "^20.15.0",
     "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "concurrently": "^8.2.2",
-    "eslint": "^9.8.0",
+    "eslint": "^9.9.0",
     "node-loader": "^2.0.0",
     "prettier": "^3.3.3",
     "typescript": "^5.5.4"

apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx

@@ -3,7 +3,8 @@
 import type { PropsWithChildren } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import { Button, Divider, PasswordInput, Stack, TextInput } from "@mantine/core";
+import { Anchor, Button, Card, Code, Collapse, Divider, PasswordInput, Stack, Text, TextInput } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
 
 import { signIn } from "@homarr/auth/client";
 import type { useForm } from "@homarr/form";
@@ -101,9 +102,12 @@ export const LoginForm = ({ providers, oidcClientName, isOidcAutoLoginEnabled, c
                 <PasswordInput label={t("field.password.label")} {...form.getInputProps("password")} />
 
                 {providers.includes("credentials") && (
-                  <SubmitButton isPending={isPending} form={form} credentialType="basic">
-                    {t("action.login.label")}
-                  </SubmitButton>
+                  <Stack gap="sm">
+                    <SubmitButton isPending={isPending} form={form} credentialType="basic">
+                      {t("action.login.label")}
+                    </SubmitButton>
+                    <PasswordForgottenCollapse username={form.values.name} />
+                  </Stack>
                 )}
 
                 {providers.includes("ldap") && (
@@ -150,4 +154,32 @@ const SubmitButton = ({ isPending, form, credentialType, children }: PropsWithCh
   );
 };
 
+interface PasswordForgottenCollapseProps {
+  username: string;
+}
+const PasswordForgottenCollapse = ({ username }: PasswordForgottenCollapseProps) => {
+  const [visible, { toggle }] = useDisclosure(false);
+  const tForgotPassword = useScopedI18n("user.action.login.forgotPassword");
+
+  const commandUsername = username.trim().length >= 1 ? username.trim() : "<username>";
+
+  return (
+    <>
+      <Anchor type="button" component="button" onClick={toggle}>
+        {tForgotPassword("label")}
+      </Anchor>
+
+      <Collapse in={visible}>
+        <Card>
+          <Stack gap="xs">
+            <Text size="sm">{tForgotPassword("description")}</Text>
+
+            <Code>homarr reset-password -u {commandUsername}</Code>
+          </Stack>
+        </Card>
+      </Collapse>
+    </>
+  );
+};
+
 type FormType = z.infer<typeof validation.user.signIn>;

apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx

@@ -44,7 +44,9 @@ export const ClientBoard = () => {
   const board = useRequiredBoard();
   const isReady = useIsBoardReady();
 
-  const sortedSections = board.sections.sort((sectionA, sectionB) => sectionA.position - sectionB.position);
+  const fullWidthSortedSections = board.sections
+    .filter((section) => section.kind === "empty" || section.kind === "category")
+    .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
 
   const ref = useRef<HTMLDivElement>(null);
 
@@ -58,11 +60,11 @@ export const ClientBoard = () => {
         h={fullHeightWithoutHeaderAndFooter}
       />
       <Stack ref={ref} h="100%" style={{ visibility: isReady ? "visible" : "hidden" }}>
-        {sortedSections.map((section) =>
+        {fullWidthSortedSections.map((section) =>
           section.kind === "empty" ? (
-            <BoardEmptySection key={section.id} section={section} mainRef={ref} />
+            <BoardEmptySection key={section.id} section={section} />
           ) : (
-            <BoardCategorySection key={section.id} section={section} mainRef={ref} />
+            <BoardCategorySection key={section.id} section={section} />
           ),
         )}
       </Stack>

apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx

@@ -10,6 +10,7 @@ import {
   IconPencil,
   IconPencilOff,
   IconPlus,
+  IconResize,
   IconSettings,
 } from "@tabler/icons-react";
 
@@ -23,6 +24,7 @@ import { ItemSelectModal } from "~/components/board/items/item-select-modal";
 import { useBoardPermissions } from "~/components/board/permissions/client";
 import { useCategoryActions } from "~/components/board/sections/category/category-actions";
 import { CategoryEditModal } from "~/components/board/sections/category/category-edit-modal";
+import { useDynamicSectionActions } from "~/components/board/sections/dynamic/dynamic-actions";
 import { HeaderButton } from "~/components/layout/header/button";
 import { useEditMode, useRequiredBoard } from "./_context";
 
@@ -52,6 +54,7 @@ const AddMenu = () => {
   const { openModal: openCategoryEditModal } = useModalAction(CategoryEditModal);
   const { openModal: openItemSelectModal } = useModalAction(ItemSelectModal);
   const { addCategoryToEnd } = useCategoryActions();
+  const { addDynamicSection } = useDynamicSectionActions();
   const t = useI18n();
 
   const handleAddCategory = useCallback(
@@ -99,6 +102,10 @@ const AddMenu = () => {
         <Menu.Item leftSection={<IconBoxAlignTop size={20} />} onClick={handleAddCategory}>
           {t("section.category.action.create")}
         </Menu.Item>
+
+        <Menu.Item leftSection={<IconResize size={20} />} onClick={addDynamicSection}>
+          {t("section.dynamic.action.create")}
+        </Menu.Item>
       </Menu.Dropdown>
     </Menu>
   );

apps/nextjs/src/app/[locale]/boards/_types.ts

@@ -7,5 +7,6 @@ export type Item = Section["items"][number];
 
 export type CategorySection = Extract<Section, { kind: "category" }>;
 export type EmptySection = Extract<Section, { kind: "empty" }>;
+export type DynamicSection = Extract<Section, { kind: "dynamic" }>;
 
 export type ItemOfKind<TKind extends WidgetKind> = Extract<Item, { kind: TKind }>;

apps/nextjs/src/app/[locale]/widgets/[kind]/_dimension-modal.tsx

@@ -25,10 +25,10 @@ export const PreviewDimensionsModal = createModal<InnerProps>(({ actions, innerP
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack>
-        <InputWrapper label={t("item.move.field.width.label")}>
+        <InputWrapper label={t("item.moveResize.field.width.label")}>
           <Slider min={64} max={1024} step={64} {...form.getInputProps("width")} />
         </InputWrapper>
-        <InputWrapper label={t("item.move.field.height.label")}>
+        <InputWrapper label={t("item.moveResize.field.height.label")}>
           <Slider min={64} max={1024} step={64} {...form.getInputProps("height")} />
         </InputWrapper>
         <Group justify="end">

apps/nextjs/src/components/board/items/item-actions.tsx

@@ -57,7 +57,7 @@ export const useItemActions = () => {
       updateBoard((previous) => {
         const lastSection = previous.sections
           .filter((section): section is EmptySection => section.kind === "empty")
-          .sort((sectionA, sectionB) => sectionB.position - sectionA.position)[0];
+          .sort((sectionA, sectionB) => sectionB.yOffset - sectionA.yOffset)[0];
 
         if (!lastSection) return previous;
 

apps/nextjs/src/components/board/items/item-content.tsx

@@ -0,0 +1,89 @@
+import { Card } from "@mantine/core";
+import { useElementSize } from "@mantine/hooks";
+import { QueryErrorResetBoundary } from "@tanstack/react-query";
+import combineClasses from "clsx";
+import { ErrorBoundary } from "react-error-boundary";
+
+import { loadWidgetDynamic, reduceWidgetOptionsWithDefaultValues, useServerDataFor } from "@homarr/widgets";
+import { WidgetError } from "@homarr/widgets/errors";
+
+import type { Item } from "~/app/[locale]/boards/_types";
+import { useEditMode, useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
+import classes from "../sections/item.module.css";
+import { BoardItemMenu } from "./item-menu";
+
+interface BoardItemContentProps {
+  item: Item;
+}
+
+export const BoardItemContent = ({ item }: BoardItemContentProps) => {
+  const { ref, width, height } = useElementSize<HTMLDivElement>();
+  const board = useRequiredBoard();
+
+  return (
+    <Card
+      ref={ref}
+      className={combineClasses(
+        classes.itemCard,
+        `${item.kind}-wrapper`,
+        "grid-stack-item-content",
+        item.advancedOptions.customCssClasses.join(" "),
+      )}
+      withBorder
+      styles={{
+        root: {
+          "--opacity": board.opacity / 100,
+          containerType: "size",
+        },
+      }}
+      p={0}
+    >
+      <InnerContent item={item} width={width} height={height} />
+    </Card>
+  );
+};
+
+interface InnerContentProps {
+  item: Item;
+  width: number;
+  height: number;
+}
+
+const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
+  const board = useRequiredBoard();
+  const [isEditMode] = useEditMode();
+  const serverData = useServerDataFor(item.id);
+  const Comp = loadWidgetDynamic(item.kind);
+  const options = reduceWidgetOptionsWithDefaultValues(item.kind, item.options);
+  const newItem = { ...item, options };
+
+  if (!serverData?.isReady) return null;
+
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary
+          onReset={reset}
+          fallbackRender={({ resetErrorBoundary, error }) => (
+            <>
+              <BoardItemMenu offset={4} item={newItem} resetErrorBoundary={resetErrorBoundary} />
+              <WidgetError kind={item.kind} error={error as unknown} resetErrorBoundary={resetErrorBoundary} />
+            </>
+          )}
+        >
+          <BoardItemMenu offset={4} item={newItem} />
+          <Comp
+            options={options as never}
+            integrationIds={item.integrationIds}
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            serverData={serverData?.data as never}
+            isEditMode={isEditMode}
+            boardId={board.id}
+            itemId={item.id}
+            {...dimensions}
+          />
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+};