feat(groups): add home board settings (#2321)

apps/nextjs/package.json

@@ -15,6 +15,10 @@
   },
   "prettier": "@homarr/prettier-config",
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@homarr/analytics": "workspace:^0.1.0",
     "@homarr/api": "workspace:^0.1.0",
     "@homarr/auth": "workspace:^0.1.0",

apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx

@@ -1,13 +1,12 @@
 "use client";
 
-import { Group, Switch, Text } from "@mantine/core";
+import { Switch, Text } from "@mantine/core";
-import { IconLayoutDashboard } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import type { ServerSettings } from "@homarr/server-settings";
 import { useScopedI18n } from "@homarr/translation/client";
-import { SelectWithCustomItems } from "@homarr/ui";
 
+import { BoardSelect } from "~/components/board/board-select";
 import { CommonSettingsForm } from "./common-form";
 
 export const BoardSettingsForm = ({ defaultValues }: { defaultValues: ServerSettings["board"] }) => {
@@ -18,42 +17,19 @@ export const BoardSettingsForm = ({ defaultValues }: { defaultValues: ServerSett
     <CommonSettingsForm settingKey="board" defaultValues={defaultValues}>
       {(form) => (
         <>
-          <SelectWithCustomItems
+          <BoardSelect
             label={tBoard("homeBoard.label")}
             description={tBoard("homeBoard.description")}
-            data={selectableBoards.map((board) => ({
+            clearable
-              value: board.id,
+            boards={selectableBoards}
-              label: board.name,
-              image: board.logoImageUrl,
-            }))}
-            SelectOption={({ label, image }: { value: string; label: string; image: string | null }) => (
-              <Group>
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                {image ? <img width={16} height={16} src={image} alt={label} /> : <IconLayoutDashboard size={16} />}
-                <Text fz="sm" fw={500}>
-                  {label}
-                </Text>
-              </Group>
-            )}
             {...form.getInputProps("homeBoardId")}
           />
-          <SelectWithCustomItems
+
+          <BoardSelect
             label={tBoard("homeBoard.mobileLabel")}
             description={tBoard("homeBoard.description")}
-            data={selectableBoards.map((board) => ({
+            clearable
-              value: board.id,
+            boards={selectableBoards}
-              label: board.name,
-              image: board.logoImageUrl,
-            }))}
-            SelectOption={({ label, image }: { value: string; label: string; image: string | null }) => (
-              <Group>
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                {image ? <img width={16} height={16} src={image} alt={label} /> : <IconLayoutDashboard size={16} />}
-                <Text fz="sm" fw={500}>
-                  {label}
-                </Text>
-              </Group>
-            )}
             {...form.getInputProps("mobileHomeBoardId")}
           />
 

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_change-home-board.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Group, Select, Stack } from "@mantine/core";
+import { Button, Group, Stack } from "@mantine/core";
 import type { z } from "zod";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -11,9 +11,12 @@ import { showErrorNotification, showSuccessNotification } from "@homarr/notifica
 import { useI18n } from "@homarr/translation/client";
 import { validation } from "@homarr/validation";
 
+import type { Board } from "~/app/[locale]/boards/_types";
+import { BoardSelect } from "~/components/board/board-select";
+
 interface ChangeHomeBoardFormProps {
   user: RouterOutputs["user"]["getById"];
-  boardsData: { value: string; label: string }[];
+  boardsData: Pick<Board, "id" | "name" | "logoImageUrl">[];
 }
 
 export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormProps) => {
@@ -54,16 +57,18 @@ export const ChangeHomeBoardForm = ({ user, boardsData }: ChangeHomeBoardFormPro
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack gap="md">
-        <Select
+        <BoardSelect
           label={t("management.page.user.setting.general.item.board.type.general")}
+          clearable
+          boards={boardsData}
           w="100%"
-          data={boardsData}
           {...form.getInputProps("homeBoardId")}
         />
-        <Select
+        <BoardSelect
           label={t("management.page.user.setting.general.item.board.type.mobile")}
+          clearable
+          boards={boardsData}
           w="100%"
-          data={boardsData}
           {...form.getInputProps("mobileHomeBoardId")}
         />
 

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx

@@ -95,8 +95,9 @@ export default async function EditUserPage(props: Props) {
         <ChangeHomeBoardForm
           user={user}
           boardsData={boards.map((board) => ({
-            value: board.id,
+            id: board.id,
-            label: board.name,
+            name: board.name,
+            logoImageUrl: board.logoImageUrl,
           }))}
         />
       </Stack>

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/layout.tsx

@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from "react";
 import Link from "next/link";
 import { Button, Grid, GridCol, Group, Stack, Text, Title } from "@mantine/core";
-import { IconLock, IconSettings, IconUsersGroup } from "@tabler/icons-react";
+import { IconId, IconLock, IconSettings, IconUsersGroup } from "@tabler/icons-react";
 
 import { api } from "@homarr/api/server";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
@@ -42,6 +42,11 @@ export default async function Layout(props: PropsWithChildren<LayoutProps>) {
               <NavigationLink
                 href={`/manage/users/groups/${params.id}`}
                 label={tGroup("setting.general.title")}
+                icon={<IconId size="1rem" stroke={1.5} />}
+              />
+              <NavigationLink
+                href={`/manage/users/groups/${params.id}/settings`}
+                label={tGroup("setting.setting.title")}
                 icon={<IconSettings size="1rem" stroke={1.5} />}
               />
               <NavigationLink

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/settings/_group-home-boards.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { Button, Group, Stack } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import { validation } from "@homarr/validation";
+
+import { BoardSelect } from "~/components/board/board-select";
+
+interface GroupHomeBoardsProps {
+  homeBoardId: string | null;
+  mobileHomeBoardId: string | null;
+  groupId: string;
+}
+
+export const GroupHomeBoards = ({ homeBoardId, mobileHomeBoardId, groupId }: GroupHomeBoardsProps) => {
+  const t = useI18n();
+  const [availableBoards] = clientApi.board.getBoardsForGroup.useSuspenseQuery({ groupId });
+  const form = useZodForm(validation.group.settings.pick({ homeBoardId: true, mobileHomeBoardId: true }), {
+    initialValues: {
+      homeBoardId,
+      mobileHomeBoardId,
+    },
+  });
+  const { mutateAsync, isPending } = clientApi.group.savePartialSettings.useMutation();
+
+  const handleSubmit = form.onSubmit(async (values) => {
+    await mutateAsync(
+      {
+        id: groupId,
+        settings: values,
+      },
+      {
+        onSuccess() {
+          form.setInitialValues(values);
+          showSuccessNotification({
+            title: t("group.action.settings.board.notification.success.title"),
+            message: t("group.action.settings.board.notification.success.message"),
+          });
+        },
+        onError() {
+          showErrorNotification({
+            title: t("group.action.settings.board.notification.error.title"),
+            message: t("group.action.settings.board.notification.error.message"),
+          });
+        },
+      },
+    );
+  });
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Stack gap="md">
+        <BoardSelect
+          label={t("group.field.homeBoard.label")}
+          description={t("group.field.homeBoard.description")}
+          clearable
+          boards={availableBoards}
+          {...form.getInputProps("homeBoardId")}
+        />
+
+        <BoardSelect
+          label={t("group.field.mobileBoard.label")}
+          description={t("group.field.mobileBoard.description")}
+          clearable
+          boards={availableBoards}
+          {...form.getInputProps("mobileHomeBoardId")}
+        />
+
+        <Group justify="end">
+          <Button type="submit" color="teal" loading={isPending}>
+            {t("common.action.save")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};

apps/nextjs/src/app/[locale]/manage/users/groups/[id]/settings/page.tsx

@@ -0,0 +1,41 @@
+import { notFound } from "next/navigation";
+import { Alert, Stack, Title } from "@mantine/core";
+import { IconExclamationCircle } from "@tabler/icons-react";
+
+import { api } from "@homarr/api/server";
+import { auth } from "@homarr/auth/next";
+import { getI18n } from "@homarr/translation/server";
+
+import { GroupHomeBoards } from "./_group-home-boards";
+
+interface GroupSettingsPageProps {
+  params: Promise<{
+    id: string;
+  }>;
+}
+
+export default async function GroupPermissionsPage(props: GroupSettingsPageProps) {
+  const params = await props.params;
+  const session = await auth();
+
+  if (!session?.user.permissions.includes("admin")) {
+    notFound();
+  }
+
+  const group = await api.group.getById({ id: params.id });
+  const t = await getI18n();
+
+  return (
+    <Stack>
+      <Title>{t("management.page.group.setting.setting.title")}</Title>
+
+      <Alert color="cyan" icon={<IconExclamationCircle size="1rem" stroke={1.5} />}>
+        {t("management.page.group.setting.setting.alert")}
+      </Alert>
+
+      <Title order={3}>{t("management.page.group.setting.setting.board.title")}</Title>
+
+      <GroupHomeBoards homeBoardId={group.homeBoardId} mobileHomeBoardId={group.mobileHomeBoardId} groupId={group.id} />
+    </Stack>
+  );
+}

apps/nextjs/src/app/[locale]/manage/users/groups/_add-group.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-import { useCallback } from "react";
-
-import { useModalAction } from "@homarr/modals";
-import { AddGroupModal } from "@homarr/modals-collection";
-import { useI18n } from "@homarr/translation/client";
-
-import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
-
-export const AddGroup = () => {
-  const t = useI18n();
-  const { openModal } = useModalAction(AddGroupModal);
-
-  const handleAddGroup = useCallback(() => {
-    openModal();
-  }, [openModal]);
-
-  return (
-    <MobileAffixButton onClick={handleAddGroup} color="teal">
-      {t("group.action.create.label")}
-    </MobileAffixButton>
-  );
-};

apps/nextjs/src/app/[locale]/manage/users/groups/_client.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { Group, TextInput } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { useModalAction } from "@homarr/modals";
+import { AddGroupModal } from "@homarr/modals-collection";
+import { useI18n } from "@homarr/translation/client";
+
+import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
+import { GroupsTable } from "./_groups-table";
+
+interface GroupsListProps {
+  groups: RouterOutputs["group"]["getAll"];
+}
+
+export const GroupsList = ({ groups }: GroupsListProps) => {
+  const [search, setSearch] = useState("");
+  const initialGroupIds = useMemo(
+    () => groups.sort((groupA, groupB) => groupA.position - groupB.position).map((group) => group.id),
+    [groups],
+  );
+  const filteredGroups = useMemo(
+    () =>
+      groups
+        .filter((group) => group.name.toLowerCase().includes(search.toLowerCase()))
+        .sort((groupA, groupB) => groupA.position - groupB.position),
+    [groups, search],
+  );
+  const t = useI18n();
+
+  return (
+    <>
+      <Group justify="space-between">
+        <TextInput
+          leftSection={<IconSearch size={20} stroke={1.5} />}
+          value={search}
+          onChange={(event) => setSearch(event.currentTarget.value)}
+          placeholder={`${t("group.search")}...`}
+          style={{ flex: 1 }}
+        />
+        <AddGroup />
+      </Group>
+
+      <GroupsTable groups={filteredGroups} initialGroupIds={initialGroupIds} hasFilter={search.length !== 0} />
+    </>
+  );
+};
+
+const AddGroup = () => {
+  const t = useI18n();
+  const { openModal } = useModalAction(AddGroupModal);
+
+  const handleAddGroup = useCallback(() => {
+    openModal();
+  }, [openModal]);
+
+  return (
+    <MobileAffixButton onClick={handleAddGroup} color="teal">
+      {t("group.action.create.label")}
+    </MobileAffixButton>
+  );
+};

apps/nextjs/src/app/[locale]/manage/users/groups/_groups-table.tsx

@@ -0,0 +1,277 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useMemo, useState } from "react";
+import Link from "next/link";
+import type { DragEndEvent, DraggableAttributes, DragStartEvent } from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  Anchor,
+  Box,
+  Button,
+  Card,
+  Flex,
+  Group,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Transition,
+} from "@mantine/core";
+import { IconGripVertical } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { revalidatePathActionAsync } from "@homarr/common/client";
+import { showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import { UserAvatarGroup } from "@homarr/ui";
+
+interface GroupsTableProps {
+  initialGroupIds: string[];
+  groups: RouterOutputs["group"]["getAll"];
+  hasFilter: boolean;
+}
+
+export const GroupsTable = ({ groups, initialGroupIds, hasFilter }: GroupsTableProps) => {
+  const t = useI18n();
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [groupIds, setGroupIds] = useState(groups.map((group) => group.id));
+  const isDirty = useMemo(
+    () => initialGroupIds.some((groupId, index) => groupIds.indexOf(groupId) !== index),
+    [groupIds, initialGroupIds],
+  );
+  const { mutateAsync, isPending } = clientApi.group.savePositions.useMutation();
+  const handleSavePositionsAsync = async () => {
+    await mutateAsync(
+      { positions: groupIds },
+      {
+        async onSuccess() {
+          showSuccessNotification({
+            message: t("group.action.changePosition.notification.success.message"),
+          });
+          await revalidatePathActionAsync("/manage/users/groups");
+        },
+        onError() {
+          showSuccessNotification({
+            message: t("group.action.changePosition.notification.error.message"),
+          });
+        },
+      },
+    );
+  };
+
+  const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id as string);
+  };
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      setActiveId(null);
+      return;
+    }
+
+    setGroupIds((groupIds) => {
+      const oldIndex = groupIds.indexOf(active.id as string);
+      const newIndex = groupIds.indexOf(over.id as string);
+      return arrayMove(groupIds, oldIndex, newIndex);
+    });
+  }
+
+  function handleDragCancel() {
+    setActiveId(null);
+  }
+
+  const selectedRow = useMemo(() => {
+    if (!activeId) return null;
+
+    const current = groups.find((group) => group.id === activeId);
+    if (!current) return null;
+
+    return <Row group={current} handle={<DragHandle attributes={undefined} listeners={undefined} active />} />;
+  }, [activeId, groups]);
+
+  return (
+    <>
+      <DndContext
+        sensors={sensors}
+        onDragEnd={handleDragEnd}
+        onDragStart={handleDragStart}
+        onDragCancel={handleDragCancel}
+        collisionDetection={closestCenter}
+        modifiers={[restrictToVerticalAxis]}
+        id="groups-table"
+      >
+        <Table striped highlightOnHover>
+          <TableThead>
+            <TableTr>
+              <TableTh>{t("group.field.name")}</TableTh>
+              <TableTh>{t("group.field.members")}</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            <SortableContext items={groupIds} strategy={verticalListSortingStrategy}>
+              {groupIds.map((groupId) => {
+                const group = groups.find(({ id }) => id === groupId);
+                if (!group) return null;
+
+                return <DraggableRow key={group.id} group={group} disabled={hasFilter} />;
+              })}
+            </SortableContext>
+          </TableTbody>
+        </Table>
+
+        <DragOverlay>
+          {activeId && (
+            <Table w="100%">
+              <TableTbody>{selectedRow}</TableTbody>
+            </Table>
+          )}
+        </DragOverlay>
+      </DndContext>
+      <SaveAffix
+        visible={isDirty}
+        onDiscard={() => setGroupIds(initialGroupIds)}
+        isPending={isPending}
+        onSave={handleSavePositionsAsync}
+      />
+    </>
+  );
+};
+
+interface DraggableRowProps {
+  group: RouterOutputs["group"]["getAll"][number];
+  disabled?: boolean;
+}
+
+const DraggableRow = ({ group, disabled }: DraggableRowProps) => {
+  const { attributes, listeners, transform, transition, setNodeRef, isDragging } = useSortable({
+    id: group.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  if (isDragging) {
+    return (
+      <TableTr ref={setNodeRef} style={style}>
+        <TableTd colSpan={2}>&nbsp;</TableTd>
+      </TableTr>
+    );
+  }
+
+  return (
+    <Row
+      group={group}
+      setNodeRef={setNodeRef}
+      style={style}
+      handle={<DragHandle attributes={attributes} listeners={listeners} active={false} disabled={disabled} />}
+    />
+  );
+};
+
+interface RowProps {
+  group: RouterOutputs["group"]["getAll"][number];
+  handle?: ReactNode;
+  setNodeRef?: (node: HTMLElement | null) => void;
+  style?: React.CSSProperties;
+}
+
+const Row = ({ group, handle, setNodeRef, style }: RowProps) => {
+  return (
+    <TableTr ref={setNodeRef} style={style}>
+      <TableTd>
+        <Group>
+          {handle}
+          <Anchor component={Link} href={`/manage/users/groups/${group.id}`}>
+            {group.name}
+          </Anchor>
+        </Group>
+      </TableTd>
+      <TableTd>
+        <UserAvatarGroup users={group.members} size="sm" limit={5} />
+      </TableTd>
+    </TableTr>
+  );
+};
+
+interface DragHandleProps {
+  attributes: DraggableAttributes | undefined;
+  listeners: SyntheticListenerMap | undefined;
+  active: boolean;
+  disabled?: boolean;
+}
+
+const DragHandle = ({ attributes, listeners, active, disabled }: DragHandleProps) => {
+  if (disabled) {
+    return <Box w={40} h="100%" />;
+  }
+
+  return (
+    <Flex
+      align="center"
+      justify="center"
+      h="100%"
+      w={40}
+      style={{ cursor: active ? "grabbing" : "grab" }}
+      {...attributes}
+      {...listeners}
+    >
+      <IconGripVertical size={18} stroke={1.5} />
+    </Flex>
+  );
+};
+
+interface SaveAffixProps {
+  visible: boolean;
+  isPending: boolean;
+  onDiscard: () => void;
+  onSave: () => void;
+}
+
+const SaveAffix = ({ visible, isPending, onDiscard, onSave }: SaveAffixProps) => {
+  const t = useI18n();
+
+  return (
+    <div style={{ position: "sticky", bottom: 20 }}>
+      <Transition transition="slide-up" mounted={visible}>
+        {(transitionStyles) => (
+          <Card style={transitionStyles} withBorder>
+            <Group justify="space-between">
+              <Text fw={500}>{t("common.unsavedChanges")}</Text>
+              <Group>
+                <Button disabled={isPending} onClick={onDiscard}>
+                  {t("common.action.discard")}
+                </Button>
+                <Button color="teal" loading={isPending} onClick={onSave}>
+                  {t("common.action.saveChanges")}
+                </Button>
+              </Group>
+            </Group>
+          </Card>
+        )}
+      </Transition>
+    </div>
+  );
+};

apps/nextjs/src/app/[locale]/manage/users/groups/groups.module.css

@@ -0,0 +1,7 @@
+.everyoneGroup {
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
+}
+
+.everyoneGroup:hover {
+  background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+}

apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx

@@ -1,30 +1,19 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { Anchor, Group, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from "@mantine/core";
+import { Card, Group, Stack, Text, ThemeIcon, Title, UnstyledButton } from "@mantine/core";
-import { z } from "zod";
+import { IconChevronRight, IconUsersGroup } from "@tabler/icons-react";
 
-import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
-import type { inferSearchParamsFromSchema } from "@homarr/common/types";
+import { everyoneGroup } from "@homarr/definitions";
 import { getI18n } from "@homarr/translation/server";
-import { SearchInput, TablePagination, UserAvatarGroup } from "@homarr/ui";
 
 import { ManageContainer } from "~/components/manage/manage-container";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
-import { AddGroup } from "./_add-group";
+import { GroupsList } from "./_client";
+import classes from "./groups.module.css";
 
-const searchParamsSchema = z.object({
+export default async function GroupsListPage() {
-  search: z.string().optional(),
-  pageSize: z.string().regex(/\d+/).transform(Number).catch(10),
-  page: z.string().regex(/\d+/).transform(Number).catch(1),
-});
-
-interface GroupsListPageProps {
-  searchParams: Promise<inferSearchParamsFromSchema<typeof searchParamsSchema>>;
-}
-
-export default async function GroupsListPage(props: GroupsListPageProps) {
   const session = await auth();
 
   if (!session?.user.permissions.includes("admin")) {
@@ -32,55 +21,38 @@ export default async function GroupsListPage(props: GroupsListPageProps) {
   }
 
   const t = await getI18n();
-  const searchParams = searchParamsSchema.parse(await props.searchParams);
+  const groups = await api.group.getAll();
-  const { items: groups, totalCount } = await api.group.getPaginated(searchParams);
+  const dbEveryoneGroup = groups.find((group) => group.name === everyoneGroup);
+  const groupsWithoutEveryone = groups.filter((group) => group.name !== everyoneGroup);
 
   return (
     <ManageContainer size="xl">
       <DynamicBreadcrumb />
       <Stack>
         <Title>{t("group.title")}</Title>
-        <Group justify="space-between">
-          <SearchInput placeholder={`${t("group.search")}...`} defaultValue={searchParams.search} />
-          <AddGroup />
-        </Group>
-        <Table striped highlightOnHover>
-          <TableThead>
-            <TableTr>
-              <TableTh>{t("group.field.name")}</TableTh>
-              <TableTh>{t("group.field.members")}</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {groups.map((group) => (
-              <Row key={group.id} group={group} />
-            ))}
-          </TableTbody>
-        </Table>
 
-        <Group justify="end">
+        {dbEveryoneGroup && (
-          <TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />
+          <UnstyledButton component={Link} href={`/manage/users/groups/${dbEveryoneGroup.id}`}>
-        </Group>
+            <Card className={classes.everyoneGroup}>
+              <Group align="center">
+                <ThemeIcon radius="xl" variant="light">
+                  <IconUsersGroup size={16} />
+                </ThemeIcon>
+
+                <Stack gap={0} flex={1}>
+                  <Text fw={500}>{t("group.defaultGroup.name")}</Text>
+                  <Text size="sm" c="gray.6">
+                    {t("group.defaultGroup.description", { name: everyoneGroup })}
+                  </Text>
+                </Stack>
+                <IconChevronRight size={20} />
+              </Group>
+            </Card>
+          </UnstyledButton>
+        )}
+
+        <GroupsList groups={groupsWithoutEveryone} />
       </Stack>
     </ManageContainer>
   );
 }
-
-interface RowProps {
-  group: RouterOutputs["group"]["getPaginated"]["items"][number];
-}
-
-const Row = ({ group }: RowProps) => {
-  return (
-    <TableTr>
-      <TableTd>
-        <Anchor component={Link} href={`/manage/users/groups/${group.id}`}>
-          {group.name}
-        </Anchor>
-      </TableTd>
-      <TableTd>
-        <UserAvatarGroup users={group.members} size="sm" limit={5} />
-      </TableTd>
-    </TableTr>
-  );
-};

apps/nextjs/src/components/board/board-select.tsx

@@ -0,0 +1,33 @@
+import { Group, Text } from "@mantine/core";
+import { IconLayoutDashboard } from "@tabler/icons-react";
+
+import type { SelectWithCustomItemsProps } from "@homarr/ui";
+import { SelectWithCustomItems } from "@homarr/ui";
+
+import type { Board } from "~/app/[locale]/boards/_types";
+
+interface BoardSelectProps extends Omit<SelectWithCustomItemsProps<{ value: string; label: string }>, "data"> {
+  boards: Pick<Board, "id" | "name" | "logoImageUrl">[];
+}
+
+export const BoardSelect = ({ boards, ...props }: BoardSelectProps) => {
+  return (
+    <SelectWithCustomItems
+      {...props}
+      data={boards.map((board) => ({
+        value: board.id,
+        label: board.name,
+        image: board.logoImageUrl,
+      }))}
+      SelectOption={({ label, image }: { value: string; label: string; image: string | null }) => (
+        <Group>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          {image ? <img width={16} height={16} src={image} alt={label} /> : <IconLayoutDashboard size={16} />}
+          <Text fz="sm" fw={500}>
+            {label}
+          </Text>
+        </Group>
+      )}
+    />
+  );
+};

e2e/shared/actions/onboarding-actions.ts

@@ -22,6 +22,7 @@ export class OnboardingActions {
       await this.db.insert(sqliteSchema.groups).values({
         id: createId(),
         name: input.group,
+        position: 1,
       });
     }
   }

packages/api/src/router/board.ts

@@ -5,7 +5,7 @@ import { z } from "zod";
 import { constructBoardPermissions } from "@homarr/auth/shared";
 import type { DeviceType } from "@homarr/common/server";
 import type { Database, InferInsertModel, InferSelectModel, SQL } from "@homarr/db";
-import { and, createId, eq, handleTransactionsAsync, inArray, like, or } from "@homarr/db";
+import { and, asc, createId, eq, handleTransactionsAsync, inArray, isNull, like, not, or } from "@homarr/db";
 import { getServerSettingByKeyAsync } from "@homarr/db/queries";
 import {
   boardGroupPermissions,
@@ -13,6 +13,7 @@ import {
   boardUserPermissions,
   groupMembers,
   groupPermissions,
+  groups,
   integrationGroupPermissions,
   integrationItems,
   integrationUserPermissions,
@@ -22,7 +23,7 @@ import {
   users,
 } from "@homarr/db/schema";
 import type { WidgetKind } from "@homarr/definitions";
-import { getPermissionsWithParents, widgetKinds } from "@homarr/definitions";
+import { everyoneGroup, getPermissionsWithChildren, getPermissionsWithParents, widgetKinds } from "@homarr/definitions";
 import { importOldmarrAsync } from "@homarr/old-import";
 import { importJsonFileSchema } from "@homarr/old-import/shared";
 import { oldmarrConfigSchema } from "@homarr/old-schema";
@@ -57,6 +58,37 @@ export const boardRouter = createTRPCRouter({
       where: eq(boards.isPublic, true),
     });
   }),
+  getBoardsForGroup: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(z.object({ groupId: z.string() }))
+    .query(async ({ ctx, input }) => {
+      const dbEveryoneAndCurrentGroup = await ctx.db.query.groups.findMany({
+        where: or(eq(groups.name, everyoneGroup), eq(groups.id, input.groupId)),
+        with: {
+          boardPermissions: true,
+          permissions: true,
+        },
+      });
+
+      const distinctPermissions = new Set(
+        dbEveryoneAndCurrentGroup.flatMap((group) => group.permissions.map(({ permission }) => permission)),
+      );
+      const canViewAllBoards = getPermissionsWithChildren([...distinctPermissions]).includes("board-view-all");
+
+      const boardIds = dbEveryoneAndCurrentGroup.flatMap((group) =>
+        group.boardPermissions.map(({ boardId }) => boardId),
+      );
+      const boardWhere = canViewAllBoards ? undefined : or(eq(boards.isPublic, true), inArray(boards.id, boardIds));
+
+      return await ctx.db.query.boards.findMany({
+        columns: {
+          id: true,
+          name: true,
+          logoImageUrl: true,
+        },
+        where: boardWhere,
+      });
+    }),
   getAllBoards: publicProcedure.query(async ({ ctx }) => {
     const userId = ctx.session?.user.id;
     const permissionsOfCurrentUserWhenPresent = await ctx.db.query.boardUserPermissions.findMany({
@@ -89,6 +121,7 @@ export const boardRouter = createTRPCRouter({
       columns: {
         id: true,
         name: true,
+        logoImageUrl: true,
         isPublic: true,
       },
       with: {
@@ -975,9 +1008,13 @@ export const boardRouter = createTRPCRouter({
  * For an example of a user with deviceType = 'mobile' it would go through the following order:
  * 1. user.mobileHomeBoardId
  * 2. user.homeBoardId
- * 3. serverSettings.mobileHomeBoardId
+ * 3. group.mobileHomeBoardId of the lowest positions group
- * 4. serverSettings.homeBoardId
+ * 4. group.homeBoardId of the lowest positions group
- * 5. show NOT_FOUND error
+ * 5. everyoneGroup.mobileHomeBoardId
+ * 6. everyoneGroup.homeBoardId
+ * 7. serverSettings.mobileHomeBoardId
+ * 8. serverSettings.homeBoardId
+ * 9. show NOT_FOUND error
  */
 const getHomeIdBoardAsync = async (
   db: Database,
@@ -985,12 +1022,46 @@ const getHomeIdBoardAsync = async (
   deviceType: DeviceType,
 ) => {
   const settingKey = deviceType === "mobile" ? "mobileHomeBoardId" : "homeBoardId";
-  if (user?.[settingKey] || user?.homeBoardId) {
+
-    return user[settingKey] ?? user.homeBoardId;
+  if (!user) {
-  } else {
     const boardSettings = await getServerSettingByKeyAsync(db, "board");
     return boardSettings[settingKey] ?? boardSettings.homeBoardId;
   }
+
+  if (user[settingKey]) return user[settingKey];
+  if (user.homeBoardId) return user.homeBoardId;
+
+  const lowestGroupExceptEveryone = await db
+    .select({
+      homeBoardId: groups.homeBoardId,
+      mobileHomeBoardId: groups.mobileHomeBoardId,
+    })
+    .from(groups)
+    .leftJoin(groupMembers, eq(groups.id, groupMembers.groupId))
+    .where(
+      and(
+        eq(groupMembers.userId, user.id),
+        not(eq(groups.name, everyoneGroup)),
+        not(isNull(groups[settingKey])),
+        not(isNull(groups.homeBoardId)),
+      ),
+    )
+    .orderBy(asc(groups.position))
+    .limit(1)
+    .then((result) => result[0]);
+
+  if (lowestGroupExceptEveryone?.[settingKey]) return lowestGroupExceptEveryone[settingKey];
+  if (lowestGroupExceptEveryone?.homeBoardId) return lowestGroupExceptEveryone.homeBoardId;
+
+  const dbEveryoneGroup = await db.query.groups.findFirst({
+    where: eq(groups.name, everyoneGroup),
+  });
+
+  if (dbEveryoneGroup?.[settingKey]) return dbEveryoneGroup[settingKey];
+  if (dbEveryoneGroup?.homeBoardId) return dbEveryoneGroup.homeBoardId;
+
+  const boardSettings = await getServerSettingByKeyAsync(db, "board");
+  return boardSettings[settingKey] ?? boardSettings.homeBoardId;
 };
 
 const noBoardWithSimilarNameAsync = async (db: Database, name: string, ignoredIds: string[] = []) => {

packages/api/src/router/group.ts

@@ -2,7 +2,8 @@ import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 
 import type { Database } from "@homarr/db";
-import { and, createId, eq, like, not, sql } from "@homarr/db";
+import { and, createId, eq, handleTransactionsAsync, like, not, sql } from "@homarr/db";
+import { getMaxGroupPositionAsync } from "@homarr/db/queries";
 import { groupMembers, groupPermissions, groups } from "@homarr/db/schema";
 import { everyoneGroup } from "@homarr/definitions";
 import { validation } from "@homarr/validation";
@@ -12,6 +13,30 @@ import { throwIfCredentialsDisabled } from "./invite/checks";
 import { nextOnboardingStepAsync } from "./onboard/onboard-queries";
 
 export const groupRouter = createTRPCRouter({
+  getAll: permissionRequiredProcedure.requiresPermission("admin").query(async ({ ctx }) => {
+    const dbGroups = await ctx.db.query.groups.findMany({
+      with: {
+        members: {
+          with: {
+            user: {
+              columns: {
+                id: true,
+                name: true,
+                email: true,
+                image: true,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    return dbGroups.map((group) => ({
+      ...group,
+      members: group.members.map((member) => member.user),
+    }));
+  }),
+
   getPaginated: permissionRequiredProcedure
     .requiresPermission("admin")
     .input(validation.common.paginated)
@@ -153,10 +178,13 @@ export const groupRouter = createTRPCRouter({
     .mutation(async ({ input, ctx }) => {
       await checkSimilarNameAndThrowAsync(ctx.db, input.name);
 
+      const maxPosition = await getMaxGroupPositionAsync(ctx.db);
+
       const groupId = createId();
       await ctx.db.insert(groups).values({
         id: groupId,
         name: input.name,
+        position: maxPosition + 1,
       });
 
       await ctx.db.insert(groupPermissions).values({
@@ -172,10 +200,13 @@ export const groupRouter = createTRPCRouter({
     .mutation(async ({ input, ctx }) => {
       await checkSimilarNameAndThrowAsync(ctx.db, input.name);
 
+      const maxPosition = await getMaxGroupPositionAsync(ctx.db);
+
       const id = createId();
       await ctx.db.insert(groups).values({
         id,
         name: input.name,
+        position: maxPosition + 1,
         ownerId: ctx.session.user.id,
       });
 
@@ -197,6 +228,43 @@ export const groupRouter = createTRPCRouter({
         })
         .where(eq(groups.id, input.id));
     }),
+  savePartialSettings: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(validation.group.savePartialSettings)
+    .mutation(async ({ input, ctx }) => {
+      await throwIfGroupNotFoundAsync(ctx.db, input.id);
+
+      await ctx.db
+        .update(groups)
+        .set({
+          homeBoardId: input.settings.homeBoardId,
+          mobileHomeBoardId: input.settings.mobileHomeBoardId,
+        })
+        .where(eq(groups.id, input.id));
+    }),
+  savePositions: permissionRequiredProcedure
+    .requiresPermission("admin")
+    .input(validation.group.savePositions)
+    .mutation(async ({ input, ctx }) => {
+      const positions = input.positions.map((id, index) => ({ id, position: index + 1 }));
+
+      await handleTransactionsAsync(ctx.db, {
+        handleAsync: async (db, schema) => {
+          await db.transaction(async (trx) => {
+            for (const { id, position } of positions) {
+              await trx.update(schema.groups).set({ position }).where(eq(groups.id, id));
+            }
+          });
+        },
+        handleSync: (db) => {
+          db.transaction((trx) => {
+            for (const { id, position } of positions) {
+              trx.update(groups).set({ position }).where(eq(groups.id, id)).run();
+            }
+          });
+        },
+      });
+    }),
   savePermissions: permissionRequiredProcedure
     .requiresPermission("admin")
     .input(validation.group.savePermissions)

packages/api/src/router/test/board.spec.ts

@@ -205,6 +205,7 @@ describe("getAllBoards should return all boards accessable to the current user",
       await db.insert(groups).values({
         id: groupId,
         name: "group1",
+        position: 1,
       });
 
       await db.insert(groupMembers).values({
@@ -1166,6 +1167,7 @@ describe("getBoardPermissions should return board permissions", () => {
     await db.insert(groups).values({
       id: groupId,
       name: "group1",
+      position: 1,
     });
 
     await db.insert(boardGroupPermissions).values({
@@ -1260,6 +1262,7 @@ describe("saveGroupBoardPermissions should save group board permissions", () =>
       await db.insert(groups).values({
         id: groupId,
         name: "group1",
+        position: 1,
       });
 
       const boardId = createId();

packages/api/src/router/test/group.spec.ts

@@ -43,6 +43,7 @@ describe("paginated should return a list of groups with pagination", () => {
         [1, 2, 3, 4, 5].map((number) => ({
           id: number.toString(),
           name: `Group ${number}`,
+          position: number,
         })),
       );
 
@@ -66,6 +67,7 @@ describe("paginated should return a list of groups with pagination", () => {
       [1, 2, 3, 4, 5].map((number) => ({
         id: number.toString(),
         name: `Group ${number}`,
+        position: number,
       })),
     );
 
@@ -89,6 +91,7 @@ describe("paginated should return a list of groups with pagination", () => {
     await db.insert(groups).values({
       id: groupId,
       name: "Group",
+      position: 1,
     });
     await db.insert(groupMembers).values({
       groupId,
@@ -123,6 +126,7 @@ describe("paginated should return a list of groups with pagination", () => {
         ["first", "second", "third", "forth", "fifth"].map((key, index) => ({
           id: index.toString(),
           name: key,
+          position: index + 1,
         })),
       );
 
@@ -163,10 +167,12 @@ describe("byId should return group by id including members and permissions", ()
       {
         id: groupId,
         name: "Group",
+        position: 1,
       },
       {
         id: createId(),
         name: "Another group",
+        position: 2,
       },
     ]);
     await db.insert(groupMembers).values({
@@ -202,6 +208,7 @@ describe("byId should return group by id including members and permissions", ()
     await db.insert(groups).values({
       id: "2",
       name: "Group",
+      position: 1,
     });
 
     // Act
@@ -278,6 +285,7 @@ describe("create should create group in database", () => {
     await db.insert(groups).values({
       id: createId(),
       name: similarName,
+      position: 1,
     });
 
     // Act
@@ -314,10 +322,12 @@ describe("update should update name with value that is no duplicate", () => {
       {
         id: groupId,
         name: initialValue,
+        position: 1,
       },
       {
         id: createId(),
         name: "Third",
+        position: 2,
       },
     ]);
 
@@ -347,10 +357,12 @@ describe("update should update name with value that is no duplicate", () => {
       {
         id: groupId,
         name: "Something",
+        position: 1,
       },
       {
         id: createId(),
         name: initialDuplicate,
+        position: 2,
       },
     ]);
 
@@ -373,6 +385,7 @@ describe("update should update name with value that is no duplicate", () => {
     await db.insert(groups).values({
       id: createId(),
       name: "something",
+      position: 1,
     });
 
     // Act
@@ -413,6 +426,7 @@ describe("savePermissions should save permissions for group", () => {
     await db.insert(groups).values({
       id: groupId,
       name: "Group",
+      position: 1,
     });
     await db.insert(groupPermissions).values({
       groupId,
@@ -442,6 +456,7 @@ describe("savePermissions should save permissions for group", () => {
     await db.insert(groups).values({
       id: createId(),
       name: "Group",
+      position: 1,
     });
 
     // Act
@@ -494,6 +509,7 @@ describe("transferOwnership should transfer ownership of group", () => {
       id: groupId,
       name: "Group",
       ownerId: defaultOwnerId,
+      position: 1,
     });
 
     // Act
@@ -518,6 +534,7 @@ describe("transferOwnership should transfer ownership of group", () => {
     await db.insert(groups).values({
       id: createId(),
       name: "Group",
+      position: 1,
     });
 
     // Act
@@ -559,10 +576,12 @@ describe("deleteGroup should delete group", () => {
       {
         id: groupId,
         name: "Group",
+        position: 1,
       },
       {
         id: createId(),
         name: "Another group",
+        position: 2,
       },
     ]);
 
@@ -586,6 +605,7 @@ describe("deleteGroup should delete group", () => {
     await db.insert(groups).values({
       id: createId(),
       name: "Group",
+      position: 1,
     });
 
     // Act
@@ -638,6 +658,7 @@ describe("addMember should add member to group", () => {
       id: groupId,
       name: "Group",
       ownerId: defaultOwnerId,
+      position: 1,
     });
 
     // Act
@@ -715,6 +736,7 @@ describe("addMember should add member to group", () => {
       id: groupId,
       name: "Group",
       ownerId: defaultOwnerId,
+      position: 1,
     });
 
     // Act
@@ -753,6 +775,7 @@ describe("removeMember should remove member from group", () => {
       id: groupId,
       name: "Group",
       ownerId: defaultOwnerId,
+      position: 1,
     });
     await db.insert(groupMembers).values({
       groupId,
@@ -833,6 +856,7 @@ describe("removeMember should remove member from group", () => {
       id: groupId,
       name: "Group",
       ownerId: defaultOwnerId,
+      position: 1,
     });
     await db.insert(groupMembers).values({
       groupId,

packages/api/src/router/user.ts

@@ -4,6 +4,7 @@ import { z } from "zod";
 import { createSaltAsync, hashPasswordAsync } from "@homarr/auth";
 import type { Database } from "@homarr/db";
 import { and, createId, eq, like } from "@homarr/db";
+import { getMaxGroupPositionAsync } from "@homarr/db/queries";
 import { boards, groupMembers, groupPermissions, groups, invites, users } from "@homarr/db/schema";
 import { selectUserSchema } from "@homarr/db/validationSchemas";
 import { credentialsAdminGroup } from "@homarr/definitions";
@@ -31,12 +32,14 @@ export const userRouter = createTRPCRouter({
     .mutation(async ({ ctx, input }) => {
       throwIfCredentialsDisabled();
 
+      const maxPosition = await getMaxGroupPositionAsync(ctx.db);
       const userId = await createUserAsync(ctx.db, input);
       const groupId = createId();
       await ctx.db.insert(groups).values({
         id: groupId,
         name: credentialsAdminGroup,
         ownerId: userId,
+        position: maxPosition + 1,
       });
       await ctx.db.insert(groupPermissions).values({
         groupId,

packages/auth/permissions/test/integration-query-permissions.spec.ts

@@ -272,7 +272,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
       },
     ];
     await db.insert(boards).values(createMockBoard({ id: "1" }));
-    await db.insert(groups).values({ id: "1", name: "" });
+    await db.insert(groups).values({ id: "1", name: "", position: 1 });
     await db.insert(groupMembers).values({ userId: session.user.id, groupId: "1" });
     await db.insert(boardGroupPermissions).values({ groupId: "1", boardId: "1", permission: "view" });
 
@@ -325,7 +325,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
       },
     ];
     await db.insert(boards).values(createMockBoard({ id: "1" }));
-    await db.insert(groups).values({ id: "1", name: "" });
+    await db.insert(groups).values({ id: "1", name: "", position: 1 });
     await db.insert(groupMembers).values({ userId: session.user.id, groupId: "1" });
     await db.insert(boardGroupPermissions).values({ groupId: "1", boardId: "1", permission: "view" });
 
@@ -379,7 +379,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
     ];
     await db.insert(boards).values(createMockBoard({ id: "1" }));
     await db.insert(boards).values(createMockBoard({ id: "2" }));
-    await db.insert(groups).values({ id: "1", name: "" });
+    await db.insert(groups).values({ id: "1", name: "", position: 1 });
     await db.insert(groupMembers).values({ userId: session.user.id, groupId: "1" });
     await db.insert(boardGroupPermissions).values({ groupId: "1", boardId: "2", permission: "view" });
     await db.insert(boardUserPermissions).values({ userId: session.user.id, boardId: "1", permission: "view" });

packages/auth/providers/test/ldap-authorization.spec.ts

@@ -301,6 +301,7 @@ describe("authorizeWithLdapCredentials", () => {
     await db.insert(groups).values({
       id: groupId,
       name: "homarr_example",
+      position: 1,
     });
 
     // Act

packages/auth/test/callbacks.spec.ts

@@ -25,6 +25,7 @@ describe("getCurrentUserPermissions", () => {
     await db.insert(groups).values({
       id: "2",
       name: "test",
+      position: 1,
     });
     await db.insert(groupPermissions).values({
       groupId: "2",
@@ -51,6 +52,7 @@ describe("getCurrentUserPermissions", () => {
     await db.insert(groups).values({
       id: "2",
       name: "test",
+      position: 1,
     });
     await db.insert(groupPermissions).values({
       groupId: "2",
@@ -81,6 +83,7 @@ describe("getCurrentUserPermissions", () => {
     await db.insert(groups).values({
       id: mockId,
       name: "test",
+      position: 1,
     });
     await db.insert(groupMembers).values({
       userId: mockId,

packages/auth/test/events.spec.ts

@@ -259,4 +259,5 @@ const createGroupAsync = async (db: Database, name = "test") =>
   await db.insert(groups).values({
     id: "1",
     name,
+    position: 1,
   });

packages/db/migrations/mysql/0025_add-group-home-board-settings.sql

@@ -0,0 +1,25 @@
+ALTER TABLE `group` ADD `home_board_id` varchar(64);
+--> statement-breakpoint
+ALTER TABLE `group` ADD `mobile_home_board_id` varchar(64);
+--> statement-breakpoint
+ALTER TABLE `group` ADD `position` smallint;
+--> statement-breakpoint
+CREATE TABLE `temp_group` (
+    `id` varchar(64) NOT NULL,
+    `name` varchar(255) NOT NULL,
+    `position` smallint NOT NULL
+);
+--> statement-breakpoint
+INSERT INTO `temp_group`(`id`, `name`, `position`) SELECT `id`, `name`, ROW_NUMBER() OVER(ORDER BY `name`) FROM `group` WHERE `name` != 'everyone';
+--> statement-breakpoint
+UPDATE `group` SET `position`=(SELECT `position` FROM `temp_group` WHERE `temp_group`.`id`=`group`.`id`);
+--> statement-breakpoint
+DROP TABLE `temp_group`;
+--> statement-breakpoint
+UPDATE `group` SET `position` = -1 WHERE `name` = 'everyone';
+--> statement-breakpoint
+ALTER TABLE `group` MODIFY `position` smallint NOT NULL;
+--> statement-breakpoint
+ALTER TABLE `group` ADD CONSTRAINT `group_home_board_id_board_id_fk` FOREIGN KEY (`home_board_id`) REFERENCES `board`(`id`) ON DELETE set null ON UPDATE no action;
+--> statement-breakpoint
+ALTER TABLE `group` ADD CONSTRAINT `group_mobile_home_board_id_board_id_fk` FOREIGN KEY (`mobile_home_board_id`) REFERENCES `board`(`id`) ON DELETE set null ON UPDATE no action;

packages/db/migrations/mysql/meta/_journal.json

@@ -176,6 +176,13 @@
       "when": 1738961147412,
       "tag": "0024_mean_vin_gonzales",
       "breakpoints": true
+    },
+    {
+      "idx": 25,
+      "version": "5",
+      "when": 1739469710187,
+      "tag": "0025_add-group-home-board-settings",
+      "breakpoints": true
     }
   ]
 }

packages/db/migrations/seed.ts

@@ -28,6 +28,7 @@ const seedEveryoneGroupAsync = async (db: Database) => {
   await db.insert(groups).values({
     id: createId(),
     name: everyoneGroup,
+    position: -1,
   });
   console.log("Created group 'everyone' through seed");
 };

packages/db/migrations/sqlite/0025_add-group-home-board-settings.sql

@@ -0,0 +1,33 @@
+COMMIT TRANSACTION;
+--> statement-breakpoint
+PRAGMA foreign_keys = OFF;
+--> statement-breakpoint
+BEGIN TRANSACTION;
+--> statement-breakpoint
+CREATE TABLE `__new_group` (
+	`id` text PRIMARY KEY NOT NULL,
+	`name` text NOT NULL,
+	`owner_id` text,
+    `home_board_id` text,
+    `mobile_home_board_id` text,
+	`position` integer NOT NULL,
+	FOREIGN KEY (`owner_id`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE set null,
+	FOREIGN KEY (`home_board_id`) REFERENCES `board`(`id`) ON UPDATE no action ON DELETE set null,
+	FOREIGN KEY (`mobile_home_board_id`) REFERENCES `board`(`id`) ON UPDATE no action ON DELETE set null
+);
+--> statement-breakpoint
+INSERT INTO `__new_group`("id", "name", "owner_id", "position") SELECT "id", "name", "owner_id", -1 FROM `group` WHERE "name" = 'everyone';
+--> statement-breakpoint
+INSERT INTO `__new_group`("id", "name", "owner_id", "position") SELECT "id", "name", "owner_id", ROW_NUMBER() OVER(ORDER BY "name") FROM `group` WHERE "name" != 'everyone';
+--> statement-breakpoint
+DROP TABLE `group`;
+--> statement-breakpoint
+ALTER TABLE `__new_group` RENAME TO `group`;
+--> statement-breakpoint
+CREATE UNIQUE INDEX `group_name_unique` ON `group` (`name`);
+--> statement-breakpoint
+COMMIT TRANSACTION;
+--> statement-breakpoint
+PRAGMA foreign_keys = ON;
+--> statement-breakpoint
+BEGIN TRANSACTION;

packages/db/migrations/sqlite/meta/_journal.json

@@ -176,6 +176,13 @@
       "when": 1738961178990,
       "tag": "0024_bitter_scrambler",
       "breakpoints": true
+    },
+    {
+      "idx": 25,
+      "version": "6",
+      "when": 1739468826756,
+      "tag": "0025_add-group-home-board-settings",
+      "breakpoints": true
     }
   ]
 }

packages/db/queries/group.ts

@@ -0,0 +1,11 @@
+import { max } from "drizzle-orm";
+
+import type { HomarrDatabase } from "../driver";
+import { groups } from "../schema";
+
+export const getMaxGroupPositionAsync = async (db: HomarrDatabase) => {
+  return await db
+    .select({ value: max(groups.position) })
+    .from(groups)
+    .then((result) => result[0]?.value ?? 1);
+};

packages/db/queries/index.ts

@@ -1,2 +1,3 @@
 export * from "./item";
 export * from "./server-setting";
+export * from "./group";

packages/db/schema/mysql.ts

@@ -9,6 +9,7 @@ import {
   int,
   mysqlTable,
   primaryKey,
+  smallint,
   text,
   timestamp,
   tinyint,
@@ -150,6 +151,13 @@ export const groups = mysqlTable("group", {
   ownerId: varchar({ length: 64 }).references(() => users.id, {
     onDelete: "set null",
   }),
+  homeBoardId: varchar({ length: 64 }).references(() => boards.id, {
+    onDelete: "set null",
+  }),
+  mobileHomeBoardId: varchar({ length: 64 }).references(() => boards.id, {
+    onDelete: "set null",
+  }),
+  position: smallint().notNull(),
 });
 
 export const groupPermissions = mysqlTable("groupPermission", {
@@ -499,6 +507,16 @@ export const groupRelations = relations(groups, ({ one, many }) => ({
     fields: [groups.ownerId],
     references: [users.id],
   }),
+  homeBoard: one(boards, {
+    fields: [groups.homeBoardId],
+    references: [boards.id],
+    relationName: "groupRelations__board__homeBoardId",
+  }),
+  mobileHomeBoard: one(boards, {
+    fields: [groups.mobileHomeBoardId],
+    references: [boards.id],
+    relationName: "groupRelations__board__mobileHomeBoardId",
+  }),
 }));
 
 export const groupPermissionRelations = relations(groupPermissions, ({ one }) => ({
@@ -574,6 +592,12 @@ export const boardRelations = relations(boards, ({ many, one }) => ({
   }),
   userPermissions: many(boardUserPermissions),
   groupPermissions: many(boardGroupPermissions),
+  groupHomes: many(groups, {
+    relationName: "groupRelations__board__homeBoardId",
+  }),
+  mobileHomeBoard: many(groups, {
+    relationName: "groupRelations__board__mobileHomeBoardId",
+  }),
 }));
 
 export const sectionRelations = relations(sections, ({ many, one }) => ({

packages/db/schema/sqlite.ts

@@ -133,6 +133,13 @@ export const groups = sqliteTable("group", {
   ownerId: text().references(() => users.id, {
     onDelete: "set null",
   }),
+  homeBoardId: text().references(() => boards.id, {
+    onDelete: "set null",
+  }),
+  mobileHomeBoardId: text().references(() => boards.id, {
+    onDelete: "set null",
+  }),
+  position: int().notNull(),
 });
 
 export const groupPermissions = sqliteTable("groupPermission", {
@@ -486,6 +493,16 @@ export const groupRelations = relations(groups, ({ one, many }) => ({
     fields: [groups.ownerId],
     references: [users.id],
   }),
+  homeBoard: one(boards, {
+    fields: [groups.homeBoardId],
+    references: [boards.id],
+    relationName: "groupRelations__board__homeBoardId",
+  }),
+  mobileHomeBoard: one(boards, {
+    fields: [groups.mobileHomeBoardId],
+    references: [boards.id],
+    relationName: "groupRelations__board__mobileHomeBoardId",
+  }),
 }));
 
 export const groupPermissionRelations = relations(groupPermissions, ({ one }) => ({
@@ -561,6 +578,12 @@ export const boardRelations = relations(boards, ({ many, one }) => ({
   }),
   userPermissions: many(boardUserPermissions),
   groupPermissions: many(boardGroupPermissions),
+  groupHomes: many(groups, {
+    relationName: "groupRelations__board__homeBoardId",
+  }),
+  mobileHomeBoard: many(groups, {
+    relationName: "groupRelations__board__mobileHomeBoardId",
+  }),
 }));
 
 export const sectionRelations = relations(sections, ({ many, one }) => ({

packages/old-import/src/import/collections/user-collection.ts

@@ -36,6 +36,7 @@ export const createUserInsertCollection = (
   insertCollection.groups.push({
     id: adminGroupId,
     name: credentialsAdminGroup,
+    position: 1,
   });
 
   insertCollection.groupPermissions.push({

packages/translation/src/lang/en.json

@@ -305,7 +305,15 @@
     "search": "Find a group",
     "field": {
       "name": "Name",
-      "members": "Members"
+      "members": "Members",
+      "homeBoard": {
+        "label": "Home board",
+        "description": "Only boards accessible to the group can be selected"
+      },
+      "mobileBoard": {
+        "label": "Mobile board",
+        "description": "Only boards accessible to the group can be selected"
+      }
     },
     "permission": {
       "admin": {
@@ -501,7 +509,35 @@
       "select": {
         "label": "Select group",
         "notFound": "No group found"
+      },
+      "settings": {
+        "board": {
+          "notification": {
+            "success": {
+              "title": "Settings saved",
+              "message": "Board settings saved successfully"
+            },
+            "error": {
+              "title": "Failed to save settings",
+              "message": "Unable to save board settings"
+            }
+          }
+        }
+      },
+      "changePosition": {
+        "notification": {
+          "success": {
+            "message": "Position changed successfully"
+          },
+          "error": {
+            "message": "Unable to change position"
+          }
+        }
       }
+    },
+    "defaultGroup": {
+      "name": "Default group",
+      "description": "{name} - All signed in users"
     }
   },
   "app": {
@@ -888,6 +924,7 @@
     },
     "dangerZone": "Danger zone",
     "noResults": "No results found",
+    "unsavedChanges": "You have unsaved changes!",
     "preview": {
       "show": "Show preview",
       "hide": "Hide preview"
@@ -2414,6 +2451,13 @@
             "ownerOfGroup": "Owner of this group",
             "ownerOfGroupDeleted": "The owner of this group was deleted. It currently has no owner."
           },
+          "setting": {
+            "title": "Settings",
+            "alert": "Group settings are prioritized by the order of groups in the list. The top settings overwrite the bottom settings.",
+            "board": {
+              "title": "Boards"
+            }
+          },
           "members": {
             "title": "Members",
             "search": "Find a member",

packages/ui/src/components/index.tsx

@@ -4,6 +4,7 @@ export { SearchInput } from "./search-input";
 export * from "./select-with-description";
 export * from "./select-with-description-and-badge";
 export { SelectWithCustomItems } from "./select-with-custom-items";
+export type { SelectWithCustomItemsProps } from "./select-with-custom-items";
 export { TablePagination } from "./table-pagination";
 export { TextMultiSelect } from "./text-multi-select";
 export { UserAvatar } from "./user-avatar";

packages/ui/src/components/select-with-custom-items.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useMemo } from "react";
 import type { SelectProps } from "@mantine/core";
-import { Combobox, Input, InputBase, useCombobox } from "@mantine/core";
+import { Combobox, ComboboxClearButton, Input, InputBase, useCombobox } from "@mantine/core";
 import { useUncontrolled } from "@mantine/hooks";
 
 interface BaseSelectItem {
@@ -11,7 +11,7 @@ interface BaseSelectItem {
 }
 
 export interface SelectWithCustomItemsProps<TSelectItem extends BaseSelectItem>
-  extends Pick<SelectProps, "label" | "error" | "defaultValue" | "value" | "onChange" | "placeholder"> {
+  extends Pick<SelectProps, "label" | "error" | "defaultValue" | "value" | "onChange" | "placeholder" | "clearable"> {
   data: TSelectItem[];
   description?: string;
   withAsterisk?: boolean;
@@ -32,6 +32,7 @@ export const SelectWithCustomItems = <TSelectItem extends BaseSelectItem>({
   placeholder,
   SelectOption,
   w,
+  clearable,
   ...props
 }: Props<TSelectItem>) => {
   const combobox = useCombobox({
@@ -65,6 +66,8 @@ export const SelectWithCustomItems = <TSelectItem extends BaseSelectItem>({
     [setValue, data, combobox],
   );
 
+  const _clearable = clearable && Boolean(_value);
+
   return (
     <Combobox store={combobox} withinPortal={false} onOptionSubmit={onOptionSubmit}>
       <Combobox.Target>
@@ -73,9 +76,11 @@ export const SelectWithCustomItems = <TSelectItem extends BaseSelectItem>({
           component="button"
           type="button"
           pointer
-          rightSection={<Combobox.Chevron />}
+          __clearSection={<ComboboxClearButton onClear={() => setValue(null, null)} />}
+          __clearable={_clearable}
+          __defaultRightSection={<Combobox.Chevron />}
           onClick={toggle}
-          rightSectionPointerEvents="none"
+          rightSectionPointerEvents={_clearable ? "all" : "none"}
           multiline
           w={w}
         >

packages/validation/src/group.ts

@@ -18,11 +18,25 @@ const createSchema = z.object({
 
 const updateSchema = createSchema.merge(byIdSchema);
 
+const settingsSchema = z.object({
+  homeBoardId: z.string().nullable(),
+  mobileHomeBoardId: z.string().nullable(),
+});
+
+const savePartialSettingsSchema = z.object({
+  id: z.string(),
+  settings: settingsSchema.partial(),
+});
+
 const savePermissionsSchema = z.object({
   groupId: z.string(),
   permissions: z.array(zodEnumFromArray(groupPermissionKeys)),
 });
 
+const savePositionsSchema = z.object({
+  positions: z.array(z.string()),
+});
+
 const groupUserSchema = z.object({ groupId: z.string(), userId: z.string() });
 
 export const groupSchemas = {
@@ -30,4 +44,7 @@ export const groupSchemas = {
   update: updateSchema,
   savePermissions: savePermissionsSchema,
   groupUser: groupUserSchema,
+  savePartialSettings: savePartialSettingsSchema,
+  settings: settingsSchema,
+  savePositions: savePositionsSchema,
 };

pnpm-lock.yaml

@@ -82,6 +82,18 @@ importers:
 
   apps/nextjs:
     dependencies:
+      '@dnd-kit/core':
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@dnd-kit/modifiers':
+        specifier: ^9.0.0
+        version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)
+      '@dnd-kit/sortable':
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)
+      '@dnd-kit/utilities':
+        specifier: ^3.2.2
+        version: 3.2.2(react@19.0.0)
       '@homarr/analytics':
         specifier: workspace:^0.1.0
         version: link:../../packages/analytics
@@ -2351,6 +2363,12 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@dnd-kit/modifiers@9.0.0':
+    resolution: {integrity: sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
   '@dnd-kit/sortable@10.0.0':
     resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
     peerDependencies:
@@ -10324,7 +10342,7 @@ snapshots:
   '@dnd-kit/accessibility@3.1.1(react@19.0.0)':
     dependencies:
       react: 19.0.0
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   '@dnd-kit/core@6.3.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
@@ -10332,19 +10350,26 @@ snapshots:
       '@dnd-kit/utilities': 3.2.2(react@19.0.0)
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
-      tslib: 2.7.0
+      tslib: 2.8.1
+
+  '@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@dnd-kit/utilities': 3.2.2(react@19.0.0)
+      react: 19.0.0
+      tslib: 2.8.1
 
   '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@dnd-kit/core': 6.3.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@dnd-kit/utilities': 3.2.2(react@19.0.0)
       react: 19.0.0
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   '@dnd-kit/utilities@3.2.2(react@19.0.0)':
     dependencies:
       react: 19.0.0
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   '@drizzle-team/brocli@0.10.2': {}
 
@@ -10815,7 +10840,7 @@ snapshots:
 
   '@formatjs/intl-localematcher@0.5.5':
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   '@grpc/grpc-js@1.12.5':
     dependencies: