SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

feat(app): add a Back to workspace button to the editor header

Browse source 
Once a document is opened from the storage workspace there is no way back
to it: the only in-app route is Settings -> Cloud storage -> Open workspace,
and the desktop shell has no browser back at all.

Add an explicit button in the shared header row (rendered on both web and
Tauri, unlike the File/Edit menubar below it) that routes to /storage. It is
a fixed destination rather than history navigation, so it behaves the same
on both platforms.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Rob Coenen 2026-07-31 01:28:23 -04:00 committed by Danila Poyarkov
parent 9be70db9f9
commit d85e2ec5e1
2 changed files with 21 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/vue/src/i18n/messages/dialogs.ts
View file

@ -165,6 +165,7 @@ export const dialogMessageDefaults = {
settingsStorage: 'Cloud storage',
storageWorkspace: 'Storage workspace',
openStorageWorkspace: 'Open workspace',
backToStorageWorkspace: 'Back to workspace',
newStoredDocument: 'New document',
emptyStorageWorkspace: 'No stored documents yet.',
loadingDocuments: 'Loading documents…',

20
src/components/Shell/AppMenu.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import { watch } from 'vue'
import { useRouter } from 'vue-router'
import { templateRef } from '@vueuse/core'
import {
@ -17,6 +18,7 @@ import {
MenubarTrigger
} from 'reka-ui'
import IconArrowLeft from '~icons/lucide/arrow-left'
import IconChevronRight from '~icons/lucide/chevron-right'
import { vTestId, useI18n } from '@open-pencil/vue'
@ -42,6 +44,15 @@ import { useEditorStore } from '@/app/editor/active-store'
import { openSettingsDialog } from '@/app/settings/dialog'
const store = useEditorStore()
const router = useRouter()
// The workspace is the app's top level. Browser back is history-dependent (and
// absent in the desktop shell), so the way back has to be an explicit
// destination, present on both platforms. Shown unconditionally: StorageView
// prompts for setup itself when storage isn't configured yet.
async function backToWorkspace(): Promise<void> {
await router.push('/storage')
}
const { rename, editingName, startRename, commitRename } = useDocumentNameRename(store)
const nameInput = templateRef<HTMLInputElement>('nameInput')
@ -60,6 +71,15 @@ const subMenuCls = useMenuUI({ content: 'min-w-44' })
<template>
<div class="shrink-0 border-b border-border">
<button
type="button"
data-test-id="app-back-to-workspace"
class="flex w-full cursor-pointer items-center gap-1.5 border-b border-border px-2 py-1.5 text-xs text-muted transition-colors hover:bg-hover hover:text-surface"
@click="backToWorkspace"
>
<IconArrowLeft class="size-3.5 shrink-0" />
<span class="truncate">{{ dialogs.backToStorageWorkspace }}</span>
</button>
<div class="flex items-center gap-2 px-2 py-1.5">
<img data-test-id="app-logo" src="/favicon-32.png" class="size-4" alt="OpenPencil" />
<input