diff --git a/web/calendar/filter-panel.react.js b/web/calendar/filter-panel.react.js
--- a/web/calendar/filter-panel.react.js
+++ b/web/calendar/filter-panel.react.js
@@ -27,7 +27,7 @@
 import type { Dispatch } from 'lib/types/redux-types';
 
 import { useModalContext } from '../modals/modal-provider.react';
-import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react';
+import ThreadSettingsModal from '../modals/threads/settings/thread-settings-modal.react.js';
 import { useSelector } from '../redux/redux-utils';
 import {
   webFilterThreadInfos,
diff --git a/web/chat/thread-menu.react.js b/web/chat/thread-menu.react.js
--- a/web/chat/thread-menu.react.js
+++ b/web/chat/thread-menu.react.js
@@ -31,8 +31,8 @@
 import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react';
 import ThreadMembersModal from '../modals/threads/members/members-modal.react';
 import ThreadNotificationsModal from '../modals/threads/notifications/notifications-modal.react';
+import ThreadSettingsModal from '../modals/threads/settings/thread-settings-modal.react.js';
 import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react';
-import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react';
 import { useSelector } from '../redux/redux-utils';
 import SWMansionIcon from '../SWMansionIcon.react';
 import css from './thread-menu.css';
diff --git a/web/modals/threads/thread-settings-delete-tab.css b/web/modals/threads/settings/thread-settings-delete-tab.css
rename from web/modals/threads/thread-settings-delete-tab.css
rename to web/modals/threads/settings/thread-settings-delete-tab.css
diff --git a/web/modals/threads/thread-settings-delete-tab.react.js b/web/modals/threads/settings/thread-settings-delete-tab.react.js
rename from web/modals/threads/thread-settings-delete-tab.react.js
rename to web/modals/threads/settings/thread-settings-delete-tab.react.js
--- a/web/modals/threads/thread-settings-delete-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-delete-tab.react.js
@@ -5,18 +5,18 @@
 import {
   deleteThreadActionTypes,
   deleteThread,
-} from 'lib/actions/thread-actions';
+} from 'lib/actions/thread-actions.js';
 import { type SetState } from 'lib/types/hook-types.js';
-import { type ThreadInfo } from 'lib/types/thread-types';
+import { type ThreadInfo } from 'lib/types/thread-types.js';
 import {
   useDispatchActionPromise,
   useServerCall,
-} from 'lib/utils/action-utils';
+} from 'lib/utils/action-utils.js';
 
-import Button from '../../components/button.react.js';
-import SWMansionIcon from '../../SWMansionIcon.react';
-import Input from '../input.react.js';
-import { useModalContext } from '../modal-provider.react.js';
+import Button from '../../../components/button.react.js';
+import SWMansionIcon from '../../../SWMansionIcon.react.js';
+import Input from '../../input.react.js';
+import { useModalContext } from '../../modal-provider.react.js';
 import css from './thread-settings-delete-tab.css';
 
 type ThreadSettingsDeleteTabProps = {
diff --git a/web/modals/threads/thread-settings-general-tab.css b/web/modals/threads/settings/thread-settings-general-tab.css
rename from web/modals/threads/thread-settings-general-tab.css
rename to web/modals/threads/settings/thread-settings-general-tab.css
diff --git a/web/modals/threads/thread-settings-general-tab.react.js b/web/modals/threads/settings/thread-settings-general-tab.react.js
rename from web/modals/threads/thread-settings-general-tab.react.js
rename to web/modals/threads/settings/thread-settings-general-tab.react.js
--- a/web/modals/threads/thread-settings-general-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-general-tab.react.js
@@ -5,19 +5,19 @@
 import {
   changeThreadSettingsActionTypes,
   changeThreadSettings,
-} from 'lib/actions/thread-actions';
+} from 'lib/actions/thread-actions.js';
 import { type SetState } from 'lib/types/hook-types.js';
-import { type ThreadInfo, type ThreadChanges } from 'lib/types/thread-types';
+import { type ThreadInfo, type ThreadChanges } from 'lib/types/thread-types.js';
 import {
   useDispatchActionPromise,
   useServerCall,
-} from 'lib/utils/action-utils';
-import { firstLine } from 'lib/utils/string-utils';
+} from 'lib/utils/action-utils.js';
+import { firstLine } from 'lib/utils/string-utils.js';
 
