format

package.json

@@ -12,10 +12,10 @@
     "preview": "vite preview",
     "tsc": "tsc --noEmit",
     "lint": "run-p tsc lint:*",
-    "lint:format": "prettier --check --loglevel warn src/**/*.{js,jsx,ts,tsx,css}",
+    "lint:format": "prettier --check --log-level warn src/**/*.{js,jsx,ts,tsx,css}",
     "lint:js": "eslint --max-warnings 0 src/",
     "fix": "run-s fix:*",
-    "fix:format": "prettier --write --loglevel warn src/**/*.{js,jsx,ts,tsx,css}",
+    "fix:format": "prettier --write --log-level warn src/**/*.{js,jsx,ts,tsx,css}",
     "fix:js": "eslint --fix src/",
     "exec-ts": "node --loader esbuild-register/loader -r esbuild-register"
   },
@@ -56,5 +56,8 @@
     "typescript": "^5.3.3",
     "vite": "^4.4.9",
     "vite-plugin-babel": "^1.2.0"
+  },
+  "prettier": {
+    "printWidth": 120
   }
 }

src/components/CopyNeventsButton.tsx

@@ -1,23 +1,13 @@
 import { CopyIcon } from "@chakra-ui/icons";
-import {
-  IconButton,
-  IconButtonProps,
-  Tooltip,
-  useClipboard,
-} from "@chakra-ui/react";
+import { IconButton, IconButtonProps, Tooltip, useClipboard } from "@chakra-ui/react";
 import { neventEncode } from "nostr-tools/nip19";
 import { clearPostSelection, useSelectedPostIds } from "../states/Posts";
 
