sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-27 15:17:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

hide version with log

Browse source
This commit is contained in:
Peter Steinberger 2025-06-25 04:32:14 +02:00
parent ca4ebeba15
commit 62fd78b82d
2 changed files with 57 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/src/client/app.ts
View file

@ -1242,10 +1242,16 @@ export class VibeTunnelApp extends LitElement {
></ssh-key-manager> ></ssh-key-manager>
<!-- Version and logs link in bottom right --> <!-- Version and logs link in bottom right -->
<div class="fixed bottom-4 right-4 text-dark-text-muted text-xs font-mono z-20"> ${
${this.showLogLink ? html`<a href="/logs" class="hover:text-dark-text transition-colors">Logs</a>` : ''} this.showLogLink
<span class="${this.showLogLink ? 'ml-2' : ''}">v${VERSION}</span> ? html`
</div> <div class="fixed bottom-4 right-4 text-dark-text-muted text-xs font-mono z-20">
<a href="/logs" class="hover:text-dark-text transition-colors">Logs</a>
<span class="ml-2">v${VERSION}</span>
</div>
`
: ''
}
`; `;
} }
} }

73
web/src/client/components/app-settings.ts
View file

@ -1,6 +1,7 @@
import { html, LitElement } from 'lit'; import { html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js'; import { customElement, property, state } from 'lit/decorators.js';
import { createLogger } from '../utils/logger.js'; import { createLogger } from '../utils/logger.js';
import { responsiveObserver } from '../utils/responsive-utils.js';
const logger = createLogger('app-settings'); const logger = createLogger('app-settings');
@ -24,10 +25,24 @@ export class AppSettings extends LitElement {
@property({ type: Boolean }) open = false; @property({ type: Boolean }) open = false;
@state() private preferences: AppPreferences = DEFAULT_PREFERENCES; @state() private preferences: AppPreferences = DEFAULT_PREFERENCES;
@state() private isMobile = false;
private unsubscribeResponsive?: () => void;
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
this.loadPreferences(); this.loadPreferences();
// Subscribe to responsive changes
this.unsubscribeResponsive = responsiveObserver.subscribe((state) => {
this.isMobile = state.isMobile;
});
}
disconnectedCallback() {
super.disconnectedCallback();
if (this.unsubscribeResponsive) {
this.unsubscribeResponsive();
}
} }
private loadPreferences() { private loadPreferences() {
@ -109,35 +124,41 @@ export class AppSettings extends LitElement {
<!-- Content --> <!-- Content -->
<div class="p-4"> <div class="p-4">
<!-- Direct Keyboard Setting --> <!-- Direct Keyboard Setting (Mobile Only) -->
<div class="flex items-center justify-between py-3"> ${
<div class="flex-1 pr-4"> this.isMobile
<label class="text-dark-text text-sm font-medium" for="direct-keyboard-toggle"> ? html`
Use direct keyboard <div class="flex items-center justify-between py-3">
</label> <div class="flex-1 pr-4">
<p class="text-dark-text-muted text-xs mt-1"> <label class="text-dark-text text-sm font-medium" for="direct-keyboard-toggle">
Capture keyboard input directly without showing a text field (desktop-like experience) Use direct keyboard
</p> </label>
</div> <p class="text-dark-text-muted text-xs mt-1">
<button Capture keyboard input directly without showing a text field (desktop-like experience)
id="direct-keyboard-toggle" </p>
role="switch" </div>
aria-checked="${this.preferences.useDirectKeyboard}" <button
@click=${this.handleToggleDirectKeyboard} id="direct-keyboard-toggle"
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-accent-green focus:ring-offset-2 focus:ring-offset-dark-bg ${ role="switch"
this.preferences.useDirectKeyboard ? 'bg-accent-green' : 'bg-dark-border' aria-checked="${this.preferences.useDirectKeyboard}"
}" @click=${this.handleToggleDirectKeyboard}
> class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-accent-green focus:ring-offset-2 focus:ring-offset-dark-bg ${
<span this.preferences.useDirectKeyboard ? 'bg-accent-green' : 'bg-dark-border'
class="inline-block h-5 w-5 transform rounded-full bg-white transition-transform ${
this.preferences.useDirectKeyboard ? 'translate-x-5' : 'translate-x-0.5'
}" }"
></span> >
</button> <span
</div> class="inline-block h-5 w-5 transform rounded-full bg-white transition-transform ${
this.preferences.useDirectKeyboard ? 'translate-x-5' : 'translate-x-0.5'
}"
></span>
</button>
</div>
`
: ''
}
<!-- Show Log Link Setting --> <!-- Show Log Link Setting -->
<div class="flex items-center justify-between py-3 border-t border-dark-border"> <div class="flex items-center justify-between py-3 ${this.isMobile ? 'border-t border-dark-border' : ''}">
<div class="flex-1 pr-4"> <div class="flex-1 pr-4">
<label class="text-dark-text text-sm font-medium" for="show-log-link-toggle"> <label class="text-dark-text text-sm font-medium" for="show-log-link-toggle">
Show log link Show log link