refactor: format and lint codebase (#971)

app/assets/javascripts/Components/SearchOptions/index.tsx

@@ -0,0 +1,45 @@
+import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/UIModels/Application'
+import { observer } from 'mobx-react-lite'
+import Bubble from '@/Components/Bubble'
+
+type Props = {
+  appState: AppState
+  application: WebApplication
+}
+
+export const SearchOptions = observer(({ appState }: Props) => {
+  const { searchOptions } = appState
+
+  const { includeProtectedContents, includeArchived, includeTrashed } = searchOptions
+
+  async function toggleIncludeProtectedContents() {
+    await searchOptions.toggleIncludeProtectedContents()
+  }
+
+  return (
+    <div
+      role="tablist"
+      className="search-options justify-center"
+      onMouseDown={(e) => e.preventDefault()}
+    >
+      <Bubble
+        label="Protected Contents"
+        selected={includeProtectedContents}
+        onSelect={toggleIncludeProtectedContents}
+      />
+
+      <Bubble
+        label="Archived"
+        selected={includeArchived}
+        onSelect={searchOptions.toggleIncludeArchived}
+      />
+
+      <Bubble
+        label="Trashed"
+        selected={includeTrashed}
+        onSelect={searchOptions.toggleIncludeTrashed}
+      />
+    </div>
+  )
+})