fix: dev environment and mobile search issues

app/.storybook/main.ts

@@ -13,9 +13,7 @@ const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     getAbsolutePath("@storybook/addon-themes"),
-    getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@chromatic-com/storybook"),
-    getAbsolutePath("@storybook/addon-interactions"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),

app/src/js/components/Router.tsx

@@ -78,7 +78,7 @@ const RouteHandler = () => {
   if (params.channelId) {
     return (
       <Main>
-        {/*params.isSearch && <Discussion><Search /></Discussion>*/}
+        {params.isSearch && <Discussion><Search /></Discussion>}
         {params.isPins && <Discussion><Pins /></Discussion>}
         {!params.isPins && !params.isSearch && (
           <Discussion/>

app/src/js/components/molecules/DiscussionHeader.stories.tsx

@@ -6,7 +6,7 @@ import { AppModel } from "../../core/models/app.ts";
 import { AppProvider } from "../contexts/appState.tsx";
 
 const app = new AppModel();
-import { client } from "app/src/js/core/client.ts";
+import { client } from "../../core/client.ts";
 
 const meta: Meta<typeof DiscussionHeader> = {
   component: DiscussionHeader,

app/src/js/components/organisms/MessageListScroller.tsx

@@ -85,6 +85,7 @@ export const MessageList = observer((props: MessageListProps) => {
   // fix scroll position when scrolling and new messages are added/removed from the list
   useEffect(() => {
     if (!element?.current) return;
+    if (!model.messages) return;
     if (list === oldList) return;
     const getRect = (): DOMRect | undefined => {
       if (!element.current) return;
@@ -107,11 +108,12 @@ export const MessageList = observer((props: MessageListProps) => {
       setCurrent([current[0], rect]);
     }
     setOldList(list);
-  }, [list, model.messages.mode, oldList, setOldList, current, setCurrent]);
+  }, [list, model.messages?.mode, oldList, setOldList, current, setCurrent]);
 
   // scroll selected item into view
   useEffect(() => {
     if (!element.current) return;
+    if (!model.messages) return;
     if (model.messages.selected === selected) return;
     const found = [...element.current.children]
       ?.find((child) =>
@@ -127,7 +129,7 @@ export const MessageList = observer((props: MessageListProps) => {
       }, 500);
       setSelected(model.messages.selected);
     }
-  }, [model.messages.selected, selected, setSelected]);
+  }, [model.messages?.selected, selected, setSelected]);
 
   const scroll = useCallback((e: React.SyntheticEvent) => {
     detectDate(e);

app/src/js/components/organisms/Search.tsx

@@ -56,6 +56,7 @@ const StyledSearch = styled.div`
 
 export const Header = observer(() => {
   const app = useApp();
+  const navigate = useNavigate();
   const { channelId } = useParams();
   const onSearch = useCallback(
     (search: string) => {
@@ -70,8 +71,9 @@ export const Header = observer(() => {
   const onClose = useCallback(() => {
     if (channelId) {
       app.clearSearch(channelId);
+      navigate(`/${channelId}`);
     }
-  }, [channelId]);
+  }, [channelId, navigate]);
   return (
     <StyledHeader>
       {isMobile()
@@ -119,6 +121,11 @@ export const SearchResults = observer(
       model.init();
     }, [model]);
 
+    // Don't render MessageList until messages model is ready
+    if (!model.messages) {
+      return <StyledList><div>Enter search query...</div></StyledList>;
+    }
+
     // Create a wrapper object that makes SearchModel compatible with MessageList
     const threadModelWrapper = {
       messages: model.messages,

app/vite.config.ts

@@ -21,6 +21,7 @@ export default defineConfig(({ command }) => ({
         key: fs.readFileSync(path.join(sslPath, "key.pem")),
         cert: fs.readFileSync(path.join(sslPath, "cert.pem")),
       },
+      host: true,
       port: 3000,
       strictPort: true,
       hmr: {

deno/config/base.ts

@@ -17,7 +17,7 @@ export const from = async (path: string): Promise<Config> => {
 
 const __dirname = path.dirname(path.fromFileUrl(import.meta.url));
 const SECRETS_FILE: string = path.join(__dirname, "..", "..", "secrets.json");
-const PORT: number = parseInt(Deno.env.get("PORT") ?? "8080") || 8080;
+const PORT: number = parseInt(Deno.env.get("PORT") ?? "3001") || 3001;
 const DATABASE_URL = Deno.env.get("DATABASE_URL");
 const ENV = Deno.env.get("ENV_TYPE") || Deno.env.get("NODE_ENV");
 
@@ -51,7 +51,7 @@ const defaults: Partial<Config> = {
     type: "fs",
     directory: path.join(Deno.cwd(), "..", "..", "uploads"),
   },
-  baseUrl: "http://localhost:8080",
+  baseUrl: "http://localhost:3001",
 };
 
 const secrets = generateSecrets();

deno/server/infra/repo/mod.ts

@@ -36,7 +36,7 @@ export class Repository {
 
   constructor(config: Config) {
     const databaseUrl = config.databaseUrl ?? Deno.env.get("DATABASE_URL") ??
-      "mongodb://chat:chat@localhost:27017/tests?authSource=admin";
+      "mongodb://chat:chat@localhost:27017/chat?authSource=admin";
     const db = new Database(databaseUrl);
     this.user = new UserRepo(db);
     this.session = new SessionRepo(db);