first commit

frontend/src/pages/settings/ViewSettings.tsx

@@ -0,0 +1,59 @@
+import { Link } from 'react-router-dom';
+import { useAppSettings } from '../../context/AppSettingsContext';
+import Card from '../../components/ui/Card';
+import Select from '../../components/ui/Select';
+import { ArrowLeft, Eye } from 'lucide-react';
+
+const scrollThresholdOptions = [
+  { value: '0.1', label: '10%' },
+  { value: '0.2', label: '20%' },
+  { value: '0.3', label: '30%' },
+  { value: '0.4', label: '40%' },
+  { value: '0.5', label: '50%' },
+  { value: '0.6', label: '60%' },
+  { value: '0.7', label: '70% (Standard)' },
+  { value: '0.8', label: '80%' },
+  { value: '0.9', label: '90%' },
+  { value: '999', label: 'Deaktiviert' },
+];
+
+export default function ViewSettings() {
+  const { settings, updateSettings } = useAppSettings();
+
+  return (
+    <div>
+      <div className="flex items-center gap-4 mb-6">
+        <Link
+          to="/settings"
+          className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+        </Link>
+        <div className="flex items-center gap-3">
+          <Eye className="w-6 h-6" />
+          <h1 className="text-2xl font-bold">Ansicht</h1>
+        </div>
+      </div>
+
+      <Card title="Scroll-Verhalten">
+        <div className="space-y-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium">Nach-oben-Button</p>
+              <p className="text-sm text-gray-500">
+                Ab welcher Scroll-Position der Button unten rechts erscheinen soll
+              </p>
+            </div>
+            <div className="w-48">
+              <Select
+                options={scrollThresholdOptions}
+                value={settings.scrollToTopThreshold.toString()}
+                onChange={(e) => updateSettings({ scrollToTopThreshold: parseFloat(e.target.value) })}
+              />
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}