-type CopyNeventsButtonProps = Omit<
-  IconButtonProps,
-  "aria-label" | "icon" | "onClick"
->;
+type CopyNeventsButtonProps = Omit<IconButtonProps, "aria-label" | "icon" | "onClick">;
 
 export const CopyNeventsButton: React.FC<CopyNeventsButtonProps> = (props) => {
   const selectedIds = useSelectedPostIds("created-at-asc");
-  const lineSeparatedIds = selectedIds
-    .map((id) => neventEncode({ id }))
-    .join("\n");
+  const lineSeparatedIds = selectedIds.map((id) => neventEncode({ id })).join("\n");
   const { onCopy } = useClipboard(lineSeparatedIds);
 
   return selectedIds.length > 0 ? (

src/components/CopyToClipboardButton.tsx

@@ -1,10 +1,5 @@
 import { CheckIcon, CopyIcon } from "@chakra-ui/icons";
-import {
-  Box,
-  PlacementWithLogical,
-  Tooltip,
-  useClipboard,
-} from "@chakra-ui/react";
+import { Box, PlacementWithLogical, Tooltip, useClipboard } from "@chakra-ui/react";
 
 type TooltipProps = {
   label: string;
@@ -17,27 +12,16 @@ type CopyToClipboardButtonProps = {
   children?: React.ReactNode;
 };
 
-export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
-  valueToCopy,
-  tooltip,
-  children,
-}) => {
+export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({ valueToCopy, tooltip, children }) => {
   const { onCopy, hasCopied } = useClipboard(valueToCopy, 500);
   const body = (
     <Box role="button" aria-label="copy share URL" onClick={onCopy}>
-      {hasCopied ? (
-        <CheckIcon color="green.300" />
-      ) : (
-        children ?? <CopyIcon color="gray.500" />
-      )}
+      {hasCopied ? <CheckIcon color="green.300" /> : children ?? <CopyIcon color="gray.500" />}
     </Box>
   );
 
   return tooltip ? (
-    <Tooltip
-      label={hasCopied ? "" : tooltip.label}
-      placement={tooltip.placement}
-    >
+    <Tooltip label={hasCopied ? "" : tooltip.label} placement={tooltip.placement}>
       {body}
     </Tooltip>
   ) : (

src/components/HiddenMenu.tsx

@@ -1,12 +1,4 @@
-import {
-  Button,
-  Menu,
-  MenuButton,
-  MenuGroup,
-  MenuItemOption,
-  MenuList,
-  MenuOptionGroup,
-} from "@chakra-ui/react";
+import { Button, Menu, MenuButton, MenuGroup, MenuItemOption, MenuList, MenuOptionGroup } from "@chakra-ui/react";
 import { useAtom } from "jotai";
 import { PostDisplayMode, postDisplayModeAtom } from "../states/Config";
 
@@ -27,9 +19,7 @@ export const HiddenMenu = () => {
           onChange={(v) => setPostDispMode(v as PostDisplayMode)}
         >
           <MenuItemOption value="normal">Normal</MenuItemOption>
-          <MenuItemOption value="pubkey-hex-color">
-            Pubkey Hex Color Icon
-          </MenuItemOption>
+          <MenuItemOption value="pubkey-hex-color">Pubkey Hex Color Icon</MenuItemOption>
         </MenuOptionGroup>
       </MenuList>
     </Menu>

src/components/LoginPane.tsx

@@ -1,12 +1,4 @@
-import {
-  Alert,
-  AlertIcon,
-  AlertTitle,
-  Button,
-  Center,
-  HStack,
-  Text,
-} from "@chakra-ui/react";
+import { Alert, AlertIcon, AlertTitle, Button, Center, HStack, Text } from "@chakra-ui/react";
 import { useAtomValue, useSetAtom } from "jotai";
 import { nip07ExtAtom } from "../states/Nip07Ext";
 import { myPubkeyAtom } from "../states/Profiles";

src/components/Post.tsx

@@ -1,14 +1,5 @@
 import { ExternalLinkIcon } from "@chakra-ui/icons";
-import {
-  Avatar,
-  Box,
-  Card,
-  Grid,
-  GridItem,
-  HStack,
-  Text,
-  Tooltip,
-} from "@chakra-ui/react";
+import { Avatar, Box, Card, Grid, GridItem, HStack, Text, Tooltip } from "@chakra-ui/react";
 import { format, fromUnixTime } from "date-fns";
 import { atom, useAtom, useAtomValue } from "jotai";
 import { neventEncode, noteEncode, npubEncode } from "nostr-tools/nip19";
@@ -32,9 +23,7 @@ type PostProps = {
 export const Post: React.FC<PostProps> = ({ id }) => {
   const post = usePost(id);
   const [isSelected, toggleSelection] = useAtom(postSelectionAtomFamily(id));
-  const profile = useAtomValue(
-    post ? profileAtomFamily(post.pubkey) : undefAtom
-  );
+  const profile = useAtomValue(post ? profileAtomFamily(post.pubkey) : undefAtom);
   const noteId = post?.id ? noteEncode(post.id) : undefined;
   const nevent = post?.id ? neventEncode({ id: post.id }) : undefined;
 
@@ -70,9 +59,7 @@ export const Post: React.FC<PostProps> = ({ id }) => {
           <Text whiteSpace="pre-wrap">{post.content}</Text>
         </GridItem>
         <GridItem area="date" justifySelf="end">
-          <Text color="gray.600">
-            {format(fromUnixTime(post.created_at), "M/d HH:mm:ss")}
-          </Text>
+          <Text color="gray.600">{format(fromUnixTime(post.created_at), "M/d HH:mm:ss")}</Text>
         </GridItem>
       </Grid>
       <HStack position="absolute" top="11px" left="800px" px={2}>
@@ -154,11 +141,7 @@ const OpenViaNosTxButton: React.FC<OpenViaNosTxButtonProps> = ({ noteId }) => {
 
   return (
     <Tooltip label="NosTx経由で開く">
-      <Box
-        role="button"
-        aria-label="open the note via NosTx"
-        onClick={handleClick}
-      >
+      <Box role="button" aria-label="open the note via NosTx" onClick={handleClick}>
         <ExternalLinkIcon color="gray.500" />
       </Box>
     </Tooltip>

src/components/PostTimeline.tsx

@@ -2,10 +2,7 @@ import { LinkIcon } from "@chakra-ui/icons";
 import { Box, Flex, HStack, Text } from "@chakra-ui/react";
 import { useAtomValue } from "jotai";
 import { PostQuery, usePostIds } from "../states/Posts";
-import {
-  useOngoingWaybackQuery,
-  waybackQueryInputsAtom,
-} from "../states/WaybackQuery";
+import { useOngoingWaybackQuery, waybackQueryInputsAtom } from "../states/WaybackQuery";
 import { WaybackQuery, WaybackQueryInputs } from "../types/WaybackQuery";
 import { CopyNeventsButton } from "./CopyNeventsButton";
 import { CopyToClipboardButton } from "./CopyToClipboardButton";
@@ -15,9 +12,7 @@ type PostTimelineProps = {
   postQuery: PostQuery;
 };
 
-const shareLinkFromQueryInputs = (
-  qin: WaybackQueryInputs | undefined
-): string => {
+const shareLinkFromQueryInputs = (qin: WaybackQueryInputs | undefined): string => {
   const url = new URL(location.href);
   if (qin) {
     url.search = WaybackQueryInputs.toURLQuery(qin);
@@ -54,14 +49,7 @@ export const PostTimeline: React.FC<PostTimelineProps> = ({ postQuery }) => {
       {postIds.map((id) => (
         <Post key={id} id={id} />
       ))}
-      <CopyNeventsButton
-        position="fixed"
-        bottom="16px"
-        ml="876px"
-        size="lg"
-        colorScheme="purple"
-        isRound
-      />
+      <CopyNeventsButton position="fixed" bottom="16px" ml="876px" size="lg" colorScheme="purple" isRound />
     </Flex>
   );
 };

src/components/WaybackQueryForm.tsx

@@ -18,14 +18,7 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { SingleDatepicker } from "chakra-dayzed-datepicker";
-import {
-  addMinutes,
-  differenceInMilliseconds,
-  format,
-  getUnixTime,
-  startOfMinute,
-  subHours,
-} from "date-fns";
+import { addMinutes, differenceInMilliseconds, format, getUnixTime, startOfMinute, subHours } from "date-fns";
 import { useSetAtom } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { waybackQueryInputsAtom } from "../states/WaybackQuery";
@@ -35,9 +28,7 @@ import { WaybackQuery, WaybackQueryInputs } from "../types/WaybackQuery";
 const getNow = () => new Date();
 
 const jaDayNames = "日月火水木金土".split("");
-const jaMonthNames = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(
-  (i) => `${i}月`
-);
+const jaMonthNames = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => `${i}月`);
 
 const formatQueryFromInputs = (i: WaybackQueryInputs | undefined): string => {
   if (i === undefined) {
@@ -85,11 +76,7 @@ export const WaybackQueryForm: React.FC = () => {
         </TabPanels>
       </Tabs>
       <Text>{formatQueryFromInputs(queryInputs)}</Text>
-      <Button
-        colorScheme="purple"
-        onClick={handleClickWayback}
-        isDisabled={queryInputs === undefined}
-      >
+      <Button colorScheme="purple" onClick={handleClickWayback} isDisabled={queryInputs === undefined}>
         <HStack>
           <RepeatClockIcon />
           <Text>遡る</Text>
@@ -108,9 +95,7 @@ const durTimeUnitLabels: Record<TimeUnit, string> = {
 const useSinceAndDurForm = () => {
   const now = getNow();
   const [sinceDate, setSinceDate] = useState<Date>(subHours(now, 1));
-  const [sinceTime, setSinceTime] = useState<string>(
-    format(subHours(now, 1), "HH:mm")
-  );
+  const [sinceTime, setSinceTime] = useState<string>(format(subHours(now, 1), "HH:mm"));
   const [durationValue, setDurationValue] = useState<number>(1);
   const [durationUnit, setDurationUnit] = useState<TimeUnit>("hours");
 
@@ -139,12 +124,7 @@ const useSinceAndDurForm = () => {
           inputProps: { w: "140px" },
         }}
       />
-      <Input
-        type="time"
-        value={sinceTime}
-        onChange={(e) => setSinceTime(e.target.value)}
-        w="120px"
-      />
+      <Input type="time" value={sinceTime} onChange={(e) => setSinceTime(e.target.value)} w="120px" />
       <Text minW="2em">から</Text>
       <NumberInput
         min={0}
@@ -160,11 +140,7 @@ const useSinceAndDurForm = () => {
           <NumberDecrementStepper />
         </NumberInputStepper>
       </NumberInput>
-      <Select
-        value={durationUnit}
-        onChange={(e) => setDurationUnit(e.target.value as TimeUnit)}
-        w="fit-content"
-      >
+      <Select value={durationUnit} onChange={(e) => setDurationUnit(e.target.value as TimeUnit)} w="fit-content">
         {Object.entries(durTimeUnitLabels).map(([unit, label]) => (
           <option key={unit} value={unit}>
             {label}
@@ -217,11 +193,7 @@ const useUntilNowForm = () => {
           <NumberDecrementStepper />
         </NumberInputStepper>
       </NumberInput>
-      <Select
-        w="fit-content"
-        value={durationUnit}
-        onChange={(e) => setDurationUnit(e.target.value as TimeUnit)}
-      >
+      <Select w="fit-content" value={durationUnit} onChange={(e) => setDurationUnit(e.target.value as TimeUnit)}>
         {Object.entries(agoTimeUnitLabels).map(([unit, label]) => (
           <option key={unit} value={unit}>
             {label}
@@ -248,10 +220,13 @@ const useTickOnStartOfMinute = () => {
     const currTime = getNow();
     const nextTickTime = startOfMinute(addMinutes(currTime, 1));
 
-    timer.current = setTimeout(() => {
-      setTimestamp(getUnixTime(getNow()));
-      setNextTick();
-    }, differenceInMilliseconds(nextTickTime, currTime));
+    timer.current = setTimeout(
+      () => {
+        setTimestamp(getUnixTime(getNow()));
+        setNextTick();
+      },
+      differenceInMilliseconds(nextTickTime, currTime),
+    );
   }, []);
 
   useEffect(() => {

src/main.tsx

@@ -12,5 +12,5 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
       {/* <DevTools /> */}
       <App />
     </ChakraProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );