update

src/components/Column.tsx

@@ -22,12 +22,12 @@ const Column: Component<ColumnProps> = (props) => {
   };
 
   return (
-    <div class={`h-full shrink-0 border-r ${width()}`}>
-      <div class="flex h-8 items-center border-b bg-white px-2">
+    <div class={`flex shrink-0 flex-col border-r ${width()}`}>
+      <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>
       </div>
-      <div class="h-full overflow-y-scroll pb-8">{props.children}</div>
+      <div class="flex flex-col overflow-y-scroll scroll-smooth">{props.children}</div>
     </div>
   );
 };

src/components/SideBar.tsx

@@ -8,9 +8,8 @@ import useConfig from '@/nostr/useConfig';
 import useCommands from '@/nostr/useCommands';
 import usePubkey from '@/nostr/usePubkey';
 import { useHandleCommand } from '@/hooks/useCommandBus';
-import ensureNonNull from '@/utils/ensureNonNull';
 
-const SideBar: Component = (props) => {
+const SideBar: Component = () => {
   let formTextAreaRef: HTMLTextAreaElement | undefined;
   const [config] = useConfig();
   const getPubkey = usePubkey();
@@ -18,6 +17,17 @@ const SideBar: Component = (props) => {
 
   const [formOpened, setFormOpened] = createSignal(false);
 
+  const openForm = () => {
+    setFormOpened(true);
+    setTimeout(() => {
+      formTextAreaRef?.focus?.();
+    }, 100);
+  };
+  const closeForm = () => {
+    setFormOpened(false);
+    formTextAreaRef?.blur?.();
+  };
+
   const handlePost = ({ content }: { content: string }) => {
     const pubkey = getPubkey();
     if (pubkey == null) {
@@ -41,8 +51,7 @@ const SideBar: Component = (props) => {
   useHandleCommand(() => ({
     commandType: 'openPostForm',
     handler: (cmd) => {
-      setFormOpened(true);
-      formTextAreaRef?.focus?.();
+      openForm();
     },
   }));
 
@@ -62,11 +71,7 @@ const SideBar: Component = (props) => {
         {/* <div>column 2</div> */}
       </div>
       <Show when={formOpened()}>
-        <NotePostForm
-          ref={formTextAreaRef}
-          onPost={handlePost}
-          onClose={() => setFormOpened(false)}
-        />
+        <NotePostForm ref={formTextAreaRef} onPost={handlePost} onClose={closeForm} />
       </Show>
     </div>
   );

src/components/UserDisplayName.tsx

@@ -1,7 +1,7 @@
 import { Component, Switch, Match } from 'solid-js';
 
 import useConfig from '@/nostr/useConfig';
-import useProfile, { type Profile } from '@/nostr/useProfile';
+import useProfile from '@/nostr/useProfile';
 
 type UserNameDisplayProps = {
   pubkey: string;

src/components/textNote/GeneralUserMentionDisplay.tsx

@@ -15,7 +15,7 @@ const GeneralUserMentionDisplay = (props: GeneralUserMentionDisplayProps) => {
   }));
 
   return (
-    <Show when={profile() != null} fallback={`@${props.pubkey}`}>
+    <Show when={(profile()?.name?.length ?? 0) > 0} fallback={`@${props.pubkey}`}>
       @{profile()?.name ?? props.pubkey}
     </Show>
   );

src/components/textNote/ImageDisplay.tsx

@@ -23,9 +23,9 @@ const ImageDisplay: Component<ImageDisplayProps> = (props) => {
   const url = () => new URL(props.url);
 
   return (
-    <a class="my-2 inline-block" href={props.url} target="_blank" rel="noopener noreferrer">
+    <a class="my-2 block" href={props.url} target="_blank" rel="noopener noreferrer">
       <img
-        class="inline-block max-h-64 max-w-full rounded object-contain shadow"
+        class="inline-block max-h-64 max-w-full rounded object-contain shadow hover:shadow-md"
         src={fixUrl(url())}
         alt={props.url}
       />