Migrate to TS remaining js files in sidebar/components module

src/sidebar/components/hooks/use-filter-options.js → src/sidebar/components/hooks/use-filter-options.ts

@@ -3,16 +3,13 @@ import { useMemo } from 'preact/hooks';
 import { username } from '../../helpers/account-id';
 import { annotationDisplayName } from '../../helpers/annotation-user';
 import { useSidebarStore } from '../../store';
-
-/** @typedef {import('../../store/modules/filters').FilterOption} FilterOption */
+import type { FilterOption } from '../../store/modules/filters';
 
 /**
  * Generate a list of users for filtering annotations; update when set of
  * annotations or filter state changes meaningfully.
- *
- * @return {FilterOption[]}
  */
-export function useUserFilterOptions() {
+export function useUserFilterOptions(): FilterOption[] {
   const store = useSidebarStore();
   const annotations = store.allAnnotations();
   const focusFilters = store.getFocusFilters();
@@ -22,8 +19,7 @@ export function useUserFilterOptions() {
 
   return useMemo(() => {
     // Determine unique users (authors) in annotation collection
-    /** @type {Record<string, string>} */
-    const users = {};
+    const users: Record<string, string> = {};
     annotations.forEach(annotation => {
       const username_ = username(annotation.user);
       users[username_] = annotationDisplayName(

src/sidebar/components/hooks/use-root-thread.js → src/sidebar/components/hooks/use-root-thread.ts

 import { useMemo } from 'preact/hooks';
 
+import type { Thread } from '../../helpers/build-thread';
 import { threadAnnotations } from '../../helpers/thread-annotations';
+import type { ThreadState } from '../../helpers/thread-annotations';
 import { useSidebarStore } from '../../store';
 
-/** @typedef {import('../../helpers/build-thread').Thread} Thread */
-
 /**
  * Gather together state relevant to building a root thread of annotations and
  * replies and return an updated root thread when changes occur.
- *
- * @return {Thread}
  */
-export function useRootThread() {
+export function useRootThread(): Thread {
   const store = useSidebarStore();
   const annotations = store.allAnnotations();
   const query = store.filterQuery();
@@ -19,8 +17,7 @@ export function useRootThread() {
   const selectionState = store.selectionState();
   const filters = store.getFilterValues();
 
-  const threadState = useMemo(() => {
-    /** @type {Record<string,string>} */
+  const threadState = useMemo((): ThreadState => {
     return {
       annotations,
       route,

src/sidebar/helpers/thread-annotations.ts

@@ -7,7 +7,7 @@ import { shouldShowInTab } from './tabs';
 import { sorters } from './thread-sorters';
 import { filterAnnotations } from './view-filter';
 
-type ThreadState = {
+export type ThreadState = {
   annotations: Annotation[];
   route: string | null;
   selection: {