Flatpak warning banner

Author: nukeop

packages/i18n/src/locales/en_US.json

@@ -196,6 +196,10 @@
   "updater": {
     "updateAvailable": "Update available"
   },
+  "flatpak": {
+    "sandboxWarning": "You're running Nuclear in a Flatpak sandbox. Some features may not work correctly. If you experience issues, try the .deb or AppImage instead.",
+    "dismiss": "Got it"
+  },
   "settings": {
     "title": "Settings",
     "categories": {

packages/player/src-tauri/src/commands.rs

@@ -4,6 +4,11 @@ use std::path::{Path, PathBuf};
 use tauri::command;
 use zip::ZipArchive;
 
+#[command]
+pub fn is_flatpak() -> bool {
+    std::env::var("FLATPAK_ID").is_ok()
+}
+
 #[command]
 pub fn copy_dir_recursive(from: PathBuf, to: PathBuf) -> Result<(), String> {
     fn inner(from: &Path, to: &Path) -> Result<(), std::io::Error> {

packages/player/src-tauri/src/lib.rs

@@ -26,6 +26,7 @@ pub fn run() {
             stream_proxy::handle_stream_request(ctx.app_handle(), request, responder);
         })
         .invoke_handler(tauri::generate_handler![
+            commands::is_flatpak,
             commands::copy_dir_recursive,
             commands::extract_zip,
             commands::download_file,

packages/player/src/components/FlatpakWarningBanner.tsx

@@ -0,0 +1,53 @@
+import { FC, useEffect, useState } from 'react';
+
+import { useTranslation } from '@nuclearplayer/i18n';
+import { Button } from '@nuclearplayer/ui';
+
+import { isFlatpak } from '../services/tauri/commands';
+
+const DISMISSED_KEY = 'flatpak-warning-dismissed';
+
+export const FlatpakWarningBanner: FC = () => {
+  const { t } = useTranslation('flatpak');
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const wasDismissed = localStorage.getItem(DISMISSED_KEY) === 'true';
+    if (wasDismissed) {
+      return;
+    }
+
+    isFlatpak().then((result) => {
+      if (result) {
+        setVisible(true);
+      }
+    });
+  }, []);
+
+  const dismiss = () => {
+    localStorage.setItem(DISMISSED_KEY, 'true');
+    setVisible(false);
+  };
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div
+      data-testid="flatpak-warning-banner"
+      className="bg-accent-orange flex items-center justify-center gap-4 px-3 py-1 text-xs tracking-wide text-[color-mix(in_oklch,var(--accent-orange),black_50%)] uppercase"
+    >
+      <span>{t('sandboxWarning')}</span>
+      <Button
+        variant="ghost"
+        size="flexible"
+        onClick={dismiss}
+        data-testid="flatpak-warning-dismiss"
+        className="px-2 py-0.5"
+      >
+        {t('dismiss')}
+      </Button>
+    </div>
+  );
+};

packages/player/src/routes/__root.tsx

@@ -32,6 +32,7 @@ import {
 } from '../components/ConnectedQueuePanel';
 import { ConnectedTopBar } from '../components/ConnectedTopBar';
 import { DevTools } from '../components/DevTools';
+import { FlatpakWarningBanner } from '../components/FlatpakWarningBanner';
 import { SoundProvider } from '../components/SoundProvider';
 import { useLayoutStore } from '../stores/layoutStore';
 
@@ -48,7 +49,10 @@ const RootComponent = () => {
 
   return (
     <PlayerShell>
-      <ConnectedTopBar />
+      <div>
+        <FlatpakWarningBanner />
+        <ConnectedTopBar />
+      </div>
       <SoundProvider>
         <PlayerWorkspace>
           <PlayerWorkspace.LeftSidebar

packages/player/src/services/tauri/commands.ts

@@ -1,5 +1,9 @@
 import { invoke } from '@tauri-apps/api/core';
 
+export const isFlatpak = async (): Promise<boolean> => {
+  return invoke<boolean>('is_flatpak');
+};
+
 export const copyDirRecursive = async (
   from: string,
   to: string,

packages/ui/src/components/Button/Button.tsx

@@ -5,14 +5,15 @@ import { ComponentPropsWithoutRef, forwardRef } from 'react';
 import { cn } from '../../utils';
 
 const buttonVariants = cva(
-  'inline-flex cursor-pointer items-center rounded-md transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  'inline-flex cursor-pointer items-center rounded-md whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
         default:
           'text-foreground bg-primary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y border-2 hover:shadow-none',
         noShadow: 'text-foreground bg-primary border-border border-2',
         text: 'text-foreground bg-transparent',
+        ghost: 'border border-current bg-transparent hover:bg-black/10',
       },
       size: {
         default: 'h-10 px-4 py-2',