Move user-facing information to top of preferences and fix autogenerated UI images (#613)

# References and relevant issues
<!-- What relevant resources were used in the creation of this PR?
If this PR addresses an existing issue on the repo,
please link to that issue here as "Closes #(issue-number)".
If this PR adds docs for a napari PR please add a "Depends on <napari PR
link>" -->

# Description
<!-- What does this pull request (PR) do? Does it add new content,
improve/fix existing
context, improve/fix workflow/documentation build/deployment or
something else?
<!-- If relevant, please include a screenshot or a screen capture in
your content
change: "An image is worth a thousand words!" -->
<!-- You can use https://www.cockos.com/licecap/ or similar to create
animations. -->
<!-- You can also see a preview of the documentation changes you are
submitting by
clicking on "Details" to the right of the "Check the rendered docs
here!" check on your PR.-->

1. Moves user-facing information to the top of the autogenterated
preferences document.
2. Removes the redundant programmatic settings code block (unless we
also want to show the settings.SETTINGS version. I think as a learner,
understanding how `get_settings()` is used to set a singleton was more
important to my understanding)
3. Fixes/updates the autogenerated preferences dialog images to
correctly match the header to the image, and update the UI to correctly
show the selection in the list on the left.

<!-- Final Checklist
- If images included: I have added [alt
text](https://webaim.org/techniques/alttext/)
If workflow, documentation build or deployment change:
- My PR is the minimum possible work for the desired functionality
- I have commented my code, to let others know what it does
-->

Author: TimMonko

docs/_scripts/update_preference_docs.py

@@ -20,7 +20,7 @@
 
 Starting with version 0.4.6, napari provides persistent settings.
 
-Settings are managed by getting the global settings object:
+Settings are managed by getting the global settings object and modifying settings:
 
 ```python
 from napari.settings import get_settings
@@ -30,38 +30,6 @@
 settings.appearance.theme = 'dark'
 ```
 
-## Sections
-
-The settings are grouped by sections and napari core provides the following:
-
-{%- for section, section_data in sections.items() %}
-
-### {{ section_data["title"]|upper }}
-
-{{ section_data["description"] }}
-
-{%   for fields in section_data["fields"] %}
-#### {{ fields["title"] }}
-
-*{{ fields["description"] }}*
-
-* <small>Access programmatically with `SETTINGS.{{ section }}.{{ fields["field"] }}`.</small>
-* <small>Type: `{{ fields["type"] }}`.</small>
-* <small>Default: `{{ fields["default"] }}`.</small>
-{% if fields["ui"] %}* <small>UI: This setting can be configured via the preferences dialog.</small>{% endif %}
-{%-   endfor -%}
-{% endfor %}
-
-**Support for plugin specific settings will be provided in an upcoming release.**
-
-## Changing settings programmatically
-
-```python
-from napari.settings import SETTINGS
-
-SETTINGS.appearance.theme = "light"
-```
-
 ## Reset to defaults via CLI
 
 To reset all napari settings to the default values:
@@ -90,6 +58,30 @@
 
 ![{{ reset }}]({{ images_path }}/preferences-reset.png)
 
+## Sections
+
+The settings are grouped by sections and napari core provides the following:
+
+{%- for section, section_data in sections.items() %}
+
+### {{ section_data["title"]|upper }}
+
+{{ section_data["description"] }}
+
+{%   for fields in section_data["fields"] %}
+#### {{ fields["title"] }}
+
+*{{ fields["description"] }}*
+
+* <small>Access programmatically with `SETTINGS.{{ section }}.{{ fields["field"] }}`.</small>
+* <small>Type: `{{ fields["type"] }}`.</small>
+* <small>Default: `{{ fields["default"] }}`.</small>
+{% if fields["ui"] %}* <small>UI: This setting can be configured via the preferences dialog.</small>{% endif %}
+{%-   endfor -%}
+{% endfor %}
+
+**Support for plugin specific settings will be provided in an upcoming release.**
+
 """
 
 
@@ -105,11 +97,25 @@ def generate_images():
     pref.show()
     QTimer.singleShot(1000, pref.close)
 
-    for idx, (name, field) in enumerate(NapariSettings.__fields__.items()):
+    # Collect all sections first
+    sections = [field.field_info.title or name
+                for name, field in NapariSettings.__fields__.items()
+                if isinstance(field.type_, ModelMetaclass)]
+    
+    # Process each section with proper timing
+    for idx, title in enumerate(sections):
+        # Set current index
         pref._stack.setCurrentIndex(idx)
+        pref._list.setCurrentRow(idx)
+        
+        # Process events to ensure UI has updated
+        app.processEvents()
+        
+        # Capture screenshot
         pixmap = pref.grab()
-        title = field.field_info.title or name
         pixmap.save(str(IMAGES_PATH / f"preferences-{title.lower()}.png"))
+    
+
 
     box = QMessageBox(
         QMessageBox.Icon.Question,