Merge pull request #137 from solaoi/feature_show-app-version-on-header

ヘッダにアプリバージョンを表示

src/components/Header.tsx

@@ -1,19 +1,30 @@
 import { useSetRecoilState } from "recoil"
+import { getVersion } from '@tauri-apps/api/app';
 import { featureState } from "../store/atoms/featureState"
 import { selectedNoteState } from "../store/atoms/selectedNoteState"
 import { AudioDevices } from "./molecules/AudioDevice"
 import { SpeakerLanguage } from "./molecules/SpeakerLanguage"
 import { TranscriptionAccuracy } from "./molecules/TranscriptionAccuracy"
+import { useEffect, useState } from "react";
 
 const Header = (): JSX.Element => {
     const setFeature = useSetRecoilState(featureState)
     const setSelectedNote = useSetRecoilState(selectedNoteState);
+    const [appVersion, setAppVersion] = useState<string | null>(null);
+    useEffect(() => {
+        const fetchVersion = async () => {
+            const version = await getVersion();
+            setAppVersion(version);
+        };
+        fetchVersion();
+    }, []);
 
     return (
         <header className="sticky top-0 z-10" style={{ minWidth: "770px", height: "64px" }}>
             <div className="navbar bg-base-200">
-                <div className="flex-1">
-                    <a className="ml-2 font-bold text-xl text-primary select-none" href="https://github.com/solaoi/lycoris" target="_blank">Lycoris</a>
+                <div className="flex flex-1 items-baseline select-none">
+                    <a className="ml-2 font-bold text-xl text-primary mr-1" href="https://github.com/solaoi/lycoris" target="_blank">Lycoris</a>
+                    <p className="text-xs text-slate-500">v{appVersion}</p>
                 </div>
                 <div className="flex-none mr-1">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5">