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 = () => {
+  const width = () => props.width ?? 'medium';
-    if (props.width == null) {
-      return widthToClass.medium;
-    }
-    return widthToClass[props.width];
-  };
 
   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 [contentWarning, setContentWarning] = createSignal(false);
-  const [isDragging, setIsDragging] = 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,
+    if (replyTo() != null) {
-      replyEventId: replyTo()?.id,
+      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 />

src/index.css

@@ -23,7 +23,3 @@ code {
 .link {
   @apply underline text-blue-500;
 }
-
-.h-fill-available {
-  height: -webkit-fill-available;
-}

src/nostr/useCommands.ts

@@ -44,6 +44,7 @@ const useCommands = () => {
     pubkey,
     content,
     tags,
+    contentWarning,
     notifyPubkeys,
     rootEventId,
     mentionEventIds,
@@ -57,16 +58,22 @@ const useCommands = () => {
     rootEventId?: string;
     mentionEventIds?: string[];
     replyEventId?: string;
+    contentWarning?: string;
   }): Promise<Promise<void>[]> => {
+    // NIP-10
     const pTags = notifyPubkeys?.map((p) => ['p', p]) ?? [];
     const eTags = [];
-    // NIP-10
     if (rootEventId != null) eTags.push(['e', rootEventId, '', 'root']);
     if (mentionEventIds != null)
       mentionEventIds.forEach((id) => eTags.push(['e', id, '', 'mention']));
     if (replyEventId != null) eTags.push(['e', replyEventId, '', 'reply']);
 
-    const mergedTags = [...eTags, ...pTags, ...(tags ?? [])];
+    const additionalTags = tags != null ? [...tags] : [];
+    if (contentWarning != null && content.length > 0) {
+      additionalTags.push(['content-warning', contentWarning]);
+    }
+
+    const mergedTags = [...eTags, ...pTags, ...additionalTags];
 
     const preSignedEvent: NostrEvent = {
       kind: 1,

src/pages/Home.tsx

@@ -135,9 +135,9 @@ const Home: Component = () => {
   });
 
   return (
-    <div class="flex h-screen w-screen flex-row overflow-hidden">
+    <div class="absolute inset-0 flex w-screen flex-row overflow-hidden">
       <SideBar />
-      <div class="flex h-full flex-row overflow-y-hidden overflow-x-scroll">
+      <div class="flex h-full snap-x snap-mandatory flex-row overflow-y-hidden overflow-x-scroll">
         <Column name="ホーム" columnIndex={1} width="widest">
           <Timeline events={followingsPosts()} />
         </Column>

src/utils/imageUrl.ts

@@ -1,7 +1,5 @@
 export const isImageUrl = (url: URL): boolean => {
-  if (url.pathname.match(/\.(jpeg|jpg|png|gif|webp)$/i)) return true;
+  return /\.(jpeg|jpg|png|gif|webp)$/i.test(url.pathname);
-
-  return false;
 };
 
 export const fixUrl = (url: URL): URL => {