Merge branch 'main' into fix/table-freezing

.eslintrc.cjs

@@ -3,12 +3,16 @@ const config = {
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: true,
+    sourceType: "module",
   },
-  plugins: ["@typescript-eslint"],
+  plugins: ["@typescript-eslint", "prettier", "import"],
   extends: [
     "plugin:@next/next/recommended",
-    // "plugin:@typescript-eslint/recommended-type-checked",
-    // "plugin:@typescript-eslint/stylistic-type-checked",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
   ],
   rules: {
     // These opinionated rules are enabled in stylistic-type-checked above.
@@ -32,8 +36,51 @@ const config = {
         checksVoidReturn: { attributes: false },
       },
     ],
+
+    "sort-imports": [
+      "error",
+      {
+        ignoreCase: false,
+        ignoreDeclarationSort: true, // don"t want to sort import lines, use eslint-plugin-import instead
+        ignoreMemberSort: false,
+        memberSyntaxSortOrder: ["none", "all", "multiple", "single"],
+        allowSeparatedGroups: true,
+      },
+    ],
+
+    "import/order": [
+      "error",
+      {
+        groups: [
+          "builtin", // Built-in imports (come from NodeJS native) go first
+          "external", // <- External imports
+          "internal", // <- Absolute imports
+          ["sibling", "parent"], // <- Relative imports, the sibling and parent types they can be mingled together
+          "index", // <- index imports
+          "unknown", // <- unknown
+        ],
+        "newlines-between": "always",
+        alphabetize: {
+          /* sort in ascending order. Options: ["ignore", "asc", "desc"] */
+          order: "asc",
+          /* ignore case. Options: [true, false] */
+          caseInsensitive: true,
+        },
+      },
+    ],
   },
   ignorePatterns: ["*.js"],
+  env: {
+    node: true,
+  },
+
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project: "./tsconfig.json",
+      },
+    },
+  },
 };
 
 module.exports = config;

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  // "editor.formatOnSave": true,
+  "eslint.validate": [
+    "typescript"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "always",
+    // "source.organizeImports": "always"
+  },
+}

package.json

@@ -79,15 +79,20 @@
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@types/react-syntax-highlighter": "^15.5.11",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "add": "^2.0.6",
     "autoprefixer": "^10.4.14",
     "dotenv-cli": "^7.3.0",
     "drizzle-kit": "latest",
-    "eslint": "^8.54.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "mysql2": "^3.6.1",
     "postcss": "^8.4.31",
-    "prettier": "^3.1.0",
+    "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.7",
     "tailwindcss": "^3.3.5",
     "tsx": "^4.7.0",

src/app/(auth)/login/discord/callback/route.ts

@@ -1,10 +1,11 @@
-import { cookies } from "next/headers";
-import { nanoid as generateId } from "nanoid";
 import { OAuth2RequestError } from "arctic";
 import { eq } from "drizzle-orm";
+import { nanoid as generateId } from "nanoid";
+import { cookies } from "next/headers";
+
 import { github, lucia } from "~/lib/auth";
-import { db } from "~/server/db";
 import { redirects } from "~/lib/constants";
