Prettier truce

biome.json

@@ -1,13 +1,5 @@
 {
   "$schema": "https://biomejs.dev/schemas/2.2.3/schema.json",
-  "assist": {
-    "actions": {
-      "source": {
-        "useSortedKeys": "on"
-      }
-    },
-    "enabled": true
-  },
   "files": {
     "ignoreUnknown": false,
     "includes": [".*", "*.config.ts", "src/**", "tests/**", "!src/overtype"]
@@ -18,19 +10,22 @@
     "indentStyle": "space",
     "indentWidth": 2,
     "lineEnding": "lf",
-    "lineWidth": 100
+    "lineWidth": 80
   },
   "javascript": {
     "formatter": {
       "arrowParentheses": "always",
-      "attributePosition": "auto",
       "bracketSameLine": false,
       "bracketSpacing": true,
-      "jsxQuoteStyle": "single",
+      "enabled": true,
+      "indentStyle": "space",
+      "indentWidth": 2,
+      "jsxQuoteStyle": "double",
+      "lineEnding": "lf",
       "quoteProperties": "asNeeded",
-      "quoteStyle": "single",
+      "quoteStyle": "double",
       "semicolons": "asNeeded",
-      "trailingCommas": "all"
+      "trailingCommas": "es5"
     }
   },
   "json": {

playwright.config.ts

@@ -1,12 +1,12 @@
 // playwright.config.ts
-import { defineConfig } from '@playwright/test'
+import { defineConfig } from "@playwright/test"
 
 export default defineConfig({
-  reporter: [['html', { open: 'never' }]],
-  testDir: 'tests/e2e',
+  reporter: [["html", { open: "never" }]],
+  testDir: "tests/e2e",
   use: {
-    screenshot: 'only-on-failure',
-    trace: 'retain-on-failure',
-    video: 'retain-on-failure',
+    screenshot: "only-on-failure",
+    trace: "retain-on-failure",
+    video: "retain-on-failure",
   },
 })

prettier.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('prettier').Config} */
+module.exports = {
+  endOfLine: "lf",
+  semi: false,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "es5",
+}

src/components/Badge.tsx

@@ -1,15 +1,15 @@
-import { type JSX, useState } from 'react'
-import { twMerge } from 'tailwind-merge'
-import type { VariantProps } from 'tailwind-variants'
-import { badgeCVA, typeColors, typeIcons } from '@/components/design'
-import type { CommentTableRow } from '@/entrypoints/background'
+import { type JSX, useState } from "react"
+import { twMerge } from "tailwind-merge"
+import type { VariantProps } from "tailwind-variants"
+import { badgeCVA, typeColors, typeIcons } from "@/components/design"
+import type { CommentTableRow } from "@/entrypoints/background"
 
-import { CodePreview } from './BadgePopups/CodePreview'
-import { ImagePreview } from './BadgePopups/ImagePreview'
-import { LinkPreview } from './BadgePopups/LinkPreview'
-import { OpenTabPopup } from './BadgePopups/OpenTabPopup'
-import { TextPreview } from './BadgePopups/TextPreview'
-import { TimePreview } from './BadgePopups/TimePreview'
+import { CodePreview } from "./BadgePopups/CodePreview"
+import { ImagePreview } from "./BadgePopups/ImagePreview"
+import { LinkPreview } from "./BadgePopups/LinkPreview"
+import { OpenTabPopup } from "./BadgePopups/OpenTabPopup"
+import { TextPreview } from "./BadgePopups/TextPreview"
+import { TimePreview } from "./BadgePopups/TimePreview"
 
 const typePopups = {
   code: CodePreview,
@@ -18,7 +18,9 @@ const typePopups = {
   open: OpenTabPopup,
   text: TextPreview,
   time: TimePreview,
-} satisfies Partial<Record<keyof typeof typeIcons, (props: BadgePopupProps) => JSX.Element>>
+} satisfies Partial<
+  Record<keyof typeof typeIcons, (props: BadgePopupProps) => JSX.Element>
+>
 
 export interface BadgePopupProps {
   row: CommentTableRow
@@ -34,11 +36,13 @@ const Badge = ({ text, type, data }: BadgeProps) => {
   const Icon = typeIcons[type]
   const [showTooltip, setShowTooltip] = useState(false)
   const PopupComponent =
-    showTooltip && type in typePopups && typePopups[type as keyof typeof typePopups]
+    showTooltip &&
+    type in typePopups &&
+    typePopups[type as keyof typeof typePopups]
   return (
     <button
-      type='button'
-      className='relative'
+      type="button"
+      className="relative"
       onMouseEnter={() => setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}
     >
@@ -47,17 +51,17 @@ const Badge = ({ text, type, data }: BadgeProps) => {
           badgeCVA({
             clickable: type in typePopups,
             type,
-          }),
+          })
         )}
       >
-        {type === 'blank' || <Icon className='h-3 w-3' />}
+        {type === "blank" || <Icon className="h-3 w-3" />}
         {text || type}
       </span>
       {PopupComponent && data && (
         <div
           className={twMerge(
-            'absolute top-full z-10 w-30 rounded border px-2 py-1 text-left text-xs shadow-lg',
-            typeColors[type],
+            "absolute top-full z-10 w-30 rounded border px-2 py-1 text-left text-xs shadow-lg",
+            typeColors[type]
           )}
         >
           <PopupComponent row={data} />

src/components/BadgePopups/CodePreview.tsx

@@ -1,10 +1,13 @@
-import type { BadgePopupProps } from '@/components/Badge'
+import type { BadgePopupProps } from "@/components/Badge"
 
 export function CodePreview({ row: _row }: BadgePopupProps) {
   return (
     <>
-      TODO{' '}
-      <a href='https://github.com/diffplug/gitcasso/issues/81' className='underline'>
+      TODO{" "}
+      <a
+        href="https://github.com/diffplug/gitcasso/issues/81"
+        className="underline"
+      >
         #81
       </a>
       : show every codeblock in the draft

src/components/BadgePopups/ImagePreview.tsx

@@ -1,10 +1,13 @@
-import type { BadgePopupProps } from '@/components/Badge'
+import type { BadgePopupProps } from "@/components/Badge"
 
 export function ImagePreview({ row: _row }: BadgePopupProps) {
   return (
     <>
-      TODO{' '}
-      <a href='https://github.com/diffplug/gitcasso/issues/80' className='underline'>
+      TODO{" "}
+      <a
+        href="https://github.com/diffplug/gitcasso/issues/80"
+        className="underline"
+      >
         #80
       </a>
       : show every image in the draft

src/components/BadgePopups/LinkPreview.tsx

@@ -1,10 +1,13 @@
-import type { BadgePopupProps } from '@/components/Badge'
+import type { BadgePopupProps } from "@/components/Badge"
 
 export function LinkPreview({ row: _row }: BadgePopupProps) {
   return (
     <>
-      TODO{' '}
-      <a href='https://github.com/diffplug/gitcasso/issues/79' className='underline'>
+      TODO{" "}
+      <a
+        href="https://github.com/diffplug/gitcasso/issues/79"
+        className="underline"
+      >
         #79
       </a>
       : show text, url, and preview info for every link in the draft

src/components/BadgePopups/OpenTabPopup.tsx

@@ -1,5 +1,5 @@
-import type { BadgePopupProps } from '@/components/Badge'
-import { openOrFocusComment } from '@/entrypoints/popup/popup'
+import type { BadgePopupProps } from "@/components/Badge"
+import { openOrFocusComment } from "@/entrypoints/popup/popup"
 
 export function OpenTabPopup({ row }: BadgePopupProps) {
   const handleClick = () => {
@@ -9,8 +9,8 @@ export function OpenTabPopup({ row }: BadgePopupProps) {
   return (
     <button
       onClick={handleClick}
-      className='w-full cursor-pointer text-left hover:bg-opacity-80'
-      type='button'
+      className="w-full cursor-pointer text-left hover:bg-opacity-80"
+      type="button"
     >
       <p>Tab is already open.</p>
       <p>Click to activate.</p>

src/components/BadgePopups/TextPreview.tsx

@@ -1,10 +1,13 @@
-import type { BadgePopupProps } from '@/components/Badge'
+import type { BadgePopupProps } from "@/components/Badge"
 
 export function TextPreview({ row: _row }: BadgePopupProps) {
   return (
     <>
-      TODO{' '}
-      <a href='https://github.com/diffplug/gitcasso/issues/82' className='underline'>
+      TODO{" "}
+      <a
+        href="https://github.com/diffplug/gitcasso/issues/82"
+        className="underline"
+      >
         #82
       </a>
       : show the syntax-highlighted markdown of the latest draft

src/components/BadgePopups/TimePreview.tsx

@@ -1,10 +1,13 @@
-import type { BadgePopupProps } from '@/components/Badge'
+import type { BadgePopupProps } from "@/components/Badge"
 
 export function TimePreview({ row: _row }: BadgePopupProps) {
   return (
     <>
-      TODO{' '}
-      <a href='https://github.com/diffplug/gitcasso/issues/83' className='underline'>
+      TODO{" "}
+      <a
+        href="https://github.com/diffplug/gitcasso/issues/83"
+        className="underline"
+      >
         #83
       </a>
       : show the revision history of the comment

src/components/BulkActionsBar.tsx

@@ -3,18 +3,18 @@ type BulkActionsBarProps = {
 }
 export function BulkActionsBar({ selectedIds }: BulkActionsBarProps) {
   return (
-    <div className='-translate-x-1/2 fixed bottom-6 left-1/2 z-50 flex transform items-center gap-3 rounded-md border border-blue-200 bg-blue-50 p-3 shadow-lg'>
-      <span className='font-medium text-sm'>{selectedIds.size} selected</span>
-      <button type='button' className='text-blue-600 text-sm hover:underline'>
+    <div className="-translate-x-1/2 fixed bottom-6 left-1/2 z-50 flex transform items-center gap-3 rounded-md border border-blue-200 bg-blue-50 p-3 shadow-lg">
+      <span className="font-medium text-sm">{selectedIds.size} selected</span>
+      <button type="button" className="text-blue-600 text-sm hover:underline">
         Copy
       </button>
-      <button type='button' className='text-blue-600 text-sm hover:underline'>
+      <button type="button" className="text-blue-600 text-sm hover:underline">
         Preview
       </button>
-      <button type='button' className='text-blue-600 text-sm hover:underline'>
+      <button type="button" className="text-blue-600 text-sm hover:underline">
         Discard
       </button>
-      <button type='button' className='text-blue-600 text-sm hover:underline'>
+      <button type="button" className="text-blue-600 text-sm hover:underline">
         Open
       </button>
     </div>

src/components/CommentRow.tsx

@@ -1,8 +1,8 @@
-import Badge from '@/components/Badge'
-import { timeAgo } from '@/components/misc'
-import type { CommentTableRow } from '@/entrypoints/background'
-import { openOrFocusComment } from '@/entrypoints/popup/popup'
-import { EnhancerRegistry } from '@/lib/registries'
+import Badge from "@/components/Badge"
+import { timeAgo } from "@/components/misc"
+import type { CommentTableRow } from "@/entrypoints/background"
+import { openOrFocusComment } from "@/entrypoints/popup/popup"
+import { EnhancerRegistry } from "@/lib/registries"
 
 const enhancers = new EnhancerRegistry()
 
@@ -14,60 +14,86 @@ type CommentRowProps = {
   handleTrash: (row: CommentTableRow) => void
 }
 
-export function CommentRow({ row, selectedIds, toggleSelection }: CommentRowProps) {
+export function CommentRow({
+  row,
+  selectedIds,
+  toggleSelection,
+}: CommentRowProps) {
   const enhancer = enhancers.enhancerFor(row.spot)
 
   const handleTitleClick = () => {
     openOrFocusComment(row.spot.unique_key)
   }
   return (
-    <tr className='hover:bg-gray-50'>
-      <td className='px-3 py-3'>
+    <tr className="hover:bg-gray-50">
+      <td className="px-3 py-3">
         <input
-          type='checkbox'
+          type="checkbox"
           checked={selectedIds.has(row.spot.unique_key)}
           onChange={() => toggleSelection(row.spot.unique_key)}
-          className='rounded'
+          className="rounded"
         />
       </td>
-      <td className='px-3 py-3'>
-        <div className='space-y-1'>
+      <td className="px-3 py-3">
+        <div className="space-y-1">
           {/* Context line */}
-          <div className='flex items-center justify-between gap-1.5 text-gray-600 text-xs'>
-            <div className='flex min-w-0 flex-1 items-center gap-1.5'>
+          <div className="flex items-center justify-between gap-1.5 text-gray-600 text-xs">
+            <div className="flex min-w-0 flex-1 items-center gap-1.5">
               {enhancer.tableUpperDecoration(row.spot)}
             </div>
-            <div className='flex flex-shrink-0 items-center gap-1'>
+            <div className="flex flex-shrink-0 items-center gap-1">
               {row.latestDraft.stats.links.length > 0 && (
-                <Badge type='link' text={row.latestDraft.stats.links.length} data={row} />
+                <Badge
+                  type="link"
+                  text={row.latestDraft.stats.links.length}
+                  data={row}
+                />
               )}
               {row.latestDraft.stats.images.length > 0 && (
-                <Badge type='image' text={row.latestDraft.stats.images.length} data={row} />
+                <Badge
+                  type="image"
+                  text={row.latestDraft.stats.images.length}
+                  data={row}
+                />
               )}
               {row.latestDraft.stats.codeBlocks.length > 0 && (
-                <Badge type='code' text={row.latestDraft.stats.codeBlocks.length} data={row} />
+                <Badge
+                  type="code"
+                  text={row.latestDraft.stats.codeBlocks.length}
+                  data={row}
+                />
               )}
-              <Badge type='text' text={row.latestDraft.stats.charCount} data={row} />
-              <Badge type='time' text={timeAgo(row.latestDraft.time)} data={row} />
-              {row.isOpenTab && <Badge type='open' data={row} />}
+              <Badge
+                type="text"
+                text={row.latestDraft.stats.charCount}
+                data={row}
+              />
+              <Badge
+                type="time"
+                text={timeAgo(row.latestDraft.time)}
+                data={row}
+              />
+              {row.isOpenTab && <Badge type="open" data={row} />}
             </div>
           </div>
 
           {/* Title */}
-          <div className='flex items-center gap-1'>
+          <div className="flex items-center gap-1">
             <button
-              type='button'
+              type="button"
               onClick={handleTitleClick}
-              className='cursor-pointer truncate text-left font-medium text-sm hover:underline'
+              className="cursor-pointer truncate text-left font-medium text-sm hover:underline"
             >
               {enhancer.tableTitle(row.spot)}
             </button>
-            <Badge type={row.isSent ? 'sent' : 'unsent'} />
-            {row.isTrashed && <Badge type='trashed' />}
+            <Badge type={row.isSent ? "sent" : "unsent"} />
+            {row.isTrashed && <Badge type="trashed" />}
           </div>
           {/* Draft */}
-          <div className='truncate text-sm'>
-            <span className='text-gray-500'>{row.latestDraft.content.substring(0, 100)}…</span>
+          <div className="truncate text-sm">
+            <span className="text-gray-500">
+              {row.latestDraft.content.substring(0, 100)}…
+            </span>
           </div>
         </div>
       </td>