feat: page for repo-specific search + embed button

README.md

@@ -1,4 +1,4 @@
-# Semhub
+# SemHub
 
 ## Development
 
@@ -84,7 +84,7 @@ To set up a GitHub App:
   - In terms of permissions:
     - Select the following read-only Repository permissions: Metadata (mandatory), Discussions, Issues, Pull Requests, Contents. (These should be tracked in code via `github-app.ts`.)
     - Select the following read-only User permissions: Emails (actually would've gotten the user's email from the login process)
-    - Select the following read-only Organization permissions: Members (to enable Semhub to work for users in the same organization after it has been installed by an admin)
+    - Select the following read-only Organization permissions: Members (to enable SemHub to work for users in the same organization after it has been installed by an admin)
   - Leave unchecked the box that says "Request user authorization (OAuth) during installation". Our app handles user login + creation.
   - Select redirect on update and use the frontend `/repos` page as the Setup URL
     - Local dev: `https://local.semhub.dev:3001/repos`

packages/core/migrations/0033_vector-plain-storage.sql

@@ -1,7 +1,7 @@
 /*
 pg (or pgvector?) uses EXTENDED storage by default for for all columns bigger than 2KB
 
-Changes vector storage to PLAIN if vector operation is in hot path (which it is for Semhub):
+Changes vector storage to PLAIN if vector operation is in hot path (which it is for SemHub):
 - this only works if your row size is within PG page limit of 8KB
 - you cannot increase page limit beyond 8KB for index
 

packages/core/src/email/index.ts

@@ -18,7 +18,7 @@ export async function sendEmail(
   envPrefix: string,
 ) {
   const { data, error } = await client.emails.send({
-    from: `${envPrefix ? `${envPrefix} ` : ""}Semhub <[email protected]>`,
+    from: `${envPrefix ? `${envPrefix} ` : ""}SemHub <[email protected]>`,
     to,
     subject,
     html,

packages/core/src/github/permission/github-app.ts

@@ -1,6 +1,6 @@
 import { type Permissions } from "../schema.webhook";
 
-// this file tracks the current permissions requested by Semhub Github App
+// this file tracks the current permissions requested by SemHub Github App
 // however, the actual permissions are configured via UI on GitHub
 
 export const CURRENT_REQUESTED_PERMISSIONS: Permissions = {

packages/core/src/repo.ts

@@ -392,4 +392,43 @@ export const Repo = {
       .set({ issuesLastUpdatedAt: result.lastUpdated })
       .where(eq(repos.id, repoId));
   },
+
+  readyForPublicSearch: async ({
+    owner,
+    name,
+    db,
+  }: {
+    owner: string;
+    name: string;
+    db: DbClient;
+  }) => {
+    const [result] = await db
+      .select({
+        initStatus: repos.initStatus,
+        syncStatus: repos.syncStatus,
+        lastSyncedAt: repos.lastSyncedAt,
+        issuesLastUpdatedAt: repos.issuesLastUpdatedAt,
+        avatarUrl: repos.ownerAvatarUrl,
+      })
+      .from(repos)
+      .where(
+        and(
+          eq(repos.ownerLogin, owner),
+          eq(repos.name, name),
+          eq(repos.isPrivate, false),
+        ),
+      );
+
+    if (!result) {
+      return null;
+    }
+
+    return {
+      initStatus: result.initStatus,
+      lastSyncedAt: result.lastSyncedAt,
+      issuesLastUpdatedAt: result.issuesLastUpdatedAt,
+      syncStatus: result.syncStatus,
+      avatarUrl: result.avatarUrl,
+    };
+  },
 };

packages/web/package.json

@@ -10,6 +10,7 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.4",

packages/web/src/components/navbar/DarkModeToggle.tsx

@@ -1,11 +1,20 @@
 import { useThemeToggle } from "@/lib/hooks/useThemeToggle";
 import { Button } from "@/components/ui/button";
 
-export function DarkModeToggle() {
+interface DarkModeToggleProps {
+  onToggleCountChange: () => void;
+}
+
+export function DarkModeToggle({ onToggleCountChange }: DarkModeToggleProps) {
   const { ThemeIcon, handleThemeChange } = useThemeToggle();
 
+  const handleClick = () => {
+    onToggleCountChange();
+    handleThemeChange();
+  };
+
   return (
-    <Button variant="ghost" size="icon" onClick={handleThemeChange}>
+    <Button variant="ghost" size="icon" onClick={handleClick}>
       <ThemeIcon className="size-[1.2rem] animate-in fade-in" />
       <span className="sr-only">Toggle theme</span>
     </Button>

packages/web/src/components/navbar/Navbar.tsx

@@ -1,31 +1,73 @@
 import { Link } from "@tanstack/react-router";
+import { useTheme } from "next-themes";
+import { useEffect, useRef, useState } from "react";
 
 import { useSession } from "@/lib/hooks/useSession";
+import { useAudio } from "@/hooks/useAudio";
 import { DarkModeToggle } from "@/components/navbar/DarkModeToggle";
 import { LoginButton } from "@/components/navbar/LoginButton";
 import { UserNav } from "@/components/navbar/UserNav";
 
 export function Navbar() {
   const { isAuthenticated, user } = useSession();
+  const [toggleCount, setToggleCount] = useState(0);
+  const { theme, systemTheme } = useTheme();
+  const audio = useAudio("/sounds/dark-mode.mp3");
+  const prevThemeRef = useRef(theme);
+  const prevSystemThemeRef = useRef(systemTheme);
+  const showEasterEgg = toggleCount >= 8;
 
+  useEffect(() => {
+    const wasInDarkMode =
+      prevThemeRef.current === "dark" ||
+      (prevThemeRef.current === "system" &&
+        prevSystemThemeRef.current === "dark");
+    const isInDarkMode =
+      theme === "dark" || (theme === "system" && systemTheme === "dark");
+
+    if (!wasInDarkMode && isInDarkMode && showEasterEgg) {
+      audio.play().catch(console.error);
+    }
+
+    prevThemeRef.current = theme;
+    prevSystemThemeRef.current = systemTheme;
+  }, [theme, systemTheme, audio, showEasterEgg]);
+
+  const handleToggleCount = () => {
+    setToggleCount((prev) => prev + 1);
+  };
+
+  const standardLogo = (
+    <>
+      <span className="text-blue-600">Sem</span>
+      <span className="text-orange-500">Hub</span>
+      <span className="animate-cursor-slow text-blue-600">_</span>
+    </>
+  );
+  const lightModeLogo = (
+    <h1 className="flex items-center font-serif text-2xl dark:hidden">
+      {standardLogo}
+    </h1>
+  );
+  const darkModeLogo = (
+    <h1 className="hidden items-center font-serif text-2xl dark:flex">
+      {standardLogo}
+    </h1>
+  );
+  const darkModeEasterEggLogo = (
+    <h1 className="hidden items-center font-sans text-2xl dark:flex">
+      <span className="font-semibold text-white">Sem</span>
+      <span className="rounded-lg bg-[#F0931B] font-semibold text-black">
+        Hub
+      </span>
+    </h1>
+  );
   return (
     <div className="flex h-16 w-full items-center justify-between px-4">
       <div className="flex items-center gap-2">
         <Link to="/" className="flex items-center">
-          <h1 className="flex items-center font-sans text-2xl dark:hidden">
-            <span className="font-semibold text-blue-500">S</span>
-            <span className="font-semibold text-red-500">e</span>
-            <span className="font-semibold text-yellow-500">m</span>
-            <span className="font-semibold text-blue-500">H</span>
-            <span className="font-semibold text-green-500">u</span>
-            <span className="font-semibold text-red-500">b</span>
-          </h1>
-          <h1 className="hidden items-center font-sans text-2xl dark:flex">
-            <span className="font-semibold text-white">Sem</span>
-            <span className="rounded-lg bg-[#F0931B] font-semibold text-black">
-              Hub
-            </span>
-          </h1>
+          {lightModeLogo}
+          {showEasterEgg ? darkModeEasterEggLogo : darkModeLogo}
         </Link>
       </div>
       <nav className="flex items-center gap-4">
@@ -42,7 +84,7 @@ export function Navbar() {
         ) : (
           <>
             <LoginButton />
-            <DarkModeToggle />
+            <DarkModeToggle onToggleCountChange={handleToggleCount} />
           </>
         )}
       </nav>

packages/web/src/components/search/MeSearchBars.tsx

@@ -29,7 +29,9 @@ export function MyReposResultsSearchBar({
     handleBlur,
     commandValue,
     setCommandValue,
-  } = useSearchBar(initialQuery);
+  } = useSearchBar({
+    initialQuery,
+  });
   const { handleSearch } = useMeSearch(setQuery);
 
   return (
@@ -104,7 +106,7 @@ export function MyReposSearchBar() {
     commandValue,
     setCommandValue,
     setQuery,
-  } = useSearchBar();
+  } = useSearchBar({});
   const { handleSearch } = useMeSearch(setQuery);
 
   return (

packages/web/src/components/search/PublicSearchBars.tsx

@@ -220,6 +220,7 @@ function SearchFilters({
 export function ResultsSearchBar({ query: initialQuery }: { query: string }) {
   const [selectedOrg, setSelectedOrg] = useState("all");
   const [selectedRepo, setSelectedRepo] = useState("all");
+  const removedOperators = ["collection"] as SearchOperator[];
   const {
     query,
     inputRef,
@@ -238,8 +239,11 @@ export function ResultsSearchBar({ query: initialQuery }: { query: string }) {
     commandValue,
     setCommandValue,
     setQuery,
-  } = useSearchBar(initialQuery);
-  const { handleSearch } = usePublicSearch(setQuery);
+  } = useSearchBar({
+    initialQuery,
+    removedOperators,
+  });
+  const { handleSearch } = usePublicSearch({ mode: "search", setQuery });
 
   const handleOrgChange = (org: string) => {
     setSelectedOrg(org);
@@ -306,6 +310,7 @@ export function ResultsSearchBar({ query: initialQuery }: { query: string }) {
               handleValueSelect={handleValueSelect}
               commandValue={commandValue}
               setCommandValue={setCommandValue}
+              removedOperators={removedOperators}
             />
           </div>
         )}
@@ -318,6 +323,7 @@ export function HomepageSearchBar() {
   const { theme } = useTheme();
   const [selectedOrg, setSelectedOrg] = useState("all");
   const [selectedRepo, setSelectedRepo] = useState("all");
+  const removedOperators = ["collection"] as SearchOperator[];
   const {
     query,
     inputRef,
@@ -336,8 +342,11 @@ export function HomepageSearchBar() {
     commandValue,
     setCommandValue,
     setQuery,
-  } = useSearchBar();
-  const { handleSearch, handleLuckySearch } = usePublicSearch(setQuery);
+  } = useSearchBar({ removedOperators });
+  const { handleSearch, handleLuckySearch } = usePublicSearch({
+    mode: "search",
+    setQuery,
+  });
   const placeholderText = usePlaceholderAnimation();
 
   const handleOrgChange = (org: string) => {
@@ -401,6 +410,7 @@ export function HomepageSearchBar() {
                 handleValueSelect={handleValueSelect}
                 commandValue={commandValue}
                 setCommandValue={setCommandValue}
+                removedOperators={removedOperators}
               />
             </div>
           )}