From 6c443544037b039800a6bd51f70abb4f12f3f217 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 20 Apr 2026 22:56:54 +0100
Subject: [PATCH] feat(base): add view draft banner component

---
 .../components/base-view-draft-banner.tsx     | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 apps/client/src/features/base/components/base-view-draft-banner.tsx

diff --git a/apps/client/src/features/base/components/base-view-draft-banner.tsx b/apps/client/src/features/base/components/base-view-draft-banner.tsx
new file mode 100644
index 00000000..c3fdf10c
--- /dev/null
+++ b/apps/client/src/features/base/components/base-view-draft-banner.tsx
@@ -0,0 +1,44 @@
+import { Paper, Group, Text, Button } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+
+type BaseViewDraftBannerProps = {
+  isDirty: boolean;
+  canSave: boolean;
+  onReset: () => void;
+  onSave: () => void;
+  saving: boolean;
+};
+
+export function BaseViewDraftBanner({
+  isDirty,
+  canSave,
+  onReset,
+  onSave,
+  saving,
+}: BaseViewDraftBannerProps) {
+  const { t } = useTranslation();
+  if (!isDirty) return null;
+  return (
+    <Paper withBorder radius="sm" px="md" py="xs" bg="yellow.0">
+      <Group justify="space-between" wrap="nowrap">
+        <Group gap="xs" wrap="nowrap">
+          <IconInfoCircle size={16} />
+          <Text size="sm">
+            {t("Filter and sort changes are visible only to you.")}
+          </Text>
+        </Group>
+        <Group gap="sm" wrap="nowrap">
+          <Button variant="subtle" color="gray" size="xs" onClick={onReset}>
+            {t("Reset")}
+          </Button>
+          {canSave && (
+            <Button size="xs" onClick={onSave} loading={saving}>
+              {t("Save for everyone")}
+            </Button>
+          )}
+        </Group>
+      </Group>
+    </Paper>
+  );
+}