feat: finish the homepage plugin, move service links and canvas out of core (B19)

plugins/file-manager/src/frontend/homepage/FileManagerWidget.tsx

@@ -1,14 +1,12 @@
-import { useState, useEffect } from "react";
 import { FolderSearch } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import { useHost } from "@termix/plugin-sdk/frontend";
+import { WidgetTitle } from "@termix/plugin-sdk/ui";
 import type {
   FileManagerWidgetConfig,
   WidgetComponentProps,
-} from "@/types/homepage-types";
-import { getSSHHosts } from "@/api/ssh-host-management-api";
-import type { SSHHostWithStatus } from "@/main-axios";
+} from "./homepage.js";
 import type { SSHHost } from "@/types/index";
-import { WidgetTitle } from "@/features/homepage/widgets/WidgetTitle";
 import { FileManager } from "../FileManager";
 
 export function FileManagerWidget({
@@ -16,36 +14,13 @@ export function FileManagerWidget({
   config,
 }: WidgetComponentProps<FileManagerWidgetConfig>) {
   const { t } = useTranslation();
-  const [host, setHost] = useState<SSHHostWithStatus | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    if (!config.hostId) {
-      setLoading(false);
-      return;
-    }
-    getSSHHosts()
-      .then((hosts) => {
-        const found = hosts.find((h) => h.id === config.hostId);
-        setHost(found ?? null);
-      })
-      .catch(() => {})
-      .finally(() => setLoading(false));
-  }, [config.hostId]);
+  const host = useHost(config.hostId || undefined);
 
   if (!config.hostId) {
     return (
       <div className="flex flex-col items-center justify-center w-full h-full gap-2 text-muted-foreground/60">
         <FolderSearch size={20} />
-        <span className="text-xs">{t("homepage.widgetNoHostSelected")}</span>
-      </div>
-    );
-  }
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center w-full h-full text-xs text-muted-foreground/60">
-        {t("homepage.loading")}
+        <span className="text-xs">{t("common.noHostConfigured")}</span>
       </div>
     );
   }
@@ -53,7 +28,7 @@ export function FileManagerWidget({
   if (!host) {
     return (
       <div className="flex items-center justify-center w-full h-full text-xs text-muted-foreground/60">
-        {t("homepage.widgetNoHostSelected")}
+        {t("common.noHostConfigured")}
       </div>
     );
   }

plugins/file-manager/src/frontend/homepage/FileManagerWidgetEditForm.tsx

@@ -1,18 +1,39 @@
+import { useHosts, useTranslation } from "@termix/plugin-sdk/frontend";
+import { Select2 } from "@termix/plugin-sdk/ui";
 import type {
   FileManagerWidgetConfig,
   WidgetEditFormProps,
-} from "@/types/homepage-types";
-import { SingleHostEditForm } from "@/features/homepage/dialogs/SingleHostEditForm";
+} from "./homepage.js";
 
 export function FileManagerWidgetEditForm({
   config,
   onChange,
 }: WidgetEditFormProps<FileManagerWidgetConfig>) {
+  const { t } = useTranslation();
+  const { hosts } = useHosts();
+  const options = hosts.filter(
+    (host) => host.enableSsh !== false && host.enableFileManager !== false,
+  );
+
   return (
-    <SingleHostEditForm
-      hostId={config.hostId}
-      onChange={(hostId) => onChange({ ...config, hostId })}
-      filter={(h) => !!(h.enableSsh && h.enableFileManager)}
-    />
+    <div className="flex flex-col gap-1">
+      <label className="text-xs font-medium text-muted-foreground">
+        {t("common.host")}
+      </label>
+      <Select2
+        value={config.hostId || ""}
+        onChange={(e) =>
+          onChange({ ...config, hostId: Number(e.target.value) })
+        }
+        className="h-8 text-xs border border-border bg-background px-2"
+      >
+        <option value="">{t("common.selectHost")}</option>
+        {options.map((host) => (
+          <option key={host.id} value={host.id}>
+            {host.name || host.ip}
+          </option>
+        ))}
+      </Select2>
+    </div>
   );
 }

plugins/file-manager/src/frontend/homepage/homepage.ts

@@ -0,0 +1,24 @@
+import type { HomepageWidgetContribution } from "@termix/plugin-sdk/frontend";
+
+/** The homepage's grid step, in pixels. */
+export const GRID_SIZE = 30;
+
+export interface FileManagerWidgetConfig {
+  hostId: number;
+}
+
+/** What the homepage hands a widget; only the fields this plugin reads. */
+export interface WidgetComponentProps<C> {
+  widget: { title?: string | null };
+  config: C;
+}
+
+export interface WidgetEditFormProps<C> {
+  config: C;
+  onChange: (config: C) => void;
+}
+
+export type WidgetDefinition<C> = Omit<
+  HomepageWidgetContribution<C>,
+  "defaultConfig"
+> & { defaultConfig: C };

plugins/file-manager/src/frontend/index.tsx

@@ -7,7 +7,7 @@ import {
   type TabProps,
   type TermixApp,
 } from "@termix/plugin-sdk/frontend";
-import { GRID_SIZE } from "@/types/homepage-types";
+import { GRID_SIZE } from "./homepage/homepage.js";
 import { FileManager } from "./FileManager.tsx";
 import FileManagerApp from "./FileManagerApp.tsx";
 import { SftpTransferTab } from "./SftpTransferTab.tsx";