Enhance ESLint configuration with rules for code readability; add padding-line-between-statements and no-multiple-empty-lines rules. Refactor components for improved structure and readability by adding blank lines in various sections. Update TimestampConverter, InstallPWAButton, ServiceWorkerUpdateToast, CopyField, Header, Footer, and layout components for better spacing and organization.

Author: mCodex

eslint.config.mjs

@@ -11,6 +11,30 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    rules: {
+      // Encourage airy, readable layouts between logical sections
+      'padding-line-between-statements': [
+        'warn',
+        // Always add a blank line before returns
+        { blankLine: 'always', prev: '*', next: 'return' },
+
+        // Always add a blank line after variable declarations
+        { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
+        // But allow consecutive var/let/const without blank lines between themselves
+        { blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] },
+
+        // Ensure breathing room around blocks and function/class boundaries
+        { blankLine: 'always', prev: 'block-like', next: '*' },
+        { blankLine: 'always', prev: '*', next: 'block-like' },
+        { blankLine: 'always', prev: '*', next: ['function', 'class'] },
+        { blankLine: 'always', prev: ['function', 'class'], next: '*' },
+      ],
+
+      // Keep it tidy: no large vertical gaps
+      'no-multiple-empty-lines': ['warn', { max: 1, maxBOF: 1, maxEOF: 1 }],
+    },
+  },
 ];
 
 export default eslintConfig;

src/app/components/TimestampConverter.tsx

@@ -32,6 +32,7 @@ export default function TimestampConverter({ controller }: Props) {
           validators={{
             onChange: ({ value }) => {
               const result = timestampSchema.shape.timestamp.safeParse(value);
+
               return result.success ? undefined : result.error.issues[0]?.message;
             },
           }}

src/app/components/client/InstallPWAButton.tsx

@@ -19,7 +19,9 @@ export default function InstallPWAButton() {
       setDeferredPrompt(e);
       setVisible(true);
     };
+
     window.addEventListener("beforeinstallprompt", onBeforeInstallPrompt as EventListener);
+
     return () => window.removeEventListener("beforeinstallprompt", onBeforeInstallPrompt as EventListener);
   }, []);
 
@@ -29,6 +31,7 @@ export default function InstallPWAButton() {
     if (!deferredPrompt) return;
     deferredPrompt.prompt();
     const { outcome } = await deferredPrompt.userChoice;
+
     setVisible(false);
     setDeferredPrompt(null);
     console.log("PWA install outcome:", outcome);

src/app/components/client/ServiceWorkerUpdateToast.tsx

@@ -24,6 +24,7 @@ export default function ServiceWorkerUpdateToast() {
           .catch(() => {});
       }
     };
+
     document.addEventListener("visibilitychange", onVisibility);
 
     return () => {

src/app/components/common/CopyField.tsx

@@ -12,20 +12,23 @@ export default function CopyField({ label, value, onCopy, large }: CopyFieldProp
       <label className="label">
         <span className="label-text font-medium text-orange-400">{label}</span>
       </label>
+
       <div className="input-group">
         <input
           type="text"
           className={`input input-bordered flex-1 font-mono bg-base-200 ${large ? 'text-lg' : ''}`}
           value={value}
           readOnly
         />
+
         <button
           type="button"
           className="btn btn-square bg-orange-500 hover:bg-orange-600 border-orange-500 text-white"
           onClick={onCopy}
         >
           <TbCopy />
         </button>
+        
       </div>
     </div>
   );

src/app/components/server/Footer.tsx

@@ -6,6 +6,7 @@ export default function Footer() {
           Built with <span className="text-orange-500">DaisyUI</span> + Next.js 15 • Open Source ♥️ • Made for developers who live in
           <span className="mx-1">⏱️</span> time.
         </p>
+
         <nav className="grid grid-flow-col gap-4">
           <a className="link link-hover" href="https://github.com/mCodex/react-timestamper" target="_blank" rel="noreferrer">
             GitHub
@@ -17,6 +18,7 @@ export default function Footer() {
             Next.js
           </a>
         </nav>
+        
       </aside>
     </footer>
   );

src/app/components/server/Header.tsx

@@ -3,6 +3,7 @@ import { TbRefresh } from "react-icons/tb";
 export default function Header() {
   return (
     <div className="navbar bg-base-100/60 sticky top-0 z-10 shadow-sm">
+
       <div className="container mx-auto">
         <div className="flex-1">
           <span className="flex items-center gap-2 text-xl">
@@ -11,6 +12,7 @@ export default function Header() {
           </span>
         </div>
       </div>
+      
     </div>
   );
 }

src/app/layout.tsx

@@ -8,7 +8,6 @@ const firaSans = Fira_Sans({
   weight: ["400", "500", "600", "700"],
 });
 
-
 export const metadata: Metadata = {
   title: "Timestamper - Convert timestamps into dates",
   description: "A simple tool to convert Unix timestamps into human-readable dates and view the current timestamp",

src/app/page.tsx

@@ -5,12 +5,15 @@ import InteractiveIsland from "./components/client/InteractiveIsland";
 
 export default function Home() {
   return (
-  <div className="min-h-screen bg-base-300 relative overflow-hidden isolate flex flex-col">
+    <div className="min-h-screen bg-base-300 relative overflow-hidden isolate flex flex-col">
       <Background />
+
       <Header />
+
       <main className="flex-1">
         <InteractiveIsland />
       </main>
+      
       <Footer />
     </div>
   );

src/app/schemas/timestamp.ts

@@ -6,6 +6,7 @@ export const timestampSchema = z.object({
     .refine((val) => {
       // Check if it's a valid number (timestamp can be string representation of number)
       const num = Number(val);
+
       if (isNaN(num)) return false;
 
       // Check if it's a reasonable timestamp (between 1970 and 2100)