From 7a84167ed98f7b9d20dc66bec2fa700969e798a3 Mon Sep 17 00:00:00 2001
From: Shusui MOYATANI <syusui.s@gmail.com>
Date: Fri, 17 Mar 2023 20:12:53 +0900
Subject: [PATCH] feat: config for dateFormat

---
 src/components/Config.tsx                   | 61 ++++++++++++++++++++-
 src/components/textNote/TextNoteDisplay.tsx |  4 +-
 src/nostr/useConfig.ts                      |  2 +-
 3 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/src/components/Config.tsx b/src/components/Config.tsx
index e254f4f..d098ff2 100644
--- a/src/components/Config.tsx
+++ b/src/components/Config.tsx
@@ -1,4 +1,4 @@
-import useConfig from '@/nostr/useConfig';
+import useConfig, { type Config } from '@/nostr/useConfig';
 import { createSignal, For, type JSX } from 'solid-js';
 
 type ConfigProps = {
@@ -48,7 +48,61 @@ const RelayConfig = () => {
   );
 };
 
-const Config = (props: ConfigProps) => {
+const dateFormats: { id: Config['dateFormat']; name: string; example: string }[] = [
+  {
+    id: 'relative',
+    name: '相対',
+    example: '〜秒前',
+  },
+  {
+    id: 'absolute-short',
+    name: '絶対 (短形式)',
+    example: '昨日 12:34',
+  },
+  {
+    id: 'absolute-long',
+    name: '絶対 (長形式)',
+    example: '2023',
+  },
+];
+
+const DateFormatConfig = () => {
+  const { config, setConfig } = useConfig();
+
+  const updateDateFormat = (dateFormat: Config['dateFormat']) => {
+    setConfig((current) => ({ ...current, dateFormat }));
+  };
+
+  return (
+    <div>
+      <h3 class="font-bold">時刻の表記</h3>
+      <div class="flex justify-evenly gap-2">
+        <For each={dateFormats}>
+          {({ id, name, example }) => (
+            <div class="flex flex-1 flex-col items-center">
+              <button
+                type="button"
+                class="w-full rounded border border-rose-300 p-2 font-bold"
+                classList={{
+                  'bg-rose-300': config().dateFormat === id,
+                  'text-white': config().dateFormat === id,
+                  'bg-white': config().dateFormat !== id,
+                  'text-rose-300': config().dateFormat !== id,
+                }}
+                onClick={() => updateDateFormat(id)}
+              >
+                {name}
+              </button>
+              {example}
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  );
+};
+
+const ConfigUI = (props: ConfigProps) => {
   let containerRef: HTMLDivElement | undefined;
 
   const handleClickContainer: JSX.EventHandler<HTMLDivElement, MouseEvent> = (ev) => {
@@ -72,9 +126,10 @@ const Config = (props: ConfigProps) => {
           </button>
         </div>
         <RelayConfig />
+        <DateFormatConfig />
       </div>
     </div>
   );
 };
 
-export default Config;
+export default ConfigUI;
diff --git a/src/components/textNote/TextNoteDisplay.tsx b/src/components/textNote/TextNoteDisplay.tsx
index d489406..54df82e 100644
--- a/src/components/textNote/TextNoteDisplay.tsx
+++ b/src/components/textNote/TextNoteDisplay.tsx
@@ -173,7 +173,7 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
           </div>
           <Show when={showReplyEvent()} keyed>
             {(id) => (
-              <div class="relative border p-1">
+              <div class="border p-1">
                 <TextNoteDisplayById eventId={id} actions={false} embedding={false} />
               </div>
             )}
@@ -233,7 +233,7 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
                   <div class="text-sm text-zinc-400">{reactions().length}</div>
                 </Show>
               </div>
-              <div class="relative">
+              <div>
                 <button
                   class="h-4 w-4 text-zinc-400"
                   onClick={() => setShowMenu((current) => !current)}
diff --git a/src/nostr/useConfig.ts b/src/nostr/useConfig.ts
index c66b9e5..5284dfc 100644
--- a/src/nostr/useConfig.ts
+++ b/src/nostr/useConfig.ts
@@ -4,7 +4,7 @@ import {
   createSignalWithStorage,
 } from '@/hooks/createSignalWithStorage';
 
-type Config = {
+export type Config = {
   relayUrls: string[];
   dateFormat: 'relative' | 'absolute-long' | 'absolute-short';
 };