Revert "feat: refine mobile dashboard experience"

This reverts commit 315520beca.

packages/widgets/src/docker/component.tsx

@@ -16,7 +16,6 @@ import { showErrorNotification, showSuccessNotification } from "@homarr/notifica
 import { useScopedI18n } from "@homarr/translation/client";
 import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
-import { WidgetMobileLoading, WidgetMobileSummary } from "../common/mobile-summary";
 import type { WidgetComponentProps } from "../definition";
 
 const ContainerStateBadge = ({ state }: { state: ContainerState }) => {
@@ -36,7 +35,6 @@ const actionIconIconStyle: IconProps["style"] = {
 
 const createColumns = (
   t: ReturnType<typeof useScopedI18n<"docker">>,
-  actionIconSize: "xs" | 44,
 ): MRT_ColumnDef<RouterOutputs["docker"]["getContainers"]["containers"][number]>[] => [
   {
     id: "name",
@@ -132,7 +130,6 @@ const createColumns = (
       const { mutateAsync: startContainer } = clientApi.docker.startAll.useMutation({ onSettled });
       const { mutateAsync: stopContainer } = clientApi.docker.stopAll.useMutation({ onSettled });
       const { mutateAsync: restartContainer } = clientApi.docker.restartAll.useMutation({ onSettled });
-      const toggleAction = row.original.state === "running" ? "stop" : "start";
 
       const handleActionAsync = async (action: "start" | "stop" | "restart") => {
         const mutation = action === "start" ? startContainer : action === "stop" ? stopContainer : restartContainer;
@@ -158,13 +155,12 @@ const createColumns = (
 
       return (
         <Group wrap="nowrap" gap="xs">
-          <Tooltip label={t(`action.${toggleAction}.label`)}>
+          <Tooltip label={row.original.state === "running" ? t("action.stop.label") : t("action.start.label")}>
             <ActionIcon
               variant="subtle"
-              size={actionIconSize}
+              size="xs"
               radius="100%"
-              aria-label={`${t(`action.${toggleAction}.label`)}: ${row.original.name}`}
-              onClick={() => handleActionAsync(toggleAction)}
+              onClick={() => handleActionAsync(row.original.state === "running" ? "stop" : "start")}
             >
               {row.original.state === "running" ? (
                 <IconPlayerStop style={actionIconIconStyle} />
@@ -174,13 +170,7 @@ const createColumns = (
             </ActionIcon>
           </Tooltip>
           <Tooltip label={t("action.restart.label")}>
-            <ActionIcon
-              variant="subtle"
-              size={actionIconSize}
-              radius="100%"
-              aria-label={`${t("action.restart.label")}: ${row.original.name}`}
-              onClick={() => handleActionAsync("restart")}
-            >
+            <ActionIcon variant="subtle" size="xs" radius="100%" onClick={() => handleActionAsync("restart")}>
               <IconRotateClockwise style={actionIconIconStyle} />
             </ActionIcon>
           </Tooltip>
@@ -190,38 +180,12 @@ const createColumns = (
   },
 ];
 
-export default function DockerWidget({ displayMode, ...props }: WidgetComponentProps<"dockerContainers">) {
-  if (displayMode === "mobileSummary") return <DockerMobileSummary />;
-  return <DockerTable {...props} displayMode={displayMode} />;
-}
-
-const DockerMobileSummary = () => {
-  const t = useScopedI18n("docker");
-  const { data, error, isPending } = clientApi.docker.getContainers.useQuery();
-
-  if (isPending) return <WidgetMobileLoading />;
-  if (error && !data) throw error;
-
-  const containers = data?.containers ?? [];
-  const runningContainers = containers.filter((container) => container.state === "running").length;
-
-  return (
-    <WidgetMobileSummary
-      value={runningContainers}
-      label={t("field.state.option.running")}
-      description={t("table.footer", { count: containers.length.toString() })}
-      isStale={Boolean(error)}
-    />
-  );
-};
-
-const DockerTable = ({ options, width, isEditMode, displayMode }: WidgetComponentProps<"dockerContainers">) => {
+export default function DockerWidget({ options, width, isEditMode }: WidgetComponentProps<"dockerContainers">) {
   const t = useScopedI18n("docker");
   const isTiny = width <= 256;
-  const actionIconSize = displayMode === "mobileDetail" ? 44 : "xs";
 
   const { data, refetch, isFetching } = clientApi.docker.getContainers.useQuery();
-  const containers = useMemo(() => data?.containers ?? [], [data?.containers]);
+  const containers = data?.containers ?? [];
   const timestamp = useMemo(() => data?.timestamp ?? new Date(), [data?.timestamp]);
   const relativeTime = useTimeAgo(timestamp);
 
@@ -238,7 +202,7 @@ const DockerTable = ({ options, width, isEditMode, displayMode }: WidgetComponen
     );
   }, [containers]);
 
-  const columns = useMemo(() => createColumns(t, actionIconSize), [t, actionIconSize]);
+  const columns = useMemo(() => createColumns(t), [t]);
 
   const columnVisibility: MRT_VisibilityState = {
     name: options.columns.includes("name"),
@@ -336,7 +300,7 @@ const DockerTable = ({ options, width, isEditMode, displayMode }: WidgetComponen
 
             <Tooltip label={t("table.refresh.lastUpdated", { when: relativeTime })}>
               <ActionIcon
-                size={displayMode === "mobileDetail" ? 44 : "sm"}
+                size="sm"
                 variant="transparent"
                 c="var(--mantine-color-text)"
                 loading={isFetching}
@@ -351,4 +315,4 @@ const DockerTable = ({ options, width, isEditMode, displayMode }: WidgetComponen
       )}
     </Stack>
   );
-};
+}

packages/widgets/src/docker/index.ts

@@ -25,13 +25,6 @@ const columnTranslationKeyMap = {
 
 export const { definition, componentLoader } = createWidgetDefinition("dockerContainers", {
   icon: IconBrandDocker,
-  mobile: {
-    width: 2,
-    height: 1,
-    supportsCompactSummary: true,
-    supportsDetailView: true,
-    unmountWhenOffscreen: true,
-  },
   queryKey: [["docker", "getContainers"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({