feat: create atproto oauth login

src/components/SignInAtproto.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { useATProtoLogin } from '@/hooks/useATProtoLogin.hook'
+
+const { handle, isLoggedIn, signIn, signOut } = useATProtoLogin()
+
+const inputHandle = ref('')
+
+const onSignIn = () => {
+  if (inputHandle.value) {
+    signIn(inputHandle.value)
+  }
+}
+</script>
+
+<template>
+  <div v-if="isLoggedIn" class="sign-in-atproto">
+    <span>{{ handle }}</span>
+    <button class="btn btn-sm" @click="signOut">Sign out</button>
+  </div>
+  <div v-else class="sign-in-atproto">
+    <input
+      v-model="inputHandle"
+      class="input input-sm"
+      type="text"
+      placeholder="yourhandle.bsky.social"
+      @keyup.enter="onSignIn"
+    />
+    <button class="btn btn-sm" @click="onSignIn">Sign in with Bluesky</button>
+  </div>
+</template>

src/components/WelcomeWorld.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import RepoList from "@/components/RepoList.vue"
+import SignInAtproto from "@/components/SignInAtproto.vue"
 import SignInGithub from "@/components/SignInGithub.vue"
 import ThemeSwap from "@/components/ThemeSwap.vue"
 import { useForm } from "@/hooks/useForm.hook"
@@ -23,6 +24,7 @@ const { userInput, repoInput, submit } = useForm()
 
     <div class="get-started">
       <sign-in-github />
+      <sign-in-atproto />
       <router-link
         :to="{
           name: 'FluxNoteView',