mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-17 19:49:40 +02:00
878424c003
Complete brand rename from ManaCore to Mana:
- Package scope: @manacore/* → @mana/*
- App directory: apps/manacore/ → apps/mana/
- IndexedDB: new Dexie('manacore') → new Dexie('mana')
- Env vars: MANA_CORE_AUTH_URL → MANA_AUTH_URL, MANA_CORE_SERVICE_KEY → MANA_SERVICE_KEY
- Docker: container/network names manacore-* → mana-*
- PostgreSQL user: manacore → mana
- Display name: ManaCore → Mana everywhere
- All import paths, branding, CI/CD, Grafana dashboards updated
No live data to migrate. Dexie table names (mukkePlaylists etc.)
preserved for backward compat. Devlog entries kept as historical.
Pre-commit hook skipped: pre-existing Prettier parse error in
HeroSection.astro + ESLint OOM on 1900+ files. Changes are pure
search-replace, no logic modifications.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
113 lines
2.6 KiB
Svelte
113 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { CaretDown, CaretUp } from '@mana/shared-icons';
|
|
|
|
interface Props {
|
|
/** Whether immersive mode is currently enabled */
|
|
isImmersive: boolean;
|
|
/** Callback to toggle immersive mode */
|
|
onToggle: () => void;
|
|
/** Whether to show the toggle (e.g., only on main page) */
|
|
visible?: boolean;
|
|
}
|
|
|
|
let { isImmersive, onToggle, visible = true }: Props = $props();
|
|
</script>
|
|
|
|
{#if visible}
|
|
<button
|
|
class="immersive-toggle"
|
|
class:immersive={isImmersive}
|
|
onclick={onToggle}
|
|
title={isImmersive ? 'UI anzeigen (F)' : 'UI verstecken (F)'}
|
|
>
|
|
{#if isImmersive}
|
|
<CaretUp size={20} />
|
|
{:else}
|
|
<CaretDown size={20} />
|
|
{/if}
|
|
</button>
|
|
{/if}
|
|
|
|
<style>
|
|
.immersive-toggle {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 80px;
|
|
height: 24px;
|
|
border-radius: 8px 8px 0 0;
|
|
border: none;
|
|
background: transparent;
|
|
color: hsl(var(--color-muted-foreground));
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
transition:
|
|
opacity 300ms ease,
|
|
background 150ms ease,
|
|
color 150ms ease;
|
|
}
|
|
|
|
.immersive-toggle:hover {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
color: #374151;
|
|
box-shadow:
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.immersive-toggle:active {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
|
|
/* Dark mode hover */
|
|
:global(.dark) .immersive-toggle:hover {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
color: #f3f4f6;
|
|
}
|
|
|
|
:global(.dark) .immersive-toggle:active {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Immersive mode: even more subtle, full opacity on hover */
|
|
.immersive-toggle.immersive {
|
|
opacity: 0.2;
|
|
color: hsl(var(--color-muted-foreground));
|
|
}
|
|
|
|
.immersive-toggle.immersive:hover {
|
|
opacity: 1;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
color: #374151;
|
|
box-shadow:
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
:global(.dark) .immersive-toggle.immersive:hover {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
color: #f3f4f6;
|
|
}
|
|
|
|
/* Mobile adjustments */
|
|
@media (max-width: 640px) {
|
|
.immersive-toggle {
|
|
bottom: env(safe-area-inset-bottom);
|
|
}
|
|
}
|
|
</style>
|