.githooks/pre-commit

@@ -1,20 +1,21 @@
 #!/bin/sh
 
-# Pre-commit hook: ensures formatting and tests pass before committing
+# Pre-commit hook: auto-formats staged files and ensures tests pass before committing
 
 echo "Running pre-commit checks..."
 
-# 1. Check formatting on staged files
+# 1. Auto-format staged files
 STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(ts|tsx|js|jsx|json|md)$')
 
 if [ -n "$STAGED_FILES" ]; then
-  echo "Checking format..."
-  echo "$STAGED_FILES" | xargs deno fmt --check
+  echo "Auto-formatting..."
+  echo "$STAGED_FILES" | xargs deno fmt
   if [ $? -ne 0 ]; then
     echo ""
-    echo "Format check failed. Run 'deno fmt' to fix, then stage the changes."
+    echo "Auto-format failed. Fix the issues manually and try again."
     exit 1
   fi
+  echo "$STAGED_FILES" | xargs git add
 fi
 
 # 2. Run all tests

README.md

@@ -40,6 +40,7 @@ deno task dev
 
 ### Git hooks
 
-A pre-commit hook is configured via `.githooks/` to automatically check
-formatting and run tests before each commit. The `deno task setup` command
-enables this by setting `core.hooksPath` to `.githooks/`.
+A pre-commit hook is configured via `.githooks/` to automatically format staged
+files and run tests before each commit. If auto-formatting fails, the commit is
+aborted. The `deno task setup` command enables this by setting `core.hooksPath`
+to `.githooks/`.

components/layout/PageContainer.tsx

@@ -1,7 +1,7 @@
 import { JSX } from "preact";
 
 interface PageContainerProps {
-  children: JSX.Element | JSX.Element[] | string;
+  children: JSX.Element | JSX.Element[] | string[] | string;
   centered?: boolean;
   className?: string;
 }

islands/Editor.tsx

