peregrine/web/src/components/ClassicUIButton.vue
pyr0ball 49e3265132 feat(web): merge Vue SPA from feature/vue-spa; add ClassicUIButton + useFeatureFlag
- Import web/ directory (Vue 3 + Vite + UnoCSS SPA) from feature/vue-spa branch
- Add web/src/components/ClassicUIButton.vue: switch-back to Streamlit via
  cookie (prgn_ui=streamlit) + ?prgn_switch=streamlit query param bridge
- Add web/src/composables/useFeatureFlag.ts: reads prgn_demo_tier cookie for
  demo toolbar visual consistency (not an authoritative gate, see issue #8)
- Update .gitignore: add .superpowers/, pytest-output.txt, docs/superpowers/
2026-03-22 18:46:11 -07:00

48 lines
1.1 KiB
Vue

<template>
<button
class="classic-ui-btn"
:title="label"
@click="switchToClassic"
>
{{ label }}
</button>
</template>
<script setup lang="ts">
const props = withDefaults(defineProps<{
label?: string
}>(), {
label: 'Switch to Classic UI',
})
function switchToClassic(): void {
// Set cookie so Caddy routes next request to Streamlit
document.cookie = 'prgn_ui=streamlit; path=/; SameSite=Lax'
// Append ?prgn_switch=streamlit so Streamlit's sync_ui_cookie()
// updates user.yaml to match — cookie alone can't be read server-side
const url = new URL(window.location.href)
url.searchParams.set('prgn_switch', 'streamlit')
window.location.href = url.toString()
}
</script>
<style scoped>
.classic-ui-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.9rem;
border-radius: 0.5rem;
border: 1px solid var(--color-border, #444);
background: transparent;
color: var(--color-text-muted, #aaa);
font-size: 0.8rem;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.classic-ui-btn:hover {
color: var(--color-text, #eee);
border-color: var(--color-text, #eee);
}
</style>