+import { db } from "~/server/db";
 import { users } from "~/server/db/schema";
 
 export async function GET(request: Request): Promise<Response> {

src/app/(auth)/login/discord/route.ts

@@ -1,7 +1,8 @@
-import { cookies } from "next/headers";
 import { generateState } from "arctic";
-import { github } from "~/lib/auth";
+import { cookies } from "next/headers";
+
 import { env } from "~/env";
+import { github } from "~/lib/auth";
 
 export async function GET(): Promise<Response> {
   const state = generateState();

src/app/(auth)/login/login.tsx

@@ -2,7 +2,10 @@
 
 import Link from "next/link";
 import { useFormState } from "react-dom";
+
 import { GitHubLogoIcon } from "~/components/icons";
+import { PasswordInput } from "~/components/password-input";
+import { SubmitButton } from "~/components/submit-button";
 import { Button } from "~/components/ui/button";
 import {
   Card,
@@ -11,12 +14,10 @@ import {
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
-import { PasswordInput } from "~/components/password-input";
-import { APP_TITLE } from "~/lib/constants";
-import { login } from "~/lib/auth/actions";
-import { Label } from "~/components/ui/label";
-import { SubmitButton } from "~/components/submit-button";
 import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { login } from "~/lib/auth/actions";
+import { APP_TITLE } from "~/lib/constants";
 
 export function Login() {
   const [state, formAction] = useFormState(login, null);

src/app/(auth)/login/page.tsx

@@ -1,6 +1,8 @@
 import { redirect } from "next/navigation";
+
 import { validateRequest } from "~/lib/auth/validate-request";
 import { redirects } from "~/lib/constants";
+
 import { Login } from "./login";
 
 export const metadata = {

src/app/(auth)/reset-password/[token]/page.tsx

@@ -5,6 +5,7 @@ import {
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
+
 import { ResetPassword } from "./reset-password";
 
 export const metadata = {

src/app/(auth)/reset-password/[token]/reset-password.tsx

@@ -3,9 +3,10 @@
 import { useEffect } from "react";
 import { useFormState } from "react-dom";
 import { toast } from "sonner";
+
 import { ExclamationTriangleIcon } from "~/components/icons";
-import { SubmitButton } from "~/components/submit-button";
 import { PasswordInput } from "~/components/password-input";
+import { SubmitButton } from "~/components/submit-button";
 import { Label } from "~/components/ui/label";
 import { resetPassword } from "~/lib/auth/actions";
 

src/app/(auth)/reset-password/page.tsx

@@ -1,15 +1,17 @@
 import { redirect } from "next/navigation";
+
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
-import { SendResetEmail } from "./send-reset-email";
 import { validateRequest } from "~/lib/auth/validate-request";
 import { redirects } from "~/lib/constants";
 
+import { SendResetEmail } from "./send-reset-email";
+
 export const metadata = {
   title: "Forgot Password",
   description: "Forgot Password Page",

src/app/(auth)/reset-password/send-reset-email.tsx

@@ -1,16 +1,17 @@
 "use client";
 
-import { useEffect } from "react";
-import { useFormState } from "react-dom";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useFormState } from "react-dom";
 import { toast } from "sonner";
-import { Input } from "~/components/ui/input";
+
+import { ExclamationTriangleIcon } from "~/components/icons";
+import { SubmitButton } from "~/components/submit-button";
 import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
-import { SubmitButton } from "~/components/submit-button";
 import { sendPasswordResetLink } from "~/lib/auth/actions";
-import { ExclamationTriangleIcon } from "~/components/icons";
 import { redirects } from "~/lib/constants";
 
 export function SendResetEmail() {

src/app/(auth)/signup/page.tsx

@@ -1,8 +1,10 @@
 import { redirect } from "next/navigation";
-import { Signup } from "./signup";
+
 import { validateRequest } from "~/lib/auth/validate-request";
 import { redirects } from "~/lib/constants";
 
+import { Signup } from "./signup";
+
 export const metadata = {
   title: "Sign Up",
   description: "Signup Page",

src/app/(auth)/signup/signup.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { useFormState } from "react-dom";
+
 import { GitHubLogoIcon } from "~/components/icons";
 import { PasswordInput } from "~/components/password-input";
 import { SubmitButton } from "~/components/submit-button";

src/app/(auth)/verify-email/page.tsx

@@ -1,16 +1,18 @@
+import { redirect } from "next/navigation";
+
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
-import { redirect } from "next/navigation";
 import { validateRequest } from "~/lib/auth/validate-request";
-import { VerifyCode } from "./verify-code";
 import { redirects } from "~/lib/constants";
 import type { User } from "~/server/db/schema";
 
+import { VerifyCode } from "./verify-code";
+
 export const metadata = {
   title: "Verify Email",
   description: "Verify Email Page",

src/app/(auth)/verify-email/verify-code.tsx

@@ -1,16 +1,17 @@
 "use client";
-import { Input } from "~/components/ui/input";
 import { Label } from "@radix-ui/react-label";
 import { useEffect, useRef } from "react";
 import { useFormState } from "react-dom";
 import { toast } from "sonner";
+
 import { ExclamationTriangleIcon } from "~/components/icons";
+import { SubmitButton } from "~/components/submit-button";
+import { Input } from "~/components/ui/input";
 import {
   logout,
-  verifyEmail,
   resendVerificationEmail as resendEmail,
+  verifyEmail,
 } from "~/lib/auth/actions";
-import { SubmitButton } from "~/components/submit-button";
 
 export const VerifyCode = () => {
   const [verifyEmailState, verifyEmailAction] = useFormState(verifyEmail, null);

src/app/(landing)/_components/copy-to-clipboard.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
 import { CopyIcon } from "@radix-ui/react-icons";
 import { toast } from "sonner";
 
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+
 export const CopyToClipboard = ({ text }: { text: string }) => {
   const copyToClipboard = async () => {
     await navigator.clipboard.writeText(text);

src/app/(landing)/_components/feature-icons.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type SVGProps } from "react";
+import { type SVGProps, forwardRef } from "react";
 
 import { cn } from "~/lib/utils";
 
@@ -386,14 +386,14 @@ const StripeLogo = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
 StripeLogo.displayName = "StripeLogo";
 
 export {
-  NextjsLight,
+  Drizzle,
+  LuciaAuth,
   NextjsDark,
+  NextjsLight,
+  ReactEmail,
   ReactJs,
-  TailwindCss,
-  LuciaAuth,
-  Drizzle,
-  TRPC,
   ShadcnUi,
-  ReactEmail,
   StripeLogo,
+  TRPC,
+  TailwindCss,
 };

src/app/(landing)/_components/header.tsx

@@ -1,8 +1,9 @@
+import type { User as LuciaUser } from "lucia";
+import { FunctionSquare } from "lucide-react";
 import Link from "next/link";
-import { APP_TITLE } from "~/lib/constants";
+
 import { Button } from "~/components/ui/button";
-import { FunctionSquare } from "lucide-react";
-import type { User as LuciaUser } from "lucia";
+import { APP_TITLE } from "~/lib/constants";
 
 const routes = [
   { name: "Home", href: "/" },

src/app/(landing)/layout.tsx

@@ -1,8 +1,10 @@
-import { APP_TITLE } from "~/lib/constants";
-import { type ReactNode } from "react";
 import { type Metadata } from "next";
-import { Header } from "./_components/header";
+import { type ReactNode } from "react";
+
 import { validateRequest } from "~/lib/auth/validate-request";
+import { APP_TITLE } from "~/lib/constants";
+
+import { Header } from "./_components/header";
 
 export const metadata: Metadata = {
   title: APP_TITLE,

src/app/(landing)/page.tsx

@@ -1,13 +1,15 @@
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { type Metadata } from "next";
 import Link from "next/link";
+
 import { Button } from "~/components/ui/button";
 import {
   Card,
   CardDescription,
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
+
 import {
   Drizzle,
   LuciaAuth,

src/app/(main)/_components/header.tsx

@@ -1,6 +1,7 @@
+import { FunctionSquare } from "lucide-react";
 import Link from "next/link";
+
 import { UserDropdown } from "~/app/(main)/_components/user-dropdown";
-import { FunctionSquare } from "lucide-react";
 import { APP_TITLE } from "~/lib/constants";
 import type { User } from "~/server/db/schema";