feat: Add an icon size slider component and implement dynamic icon sizing for document views, while refactoring the documents panel layout.

frontend/src/documents/components/IconSizeSlider.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+interface IconSizeSliderProps {
+    scale: number;
+    onChange: (scale: number) => void;
+    min?: number;
+    max?: number;
+}
+
+const IconSizeSlider: React.FC<IconSizeSliderProps> = ({
+    scale,
+    onChange,
+    min = 0.5,
+    max = 2,
+}) => {
+    return (
+        <div className="icon-size-slider">
+            <input
+                type="range"
+                className="icon-size-slider__input"
+                min={min}
+                max={max}
+                step="any"
+                value={scale}
+                onChange={(e) => onChange(parseFloat(e.target.value))}
+            />
+        </div>
+    );
+};
+
+export default IconSizeSlider;