-import Button from '../../components/button.react';
-import Input from '../input.react.js';
-import { useModalContext } from '../modal-provider.react.js';
-import ColorSelector from './color-selector.react.js';
+import Button from '../../../components/button.react.js';
+import Input from '../../input.react.js';
+import { useModalContext } from '../../modal-provider.react.js';
+import ColorSelector from '../color-selector.react.js';
 import css from './thread-settings-general-tab.css';
 
 type ThreadSettingsGeneralTabProps = {
diff --git a/web/modals/threads/thread-settings-modal.css b/web/modals/threads/settings/thread-settings-modal.css
rename from web/modals/threads/thread-settings-modal.css
rename to web/modals/threads/settings/thread-settings-modal.css
diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/settings/thread-settings-modal.react.js
rename from web/modals/threads/thread-settings-modal.react.js
rename to web/modals/threads/settings/thread-settings-modal.react.js
--- a/web/modals/threads/thread-settings-modal.react.js
+++ b/web/modals/threads/settings/thread-settings-modal.react.js
@@ -6,25 +6,25 @@
 import {
   deleteThreadActionTypes,
   changeThreadSettingsActionTypes,
-} from 'lib/actions/thread-actions';
-import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors';
-import { threadInfoSelector } from 'lib/selectors/thread-selectors';
-import { threadHasPermission, robotextName } from 'lib/shared/thread-utils';
+} from 'lib/actions/thread-actions.js';
+import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
+import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
+import { threadHasPermission, robotextName } from 'lib/shared/thread-utils.js';
 import {
   type ThreadInfo,
   threadTypes,
   threadPermissions,
   type ThreadChanges,
-} from 'lib/types/thread-types';
-
-import Tabs from '../../components/tabs.react';
-import { useModalContext } from '../../modals/modal-provider.react';
-import { useSelector } from '../../redux/redux-utils';
-import Modal from '../modal.react';
-import ThreadSettingsDeleteTab from './thread-settings-delete-tab.react';
-import ThreadSettingsGeneralTab from './thread-settings-general-tab.react';
+} from 'lib/types/thread-types.js';
+
+import Tabs from '../../../components/tabs.react.js';
+import { useSelector } from '../../../redux/redux-utils.js';
+import { useModalContext } from '../../modal-provider.react.js';
+import Modal from '../../modal.react.js';
+import ThreadSettingsDeleteTab from './thread-settings-delete-tab.react.js';
+import ThreadSettingsGeneralTab from './thread-settings-general-tab.react.js';
 import css from './thread-settings-modal.css';
-import ThreadSettingsPrivacyTab from './thread-settings-privacy-tab.react';
+import ThreadSettingsPrivacyTab from './thread-settings-privacy-tab.react.js';
 
 type TabType = 'general' | 'privacy' | 'delete';
 type BaseProps = {
diff --git a/web/modals/threads/thread-settings-privacy-tab.css b/web/modals/threads/settings/thread-settings-privacy-tab.css
rename from web/modals/threads/thread-settings-privacy-tab.css
rename to web/modals/threads/settings/thread-settings-privacy-tab.css
diff --git a/web/modals/threads/thread-settings-privacy-tab.react.js b/web/modals/threads/settings/thread-settings-privacy-tab.react.js
rename from web/modals/threads/thread-settings-privacy-tab.react.js
rename to web/modals/threads/settings/thread-settings-privacy-tab.react.js
--- a/web/modals/threads/thread-settings-privacy-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-privacy-tab.react.js
@@ -6,21 +6,21 @@
   changeThreadSettings,
   changeThreadSettingsActionTypes,
 } from 'lib/actions/thread-actions.js';
-import { threadTypeDescriptions } from 'lib/shared/thread-utils';
-import { type SetState } from 'lib/types/hook-types';
+import { threadTypeDescriptions } from 'lib/shared/thread-utils.js';
+import { type SetState } from 'lib/types/hook-types.js';
 import {
   type ThreadInfo,
   type ThreadChanges,
   assertThreadType,
   threadTypes,
-} from 'lib/types/thread-types';
+} from 'lib/types/thread-types.js';
 import {
   useDispatchActionPromise,
   useServerCall,
 } from 'lib/utils/action-utils.js';
 
-import Button from '../../components/button.react.js';
-import { useModalContext } from '../modal-provider.react.js';
+import Button from '../../../components/button.react.js';
+import { useModalContext } from '../../modal-provider.react.js';
 import css from './thread-settings-privacy-tab.css';
 
 const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes;