feat: support CW and enhance smartphone support

src/components/Column.tsx

@@ -1,30 +1,18 @@
 import type { Component, JSX } from 'solid-js';
 import { useHandleCommand } from '@/hooks/useCommandBus';
 
-const widthToClass = {
-  widest: 'w-[500px]',
-  wide: 'w-[350px]',
-  medium: 'w-[310px]',
-  narrow: 'w-[270px]',
-} as const;
-
 type ColumnProps = {
   name: string;
   columnIndex: number;
   lastColumn?: true;
-  width: keyof typeof widthToClass | null | undefined;
+  width: 'widest' | 'wide' | 'medium' | 'narrow' | null | undefined;
   children: JSX.Element;
 };
 
 const Column: Component<ColumnProps> = (props) => {
   let columnDivRef: HTMLDivElement | undefined;
 
-  const width = () => {
-    if (props.width == null) {
-      return widthToClass.medium;
-    }
-    return widthToClass[props.width];
-  };
+  const width = () => props.width ?? 'medium';
 
   useHandleCommand(() => ({
     commandType: 'moveToColumn',
@@ -45,7 +33,16 @@ const Column: Component<ColumnProps> = (props) => {
   }));
 
   return (
-    <div ref={columnDivRef} class={`flex shrink-0 flex-col border-r ${width()}`}>
+    <div
+      ref={columnDivRef}
+      class="flex w-[80vw] shrink-0 snap-center snap-always flex-col border-r sm:snap-align-none"
+      classList={{
+        'sm:w-[500px]': width() === 'widest',
+        'sm:w-[350px]': width() === 'wide',
+        'sm:w-[310px]': width() === 'medium',
+        'sm:w-[270px]': width() === 'narrow',
+      }}
+    >
       <div class="flex h-8 shrink-0 items-center border-b bg-white px-2">
         {/* <span class="column-icon">🏠</span> */}
         <span class="column-name">{props.name}</span>

src/components/NotePostForm.tsx

@@ -14,6 +14,8 @@ import uniq from 'lodash/uniq';
 
 import PaperAirplane from 'heroicons/24/solid/paper-airplane.svg';
 import Photo from 'heroicons/24/outline/photo.svg';
+import Eye from 'heroicons/24/solid/eye.svg';
+import EyeSlash from 'heroicons/24/outline/eye-slash.svg';
 import XMark from 'heroicons/24/outline/x-mark.svg';
 
 import UserNameDisplay from '@/components/UserDisplayName';
@@ -50,10 +52,14 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
   let fileInputRef: HTMLInputElement | undefined;
 
   const [text, setText] = createSignal<string>('');
-  const [isUploading, setIsUploading] = createSignal(false);
-  const [isDragging, setIsDragging] = createSignal(false);
+  const [contentWarning, setContentWarning] = createSignal(false);
+  const [contentWarningReason, setContentWarningReason] = createSignal('');
 
-  const clearText = () => setText('');
+  const clearText = () => {
+    setText('');
+    setContentWarningReason('');
+    setContentWarning(false);
+  };
 
   const { config } = useConfig();
   const getPubkey = usePubkey();
@@ -117,14 +123,26 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
       console.error('pubkey is not available');
       return;
     }
-    publishTextNoteMutation.mutate({
+    let textNote: Parameters<typeof commands.publishTextNote>[0] = {
       relayUrls: config().relayUrls,
       pubkey,
       content: text(),
-      notifyPubkeys: notifyPubkeys(pubkey),
-      rootEventId: replyTo()?.rootEvent()?.id ?? replyTo()?.id,
-      replyEventId: replyTo()?.id,
-    });
+    };
+    if (replyTo() != null) {
+      textNote = {
+        ...textNote,
+        notifyPubkeys: notifyPubkeys(pubkey),
+        rootEventId: replyTo()?.rootEvent()?.id ?? replyTo()?.id,
+        replyEventId: replyTo()?.id,
+      };
+    }
+    if (contentWarning()) {
+      textNote = {
+        ...textNote,
+        contentWarning: contentWarningReason(),
+      };
+    }
+    publishTextNoteMutation.mutate(textNote);
   };
 
   const handleInput: JSX.EventHandler<HTMLTextAreaElement, InputEvent> = (ev) => {
@@ -162,11 +180,11 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
 
   const handleDragOver: JSX.EventHandler<HTMLTextAreaElement, DragEvent> = (ev) => {
     ev.preventDefault();
-    setIsDragging(true);
   };
 
   const submitDisabled = () =>
     text().trim().length === 0 ||
+    (contentWarning() && contentWarningReason().length === 0) ||
     publishTextNoteMutation.isLoading ||
     uploadFilesMutation.isLoading;
 
@@ -193,6 +211,16 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
         </div>
       </Show>
       <form class="flex flex-col gap-1" onSubmit={handleSubmit}>
+        <Show when={contentWarning()}>
+          <input
+            type="text"
+            class="rounded"
+            placeholder="警告の理由"
+            maxLength={32}
+            onInput={(ev) => setContentWarningReason(ev.currentTarget.value)}
+            value={contentWarningReason()}
+          />
+        </Show>
         <textarea
           ref={(el) => {
             textAreaRef = el;
@@ -216,6 +244,23 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
               </button>
             </div>
           </Show>
+          <button
+            class="flex items-center justify-center rounded p-2 text-xs font-bold text-white hover:bg-rose-300"
+            classList={{
+              'bg-rose-300': !contentWarning(),
+              'bg-rose-400': contentWarning(),
+              'h-8': mode() === 'normal',
+              'w-8': mode() === 'normal',
+              'h-7': mode() === 'reply',
+              'w-7': mode() === 'reply',
+            }}
+            type="button"
+            area-label="コンテンツ警告を設定"
+            title="コンテンツ警告を設定"
+            onClick={() => setContentWarning((e) => !e)}
+          >
+            <span>CW</span>
+          </button>
           <button
             class="rounded bg-primary p-2 font-bold text-white"
             classList={{
@@ -227,6 +272,8 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
               'w-7': mode() === 'reply',
             }}
             type="button"
+            title="画像を投稿"
+            area-label="画像を投稿"
             disabled={fileUploadDisabled()}
             onClick={() => fileInputRef?.click()}
           >
@@ -243,6 +290,8 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
               'w-7': mode() === 'reply',
             }}
             type="submit"
+            area-label="投稿"
+            title="投稿"
             disabled={submitDisabled()}
           >
             <PaperAirplane />