Fixed an issue that would caused empty dashboard shortcuts to not hide properly. (#610)

src/components/menus/dashboard/shortcuts/buttons/ShortcutButtons.tsx

@@ -24,36 +24,60 @@ const ShortcutButton = ({ shortcut, ...props }: ShortcutButtonProps): JSX.Elemen
 };
 
 export const LeftShortcut1 = (): JSX.Element => {
+    if (!hasCommand(left.shortcut1)) {
+        return <box />;
+    }
+
     return (
         <ShortcutButton
             shortcut={left.shortcut1}
-            className={`dashboard-button top-button ${hasCommand(left.shortcut1) ? 'paired' : ''}`}
+            className={`dashboard-button top-button ${hasCommand(left.shortcut2) ? 'paired' : ''}`}
         />
     );
 };
 
 export const LeftShortcut2 = (): JSX.Element => {
+    if (!hasCommand(left.shortcut2)) {
+        return <box />;
+    }
+
     return <ShortcutButton shortcut={left.shortcut2} className={`dashboard-button`} />;
 };
 
 export const LeftShortcut3 = (): JSX.Element => {
+    if (!hasCommand(left.shortcut3)) {
+        return <box />;
+    }
+
     return (
         <ShortcutButton
             shortcut={left.shortcut3}
-            className={`dashboard-button top-button ${hasCommand(left.shortcut3) ? 'paired' : ''}`}
+            className={`dashboard-button top-button ${hasCommand(left.shortcut4) ? 'paired' : ''}`}
         />
     );
 };
 
 export const LeftShortcut4 = (): JSX.Element => {
+    if (!hasCommand(left.shortcut4)) {
+        return <box />;
+    }
+
     return <ShortcutButton shortcut={left.shortcut4} className={`dashboard-button `} />;
 };
 
 export const RightShortcut1 = (): JSX.Element => {
+    if (!hasCommand(right.shortcut1)) {
+        return <box />;
+    }
+
     return <ShortcutButton shortcut={right.shortcut1} className={`dashboard-button top-button paired`} />;
 };
 
 export const RightShortcut3 = (): JSX.Element => {
+    if (!hasCommand(right.shortcut3)) {
+        return <box />;
+    }
+
     return <ShortcutButton shortcut={right.shortcut3} className={`dashboard-button top-button paired`} />;
 };
 

src/components/menus/dashboard/shortcuts/sections/Column.tsx

@@ -1,9 +1,9 @@
 import { BindableChild } from 'astal/gtk3/astalify';
 
-export const LeftColumn = ({ visibleClass, children }: LeftColumnProps): JSX.Element => {
+export const LeftColumn = ({ isVisible, children }: LeftColumnProps): JSX.Element => {
     return (
-        <box className={`card-button-section-container ${visibleClass ? 'visible' : ''}`}>
+        <box className={`card-button-section-container ${isVisible ? 'visible' : ''}`}>
-            {visibleClass ? (
+            {isVisible ? (
                 <box vertical hexpand vexpand>
                     {children}
                 </box>
@@ -25,7 +25,7 @@ export const RightColumn = ({ children }: RightColumnProps): JSX.Element => {
 };
 
 interface LeftColumnProps {
-    visibleClass?: boolean;
+    isVisible?: boolean;
     children?: BindableChild | BindableChild[];
 }
 

src/components/menus/dashboard/shortcuts/sections/Section.tsx

@@ -57,7 +57,7 @@ export const LeftShortcuts = (): JSX.Element => {
 
                 return (
                     <box className={'container most-used dashboard-card'}>
-                        <LeftColumn visibleClass={isVisibleRight && isVisibleLeft}>
+                        <LeftColumn isVisible={isVisibleRight && isVisibleLeft}>
                             <LeftShortcut1 />
                             <LeftShortcut2 />
                         </LeftColumn>
@@ -78,7 +78,7 @@ export const RightShortcuts = (): JSX.Element => {
             {Variable.derive(rightBindings, () => {
                 return (
                     <box className={`container utilities dashboard-card ${!leftCardHidden.get() ? 'paired' : ''}`}>
-                        <LeftColumn visibleClass={!leftCardHidden.get()}>
+                        <LeftColumn isVisible={true}>
                             <RightShortcut1 />
                             <SettingsButton />
                         </LeftColumn>

src/components/osd/helpers.ts

@@ -8,6 +8,14 @@ const { enable, duration, active_monitor, monitor } = options.theme.osd;
 
 let count = 0;
 
+/*
+ * So the OSD doesn't show on startup for no reason
+ */
+let isStartingUp = true;
+timeout(3000, () => {
+    isStartingUp = false;
+});
+
 /**
  * Handles the reveal state of a Widget.Revealer.
  *
@@ -69,6 +77,10 @@ export const handleRevealWindow = (self: Widget.Window, property: 'revealChild'
  * @param property The property to check, either 'revealChild' or 'visible'.
  */
 export const handleReveal = (self: Widget.Revealer | Widget.Window, property: 'revealChild' | 'visible'): void => {
+    if (isStartingUp) {
+        return;
+    }
+
     if (self instanceof Widget.Revealer) {
         handleRevealRevealer(self, property);
     } else if (self instanceof Widget.Window) {