fix: Improve Camera View UX with better labels and hints

- Add descriptions to each view option explaining what it shows
- Add tooltip on hover for each button
- Display control hints: "scroll to zoom, drag to rotate"
- Show current view description below buttons
- Move Sun view camera closer for better initial view
- Narrow Sun view FOV from 50 to 45 for tighter focus

Closes ha-9dk

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: cjw6k

tidal-harmonics/src/components/ui/ViewSelector.tsx

@@ -1,24 +1,29 @@
 import { useCamera } from '@/hooks/useCamera';
 import type { CameraPreset } from '@/types';
 
-const VIEW_OPTIONS: { preset: CameraPreset; label: string }[] = [
-  { preset: 'overview', label: 'Overview' },
-  { preset: 'earth', label: 'Earth' },
-  { preset: 'moon', label: 'Moon' },
-  { preset: 'sun', label: 'Sun' },
+const VIEW_OPTIONS: { preset: CameraPreset; label: string; description: string }[] = [
+  { preset: 'overview', label: 'Overview', description: 'See the whole system' },
+  { preset: 'earth', label: 'Earth', description: 'Orbit around Earth' },
+  { preset: 'moon', label: 'Moon', description: 'Orbit around the Moon' },
+  { preset: 'sun', label: 'Sun', description: 'Orbit around the Sun' },
 ];
 
 export function ViewSelector() {
   const { preset, setPreset } = useCamera();
+  const currentView = VIEW_OPTIONS.find((o) => o.preset === preset);
 
   return (
     <div className="bg-slate-800/80 backdrop-blur-sm rounded-lg p-3">
-      <span className="text-slate-400 text-sm font-medium">Camera View</span>
+      <div className="flex items-center justify-between">
+        <span className="text-slate-400 text-sm font-medium">Camera View</span>
+        <span className="text-slate-500 text-xs">scroll to zoom, drag to rotate</span>
+      </div>
       <div className="flex gap-2 flex-wrap mt-2">
         {VIEW_OPTIONS.map((option) => (
           <button
             key={option.preset}
             onClick={() => setPreset(option.preset)}
+            title={option.description}
             className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${
               preset === option.preset
                 ? 'bg-blue-600 text-white'
@@ -29,6 +34,9 @@ export function ViewSelector() {
           </button>
         ))}
       </div>
+      {currentView && (
+        <p className="text-slate-400 text-xs mt-2">{currentView.description}</p>
+      )}
     </div>
   );
 }

tidal-harmonics/src/stores/cameraStore.ts

@@ -26,9 +26,9 @@ const CAMERA_PRESETS: Record<CameraPreset, CameraTarget> = {
     fov: 45,
   },
   sun: {
-    position: [-180, 20, 0],
+    position: [-188, 10, 10],
     target: [-200, 0, 0],
-    fov: 50,
+    fov: 45,
   },
 };