Fix spinning logo in header. (Good idea? ¯\_(ツ)_/¯) (#148)

I noticed this little spinny effect was broken so I reintroduced it in a
new way. I don't now if it's a good idea or a good implementation of the
idea, but it's kinda fun. ¯\\\_(ツ)_/¯

frontend/components/Header.tsx

@@ -3,9 +3,10 @@
 import { FullUser } from "../utils/api_types.ts";
 import { GlobalSearch } from "../islands/GlobalSearch.tsx";
 import { UserMenu } from "../islands/UserMenu.tsx";
-import { Logo } from "./Logo.tsx";
 import { GitHub } from "./icons/GitHub.tsx";
 import { SearchKind } from "../util.ts";
+import { HeaderLogo } from "../islands/HeaderLogo.tsx";
+import { Logo } from "./Logo.tsx";
 
 export function Header({
   user,
@@ -57,8 +58,7 @@ export function Header({
               href="/"
               class="outline-none focus-visible:ring-2 ring-cyan-700"
             >
-              <span className="sr-only">JSR home</span>
-              <Logo size="medium" class="flex-none hover:animate-flip-rotate" />
+              <HeaderLogo class="h-8 flex-none" />
             </a>
           )}
           <div class="hidden sm:block grow-1 flex-1">

frontend/fresh.gen.ts

@@ -52,6 +52,7 @@ import * as $DevelopmentLogin from "./islands/DevelopmentLogin.tsx";
 import * as $GitHubActionsLink from "./islands/GitHubActionsLink.tsx";
 import * as $GithubUserLink from "./islands/GithubUserLink.tsx";
 import * as $GlobalSearch from "./islands/GlobalSearch.tsx";
+import * as $HeaderLogo from "./islands/HeaderLogo.tsx";
 import * as $HomepageHeroParticles from "./islands/HomepageHeroParticles.tsx";
 import * as $PublishingTaskRequeue from "./islands/PublishingTaskRequeue.tsx";
 import * as $UserManageScopeInvite from "./islands/UserManageScopeInvite.tsx";
@@ -122,6 +123,7 @@ const manifest = {
     "./islands/GitHubActionsLink.tsx": $GitHubActionsLink,
     "./islands/GithubUserLink.tsx": $GithubUserLink,
     "./islands/GlobalSearch.tsx": $GlobalSearch,
+    "./islands/HeaderLogo.tsx": $HeaderLogo,
     "./islands/HomepageHeroParticles.tsx": $HomepageHeroParticles,
     "./islands/PublishingTaskRequeue.tsx": $PublishingTaskRequeue,
     "./islands/UserManageScopeInvite.tsx": $UserManageScopeInvite,

frontend/islands/HeaderLogo.tsx

@@ -0,0 +1,27 @@
+// Copyright 2024 the JSR authors. All rights reserved. MIT license.
+import { signal } from "@preact/signals";
+import { Logo } from "../components/Logo.tsx";
+
+const rotationDegrees = signal(0);
+const isAnimating = signal(false);
+
+export function HeaderLogo(props: { class?: string }) {
+  return (
+    <div
+      onMouseEnter={() => {
+        if (isAnimating.value) return;
+        isAnimating.value = true;
+        rotationDegrees.value += 180;
+      }}
+    >
+      <div
+        class={`h-auto transition-transform duration-300 ${props.class}`}
+        style={`transform: rotate(${rotationDegrees.value}deg)`}
+        aria-hidden="true"
+        onTransitionEnd={() => isAnimating.value = false}
+      >
+        <Logo size="medium" />
+      </div>
+    </div>
+  );
+}