feat(ui): add new Gemini text logo (spinning); MCP dashboard tile

bl-ue · bl-ue · commit 5d38fe344839 · 2025-08-05T08:00:57.000-06:00
- Introduce GeminiText component and replace center logo with icon + text.

- Add slow spin animation to GeminiIcon (3s, 360deg).

- Update landing dashboard layout to two columns, rename projects card to
"Projects", and add a disabled "MCP Servers" card with
coming soon label.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -30,12 +30,13 @@ import {
   FolderKanban,
 } from "lucide-react";
 import "./index.css";
-import { GeminiLogoCenter } from "./components/GeminiLogoCenter";
 import { ToolCallDisplay } from "./components/ToolCallDisplay";
 import { Card, CardHeader, CardTitle, CardDescription } from "./components/ui/card";
 import ProjectsPage from "./pages/Projects";
 import ProjectDetailPage from "./pages/ProjectDetail";
 import { PageLayout } from "./components/PageLayout";
+import { GeminiIcon } from "./components/GeminiIcon";
+import { GeminiText } from "./components/GeminiText";
 
 interface ThinkingMessagePart {
   type: "thinking";
@@ -1068,30 +1069,53 @@ function App() {
           ) : (
             <div className="flex-1 flex flex-col items-center justify-center text-center p-4">
               <div className="flex flex-row items-center mb-4 gap-2">
-                <GeminiLogoCenter />
+                <div className="flex flex-row items-center gap-2">
+                  <GeminiIcon />
+                  <GeminiText />
+                </div>
                 <span className="text-4xl font-medium gradient-text-desktop">
                   Desktop
                 </span>
               </div>
 
               <p className="text-muted-foreground mb-6">
-                Start a new conversation to begin chatting with Gemini.
+                Your ideas for the future are just a click away.
               </p>
 
               {/* Dashboard tiles */}
-              <div className="grid grid-cols-1 gap-4 w-full max-w-3xl place-items-center">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-3xl">
                 {/* Gemini CLI Projects Card */}
                 <Card
-                  className="cursor-pointer transition-colors hover:bg-accent w-full max-w-sm"
+                  className="cursor-pointer transition-colors hover:bg-accent w-full"
                   onClick={() => window.location.assign("/projects")}
                 >
                   <CardHeader className="flex flex-row items-center gap-3">
                     <div className="shrink-0 h-6 w-6 flex items-center justify-center">
                       <FolderKanban className="h-5 w-5 text-muted-foreground" />
                     </div>
                     <div className="text-left">
-                      <CardTitle className="text-base">Gemini CLI Projects</CardTitle>
-                      <CardDescription>Browse your projects</CardDescription>
+                      <CardTitle className="text-base">Projects</CardTitle>
+                      <CardDescription>Manage your projects, view past discussions.</CardDescription>
+                    </div>
+                  </CardHeader>
+                </Card>
+                <Card
+                  className="w-full opacity-60 cursor-not-allowed"
+                  aria-disabled="true"
+                  onClick={(e) => e.preventDefault()}
+                >
+                  <CardHeader className="flex flex-row items-center gap-3">
+                    <div className="shrink-0 h-6 w-6 flex items-center justify-center">
+                      <FolderKanban className="h-5 w-5 text-muted-foreground" />
+                    </div>
+                    <div className="text-left">
+                      <div className="flex items-center gap-2">
+                        <CardTitle className="text-base">MCP Servers</CardTitle>
+                        <span className="text-[10px] px-2 py-0.5 rounded-full bg-muted text-muted-foreground uppercase tracking-wide">
+                          Coming soon
+                        </span>
+                      </div>
+                      <CardDescription>Manage MCP configuration and settings.</CardDescription>
                     </div>
                   </CardHeader>
                 </Card>
diff --git a/frontend/src/components/GeminiIcon.tsx b/frontend/src/components/GeminiIcon.tsx
@@ -1,7 +1,7 @@
 export function GeminiIcon() {
   return (
     <svg
-      className="_footerSpark_98udt_151"
+      className="_footerSpark_98udt_151 spin-slow"
       width="28"
       height="28"
       viewBox="0 0 64 64"
diff --git a/frontend/src/components/GeminiText.tsx b/frontend/src/components/GeminiText.tsx
@@ -0,0 +1,44 @@
+export function GeminiText() {
+  return (
+    <svg
+      className="_logoImage_13x13_152"
+      width="120"
+      height="27"
+      viewBox="0 0 207 51"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_1098_2)">
+        <path
+          d="M202.015 10.0389C200.649 10.0389 199.465 9.56723 198.464 8.62383C197.508 7.63563 197.029 6.46763 197.029 5.12003C197.029 3.77243 197.508 2.62691 198.464 1.68356C199.465 0.740225 200.649 0.268555 202.015 0.268555C203.381 0.268555 204.542 0.740225 205.498 1.68356C206.499 2.62691 207 3.77243 207 5.12003C207 6.46763 206.499 7.63563 205.498 8.62383C204.542 9.56723 203.381 10.0389 202.015 10.0389ZM198.327 49.4571V15.0925H205.702V49.4571H198.327Z"
+          fill="currentColor"
+        />
+        <path
+          d="M161.922 49.4571V15.0925H168.888V19.8092H169.298C170.299 18.1471 171.779 16.777 173.737 15.6989C175.74 14.5759 177.925 14.0144 180.293 14.0144C184.572 14.0144 187.782 15.2722 189.922 17.7877C192.062 20.3033 193.132 23.6275 193.132 27.7602V49.4571H185.824V28.7036C185.824 25.9185 185.119 23.897 183.707 22.6392C182.296 21.3365 180.452 20.6852 178.176 20.6852C176.4 20.6852 174.852 21.1793 173.532 22.1676C172.212 23.1109 171.164 24.3687 170.39 25.9409C169.662 27.5132 169.298 29.1977 169.298 30.9945V49.4571H161.922Z"
+          fill="currentColor"
+        />
+        <path
+          d="M152.84 10.0389C151.474 10.0389 150.29 9.56723 149.288 8.62383C148.332 7.63563 147.854 6.46763 147.854 5.12003C147.854 3.77243 148.332 2.62691 149.288 1.68356C150.29 0.740225 151.474 0.268555 152.84 0.268555C154.205 0.268555 155.366 0.740225 156.322 1.68356C157.324 2.62691 157.825 3.77243 157.825 5.12003C157.825 6.46763 157.324 7.63563 156.322 8.62383C155.366 9.56723 154.205 10.0389 152.84 10.0389ZM149.152 49.4571V15.0925H156.527V49.4571H149.152Z"
+          fill="currentColor"
+        />
+        <path
+          d="M91.4727 49.4571V15.0925H98.4386V19.8092H98.8477C99.8497 18.1471 101.307 16.777 103.219 15.6989C105.131 14.5759 107.248 14.0144 109.57 14.0144C112.165 14.0144 114.373 14.6208 116.194 15.8337C118.015 17.0465 119.313 18.5739 120.087 20.4156C121.225 18.6188 122.773 17.1139 124.731 15.9011C126.688 14.6433 129.079 14.0144 131.901 14.0144C135.999 14.0144 139.049 15.2497 141.052 17.7204C143.056 20.1461 144.057 23.3804 144.057 27.4233V49.4571H136.75V28.6362C136.75 25.896 136.135 23.897 134.906 22.6392C133.722 21.3365 132.061 20.6852 129.921 20.6852C128.236 20.6852 126.757 21.1568 125.482 22.1002C124.207 22.9986 123.206 24.2339 122.477 25.8062C121.794 27.3784 121.453 29.1303 121.453 31.0619V49.4571H114.146V28.6362C114.146 25.896 113.531 23.897 112.302 22.6392C111.072 21.3365 109.342 20.6852 107.112 20.6852C105.473 20.6852 104.038 21.1568 102.809 22.1002C101.58 23.0435 100.601 24.3013 99.8727 25.8735C99.1897 27.4458 98.8477 29.1977 98.8477 31.1293V49.4571H91.4727Z"
+          fill="currentColor"
+        />
+        <path
+          d="M70.8361 50.5352C67.4211 50.5352 64.3711 49.7491 61.6841 48.1769C58.9981 46.6046 56.8811 44.4484 55.3331 41.7082C53.8311 38.968 53.0801 35.846 53.0801 32.3422C53.0801 29.0629 53.8081 26.0308 55.2651 23.2457C56.7221 20.4605 58.7481 18.237 61.3431 16.5749C63.9841 14.8679 67.0111 14.0144 70.4261 14.0144C74.0221 14.0144 77.0731 14.778 79.5771 16.3053C82.1261 17.8327 84.0611 19.9215 85.3821 22.5718C86.7021 25.2222 87.3621 28.2094 87.3621 31.5336C87.3621 32.0277 87.3391 32.4769 87.2941 32.8812C87.2941 33.2855 87.2711 33.6 87.2251 33.8246H60.3191C60.6831 37.2386 61.8891 39.7991 63.9381 41.5061C66.0321 43.2131 68.4001 44.0666 71.0401 44.0666C73.4081 44.0666 75.3661 43.55 76.9131 42.5168C78.4611 41.4387 79.6911 40.1135 80.6011 38.5413L86.6791 41.4387C85.1771 44.134 83.1281 46.3351 80.5331 48.0421C77.9381 49.7042 74.7051 50.5352 70.8361 50.5352ZM70.4941 20.2135C68.0361 20.2135 65.9411 20.9547 64.2111 22.4371C62.4811 23.9195 61.3201 25.896 60.7281 28.3667H80.0551C79.9641 27.1987 79.5771 25.9858 78.8941 24.7281C78.2111 23.4703 77.1641 22.4146 75.7531 21.5611C74.3871 20.6627 72.6341 20.2135 70.4941 20.2135Z"
+          fill="currentColor"
+        />
+        <path
+          d="M25.7307 50.5352C22.2247 50.5352 18.924 49.9063 15.8281 48.6485C12.7777 47.3908 10.0688 45.6388 7.70139 43.3928C5.33399 41.1018 3.46729 38.429 2.10149 35.3744C0.781194 32.2748 0.121094 28.9282 0.121094 25.3345C0.121094 21.7408 0.781194 18.4166 2.10149 15.362C3.46729 12.2624 5.31119 9.58964 7.63309 7.34364C10.0005 5.05264 12.7322 3.27824 15.8281 2.02048C18.924 0.762689 22.2247 0.133789 25.7307 0.133789C29.4637 0.133789 32.9007 0.785149 36.0427 2.08786C39.2297 3.39054 41.8927 5.20984 44.0327 7.54574L38.8427 12.5994C37.2487 10.8474 35.3367 9.49984 33.1057 8.55654C30.9207 7.61314 28.4617 7.14144 25.7307 7.14144C22.4977 7.14144 19.5157 7.90514 16.7842 9.43244C14.0525 10.9148 11.8444 13.0261 10.1599 15.7663C8.5209 18.4616 7.70139 21.651 7.70139 25.3345C7.70139 29.018 8.5437 32.2299 10.2282 34.9701C11.9127 37.6653 14.1208 39.7766 16.8524 41.3039C19.5837 42.7863 22.5657 43.5275 25.7987 43.5275C28.7577 43.5275 31.4437 42.9885 33.8567 41.9104C36.2697 40.7873 38.2047 39.2151 39.6617 37.1937C41.1637 35.1722 42.0747 32.7465 42.3937 29.9164H25.6617V23.3804H49.4277C49.7007 24.5933 49.8367 25.8735 49.8367 27.2212V27.2886C49.8367 31.9604 48.7897 36.0482 46.6957 39.552C44.6467 43.0109 41.8017 45.7062 38.1597 47.6378C34.5167 49.5694 30.3737 50.5352 25.7307 50.5352Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1098_2">
+          <rect width="207" height="51" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -141,4 +141,15 @@
     -webkit-text-fill-color: transparent;
     color: transparent;
   }
+
+  @keyframes spin-slow {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+  .spin-slow {
+    animation: spin-slow 3s linear infinite;
+    will-change: transform;
+    transform-origin: center center;
+    display: inline-block;
+  }
 }
