Revert "chore(merge): resolve v2 conflicts"

This reverts commit 377f2f6a20, reversing
changes made to 7e4cb0201b.

apps/nextjs/src/app/[locale]/boards/[name]/settings/_customCss.tsx

@@ -11,7 +11,6 @@ import { IconInfoCircle } from "@tabler/icons-react";
 import { useForm } from "@homarr/form";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
-import { InstallCssFromWorkshopButton } from "~/components/workshop-install/install-from-workshop-buttons";
 import type { Board } from "../../_types";
 import { useSavePartialSettingsMutation } from "./_shared";
 import classes from "./customcss.module.css";
@@ -46,8 +45,7 @@ export const CustomCssSettingsContent = ({ board }: Props) => {
           {customCssT("customClassesAlert.description")}
         </Alert>
 
-        <Group justify="space-between">
-          <InstallCssFromWorkshopButton onSelect={(css) => form.setFieldValue("customCss", css)} />
+        <Group justify="end">
           <Button type="submit" loading={isPending}>
             {t("common.action.saveChanges")}
           </Button>

apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { Button, Popover, Stack, Text } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconCopy, IconSparkles } from "@tabler/icons-react";
@@ -297,11 +296,8 @@ interface CopyAiPromptButtonProps {
 export const CopyAiPromptButton = ({ rawResponse, currentConfig }: CopyAiPromptButtonProps) => {
   const t = useScopedI18n("customWidget");
   const [opened, { open, close }] = useDisclosure(false);
-  const [mounted, setMounted] = useState(false);
   const { data: schema, isLoading } = clientApi.customWidget.schema.useQuery();
 
-  useEffect(() => setMounted(true), []);
-
   const handleCopy = async () => {
     if (!schema) return;
     const prompt = buildAiPrompt(schema, rawResponse, currentConfig);
@@ -321,8 +317,8 @@ export const CopyAiPromptButton = ({ rawResponse, currentConfig }: CopyAiPromptB
           variant="light"
           leftSection={<IconSparkles size={16} />}
           onClick={open}
-          loading={!mounted || isLoading}
-          disabled={!mounted || isLoading || !schema}
+          loading={isLoading}
+          disabled={!schema}
           fullWidth
           size="sm"
         >

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx

@@ -30,11 +30,9 @@ import { useScopedI18n } from "@homarr/translation/client";
 import type {
   CustomWidgetAuthType,
   CustomWidgetDisplayType,
-  CustomWidgetImport,
   CustomWidgetMethod,
   CustomWidgetSecretKind,
 } from "@homarr/validation/custom-widget";
-import { customWidgetImportSchema } from "@homarr/validation/custom-widget";
 import type { displayConfigSchema } from "@homarr/validation/custom-widget";
 import { JsonPathTreePicker } from "@homarr/widgets/_inputs/json-path-tree-picker";
 
@@ -469,90 +467,6 @@ const serverToFormFieldMap: Record<string, Record<string, string>> = {
   customJsx: { template: "template" },
 };
 
-const importToFormValues: Record<string, (config: Record<string, unknown>) => Record<string, unknown>> = {
-  singleValue: (c) => ({
-    jsonPath: c.jsonPath,
-    label: c.label ?? "",
-    unit: c.unit ?? "",
-    valueSize: c.valueSize ?? "lg",
-    labelPosition: c.labelPosition ?? "below",
-  }),
-  keyValue: (c) => ({
-    mappings:
-      (c.mappings as Array<Record<string, string>>)?.map((m) => ({
-        label: m.label,
-        jsonPath: m.jsonPath,
-        unit: m.unit ?? "",
-      })) ?? [],
-    kvLayout: c.layout ?? "list",
-    kvColumns: c.columns ?? 2,
-  }),
-  table: (c) => ({
-    tablePath: c.tablePath,
-    columns: c.columns ?? [],
-    striped: c.striped ?? true,
-    compact: c.compact ?? false,
-  }),
-  statGrid: (c) => ({
-    statGridItems: c.items ?? [],
-    statGridColumns: c.columns ?? 2,
-    cardStyle: c.cardStyle ?? "filled",
-  }),
-  progressBars: (c) => ({
-    progressBars:
-      (c.bars as Array<Record<string, unknown>>)?.map((b) => ({
-        label: b.label ?? "",
-        valuePath: b.valuePath ?? "",
-        maxPath: b.maxPath ?? "",
-        unit: b.unit ?? "",
-        color: b.color ?? "blue",
-      })) ?? [],
-    showPercentage: c.showPercentage ?? true,
-    barSize: c.barSize ?? "md",
-  }),
-  statusIndicator: (c) => ({
-    statusItems:
-      (c.items as Array<Record<string, unknown>>)?.map((i) => ({
-        label: i.label ?? "",
-        jsonPath: i.jsonPath ?? "",
-        goodValues: Array.isArray(i.goodValues) ? (i.goodValues as string[]).join(", ") : String(i.goodValues ?? ""),
-      })) ?? [],
-    statusLayout: c.layout ?? "list",
-    dotSize: c.dotSize ?? "md",
-  }),
-  countGrid: (c) => ({
-    countGridItems: c.items ?? [],
-    countGridColumns: c.columns ?? 2,
-    countValueSize: c.valueSize ?? "md",
-  }),
-  raw: (c) => ({ rawJsonPath: c.jsonPath ?? "$", rawMaxHeight: c.maxHeight ?? 300 }),
-  actionButton: (c) => ({
-    buttonLabel: c.buttonLabel ?? "",
-    buttonColor: c.buttonColor ?? "blue",
-    confirmText: c.confirmText ?? "",
-    successMessage: c.successMessage ?? "",
-  }),
-  customJsx: (c) => ({ template: c.template ?? "" }),
-};
-
-function importJsonToFormValues(imported: CustomWidgetImport): Partial<z.infer<typeof formSchema>> {
-  const displayFields =
-    importToFormValues[imported.displayType]?.(imported.displayConfig as unknown as Record<string, unknown>) ?? {};
-  return {
-    name: imported.name,
-    description: imported.description ?? "",
-    iconUrl: imported.iconUrl ?? "",
-    url: imported.url,
-    authType: imported.authType,
-    headerName: imported.headerName ?? "",
-    method: imported.method,
-    requestBody: imported.requestBody ?? "",
-    displayType: imported.displayType,
-    ...displayFields,
-    secrets: [],
-  };
-}
-
 function extractServerErrors(err: unknown, displayType: string): Record<string, string> {
   const errors: Record<string, string> = {};
   const trpcErr = err as {
@@ -767,32 +681,6 @@ export function CustomWidgetForm({ mode, initialValues, definitionId }: CustomWi
     }
   }, [getPreviewInput, previewMutation]);
 
-  useEffect(() => {
-    if (mode !== "create") return;
-    const onPaste = (e: ClipboardEvent) => {
-      const raw = e.clipboardData?.getData("text/plain");
-      if (!raw) return;
-      let parsed: unknown;
-      try {
-        parsed = JSON.parse(raw);
-      } catch {
-        return;
-      }
-      const result = customWidgetImportSchema.safeParse(parsed);
-      if (!result.success) return;
-      e.preventDefault();
-      const formValues = importJsonToFormValues(result.data);
-      form.setValues({ ...defaultCreateValues, ...formValues });
-      form.clearErrors();
-      showSuccessNotification({
-        title: t("action.paste"),
-        message: t("notification.imported", { name: result.data.name }),
-      });
-    };
-    document.addEventListener("paste", onPaste);
-    return () => document.removeEventListener("paste", onPaste);
-  }, [form, t, mode]);
-
   useEffect(() => {
     if (previewRefreshSignal > 0 && hasTestedRef.current) {
       void handlePreviewTest();

apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-list.tsx

@@ -1,16 +1,11 @@
 "use client";
 
-import { useEffect } from "react";
 import { ActionIcon, Avatar, Badge, Group, Stack, Table, Text } from "@mantine/core";
 import { IconApi, IconPencil } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { revalidatePathActionAsync } from "@homarr/common/client";
-import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 import { Link } from "@homarr/ui";
-import { customWidgetImportSchema } from "@homarr/validation/custom-widget";
 
 import { NoResults } from "~/components/no-results";
 import { CustomWidgetRowActions } from "./_custom-widget-actions";
@@ -36,36 +31,6 @@ interface CustomWidgetListProps {
 
 export const CustomWidgetList = ({ definitions }: CustomWidgetListProps) => {
   const t = useScopedI18n("customWidget");
-  const utils = clientApi.useUtils();
-  const importMutation = clientApi.customWidget.import.useMutation({
-    onSuccess: () => {
-      showSuccessNotification({ title: t("action.paste"), message: "Custom widget imported" });
-      void utils.customWidget.all.invalidate();
-      void revalidatePathActionAsync("/manage/custom-widgets");
-    },
-    onError: (err) => {
-      showErrorNotification({ title: t("action.paste"), message: err.message || "Failed to import" });
-    },
-  });
-
-  useEffect(() => {
-    const onPaste = (e: ClipboardEvent) => {
-      const raw = e.clipboardData?.getData("text/plain");
-      if (!raw) return;
-      let parsed: unknown;
-      try {
-        parsed = JSON.parse(raw);
-      } catch {
-        return;
-      }
-      const result = customWidgetImportSchema.safeParse(parsed);
-      if (!result.success) return;
-      e.preventDefault();
-      importMutation.mutate(result.data);
-    };
-    document.addEventListener("paste", onPaste);
-    return () => document.removeEventListener("paste", onPaste);
-  }, [importMutation.mutate]);
 
   if (definitions.length === 0) {
     return (
@@ -79,40 +44,36 @@ export const CustomWidgetList = ({ definitions }: CustomWidgetListProps) => {
 
   return (
     <Stack gap="md">
-      <Table striped highlightOnHover withTableBorder layout="fixed">
+      <Table striped highlightOnHover withTableBorder>
         <Table.Thead>
           <Table.Tr>
             <Table.Th>{t("table.name")}</Table.Th>
-            <Table.Th w="30%" visibleFrom="sm">
-              {t("table.url")}
-            </Table.Th>
-            <Table.Th w={120} visibleFrom="xs">
-              {t("table.display")}
-            </Table.Th>
+            <Table.Th>{t("table.url")}</Table.Th>
+            <Table.Th>{t("table.display")}</Table.Th>
             <Table.Th w={90} />
           </Table.Tr>
         </Table.Thead>
         <Table.Tbody>
           {definitions.map((def) => (
             <Table.Tr key={def.id} style={{ opacity: def.enabled ? undefined : 0.5 }}>
-              <Table.Td style={{ overflow: "hidden" }}>
+              <Table.Td>
                 <Group gap="xs" wrap="nowrap">
                   {def.iconUrl ? (
                     <Avatar size={20} radius="sm" src={def.iconUrl} styles={{ image: { objectFit: "contain" } }} />
                   ) : (
-                    <IconApi size={16} style={{ flexShrink: 0 }} />
+                    <IconApi size={16} />
                   )}
-                  <Text size="sm" fw={500} truncate c={def.enabled ? undefined : "dimmed"}>
+                  <Text size="sm" fw={500} lineClamp={1} c={def.enabled ? undefined : "dimmed"} style={{ minWidth: 0 }}>
                     {def.name}
                   </Text>
                 </Group>
               </Table.Td>
-              <Table.Td style={{ overflow: "hidden" }} visibleFrom="sm">
-                <Text size="sm" c="dimmed" truncate>
+              <Table.Td>
+                <Text size="sm" c="dimmed" lineClamp={1}>
                   {def.url}
                 </Text>
               </Table.Td>
-              <Table.Td visibleFrom="xs">
+              <Table.Td>
                 <Badge color={displayTypeBadgeColors[def.displayType] ?? "gray"} size="sm">
                   {t(`displayType.${def.displayType}` as never)}
                 </Badge>

apps/nextjs/src/app/[locale]/manage/custom-widgets/page.tsx

@@ -9,7 +9,6 @@ import { Link } from "@homarr/ui";
 
 import { ManagePageLayout } from "~/components/manage/manage-page-layout";
 import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
-import { InstallWidgetFromWorkshopButton } from "~/components/workshop-install/install-from-workshop-buttons";
 import { CustomWidgetBetaBanner } from "./_beta-banner";
 import { ImportCustomWidgetButton } from "./_custom-widget-actions";
 import { CustomWidgetList } from "./_custom-widget-list";
@@ -29,7 +28,6 @@ export default async function CustomWidgetsPage() {
       title={t("page.list.title")}
       primaryAction={
         <Group gap="xs">
-          <InstallWidgetFromWorkshopButton />
           <ImportCustomWidgetButton />
           <MobileAffixButton component={Link} href="/manage/custom-widgets/new" leftSection={<IconPlus size={16} />}>
             {t("action.create")}