infra: add linting and formatting for js projects (#230)

* wip

* wip

* wip

* format

* wip(mobile): lint and format

* cleanup

* nits

* nits

* idiomatic react

* nit

* format all root files

js/desktop/src/features/compose/text-editor.tsx

@@ -1,12 +1,12 @@
-import { useEffect, useRef, useCallback, useState } from "react";
-import { Paperclip } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { metaKey } from "@/lib/platform";
-import { useAllLinkMetadata } from "@/hooks/use-link-metadata";
-import { AttachmentStrip } from "@/features/compose/attachment-strip";
-import type { PendingAttachment } from "@/features/compose/attachment-strip";
-import { Button } from "@/components/ui/button";
-import { MarkdownEditor } from "@/features/compose/markdown-editor";
+import { useEffect, useRef, useCallback, useState } from 'react';
+import { Paperclip } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { metaKey } from '@/lib/platform';
+import { useAllLinkMetadata } from '@/hooks/use-link-metadata';
+import { AttachmentStrip } from '@/features/compose/attachment-strip';
+import type { PendingAttachment } from '@/features/compose/attachment-strip';
+import { Button } from '@/components/ui/button';
+import { MarkdownEditor } from '@/features/compose/markdown-editor';
 
 export interface TextEditorAttachmentProps {
   attachments: PendingAttachment[];
@@ -35,9 +35,9 @@ interface TextEditorProps {
 const IMMERSIVE_CHAR_LIMIT = 120;
 
 function getImmersiveTextStyle(length: number) {
-  if (length < 70) return { size: "text-5xl", weight: "font-semibold" };
-  if (length < 130) return { size: "text-3xl", weight: "font-semibold" };
-  return { size: "text-2xl", weight: "font-normal" };
+  if (length < 70) return { size: 'text-5xl', weight: 'font-semibold' };
+  if (length < 130) return { size: 'text-3xl', weight: 'font-semibold' };
+  return { size: 'text-2xl', weight: 'font-normal' };
 }
 
 export function TextEditor({
@@ -45,7 +45,7 @@ export function TextEditor({
   onTextChange,
   onSubmit,
   onCancel,
-  submitHint = "next",
+  submitHint = 'next',
   attachmentProps,
 }: TextEditorProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -61,7 +61,9 @@ export function TextEditor({
   const attachmentCount = attachmentProps?.attachments.length ?? 0;
   const hasEnrichments = attachmentCount > 0 || linkPreviews.length > 0;
   const immersive =
-    textContent.length < IMMERSIVE_CHAR_LIMIT && !hasEnrichments && !forceCardMode;
+    textContent.length < IMMERSIVE_CHAR_LIMIT &&
+    !hasEnrichments &&
+    !forceCardMode;
 
   // Keep the immersive textarea focused with the caret at the end when we
   // (re)enter it. The card-mode editor manages its own focus.
@@ -81,15 +83,15 @@ export function TextEditor({
   // editor's own key handling (e.g. ⌘+Enter must submit, not insert a break).
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
-      if (e.key === "Escape") {
+      if (e.key === 'Escape') {
         e.preventDefault();
         e.stopPropagation();
         onCancel();
-      } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
         e.stopPropagation();
         if (textContent.trim()) onSubmit();
-      } else if (e.key === "m" && (e.metaKey || e.ctrlKey)) {
+      } else if (e.key === 'm' && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
         e.stopPropagation();
         setForceCardMode(true);
@@ -112,20 +114,20 @@ export function TextEditor({
       <span>
         <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
           Esc
-        </kbd>{" "}
+        </kbd>{' '}
         cancel
       </span>
       <span>
         <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
           {metaKey}+Enter
-        </kbd>{" "}
+        </kbd>{' '}
         {submitHint}
       </span>
       {immersive && (
         <span>
           <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
             {metaKey}+M
-          </kbd>{" "}
+          </kbd>{' '}
           markdown
         </span>
       )}
@@ -156,8 +158,8 @@ export function TextEditor({
     return (
       <div
         className={cn(
-          "absolute inset-0 z-50 flex items-center justify-center bg-black/90",
-          isDragging && "ring-2 ring-inset ring-white/30",
+          'absolute inset-0 z-50 flex items-center justify-center bg-black/90',
+          isDragging && 'ring-2 ring-inset ring-white/30',
         )}
         {...dropZoneProps}
       >
@@ -169,7 +171,7 @@ export function TextEditor({
             onKeyDown={handleKeyDown}
             placeholder="Type a message..."
             className={cn(
-              "w-full resize-none border-none bg-transparent p-8 text-center text-white placeholder-white/40 outline-none",
+              'w-full resize-none border-none bg-transparent p-8 text-center text-white placeholder-white/40 outline-none',
               style.size,
               style.weight,
             )}
@@ -184,8 +186,8 @@ export function TextEditor({
   return (
     <div
       className={cn(
-        "absolute inset-0 z-50 flex items-center justify-center bg-black/90",
-        isDragging && "ring-2 ring-inset ring-white/30",
+        'absolute inset-0 z-50 flex items-center justify-center bg-black/90',
+        isDragging && 'ring-2 ring-inset ring-white/30',
       )}
       {...dropZoneProps}
       onKeyDownCapture={handleKeyDown}