Critical Stability & Performance fixes. Excessive Log Set button gone on QIuck Log screen

2025-12-06 08:58:44 +02:00
parent 27afacee3f
commit 1c3e15516c
35 changed files with 48 additions and 26 deletions
--- a/src/components/FilledInput.tsx
+++ b/src/components/FilledInput.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { X } from 'lucide-react';
+
+interface FilledInputProps {
+    label: string;
+    value: string | number;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onClear?: () => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    type?: string;
+    icon?: React.ReactNode;
+    autoFocus?: boolean;
+    step?: string;
+    inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal";
+    autocapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters";
+    autoComplete?: string;
+    rightElement?: React.ReactNode;
+}
+
+const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, onClear, onFocus, onBlur, type = "number", icon, autoFocus, step, inputMode, autocapitalize, autoComplete, rightElement }) => {
+    const handleClear = () => {
+        const syntheticEvent = {
+            target: { value: '' }
+        } as React.ChangeEvent<HTMLInputElement>;
+        onChange(syntheticEvent);
+        if (onClear) onClear();
+    };
+
+    return (
+        <div className="relative group bg-surface-container-high rounded-t-lg border-b border-outline-variant hover:bg-white/5 focus-within:border-primary transition-colors">
+            <label className="absolute top-2 left-4 text-[10px] font-medium text-on-surface-variant flex items-center gap-1">
+                {icon} {label}
+            </label>
+            <input
+                type={type}
+                step={step}
+                inputMode={inputMode || (type === 'number' ? 'decimal' : 'text')}
+                autoFocus={autoFocus}
+                className={`w-full pt-6 pb-2 pl-4 bg-transparent text-2xl text-on-surface focus:outline-none placeholder-transparent ${rightElement ? 'pr-20' : 'pr-10'}`}
+                placeholder="0"
+                value={value}
+                onChange={onChange}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                autoCapitalize={autocapitalize}
+                autoComplete={autoComplete}
+            />
+            {value !== '' && value !== 0 && (
+                <button
+                    onClick={handleClear}
+                    className={`absolute top-1/2 -translate-y-1/2 p-2 text-on-surface-variant hover:text-on-surface rounded-full opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity ${rightElement ? 'right-12' : 'right-2'}`}
+                    tabIndex={-1}
+                >
+                    <X size={16} />
+                </button>
+            )}
+            {rightElement && (
+                <div className="absolute right-2 top-1/2 -translate-y-1/2 z-10">
+                    {rightElement}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default FilledInput;