Persist monthly close acknowledgement filter

frontend/src/views/MonthlyClosePage.tsx

@@ -29,6 +29,7 @@ type MonthlyClosePageProps = {
 
 const trackedTextClass = "text-sky-700 dark:text-sky-300";
 const teamspaceTextClass = "text-emerald-700 dark:text-emerald-300";
+const showAcknowledgedMissingCrmStorageKey = "tickettracker.monthlyClose.showAcknowledgedMissingCrm";
 
 function formatSignedMinutes(minutes: number) {
   if (minutes === 0) {
@@ -127,12 +128,6 @@ function CrmDayItem({
     <div className={`flex min-h-32 flex-col justify-between gap-3 rounded-md border bg-background p-3 ${isAcknowledged ? "opacity-75" : ""}`}>
       <div className="min-w-0">
         <div className="flex flex-wrap items-center gap-2">
-          <Checkbox
-            checked={isAcknowledged}
-            disabled={busy}
-            aria-label="Zur Kenntnis genommen"
-            onCheckedChange={(checked) => onSetAcknowledgement(item, checked === true)}
-          />
           <span className="font-medium">{item.ticket_number}</span>
           <CopyTicketButton ticketNumber={item.ticket_number} />
           <Badge variant="outline">{formatDate(`${item.day}T00:00:00`)}</Badge>
@@ -166,6 +161,7 @@ export function MonthlyClosePage({ onNavigate }: MonthlyClosePageProps) {
   const [reopening, setReopening] = useState(false);
   const [acknowledgingKeys, setAcknowledgingKeys] = useState<Set<string>>(() => new Set());
   const [showAcknowledgedMissingCrm, setShowAcknowledgedMissingCrm] = useState(false);
+  const [showAcknowledgedMissingCrmLoaded, setShowAcknowledgedMissingCrmLoaded] = useState(false);
   const loadRequestId = useRef(0);
 
   async function load() {
@@ -196,6 +192,17 @@ export function MonthlyClosePage({ onNavigate }: MonthlyClosePageProps) {
     void load();
   }, [month]);
 
+  useEffect(() => {
+    setShowAcknowledgedMissingCrm(window.localStorage.getItem(showAcknowledgedMissingCrmStorageKey) === "true");
+    setShowAcknowledgedMissingCrmLoaded(true);
+  }, []);
+
+  useEffect(() => {
+    if (showAcknowledgedMissingCrmLoaded) {
+      window.localStorage.setItem(showAcknowledgedMissingCrmStorageKey, String(showAcknowledgedMissingCrm));
+    }
+  }, [showAcknowledgedMissingCrm, showAcknowledgedMissingCrmLoaded]);
+
   function changeMonthBy(delta: number) {
     const [year, monthNumber] = month.split("-").map(Number);
     const date = Number.isFinite(year) && Number.isFinite(monthNumber) ? new Date(year, monthNumber - 1, 1) : new Date();
@@ -371,15 +378,14 @@ export function MonthlyClosePage({ onNavigate }: MonthlyClosePageProps) {
                 <Sparkles className="size-4 text-muted-foreground" />
                 Tage ohne Teamspace-Wert
               </div>
-              <Button
+              <div className="inline-flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm">
-                type="button"
+                <Checkbox
-                variant="secondary"
+                  checked={showAcknowledgedMissingCrm}
-                size="sm"
+                  aria-label="Zur Kenntnis genommene Teamspace-Tage anzeigen"
-                disabled={acknowledgedMissingCrmDays.length === 0}
+                  onCheckedChange={(checked) => setShowAcknowledgedMissingCrm(checked === true)}
-                onClick={() => setShowAcknowledgedMissingCrm((current) => !current)}
+                />
-              >
+                <span>Zur Kenntnis anzeigen ({acknowledgedMissingCrmDays.length})</span>
-                {showAcknowledgedMissingCrm ? "Zur Kenntnis ausblenden" : `Zur Kenntnis anzeigen (${acknowledgedMissingCrmDays.length})`}
+              </div>
-              </Button>
             </div>
             {visibleMissingCrmDays.map((item) => (
               <CrmDayItem