Add sticky footer

Author: jfmlima

packages/web/src/components/ui/footer.tsx

@@ -0,0 +1,23 @@
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface FooterProps {
+  className?: string;
+}
+
+export function Footer({ className }: FooterProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Card className={className}>
+      <CardContent>
+        <div className="text-center space-y-2">
+          <h3 className="font-semibold">{t("settings.footer.title")}</h3>
+          <p className="text-sm text-muted-foreground">
+            {t("settings.footer.description")}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

packages/web/src/i18n/en.json

@@ -286,10 +286,7 @@
     },
     "footer": {
       "title": "Shelly Manager",
-      "description": "A modern web interface for managing Shelly IoT devices",
-      "builtWith": "Built with React + TypeScript",
-      "poweredBy": "Powered by Vite",
-      "uiBy": "UI by shadcn/ui"
+      "description": "A modern web interface for locally managing Shelly IoT devices"
     },
     "messages": {
       "settingsSaved": "Settings saved successfully",

packages/web/src/pages/dashboard.tsx

@@ -6,6 +6,7 @@ import { toast } from "sonner";
 import { ScanForm, type ScanFormData } from "@/components/dashboard/scan-form";
 import { DeviceTable } from "@/components/dashboard/device-table";
 import { BulkActionsDialog } from "@/components/dashboard/bulk-actions-dialog";
+import { Footer } from "@/components/ui/footer";
 import { deviceApi, handleApiError } from "@/lib/api";
 import type { Device } from "@/types/api";
 
@@ -46,31 +47,37 @@ export function Dashboard() {
   };
 
   return (
-    <div className="space-y-8">
-      {/* Header */}
-      <div>
-        <h1 className="text-3xl font-bold tracking-tight">
-          {t("dashboard.title")}
-        </h1>
-        <p className="text-muted-foreground">{t("dashboard.subtitle")}</p>
-      </div>
+    <div className="min-h-[calc(100vh-8rem)] flex flex-col">
+      {/* Main Content */}
+      <div className="flex-1 space-y-8">
+        {/* Header */}
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">
+            {t("dashboard.title")}
+          </h1>
+          <p className="text-muted-foreground">{t("dashboard.subtitle")}</p>
+        </div>
 
-      {/* Scan Form */}
-      <ScanForm onSubmit={handleScan} isLoading={scanMutation.isPending} />
+        {/* Scan Form */}
+        <ScanForm onSubmit={handleScan} isLoading={scanMutation.isPending} />
 
-      {/* Error Display */}
-      {scanMutation.error && (
-        <div className="p-4 border border-destructive/50 bg-destructive/10 rounded-lg">
-          <p className="text-sm text-destructive">
-            {handleApiError(scanMutation.error)}
-          </p>
-        </div>
-      )}
+        {/* Error Display */}
+        {scanMutation.error && (
+          <div className="p-4 border border-destructive/50 bg-destructive/10 rounded-lg">
+            <p className="text-sm text-destructive">
+              {handleApiError(scanMutation.error)}
+            </p>
+          </div>
+        )}
+
+        {/* Device Table */}
+        {devices.length > 0 && (
+          <DeviceTable devices={devices} onBulkAction={handleBulkAction} />
+        )}
+      </div>
 
-      {/* Device Table */}
-      {devices.length > 0 && (
-        <DeviceTable devices={devices} onBulkAction={handleBulkAction} />
-      )}
+      {/* Sticky Footer */}
+      <Footer className="mt-8" />
 
       {/* Bulk Actions Dialog */}
       <BulkActionsDialog