Remove SearchInput

app/components/layout/SearchInput.tsx

@@ -1,81 +0,0 @@
-import clsx from "clsx";
-import * as React from "react";
-
-export function SearchInput() {
-  if (process.env.NODE_ENV !== "development") return <div />;
-  return <SearchInputDev />;
-}
-
-export function SearchInputDev() {
-  const [inputValue, setInputValue] = React.useState("");
-
-  const handleEnter = () => {
-    const [action, value] = inputValue.split(":");
-    if (!action) return;
-
-    let fetchUrl = "";
-    switch (action) {
-      case "liu": {
-        if (!value) return;
-        fetchUrl = `/mock-auth?username=${encodeURIComponent(value)}`;
-        break;
-      }
-      case "lit": {
-        if (!value) return;
-        fetchUrl = `/mock-auth?team=${encodeURIComponent(value)}`;
-        break;
-      }
-      case "seed": {
-        if (!value) fetchUrl = "/seed";
-        else fetchUrl = `/seed?variation=${encodeURIComponent(value)}`;
-        break;
-      }
-      default: {
-        console.error("invalid action");
-        return;
-      }
-    }
-
-    return fetch(fetchUrl, { method: "post" }).then((res) => {
-      if (res.status === 200) location.reload();
-      else {
-        console.error(`http error when trying an admin action: ${res.status}`);
-      }
-    });
-  };
-
-  return (
-    <DumbSearchInput
-      value={inputValue}
-      setValue={setInputValue}
-      handleEnter={handleEnter}
-    />
-  );
-}
-
-export function DumbSearchInput({
-  value,
-  setValue,
-  handleEnter,
-}: {
-  value: string;
-  setValue: (newValue: string) => void;
-  handleEnter: () => Promise<void> | undefined;
-}) {
-  return (
-    <div className={"layout__search-input__container"}>
-      <input
-        className={clsx("plain", "layout__search-input")}
-        type="text"
-        placeholder="Admin command"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        onKeyDown={(event) => {
-          if (event.key === "Enter") {
-            void handleEnter();
-          }
-        }}
-      />
-    </div>
-  );
-}

app/components/layout/index.tsx

@@ -4,7 +4,6 @@ import { useWindowSize } from "~/hooks/useWindowSize";
 import { HamburgerButton } from "./HamburgerButton";
 import { Menu } from "./Menu";
 import { MobileMenu } from "./MobileMenu";
-import { SearchInput } from "./SearchInput";
 import { UserItem } from "./UserItem";
 
 export const Layout = React.memo(function Layout({
@@ -33,10 +32,6 @@ export const Layout = React.memo(function Layout({
   return (
     <>
       <header className="layout__header">
-        <div className="layout__header__search-container">
-          {/* xxx: replace with admin page */}
-          <SearchInput />
-        </div>
         <div className="layout__header__title-container">{pageTitle}</div>
         <div className="layout__header__right-container">
           <UserItem />

app/styles/layout.css

@@ -3,15 +3,10 @@
 
   position: relative;
   z-index: 501;
-  display: grid;
-  align-items: center;
+  display: flex;
+  justify-content: flex-end;
   padding: var(--s-4);
   background-color: var(--bg);
-  grid-template-columns: 1fr 2fr;
-}
-
-.layout__header__search-container {
-  display: none;
 }
 
 .layout__header__title-container {
@@ -158,37 +153,6 @@
   border-radius: 0 0 var(--rounded) var(--rounded);
 }
 
-.layout__search-input__container {
-  display: flex;
-  height: 1rem;
-  align-items: center;
-  justify-content: center;
-  padding: var(--s-5) var(--s-4);
-  background-color: var(--bg-lighter);
-  border-radius: var(--rounded);
-}
-
-.layout__search-input__container:focus-within {
-  outline: 2px solid var(--theme);
-}
-
-.layout__search-input {
-  width: 12rem;
-  height: 2rem;
-  flex-grow: 1;
-  border: none;
-  background-color: var(--bg-lighter);
-  color: var(---text);
-  font-size: var(--fonts-sm);
-  outline: none;
-}
-
-.layout__search-input::placeholder {
-  color: var(--text-lighter);
-  font-weight: var(--semi-bold);
-  letter-spacing: 0.5px;
-}
-
 .layout__log-in-button {
   display: flex;
   height: var(--item-size);
@@ -221,17 +185,6 @@
   gap: var(--s-2);
 }
 
-@media screen and (min-width: 640px) {
-  .layout__header {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-  .layout__header__search-container {
-    display: block;
-    max-width: 12rem;
-  }
-}
-
 .menu {
   --small-icons-height: 1.25rem;