Something went wrong. Try again.
the {coilest,wokest,funnest} client for bluesky next.bbell.vt3e.cat
bluesky client
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116<script setup lang="ts">import { ref, onMounted, getCurrentInstance, useId } from "vue";import { IconArrowBackRounded } from "@iconify-prerendered/vue-material-symbols";import { useNavigationStore, type StackEntry, type TabKey } from "@/stores/navigation";import { textInputFocused } from "@/utils/focusable";
const appBarElement = ref<HTMLElement | null>(null);const overlayElement = ref<HTMLElement | null>(null);defineExpose({ $el: appBarElement, $overlay: overlayElement });
const buttonId = useId();const nav = useNavigationStore();const props = defineProps<{ left?: number; root?: boolean; title?: string;}>();
const mountedStack = ref<StackEntry[] | null>(null);const canGoBack = ref(false);
onMounted(() => { if (!appBarElement.value) { const inst = getCurrentInstance(); const root = inst?.proxy?.$el as HTMLElement | undefined; if (root instanceof HTMLElement) appBarElement.value = root; }
if (!appBarElement.value) return;
let contextTab: TabKey | null = null; let contextEntryId: string | null = null;
const tabEl = appBarElement.value.closest("[data-tab]"); if (tabEl instanceof HTMLElement && tabEl.dataset.tab) contextTab = tabEl.dataset.tab as TabKey;
const entryEl = appBarElement.value.closest("[data-entry-id]"); if (entryEl instanceof HTMLElement && entryEl.dataset.entryId) { contextEntryId = entryEl.dataset.entryId; }
const tab = (contextTab ?? nav.activeTab) as TabKey; const s = nav.stacks[tab]; mountedStack.value = s ?? null;
if (props.root || !s || s.length <= 1) { canGoBack.value = false; return; }
if (contextEntryId) { const index = s.findIndex((e: StackEntry) => e.id === contextEntryId); canGoBack.value = index > 0; return; }
canGoBack.value = true;});
const onKeyDown = (e: KeyboardEvent) => { if (e.key === "a" && !textInputFocused()) { const el = document.getElementById(buttonId); if (el) el.focus(); }};
onMounted(() => { window.addEventListener("keydown", onKeyDown);});
function goBack() { if (canGoBack.value) nav.popStack();}</script>
<template> <div ref="appBarElement" class="app-bar"> <button v-if="canGoBack" @click="goBack" class="back-button" type="button" aria-label="Go back" :id="buttonId" > <IconArrowBackRounded class="icon" aria-hidden="true" /> </button> </div></template>
<style lang="scss" scoped>.back-button { border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: hsl(var(--text)); border-radius: 50%; padding: 0.5rem;
&:hover { background: hsla(var(--surface0) / 1); } &:active { background: hsla(var(--surface0) / 0.5); }
.icon { width: 1.5rem; height: 1.5rem; }}</style>