Refactor Settings UI into tabs and add slider

Rework SettingsView into a tabbed, card-based layout with improved controls and UX. Adds save status indicators/animations, a back navigation button (useNavigate), badges, separators, and consistent Button/Input/Card/Tabs components. Refactors CATEGORY_ICONS to use React.ElementType and updates icon imports (BookOpen, ImageIcon, etc.). Introduces a new Slider component (src/components/ui/slider.tsx) and replaces the old range input for grid item size with the new Slider. Also consolidates custom color inputs, favicon upload UI, language selection, and other display/content controls into structured cards for clarity.

src/components/ui/slider.tsx

@@ -0,0 +1,40 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  value?: number
+  min?: number
+  max?: number
+  step?: number
+  onValueChange?: (value: number) => void
+}
+
+const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
+  ({ className, value, min = 0, max = 100, step = 1, onValueChange, onChange, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = Number(e.target.value)
+      onValueChange?.(newValue)
+      onChange?.(e)
+    }
+
+    return (
+      <input
+        type="range"
+        ref={ref}
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        onChange={handleChange}
+        className={cn(
+          "w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer accent-primary",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+Slider.displayName = "Slider"
+
+export { Slider }