bug-fixes

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "imwald",
-  "version": "22.5.1",
+  "version": "22.5.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "imwald",
-      "version": "22.5.1",
+      "version": "22.5.2",
       "license": "MIT",
       "dependencies": {
         "@asciidoctor/core": "^3.0.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "imwald",
-  "version": "22.5.1",
+  "version": "22.5.2",
   "description": "Imwald — a user-friendly Nostr client focused on relay feed browsing, publications, and relay discovery",
   "private": true,
   "type": "module",

src/components/ConnectedRelays/ActiveRelaysTitlebarButton.tsx

@@ -1,4 +1,4 @@
-import { useSecondaryPage } from '@/PageManager'
+import { useSmartRelayNavigation } from '@/PageManager'
 import { Button } from '@/components/ui/button'
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerOverlay } from '@/components/ui/drawer'
 import {
@@ -42,7 +42,7 @@ function rowTitle(
 export function ActiveRelaysTitlebarButton() {
   const { t } = useTranslation()
   const { isSmallScreen } = useScreenSize()
-  const { push } = useSecondaryPage()
+  const { navigateToRelay } = useSmartRelayNavigation()
   const { rows, connectedCount } = useRelayConnectionRows()
   const [drawerOpen, setDrawerOpen] = useState(false)
 
@@ -94,7 +94,7 @@ export function ActiveRelaysTitlebarButton() {
                   title={rowTitle(url, connected, sessionStriked, t)}
                   onClick={() => {
                     setDrawerOpen(false)
-                    setTimeout(() => push(toRelay(url)), 50)
+                    setTimeout(() => navigateToRelay(toRelay(url)), 50)
                   }}
                 >
                   <RelayIcon url={url} />
@@ -118,7 +118,7 @@ export function ActiveRelaysTitlebarButton() {
           <DropdownMenuItem
             key={url}
             title={rowTitle(url, connected, sessionStriked, t)}
-            onClick={() => push(toRelay(url))}
+            onClick={() => navigateToRelay(toRelay(url))}
             className={cn('min-w-52 gap-2', rowClass(connected, sessionStriked))}
           >
             <RelayIcon url={url} />

src/components/ConnectedRelays/ConnectedRelaysSidebarStrip.tsx

@@ -1,4 +1,4 @@
-import { useSecondaryPage } from '@/PageManager'
+import { useSmartRelayNavigation } from '@/PageManager'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -42,7 +42,7 @@ function rowTitle(
  */
 export function ConnectedRelaysSidebarStrip({ className }: { className?: string }) {
   const { t } = useTranslation()
-  const { push } = useSecondaryPage()
+  const { navigateToRelay } = useSmartRelayNavigation()
   const { rows } = useRelayConnectionRows()
   const shown = rows.slice(0, MAX_ICONS)
   const overflowRows = rows.slice(MAX_ICONS)
@@ -64,13 +64,21 @@ export function ConnectedRelaysSidebarStrip({ className }: { className?: string
       </p>
       <div className="flex flex-wrap justify-center gap-1 xl:justify-start">
         {shown.map(({ url, connected, sessionStriked }) => (
-          <span
+          <Button
             key={url}
+            type="button"
+            variant="ghost"
+            size="sm"
+            className={cn(
+              'h-5 w-5 min-h-5 min-w-5 shrink-0 rounded-full p-0 hover:bg-muted/80',
+              rowMuted(connected, sessionStriked) && 'opacity-40 grayscale'
+            )}
             title={rowTitle(url, connected, sessionStriked, t)}
-            className={cn('inline-flex', rowMuted(connected, sessionStriked) && 'opacity-40 grayscale')}
+            aria-label={rowTitle(url, connected, sessionStriked, t)}
+            onClick={() => navigateToRelay(toRelay(url))}
           >
             <RelayIcon url={url} className="h-5 w-5" iconSize={11} />
-          </span>
+          </Button>
         ))}
         {overflow > 0 ? (
           <DropdownMenu>
@@ -96,7 +104,7 @@ export function ConnectedRelaysSidebarStrip({ className }: { className?: string
                   key={url}
                   className={cn('min-w-0 gap-2', rowMenuClass(connected, sessionStriked))}
                   title={rowTitle(url, connected, sessionStriked, t)}
-                  onClick={() => push(toRelay(url))}
+                  onClick={() => navigateToRelay(toRelay(url))}
                 >
                   <RelayIcon url={url} className="h-5 w-5 shrink-0" iconSize={11} />
                   <span className="truncate">{simplifyUrl(url)}</span>

src/components/YoutubeEmbeddedPlayer/index.tsx

@@ -33,8 +33,15 @@ export default function YoutubeEmbeddedPlayer({
   }, [autoLoadMedia])
 
   const showEmbed = mustLoad || autoLoadMedia || userClickedLoad
-  /** Packaged app uses `file:`; YT’s JS API often errors there; a plain embed iframe works. */
-  const useNativeEmbed = isImwaldElectron()
+  /**
+   * Electron + dev server (http/https): use the same YT Iframe API as the browser — plain `/embed/` iframes often
+   * show error 150 (player configuration) in Electron while the API path works.
+   * Packaged app loads `file:`; keep a plain iframe there and pass a stable `origin` so YouTube accepts the embed.
+   */
+  const useNativeEmbed =
+    isImwaldElectron() &&
+    typeof window !== 'undefined' &&
+    window.location.protocol === 'file:'
 
   const posterUrl = useMemo(
     () => (videoId ? `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg` : undefined),
@@ -119,7 +126,14 @@ export default function YoutubeEmbeddedPlayer({
   }
 
   if (useNativeEmbed && videoId) {
-    const embedSrc = `https://www.youtube.com/embed/${encodeURIComponent(videoId)}?playsinline=1&rel=0`
+    // `file:` has no usable origin for YT; use the canonical web app origin (matches typical production URL).
+    const embedParams = new URLSearchParams({
+      playsinline: '1',
+      rel: '0',
+      enablejsapi: '1',
+      origin: 'https://jumble.imwald.eu'
+    })
+    const embedSrc = `https://www.youtube.com/embed/${encodeURIComponent(videoId)}?${embedParams}`
     return (
       <div
         className={cn(

src/layouts/SecondaryPageLayout/index.tsx

@@ -1,4 +1,3 @@
-import { ImwaldBrandBar } from '@/assets/Logo'
 import { ActiveRelaysTitlebarButton } from '@/components/ConnectedRelays/ActiveRelaysTitlebarButton'
 import ScrollToTopButton from '@/components/ScrollToTopButton'
 import { ReadOnlySessionIndicator } from '@/components/ReadOnlySessionIndicator'
@@ -93,20 +92,13 @@ const SecondaryPageLayout = forwardRef(
             }}
           >
             {title && (
-              <>
-                <div className="flex justify-center py-1 border-b">
-                  <span className="text-green-600 dark:text-green-500 font-semibold text-sm">
-                    Imwald
-                  </span>
-                </div>
-                <SecondaryPageTitlebar
-                  title={title}
-                  controls={controls}
-                  hideBackButton={hideBackButton}
-                  hideBottomBorder={hideTitlebarBottomBorder}
-                  titlebar={titlebar}
-                />
-              </>
+              <SecondaryPageTitlebar
+                title={title}
+                controls={controls}
+                hideBackButton={hideBackButton}
+                hideBottomBorder={hideTitlebarBottomBorder}
+                titlebar={titlebar}
+              />
             )}
             {children}
           </div>
@@ -119,16 +111,13 @@ const SecondaryPageLayout = forwardRef(
       <DeepBrowsingProvider active={currentIndex === index} scrollAreaRef={scrollAreaRef}>
         <div className="flex h-full min-h-0 min-w-0 flex-col">
           {title && (
-            <>
-              <ImwaldBrandBar />
-              <SecondaryPageTitlebar
-                title={title}
-                controls={controls}
-                hideBackButton={hideBackButton}
-                hideBottomBorder={hideTitlebarBottomBorder}
-                titlebar={titlebar}
-              />
-            </>
+            <SecondaryPageTitlebar
+              title={title}
+              controls={controls}
+              hideBackButton={hideBackButton}
+              hideBottomBorder={hideTitlebarBottomBorder}
+              titlebar={titlebar}
+            />
           )}
           <div
             ref={scrollAreaRef}