fastrepl · yujonglee · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024
diff --git a/apps/desktop/index.html b/apps/desktop/index.html
@@ -7,7 +7,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
-    <title>Hypr - AI Notepad for Meetings</title>
+    <title>Hypr - Smart Notepad for Meetings</title>
   </head>
 
   <body>

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
@@ -11,6 +11,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@hypr/proto": "workspace:*",
     "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-dropdown-menu": "^2.1.3",
     "@radix-ui/react-form": "^0.1.1",
@@ -39,6 +40,7 @@
     "date-fns": "^4.1.0",
     "embla-carousel": "^8.5.1",
     "embla-carousel-react": "^8.5.1",
+    "framer-motion": "^11.15.0",
     "lucide-react": "^0.468.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json
@@ -15,7 +15,7 @@
         "decorations": true,
         "height": 800,
         "width": 1200,
-        "title": "Hypr - AI Notepad for Meetings"
+        "title": "Hypr - Smart Notepad for Meetings"
       }
     ],
     "security": {

diff --git a/apps/desktop/src/components/AudioControls.tsx b/apps/desktop/src/components/AudioControls.tsx
@@ -0,0 +1,74 @@
+import { useState, useEffect } from "react";
+import { RiPlayFill, RiPauseFill } from "@remixicon/react";
+
+export const AudioControls = () => {
+  const [isPlaying, setIsPlaying] = useState(true);
+  const [audio] = useState(new Audio("/bgm.mp3"));
+
+  useEffect(() => {
+    audio.loop = true;
+    audio.play().catch((error) => console.log("Audio autoplay failed:", error));
+
+    // Set up media session
+    if ("mediaSession" in navigator) {
+      navigator.mediaSession.metadata = new MediaMetadata({
+        title: "Hypr Background Music",
+        artist: "Hypr",
+        album: "Hypr App",
+        artwork: [
+          {
+            src: "/favicon.ico",
+            sizes: "96x96",
+            type: "image/png",
+          },
+        ],
+      });
+
+      navigator.mediaSession.setActionHandler("play", () => {
+        setIsPlaying(true);
+        audio.play();
+      });
+
+      navigator.mediaSession.setActionHandler("pause", () => {
+        setIsPlaying(false);
+        audio.pause();
+      });
+    }
+
+    return () => {
+      audio.pause();
+      audio.currentTime = 0;
+
+      // Clean up media session handlers
+      if ("mediaSession" in navigator) {
+        navigator.mediaSession.setActionHandler("play", null);
+        navigator.mediaSession.setActionHandler("pause", null);
+      }
+    };
+  }, [audio]);
+
+  useEffect(() => {
+    if (isPlaying) {
+      audio.play().catch((error) => console.log("Audio play failed:", error));
+      if ("mediaSession" in navigator) {
+        navigator.mediaSession.playbackState = "playing";
+      }
+    } else {
+      audio.pause();
+      if ("mediaSession" in navigator) {
+        navigator.mediaSession.playbackState = "paused";
+      }
+    }
+  }, [isPlaying, audio]);
+
+  return (
+    <div className="fixed right-5 top-5 z-10 text-white">
+      <button
+        onClick={() => setIsPlaying(!isPlaying)}
+        className="rounded-full bg-black p-2 transition-colors duration-200 hover:bg-black/70"
+      >
+        {isPlaying ? <RiPauseFill size={24} /> : <RiPlayFill size={24} />}
+      </button>
+    </div>
+  );
+};
diff --git a/apps/desktop/src/components/ui/blur-fade.tsx b/apps/desktop/src/components/ui/blur-fade.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { useRef } from "react";
+import {
+  AnimatePresence,
+  motion,
+  useInView,
+  UseInViewOptions,
+  Variants,
+} from "framer-motion";
+
+type MarginType = UseInViewOptions["margin"];
+
+interface BlurFadeProps {
+  children: React.ReactNode;
+  className?: string;
+  variant?: {
+    hidden: { y: number };
+    visible: { y: number };
+  };
+  duration?: number;
+  delay?: number;
+  yOffset?: number;
+  inView?: boolean;
+  inViewMargin?: MarginType;
+  blur?: string;
+}
+
+export default function BlurFade({
+  children,
+  className,
+  variant,
+  duration = 0.4,
+  delay = 0,
+  yOffset = 6,
+  inView = false,
+  inViewMargin = "-50px",
+  blur = "6px",
+}: BlurFadeProps) {
+  const ref = useRef(null);
+  const inViewResult = useInView(ref, { once: true, margin: inViewMargin });
+  const isInView = !inView || inViewResult;
+  const defaultVariants: Variants = {
+    hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },
+    visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },
+  };
+  const combinedVariants = variant || defaultVariants;
+  return (
+    <AnimatePresence>
+      <motion.div
+        ref={ref}
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+        exit="hidden"
+        variants={combinedVariants}
+        transition={{
+          delay: 0.04 + delay,
+          duration,
+          ease: "easeOut",
+        }}
+        className={className}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}
diff --git a/apps/desktop/src/components/ui/retro-grid.tsx b/apps/desktop/src/components/ui/retro-grid.tsx
@@ -31,7 +31,6 @@ export function RetroGrid({
           )}
         />
       </div>
-
       {/* Background Gradient */}
       <div className="absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black" />
     </div>

diff --git a/apps/desktop/src/components/ui/shimmer-button.tsx b/apps/desktop/src/components/ui/shimmer-button.tsx
@@ -0,0 +1,96 @@
+import React, { CSSProperties } from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface ShimmerButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  shimmerColor?: string;
+  shimmerSize?: string;
+  borderRadius?: string;
+  shimmerDuration?: string;
+  background?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
+  (
+    {
+      shimmerColor = "#ffffff",
+      shimmerSize = "0.05em",
+      shimmerDuration = "3s",
+      borderRadius = "100px",
+      background = "rgba(0, 0, 0, 1)",
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        style={
+          {
+            "--spread": "90deg",
+            "--shimmer-color": shimmerColor,
+            "--radius": borderRadius,
+            "--speed": shimmerDuration,
+            "--cut": shimmerSize,
+            "--bg": background,
+          } as CSSProperties
+        }
+        className={cn(
+          "group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black",
+          "transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      >
+        {/* spark container */}
+        <div
+          className={cn(
+            "-z-30 blur-[2px]",
+            "absolute inset-0 overflow-visible [container-type:size]",
+          )}
+        >
+          {/* spark */}
+          <div className="absolute inset-0 h-[100cqh] animate-shimmer-slide [aspect-ratio:1] [border-radius:0] [mask:none]">
+            {/* spark before */}
+            <div className="absolute -inset-full w-auto rotate-0 animate-spin-around [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]" />
+          </div>
+        </div>
+        {children}
+
+        {/* Highlight */}
+        <div
+          className={cn(
+            "insert-0 absolute size-full",
+
+            "rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]",
+
+            // transition
+            "transform-gpu transition-all duration-300 ease-in-out",
+
+            // on hover
+            "group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]",
+
+            // on click
+            "group-active:shadow-[inset_0_-10px_10px_#ffffff3f]",
+          )}
+        />
+
+        {/* backdrop */}
+        <div
+          className={cn(
+            "absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]",
+          )}
+        />
+      </button>
+    );
+  },
+);
+
+ShimmerButton.displayName = "ShimmerButton";
+
+export default ShimmerButton;
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,7 +31,6 @@ export function RetroGrid({ @@
               )}
             />
           </div>
           {/* Background Gradient */}
           <div className="absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black" />
         </div>
@@ Expand Down @@