style: add documentation comments for all main window react components

src/main_window/routes/AdventurePointsTooltip.tsx

@@ -28,6 +28,10 @@ import {
 } from "../selectors/traditionSelectors.ts"
 import { selectTotalAdventurePoints } from "../slices/characterSlice.ts"
 
+/**
+ * Returns the contents for the adventure points tooltip that displays which
+ * entry groups adventure points were spent on.
+ */
 export const AdventurePointsTooltip: FC = () => {
   const translate = useTranslate()
 

src/main_window/routes/NavigationBar.tsx

@@ -23,6 +23,9 @@ import { NavigationBarWrapper } from "./NavigationBarWrapper.tsx"
 const showSettings = () => ExternalAPI.showSettings()
 const toggleDevTools = () => ExternalAPI.toggleDevTools()
 
+/**
+ * Returns a top navigation bar.
+ */
 export const NavigationBar: FC = () => {
   const translate = useTranslate()
   const dispatch = useAppDispatch()

src/main_window/routes/NavigationBarBack.tsx

@@ -5,6 +5,9 @@ interface Props {
   handleSetTab(): void
 }
 
+/**
+ * Returns a back button for the beginning of the navigation bar.
+ */
 export const NavigationBarBack: FC<Props> = props => {
   const { handleSetTab } = props
 

src/main_window/routes/NavigationBarLeft.tsx

@@ -1,6 +1,9 @@
 import { FCC } from "../../shared/utils/react.js"
 import "./NavigationBarLeft.scss"
 
+/**
+ * Returns a grouping element for the left section of the navigation bar.
+ */
 export const NavigationBarLeft: FCC = ({ children }) => (
   <div className="navigationbar-left">{children}</div>
 )

src/main_window/routes/NavigationBarRight.tsx

@@ -1,6 +1,9 @@
 import { FCC } from "../../shared/utils/react.js"
 import "./NavigationBarRight.scss"
 
+/**
+ * Returns a grouping element for the right section of the navigation bar.
+ */
 export const NavigationBarRight: FCC = ({ children }) => (
   <div className="navigationbar-right">{children}</div>
 )

src/main_window/routes/NavigationBarSubTabs.tsx

@@ -7,6 +7,10 @@ interface Props {
   tabs: RoutePath[]
 }
 
+/**
+ * Returns a section underneath the main navigation tabs section for switching
+ * between subtabs.
+ */
 export const NavigationBarSubTabs: FC<Props> = props => {
   const { tabs } = props
 
@@ -16,7 +20,7 @@ export const NavigationBarSubTabs: FC<Props> = props => {
         <NavigationBarTab
           key={displayRoute.at(-1)}
           displayRoute={{ type: "single", route: displayRoute }}
-          />
+        />
       ))}
     </ul>
   )

src/main_window/routes/NavigationBarTab.tsx

@@ -97,6 +97,9 @@ type Props = {
   displayRoute: DisplayRoute
 }
 
+/**
+ * Returns a single navigation tab.
+ */
 export const NavigationBarTab: FC<Props> = props => {
   const { className, displayRoute } = props
 

src/main_window/routes/NavigationBarTabs.tsx

@@ -7,6 +7,9 @@ type Props = {
   tabs: DisplayRoute[]
 }
 
+/**
+ * Returns a navigation bar section for displaying navigation tabs.
+ */
 export const NavigationBarTabs: FC<Props> = props => {
   const { tabs } = props
 

src/main_window/routes/NavigationBarWrapper.tsx

@@ -1,6 +1,9 @@
 import { FCC } from "../../shared/utils/react.js"
 import "./NavigationBarWrapper.scss"
 
+/**
+ * Returns a wrapper element for the complete navigation bar.
+ */
 export const NavigationBarWrapper: FCC = ({ children }) => (
   <div className="navigationbar">
     <div className="navigationbar-inner">{children}</div>

src/main_window/routes/Root.tsx

@@ -16,6 +16,9 @@ const onRestore = () => ExternalAPI.restore()
 const onClose = () => ExternalAPI.close()
 const isMaximized = () => ExternalAPI.isMaximized()
 
+/**
+ * Returns the React application for the main window.
+ */
 export const Root: FC = () => {
   const language = useAppSelector(selectLocale)
   const areAnimationsEnabled = useAppSelector(selectAreAnimationsEnabled)

src/main_window/routes/Router.tsx

@@ -17,6 +17,9 @@ import { Skills } from "./characters/character/skills/Skills.tsx"
 import { SpecialAbilities } from "./characters/character/specialAbilities/SpecialAbilities.tsx"
 import { Spells } from "./characters/character/spells/Spells.tsx"
 
+/**
+ * Returns a page based on the currently selected route.
+ */
 export const Router: FC = () => {
   const route = useAppSelector(selectRoute)
 

src/main_window/routes/about/Imprint.tsx

@@ -4,6 +4,9 @@ import { Page } from "../../../shared/components/page/Page.tsx"
 import { Scroll } from "../../../shared/components/scroll/Scroll.tsx"
 import { useTranslate } from "../../../shared/hooks/translate.ts"
 
+/**
+ * Returns a page containing the imprint.
+ */
 export const Imprint: FC = () => {
   const translate = useTranslate()
   return (

src/main_window/routes/about/LastChanges.tsx

@@ -7,6 +7,9 @@ import { ExternalAPI } from "../../external.ts"
 
 let savedText: string | undefined = undefined
 
+/**
+ * Returns a page that shows the changelog.
+ */
 export const LastChanges: FC = () => {
   const [text, setText] = useState(savedText ?? "...")
 

src/main_window/routes/about/ThirdPartyLicenses.tsx

@@ -8,6 +8,9 @@ import "./ThirdPartyLicenses.scss"
 let savedVersion: string | undefined = undefined
 let savedText: string | undefined = undefined
 
+/**
+ * Returns a page that shows licenses of third-party software.
+ */
 export const ThirdPartyLicenses: FC = () => {
   const [version, setVersion] = useState(savedVersion ?? "0.0.0")
   const [text, setText] = useState(savedText ?? "...")

src/main_window/routes/characters/Characters.tsx

@@ -19,6 +19,9 @@ import { changeCharactersSortOrder, selectCharactersSortOrder } from "../../slic
 import "./Characters.scss"
 import { CharactersItem } from "./CharactersItem.tsx"
 
+/**
+ * Returns a page for managing characters.
+ */
 export const Characters: FC = () => {
   const translate = useTranslate()
   const localeCompare = useLocaleCompare()

src/main_window/routes/characters/CharactersItem.tsx

@@ -26,11 +26,14 @@ import {
 } from "../../slices/databaseSlice.ts"
 import { goToTab } from "../../slices/routeSlice.ts"
 
-export type HerolistItemProps = {
+type Props = {
   character: CharacterState
 }
 
-export const CharactersItem: FC<HerolistItemProps> = props => {
+/**
+ * Returns a single character item.
+ */
+export const CharactersItem: FC<Props> = props => {
   const { character } = props
 
   const dispatch = useAppDispatch()

src/main_window/routes/characters/character/advantagesAndDisadvantages/Advantages.tsx

@@ -24,6 +24,9 @@ import {
 } from "../../../../slices/settingsSlice.ts"
 import { AdventurePointsSpent } from "./AdventurePointsSpent.tsx"
 
+/**
+ * Returns a page for managing advantages.
+ */
 export const Advantages: FC = () => {
   const translate = useTranslate()
   const dispatch = useAppDispatch()

src/main_window/routes/characters/character/advantagesAndDisadvantages/AdventurePointsSpent.tsx

@@ -12,6 +12,10 @@ import {
 } from "../../../../selectors/adventurePointSelectors.ts"
 import { selectMaximumAdventurePointsForMagicalAdvantagesAndDisadvantages } from "../../../../selectors/traditionSelectors.ts"
 
+/**
+ * Returns a sidebar widget for showing spent and available adventure points for
+ * advantages or disadvantages.
+ */
 export const AdventurePointsSpent: FC = () => {
   const translate = useTranslate()
 

src/main_window/routes/characters/character/advantagesAndDisadvantages/Disadvantages.tsx

@@ -24,6 +24,9 @@ import {
 } from "../../../../slices/settingsSlice.ts"
 import { AdventurePointsSpent } from "./AdventurePointsSpent.tsx"
 
+/**
+ * Returns a page for managing disadvantages.
+ */
 export const Disadvantages: FC = () => {
   const translate = useTranslate()
   const dispatch = useAppDispatch()

src/main_window/routes/characters/character/attributes/AttributeAdjustment.tsx

@@ -10,6 +10,9 @@ import { selectAttributeAdjustmentId } from "../../../../slices/characterSlice.t
 import { changeAttributeAdjustmentId } from "../../../../slices/raceSlice.ts"
 import "./AttributeAdjustment.scss"
 
+/**
+ * Returns a widget for changing the attribute adjustment set for the race.
+ */
 export const AttributesAdjustment: FC = () => {
   const dispatch = useAppDispatch()
   const translate = useTranslate()

src/main_window/routes/characters/character/attributes/AttributeBorder.tsx

@@ -11,6 +11,9 @@ type Props = {
   value: number | string
 }
 
+/**
+ * Returns an attribute value block.
+ */
 export const AttributeBorder: FC<Props> = props => {
   const { children, className, label, tooltip, tooltipMargin, value } = props
 

src/main_window/routes/characters/character/attributes/Attributes.tsx

@@ -15,6 +15,9 @@ import "./Attributes.scss"
 import { AttributeList } from "./AttributesList.tsx"
 import { DerivedCharacteristicsList } from "./DerivedCharacteristicsList.tsx"
 
+/**
+ * Returns a page for managing attributes.
+ */
 export const Attributes: FC = () => {
   const translate = useTranslate()
   const totalPoints = useAppSelector(selectTotalPoints)

src/main_window/routes/characters/character/attributes/AttributesList.tsx

@@ -9,6 +9,9 @@ type Props = {
   isRemovingEnabled: boolean
 }
 
+/**
+ * Returns a list of attribute values.
+ */
 export const AttributeList: FC<Props> = props => {
   const attributes = useAppSelector(selectVisibleAttributes)
 

src/main_window/routes/characters/character/attributes/AttributesListItem.tsx

@@ -14,6 +14,9 @@ type Props = {
   isRemovingEnabled: boolean
 }
 
+/**
+ * Returns a single attribute value item with buttons to adjust the value.
+ */
 export const AttributeListItem: FC<Props> = props => {
   const { attribute, isInCharacterCreation, isRemovingEnabled } = props
 

src/main_window/routes/characters/character/attributes/DerivedCharacteristicsList.tsx

@@ -9,6 +9,9 @@ type Props = {
   isRemovingEnabled: boolean
 }
 
+/**
+ * Returns a list of derived characteristic values.
+ */
 export const DerivedCharacteristicsList: FC<Props> = props => {
   const { isInCharacterCreation, isRemovingEnabled } = props
 

src/main_window/routes/characters/character/attributes/DerivedCharacteristicsListItem.tsx

@@ -27,6 +27,10 @@ type Props = {
   isRemovingEnabled: boolean
 }
 
+/**
+ * Returns a single derived characterstics value item with optional buttons to
+ * manage the value.
+ */
 export const DerivedCharacteristicsListItem: FC<Props> = props => {
   const { attribute, isInCharacterCreation, isRemovingEnabled } = props
 

src/main_window/routes/characters/character/attributes/DerivedCharacteristicsListItemPermanent.tsx

@@ -30,6 +30,10 @@ type Props = {
   isRemovingEnabled: boolean
 }
 
+/**
+ * Returns a value item and buttons to adjust the value for a supplementary
+ * derived characteristic value.
+ */
 export const DerivedCharacteristicsListItemPermanent: FC<Props> = props => {
   const { attribute, isRemovingEnabled } = props
 

src/main_window/routes/characters/character/attributes/PermanentLossSheet.tsx

@@ -10,6 +10,9 @@ type Props = {
   remove(value: number): void
 }
 
+/**
+ * Returns a sheet for managing permanent energy loss.
+ */
 export const PermanentLossSheet: FC<Props> = props => {
   const { remove, isOpen, close } = props
 

src/main_window/routes/characters/character/attributes/PermanentPointsSheet.tsx

@@ -19,6 +19,9 @@ type Props = {
   close(): void
 }
 
+/**
+ * Returns a sheet for managing lost and redeemed energy points.
+ */
 export const PermanentPointsSheet: FC<Props> = props => {
   const {
     id,

src/main_window/routes/characters/character/combatTechniques/CloseCombatTechniquesListItem.tsx

@@ -115,6 +115,9 @@ const CloseCombatTechniquesListItem: FC<Props> = props => {
   )
 }
 
+/**
+ * Displays a close combat technique.
+ */
 const MemoCloseCombatTechniquesListItem = memo(CloseCombatTechniquesListItem)
 
 export { MemoCloseCombatTechniquesListItem as CloseCombatTechniquesListItem }

src/main_window/routes/characters/character/combatTechniques/CombatTechniques.tsx

@@ -47,6 +47,9 @@ const isTopMarginNeeded = (
   mprev: DisplayedCombatTechnique | undefined,
 ) => sortOrder === "group" && mprev !== undefined && curr.kind !== mprev.kind
 
+/**
+ * Returns a page for managing combat techniques.
+ */
 export const CombatTechniques: FC = () => {
   const translate = useTranslate()
   const translateMap = useTranslateMap()

src/main_window/routes/characters/character/combatTechniques/RangedCombatTechniquesListItem.tsx

@@ -113,6 +113,9 @@ const RangedCombatTechniquesListItem: FC<Props> = props => {
   )
 }
 
+/**
+ * Displays a ranged combat technique.
+ */
 const MemoRangedCombatTechniquesListItem = memo(RangedCombatTechniquesListItem)
 
 export { MemoRangedCombatTechniquesListItem as RangedCombatTechniquesListItem }