[Feature]: Visual hints

[thwbh]

Category

New Feature

Target Platform

Common (both platforms)

Feature Description

I'd like to add visual hints so the user understands what swipe gestures control the app.

Proposed Solution / Mockup

I found two approaches:

• localStorage in WebView
  Setting it up can look like so:

  // src/lib/stores/firstTime.svelte.ts
  const FIRST_TIME_KEY = 'librefit_first_time_hints_shown';

  export function useFirstTimeHints() {
    let hasSeenSwipeHint = $state(
      localStorage.getItem(`${FIRST_TIME_KEY}_swipe`) === 'true'
    );

    const markSwipeHintSeen = () => {
      localStorage.setItem(`${FIRST_TIME_KEY}_swipe`, 'true');
      hasSeenSwipeHint = true;
    };

    return {
      hasSeenSwipeHint,
      markSwipeHintSeen
    };
  }

Usage in a component:

 <script lang="ts">
    import { useFirstTimeHints } from '$lib/stores/firstTime.svelte';

    const hints = useFirstTimeHints();

    let showSwipeHint = $derived(!hints.hasSeenSwipeHint && entries.length > 1);

    const onSwipe = (direction: string) => {
      if (showSwipeHint) {
        hints.markSwipeHintSeen();
      }
    };
  </script>

 {#if showSwipeHint}
    <div class="absolute inset-0 pointer-events-none flex items-center justify-center"
         transition:fade={{ duration: 2000 }}>
      <div class="bg-base-100/90 px-4 py-2 rounded-full text-sm">
        ← Swipe to navigate →
      </div>
    </div>
  {/if}

• tauri store
  See: https://v2.tauri.app/plugin/store/

  import { Store } from '@tauri-apps/plugin-store';

  const store = new Store('settings.json');

  // Save
  await store.set('hints_shown', { swipe: true, longPress: true });

  // Load
  const hints = await store.get<{ swipe: boolean }>('hints_shown');

Benefits over localStorage:

• Type-safe
• Persists across app updates
• Works on mobile (iOS doesn't always persist localStorage)
• Can be encrypted

Problem Statement (Optional)

No response

Alternatives Considered (Optional)

No response

Additional Context (Optional)

No response