web/eslint: add better import order rules

web/eslint.config.js

@@ -19,13 +19,29 @@ export default tseslint.config(
 			"react-refresh": reactRefresh,
 			"import": pluginImport,
 		},
+		settings: {
+			"import/extensions": [".ts", ".tsx", ".css"],
+		},
 		rules: {
 			...reactHooks.configs.recommended.rules,
 			"react-refresh/only-export-components": [
 				"warn",
 				{allowConstantExport: true},
 			],
-			"import/order": "error",
+			"import/order": ["error", {
+				"newlines-between": "never",
+				"alphabetize": {"order": "asc", "orderImportKind": "asc"},
+				"named": true,
+				"warnOnUnassignedImports": true,
+				"pathGroups": [{
+					"pattern": "*.css",
+					"patternOptions": {"matchBase": true},
+					"group": "sibling",
+					"position": "after",
+				}],
+			}],
+			"import/first": "error",
+			"import/newline-after-import": "error",
 			"indent": ["error", "tab", {
 				"FunctionDeclaration": {"parameters": "first"},
 				"FunctionExpression": {"parameters": "first"},

web/src/App.tsx

@@ -15,12 +15,12 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { useEffect, useMemo } from "react"
 import { ScaleLoader } from "react-spinners"
-import { useEventAsState } from "./util/eventdispatcher.ts"
 import Client from "./api/client.ts"
 import WSClient from "./api/wsclient.ts"
-import { LoginScreen, VerificationScreen } from "./ui/login"
-import MainScreen from "./ui/MainScreen.tsx"
 import { ClientContext } from "./ui/ClientContext.ts"
+import MainScreen from "./ui/MainScreen.tsx"
+import { LoginScreen, VerificationScreen } from "./ui/login"
+import { useEventAsState } from "./util/eventdispatcher.ts"
 
 function App() {
 	const client = useMemo(() => new Client(new WSClient("/_gomuks/websocket")), [])

web/src/api/client.ts

@@ -14,15 +14,15 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { CachedEventDispatcher } from "../util/eventdispatcher.ts"
-import type {
-	EventRowID,
-	EventType,
-	RoomID,
-	ClientState,
-	RPCEvent,
-} from "./types"
 import type RPCClient from "./rpc.ts"
 import { StateStore } from "./statestore.ts"
+import type {
+	ClientState,
+	EventRowID,
+	EventType,
+	RPCEvent,
+	RoomID,
+} from "./types"
 
 export default class Client {
 	readonly state = new CachedEventDispatcher<ClientState>()

web/src/api/rpc.ts

@@ -22,11 +22,11 @@ import type {
 	EventRowID,
 	EventType,
 	PaginationResponse,
+	RPCCommand,
+	RPCEvent,
 	RoomID,
 	TimelineRowID,
 	UserID,
-	RPCCommand,
-	RPCEvent,
 } from "./types"
 
 export interface ConnectionEvent {

web/src/api/statestore.ts

@@ -22,12 +22,12 @@ import type {
 	EventID,
 	EventRowID,
 	EventType,
+	EventsDecryptedData,
 	LazyLoadSummary,
 	RoomID,
-	TimelineRowTuple,
-	EventsDecryptedData,
 	SyncCompleteData,
 	SyncRoom,
+	TimelineRowTuple,
 } from "./types"
 
 function arraysAreEqual<T>(arr1?: T[], arr2?: T[]): boolean {

web/src/api/types/hievents.ts

@@ -13,18 +13,18 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
-import {
-	DeviceID,
-	EventType,
-	RoomID,
-	UserID,
-} from "./mxtypes.ts"
 import {
 	DBEvent,
 	DBRoom,
 	EventRowID,
 	TimelineRowTuple,
 } from "./hitypes.ts"
+import {
+	DeviceID,
+	EventType,
+	RoomID,
+	UserID,
+} from "./mxtypes.ts"
 
 export interface RPCCommand<T> {
 	command: string

web/src/api/wsclient.ts

@@ -13,8 +13,8 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
-import type { RPCCommand } from "./types"
 import RPCClient from "./rpc.ts"
+import type { RPCCommand } from "./types"
 
 export default class WSClient extends RPCClient {
 	#conn: WebSocket | null = null

web/src/ui/MainScreen.tsx

@@ -13,11 +13,11 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
-import { useState, use } from "react"
+import { use, useState } from "react"
 import type { RoomID } from "../api/types"
-import RoomList from "./roomlist/RoomList.tsx"
-import RoomView from "./RoomView.tsx"
 import { ClientContext } from "./ClientContext.ts"
+import RoomView from "./RoomView.tsx"
+import RoomList from "./roomlist/RoomList.tsx"
 import "./MainScreen.css"
 
 const MainScreen = () => {

web/src/ui/RoomView.tsx

@@ -16,8 +16,8 @@
 import React, { use, useState } from "react"
 import { RoomStateStore } from "../api/statestore.ts"
 import { useNonNullEventAsState } from "../util/eventdispatcher.ts"
-import TimelineView from "./timeline/TimelineView.tsx"
 import { ClientContext } from "./ClientContext.ts"
+import TimelineView from "./timeline/TimelineView.tsx"
 import "./RoomView.css"
 
 interface RoomViewProps {

web/src/ui/roomlist/Entry.tsx

@@ -13,9 +13,9 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
+import { getMediaURL } from "../../api/media.ts"
 import type { RoomListEntry } from "../../api/statestore.ts"
 import type { DBEvent } from "../../api/types/hitypes.ts"
-import { getMediaURL } from "../../api/media.ts"
 
 export interface RoomListEntryProps {
 	room: RoomListEntry

web/src/ui/timeline/TimelineEvent.tsx

@@ -16,10 +16,10 @@
 import React from "react"
 import { RoomStateStore } from "../../api/statestore.ts"
 import { DBEvent, MemberEventContent } from "../../api/types"
-import { EventContentProps } from "./content/props.ts"
 import HiddenEvent from "./content/HiddenEvent.tsx"
-import "./TimelineEvent.css"
 import MessageBody from "./content/MessageBody.tsx"
+import { EventContentProps } from "./content/props.ts"
+import "./TimelineEvent.css"
 
 export interface TimelineEventProps {
 	room: RoomStateStore

web/src/ui/timeline/content/MessageBody.tsx

@@ -15,8 +15,8 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 import sanitizeHtml from "sanitize-html"
-import { ContentURI } from "../../../api/types"
 import { getMediaURL } from "../../../api/media.ts"
+import { ContentURI } from "../../../api/types"
 import { sanitizeHtmlParams } from "../../../util/html.ts"
 import { EventContentProps } from "./props.ts"
 

web/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react-swc"
+import { defineConfig } from "vite"
 
 export default defineConfig({
 	plugins: [react()],