feat: Update version to 0.0.5 and add fullscreen button to hotkeys app

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kevisual/hot-api",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "",
   "main": "index.js",
   "basename": "/root/hot-api",
@@ -8,8 +8,8 @@
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "pub": "envision deploy ./dist -k hot-api -v 0.0.4 -u -y y",
-    "pub:docs": "envision deploy ./dist -k hot-api-docs -v 0.0.4 -u",
+    "pub": "envision deploy ./dist -k hot-api -v 0.0.5 -u -y y",
+    "pub:docs": "envision deploy ./dist -k hot-api-docs -v 0.0.5 -u",
     "slide:dev": "slidev --open slides/index.md",
     "slide:build": "slidev build slides/index.md --base /root/hot-api-slide/",
     "slide:pub": "envision deploy ./slides/dist -k hot-api-slide -v 0.0.4 -u",

src/apps/hotkeys/components/icon.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import { wrapBasename } from "@/modules/basename";
 import { useStore } from "../store";
 export const RefreshButton = () => {
@@ -62,4 +63,61 @@ export const SettingsButton = () => {
       </svg>
     </button>
   );
+};
+
+export const FullscreenButton = () => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+      setIsFullscreen(true);
+    } else {
+      document.exitFullscreen();
+      setIsFullscreen(false);
+    }
+  };
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+
+  return (
+    <button
+      onClick={toggleFullscreen}
+      className="
+        group relative p-1 sm:p-1 rounded-full
+        bg-white/10 backdrop-blur-md border border-white/20
+        hover:bg-gradient-to-br hover:from-white/20 hover:to-white/5
+        hover:border-white/40 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)]
+        active:scale-95 transition-all duration-300
+        flex items-center justify-center
+        opacity-10 hover:opacity-100
+        cursor-pointer
+      "
+      aria-label="Toggle fullscreen"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className={`w-5 h-5 sm:w-6 sm:h-6 text-white transition-transform duration-500 ease-in-out ${isFullscreen ? 'scale-75' : 'group-hover:scale-110'}`}
+      >
+        {isFullscreen ? (
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" />
+        ) : (
+          <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+        )}
+      </svg>
+    </button>
+  );
 };

src/apps/hotkeys/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { SettingsButton, RefreshButton } from './components/icon';
+import { SettingsButton, RefreshButton, FullscreenButton } from './components/icon';
 import { useStore, CardItem, StoreState } from './store';
 import { useShallow } from 'zustand/shallow';
 import { toast, ToastContainer } from 'react-toastify';
@@ -215,6 +215,11 @@ export const App = () => {
       {/* Overlay for premium look and contrast */}
       <div className="absolute inset-0 bg-black/30 backdrop-blur-[4px] z-0 pointer-events-none" />
 
+      {/* Fullscreen Button - Top Right */}
+      <div className="fixed top-1 right-1 z-50">
+        <FullscreenButton />
+      </div>
+
       <div className="max-w-7xl mx-auto relative z-10 h-full flex flex-col">
         {/* Header Toggle Button */}
         <div
@@ -291,6 +296,7 @@ export const App = () => {
           </div>
         )}
       </div>
+      <div></div>
       <ToastContainer />
       <ToastContainer
         position="bottom-center"