Add README files to all directories

generated by LLM

src/sidepanel/README.md

@@ -0,0 +1,18 @@
+# Side Panel Directory
+
+This directory contains components and logic for the side panel of the Topola Viewer application. The side panel is used to display detailed information about a selected individual and to configure chart settings.
+
+## Purpose
+
+The purpose of this directory is to provide a collapsible side panel that offers:
+1.  **Detailed Information**: Displays comprehensive data about a selected person, including their name, images, events, facts, notes, and sources, extracted from the loaded GEDCOM file.
+2.  **Chart Configuration**: Provides controls for users to customize the appearance of the genealogical chart (e.g., color schemes, showing/hiding IDs, and sex indicators).
+
+This directory acts as a container for these features, organizing them into specific subdirectories:
+- **[config](config/)**: Contains the UI and logic for managing chart display settings.
+- **[details](details/)**: Contains components for rendering the detailed view of an individual's data.
+- **[head](head/)**: Contains components to display metadata from the GEDCOM file header.
+
+## Files in this Directory
+
+- [side-panel.tsx](side-panel.tsx): The main React component that implements the side panel. It manages the layout, switching between expanded and collapsed states. When expanded, it displays a tabbed interface with "Info" (details) and "Settings" (configuration) panes. When collapsed in a mobile view, it shows a minimal view of the selected person's name. It also includes the button to toggle the panel's expanded state.

src/sidepanel/config/README.md

@@ -0,0 +1,20 @@
+# Chart Configuration
+
+This directory contains the logic and UI for configuring the display of the genealogical chart.
+
+## Purpose
+
+The purpose of this directory is to manage the user-configurable settings for the chart visualization. This includes:
+- **Colors**: How individuals in the chart are colored (none, by generation, or by sex).
+- **IDs**: Whether to show or hide person IDs.
+- **Sex**: Whether to show or hide indicators for sex.
+
+It provides the data structures for the configuration, default values, functions to serialize/deserialize the configuration to/from URL query parameters, and the UI component for the side panel.
+
+## Files
+
+- [config.tsx](config.tsx): The main file containing:
+  - `ChartColors`, `Ids`, and `Sex` enums defining the available options.
+  - `Config` interface defining the configuration state.
+  - `argsToConfig` and `configToArgs` functions for mapping the configuration to and from URL query arguments.
+  - `ConfigPanel` React component providing the UI controls (radio buttons) for these settings in the side panel.

src/sidepanel/details/README.md

@@ -0,0 +1,16 @@
+# Details Directory
+
+This directory contains React components for displaying detailed information about a selected individual (person) in the side panel of the Topola Viewer application. The details are extracted from a parsed GEDCOM file.
+
+## Files
+
+- [additional-files.tsx](additional-files.tsx): Displays a list of links to non-image files associated with an entry.
+- [collapsed-details.tsx](collapsed-details.tsx): Displays a minimal, vertical view of details (person's name) when the side panel is collapsed.
+- [details.tsx](details.tsx): The main component that orchestrates the display of all details for an individual, including name, images, events, facts, notes, and sources.
+- [event-extras.tsx](event-extras.tsx): Displays additional content for events (images, notes, sources, files) in a tabbed interface.
+- [events.tsx](events.tsx): Handles the logic and display for all events related to an individual, sorting them by date and grouping them by life stages.
+- [linkify-new-tab.tsx](linkify-new-tab.tsx): A helper component that wraps content and makes URLs clickable, opening them in a new tab.
+- [multiline-text.tsx](multiline-text.tsx): Helper component to display multi-line text with linkified URLs.
+- [sources.tsx](sources.tsx): Displays a list of sources cited for an entry.
+- [translated-tag.tsx](translated-tag.tsx): Component to translate GEDCOM tags into human-readable labels.
+- [wrapped-image.tsx](wrapped-image.tsx): Component to display images with loading placeholders, error fallback, and a click-to-enlarge modal.

src/sidepanel/head/README.md

@@ -0,0 +1,16 @@
+# Head Directory
+
+This directory contains components responsible for displaying information from the header of the loaded GEDCOM file in the side panel.
+
+## Files
+
+### [head.tsx](head.tsx)
+
+Defines the `SourceHead` component. This component displays metadata about the data source, extracted from the GEDCOM header (`HEAD` record). It includes information such as:
+- The software name that generated the file (`SOUR`)
+- File creation date (`DATE`)
+- Original file name (`FILE`)
+- Submitter's name and contact details (phone, email, address) (`SUBM`)
+- Copyright information (`COPR`)
+
+The component conditionally renders these details only if they are present in the data.