@@ -231,7 +140,7 @@ function DashboardDragOverlay({ activeId, dashboard }: { activeId: string; dashb
);
}
- return
Moving…
;
+ return null;
}
/* ---------- Main Dashboard ---------- */
@@ -273,95 +182,13 @@ export default function DashboardPage() {
const activeIdStr = String(active.id);
const overIdStr = String(over.id);
- const allServiceIds = [
- ...dashboard.ungroupedServices.map((s) => s.id),
- ...dashboard.groups.flatMap((g) => g.services.map((s) => s.id)),
- ];
const groupIds = dashboard.groups.map((g) => g.id);
const widgetIds = dashboard.widgets.map((w) => w.id);
- const isActiveService = allServiceIds.includes(activeIdStr);
- const isOverService = allServiceIds.includes(overIdStr);
- const isActiveGroup = groupIds.includes(activeIdStr);
- const isOverGroup = groupIds.includes(overIdStr);
const isActiveWidget = widgetIds.includes(activeIdStr);
const isOverWidget = widgetIds.includes(overIdStr);
- // Service → Service (reorder / cross-group)
- if (isActiveService && isOverService) {
- const findServiceLocation = (sid: string): { groupId: string | null; index: number } => {
- const ungroupedIdx = dashboard.ungroupedServices.findIndex((s) => s.id === sid);
- if (ungroupedIdx !== -1) return { groupId: null, index: ungroupedIdx };
- for (const g of dashboard.groups) {
- const idx = g.services.findIndex((s) => s.id === sid);
- if (idx !== -1) return { groupId: g.id, index: idx };
- }
- return { groupId: null, index: -1 };
- };
-
- const activeLoc = findServiceLocation(activeIdStr);
- const overLoc = findServiceLocation(overIdStr);
-
- const groupServices: Record
= {};
- for (const g of dashboard.groups) {
- const ids = [...g.services.map((s) => s.id)];
- if (activeLoc.groupId === g.id) ids.splice(activeLoc.index, 1);
- if (overLoc.groupId === g.id) {
- const insertIdx = activeLoc.groupId === g.id && activeLoc.index < overLoc.index ? overLoc.index : overLoc.index;
- ids.splice(insertIdx, 0, activeIdStr);
- }
- groupServices[g.id] = ids;
- }
-
- const ungroupedIds = [...dashboard.ungroupedServices.map((s) => s.id)];
- if (activeLoc.groupId === null) ungroupedIds.splice(activeLoc.index, 1);
- if (overLoc.groupId === null) {
- const insertIdx = activeLoc.groupId === null && activeLoc.index < overLoc.index ? overLoc.index : overLoc.index;
- ungroupedIds.splice(insertIdx, 0, activeIdStr);
- }
- if (activeLoc.groupId !== null && overLoc.groupId === null) {
- ungroupedIds.splice(overLoc.index, 0, activeIdStr);
- }
-
- updateLayout.mutate({ groupIds, widgetIds, ungroupedServiceIds: ungroupedIds, groupServices });
- return;
- }
-
- // Service → Group header (move into group)
- if (isActiveService && isOverGroup) {
- const groupServices: Record = {};
- const ungroupedIds = [...dashboard.ungroupedServices.map((s) => s.id)];
-
- for (const g of dashboard.groups) {
- const ids = g.services.map((s) => s.id);
- const idx = ids.indexOf(activeIdStr);
- if (idx !== -1) ids.splice(idx, 1);
- if (g.id === overIdStr) ids.push(activeIdStr);
- groupServices[g.id] = ids;
- }
- const uIdx = ungroupedIds.indexOf(activeIdStr);
- if (uIdx !== -1) ungroupedIds.splice(uIdx, 1);
-
- updateLayout.mutate({ groupIds, widgetIds, ungroupedServiceIds: ungroupedIds, groupServices });
- return;
- }
-
- // Group reorder
- if (isActiveGroup && isOverGroup) {
- const newGroupIds = [...groupIds];
- const fromIdx = newGroupIds.indexOf(activeIdStr);
- const toIdx = newGroupIds.indexOf(overIdStr);
- if (fromIdx !== -1 && toIdx !== -1) {
- const [moved] = newGroupIds.splice(fromIdx, 1);
- newGroupIds.splice(toIdx, 0, moved);
- const groupServices: Record = {};
- for (const g of dashboard.groups) groupServices[g.id] = g.services.map((s) => s.id);
- updateLayout.mutate({ groupIds: newGroupIds, widgetIds, ungroupedServiceIds: dashboard.ungroupedServices.map((s) => s.id), groupServices });
- }
- return;
- }
-
- // Widget reorder
+ // Widget reorder only
if (isActiveWidget && isOverWidget) {
const newWidgetIds = [...widgetIds];
const fromIdx = newWidgetIds.indexOf(activeIdStr);
@@ -405,9 +232,9 @@ export default function DashboardPage() {
if (error) {
return (
-
+
-
+
@@ -434,7 +261,7 @@ export default function DashboardPage() {
{isEmpty ? (
-
+
@@ -459,42 +286,44 @@ export default function DashboardPage() {
onDragOver={handleDragOver}
onDragEnd={handleDragEnd}
>
- {/* Widgets strip */}
-
-
+ {/* Widgets section */}
+
+
-
- w.id)} strategy={rectSortingStrategy}>
- {widgets.map((w) => (
-
- ))}
-
-
- ) : (
-
- )}
-
+
+
+ {widgets.length > 0 ? (
+
+ w.id)} strategy={rectSortingStrategy}>
+ {widgets.map((w) => (
+
+ ))}
+
+
+ ) : (
+
+ )}
+
+
{/* Apps section */}
-
-
+
+
@@ -505,7 +334,7 @@ export default function DashboardPage() {
>
-
+
-
-
- {/* Groups */}
- g.id)} strategy={verticalListSortingStrategy}>
+
+
+ {/* Groups */}
{groups.map((g) => (
-
))}
-
- {/* Ungrouped services */}
- {ungrouped.length > 0 && (
-
- {groups.length > 0 && (
-
-
-
Ungrouped
-
{ungrouped.length}
-
- )}
-
s.id)} strategy={rectSortingStrategy}>
+ {/* Ungrouped services */}
+ {ungrouped.length > 0 && (
+
+ {groups.length > 0 && (
+
+
+
Ungrouped
+
{ungrouped.length}
+
+ )}
{viewMode === "grid" ? (
{ungrouped.map((s) => (
-
+
))}
@@ -563,27 +389,25 @@ export default function DashboardPage() {
))}
-
+ {/* Add tile when no ungrouped but groups exist */}
+ {ungrouped.length === 0 && groups.length > 0 && (
-
+ {/* No apps at all - show empty state within apps section */}
+ {groups.length === 0 && ungrouped.length === 0 && (
+
+ )}
+
+
{activeId && dashboard ? (
diff --git a/frontend/components/groups/group-section.tsx b/frontend/components/groups/group-section.tsx
index ebc1bec..519f4aa 100644
--- a/frontend/components/groups/group-section.tsx
+++ b/frontend/components/groups/group-section.tsx
@@ -4,27 +4,25 @@ import type { Group, Service } from "@/lib/api/schema";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
import { ServiceCard } from "@/components/services/service-card";
-import { ChevronDown, MoreVertical, Pencil, Trash2, GripVertical, FolderOpen } from "lucide-react";
+import { ChevronDown, MoreVertical, Pencil, Trash2, FolderOpen } from "lucide-react";
import { useUpdateGroup, useDeleteGroup } from "@/lib/api/hooks";
import { cn } from "@/lib/utils";
import { useState } from "react";
-import { useTheme } from "@/components/providers";
interface GroupSectionProps {
group: Group;
onEditService: (s: Service) => void;
onDeleteService: (id: string) => void;
onEditGroup: (g: Group) => void;
- dragHandleProps?: React.HTMLAttributes;
}
-export function GroupSection({ group, onEditService, onDeleteService, onEditGroup, dragHandleProps }: GroupSectionProps) {
+export function GroupSection({ group, onEditService, onDeleteService, onEditGroup }: GroupSectionProps) {
const updateGroup = useUpdateGroup();
const deleteGroup = useDeleteGroup();
const [open, setOpen] = useState(!group.collapsed);
- const { theme } = useTheme();
- const isCasaOS = theme === "casaos";
const handleToggle = () => {
const next = !open;
@@ -42,28 +40,16 @@ export function GroupSection({ group, onEditService, onDeleteService, onEditGrou
return (
-
+
{/* Group header */}
-
- {dragHandleProps && (
-
-
-
- )}
-
+