@@ -224,13 +224,13 @@ export default function Editor(props: EditorProps) {
   };
 
   return (
-    <div className="w-full flex justify-between box-border overflow-hidden flex-shrink-0 flex-grow-1">
+    <div className="w-full flex gap-3 box-border overflow-hidden flex-shrink-0 flex-grow-1">
       {props.allowMode !== EditorMode.Read
         ? (
           <div
-            className={`h-[calc(100vh-0.75rem*3-30px)] border border-gray-300 dark:border-gray-700 rounded box-border text-gray-800 dark:text-gray-100 overflow-auto flex-shrink-0 flex-basis-0 flex-grow-1 custom-scrollbar ${
-              mode === EditorMode.Both ? "mr-1.5" : ""
-            } ${mode === EditorMode.Read ? "hidden" : ""}`}
+            className={`h-[calc(100vh-0.75rem*3-30px)] border border-gray-300 dark:border-gray-700 rounded box-border text-gray-800 dark:text-gray-100 overflow-auto flex-1 min-w-0 custom-scrollbar ${
+              mode === EditorMode.Read ? "hidden" : ""
+            }`}
             ref={editViewRef}
           >
             <Textarea
@@ -256,9 +256,9 @@ export default function Editor(props: EditorProps) {
       {props.allowMode !== EditorMode.Edit
         ? (
           <div
-            className={`h-[calc(100vh-0.75rem*3-30px)] border border-gray-300 dark:border-gray-700 rounded box-border text-gray-800 dark:text-gray-100 overflow-auto flex-shrink-0 flex-basis-0 flex-grow-1 p-1.5 custom-scrollbar ${
-              mode === EditorMode.Both ? "ml-1.5" : ""
-            } ${mode === EditorMode.Edit ? "hidden" : ""}`}
+            className={`h-[calc(100vh-0.75rem*3-30px)] border border-gray-300 dark:border-gray-700 rounded box-border text-gray-800 dark:text-gray-100 overflow-auto flex-1 min-w-0 p-1.5 custom-scrollbar ${
+              mode === EditorMode.Edit ? "hidden" : ""
+            }`}
             ref={readViewRef}
             onScroll={() => {
               onScroll(EditorMode.Read);

islands/LoginFrame.tsx

@@ -97,73 +97,80 @@ export default function LoginFrame(props: LoginFrameProps) {
   };
 
   return (
-    <div className="w-[375px] mt-4 box-border p-4 text-gray-800 dark:text-gray-100 flex flex-col relative">
+    <div className="flex items-center justify-center flex-col w-full h-full relative">
       <div className="absolute top-0 right-0">
         <ThemeToggle />
       </div>
-      <Input
-        label="Email"
-        error={emailError}
-        type="text"
-        placeholder="Your email"
-        value={email}
-        onInput={(e) => {
-          setEmailError(false);
-          setEmail((e.target as HTMLInputElement).value);
-        }}
-      />
-      <Input
-        label="Password"
-        error={passwordError}
-        type="password"
-        placeholder="Your password"
-        value={password}
-        onInput={(e) => {
-          setPasswordError(false);
-          setPassword((e.target as HTMLInputElement).value);
-        }}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            onSubmit();
-          }
-        }}
-      />
-      {props.mode === "register"
-        ? (
-          <Input
-            label="Confirm Password"
-            error={confirmPasswordError}
-            type="password"
-            placeholder="Confirm your password"
-            value={confirmPassword}
-            onInput={(e) => {
-              setConfirmPasswordError(false);
-              setConfirmPassword((e.target as HTMLInputElement).value);
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                onSubmit();
-              }
-            }}
-          />
-        )
-        : null}
-      <Button
-        variant="primary"
-        className="h-[38px] mt-2 mb-2"
-        type="button"
-        onClick={onSubmit}
-      >
-        {props.mode === "register" ? "Register" : "Sign in"}
-      </Button>
-      <Button
-        type="button"
-        onClick={() => {
-          location.href = props.mode === "register" ? "/login" : "/register";
-        }}
-      >
-        {props.mode === "register" ? "Go Login" : "Go Register"}
-      </Button>
+      <h2>
+        {props.mode === "register"
+          ? "Register to Postdown"
+          : "Sign in to Postdown"}
+      </h2>
+      <div className="w-[375px] mt-4 box-border p-4 text-gray-800 dark:text-gray-100 flex flex-col">
+        <Input
+          label="Email"
+          error={emailError}
+          type="text"
+          placeholder="Your email"
+          value={email}
+          onInput={(e) => {
+            setEmailError(false);
+            setEmail((e.target as HTMLInputElement).value);
+          }}
+        />
+        <Input
+          label="Password"
+          error={passwordError}
+          type="password"
+          placeholder="Your password"
+          value={password}
+          onInput={(e) => {
+            setPasswordError(false);
+            setPassword((e.target as HTMLInputElement).value);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              onSubmit();
+            }
+          }}
+        />
+        {props.mode === "register"
+          ? (
+            <Input
+              label="Confirm Password"
+              error={confirmPasswordError}
+              type="password"
+              placeholder="Confirm your password"
+              value={confirmPassword}
+              onInput={(e) => {
+                setConfirmPasswordError(false);
+                setConfirmPassword((e.target as HTMLInputElement).value);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  onSubmit();
+                }
+              }}
+            />
+          )
+          : null}
+        <Button
+          variant="primary"
+          className="h-[38px] mt-2 mb-2"
+          type="button"
+          onClick={onSubmit}
+        >
+          {props.mode === "register" ? "Register" : "Sign in"}
+        </Button>
+        <Button
+          type="button"
+          onClick={() => {
+            location.href = props.mode === "register" ? "/login" : "/register";
+          }}
+        >
+          {props.mode === "register" ? "Go Login" : "Go Register"}
+        </Button>
+      </div>
     </div>
   );
 }

routes/login.tsx

@@ -9,8 +9,7 @@ export default define.page(() => {
       <Head>
         <title>Login</title>
       </Head>
-      <PageContainer centered>
-        <h2>Sign in to Postdown</h2>
+      <PageContainer>
         <LoginFrame mode="login" />
       </PageContainer>
     </>

routes/register.tsx

@@ -9,8 +9,7 @@ export default define.page(() => {
       <Head>
         <title>Register</title>
       </Head>
-      <PageContainer centered>
-        <h2>Register to Postdown</h2>
+      <PageContainer>
         <LoginFrame mode="register" />
       </PageContainer>
     </>