From cab9a1ec969cfee6756a72e6e324fcc07d0fe5ae Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 24 Jan 2024 22:43:10 -0500
Subject: [PATCH] Misc fixes ported from #5814

---
 app/components/CommandBar.tsx |  1 +
 app/components/Input.tsx      | 12 +++++++-----
 app/components/List/Item.tsx  |  1 +
 app/components/Switch.tsx     |  9 ++++++++-
 app/models/base/Model.ts      |  9 +++++++--
 5 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/components/CommandBar.tsx b/app/components/CommandBar.tsx
index e87134edd..236f38f2f 100644
--- a/app/components/CommandBar.tsx
+++ b/app/components/CommandBar.tsx
@@ -70,6 +70,7 @@ const SearchInput = styled(KBarSearch)`
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
+    opacity: 1;
   }
 `;
 
diff --git a/app/components/Input.tsx b/app/components/Input.tsx
index 2cd3264f7..be1bf2c4c 100644
--- a/app/components/Input.tsx
+++ b/app/components/Input.tsx
@@ -8,7 +8,7 @@ import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 import { undraggableOnDesktop } from "~/styles";
 
-const RealTextarea = styled.textarea<{ hasIcon?: boolean }>`
+export const NativeTextarea = styled.textarea<{ hasIcon?: boolean }>`
   border: 0;
   flex: 1;
   padding: 8px 12px 8px ${(props) => (props.hasIcon ? "8px" : "12px")};
@@ -19,10 +19,11 @@ const RealTextarea = styled.textarea<{ hasIcon?: boolean }>`
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
+    opacity: 1;
   }
 `;
 
-const RealInput = styled.input<{ hasIcon?: boolean }>`
+export const NativeInput = styled.input<{ hasIcon?: boolean }>`
   border: 0;
   flex: 1;
   padding: 8px 12px 8px ${(props) => (props.hasIcon ? "8px" : "12px")};
@@ -39,6 +40,7 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
+    opacity: 1;
   }
 
   &:-webkit-autofill,
@@ -56,7 +58,7 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
   `};
 `;
 
-const Wrapper = styled.div<{
+export const Wrapper = styled.div<{
   flex?: boolean;
   short?: boolean;
   minHeight?: number;
@@ -205,7 +207,7 @@ function Input(
         <Outline focused={focused} margin={margin}>
           {icon && <IconWrapper>{icon}</IconWrapper>}
           {type === "textarea" ? (
-            <RealTextarea
+            <NativeTextarea
               ref={mergeRefs([
                 internalRef,
                 ref as React.RefObject<HTMLTextAreaElement>,
@@ -217,7 +219,7 @@ function Input(
               {...rest}
             />
           ) : (
-            <RealInput
+            <NativeInput
               ref={mergeRefs([
                 internalRef,
                 ref as React.RefObject<HTMLInputElement>,
diff --git a/app/components/List/Item.tsx b/app/components/List/Item.tsx
index e66e42d6f..081b252dc 100644
--- a/app/components/List/Item.tsx
+++ b/app/components/List/Item.tsx
@@ -78,6 +78,7 @@ const Wrapper = styled.a<{
 }>`
   display: flex;
   padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
+  min-height: 32px;
   margin: ${(props) =>
     props.$border === false ? (props.$small ? "8px 0" : "16px 0") : 0};
   border-bottom: 1px solid
diff --git a/app/components/Switch.tsx b/app/components/Switch.tsx
index 8dffea9dd..403d50955 100644
--- a/app/components/Switch.tsx
+++ b/app/components/Switch.tsx
@@ -64,7 +64,14 @@ function Switch({
           <InlineLabelText>{label}</InlineLabelText>
         </Label>
         {note && (
-          <Text type="secondary" size="small">
+          <Text
+            type="secondary"
+            size="small"
+            style={{
+              paddingRight: labelPosition === "left" ? width : 0,
+              paddingLeft: labelPosition === "right" ? width : 0,
+            }}
+          >
             {note}
           </Text>
         )}
diff --git a/app/models/base/Model.ts b/app/models/base/Model.ts
index f3d127fb6..bf4b5ec1a 100644
--- a/app/models/base/Model.ts
+++ b/app/models/base/Model.ts
@@ -44,6 +44,7 @@ export default abstract class Model {
     if (!relations) {
       return;
     }
+    // this is to ensure that multiple loads don’t happen in parallel
     if (this.loadingRelations) {
       return this.loadingRelations;
     }
@@ -64,8 +65,12 @@ export default abstract class Model {
       promises.push(this.store.fetch(this.id, { force: true }));
     }
 
-    this.loadingRelations = Promise.all(promises);
-    return await this.loadingRelations;
+    try {
+      this.loadingRelations = Promise.all(promises);
+      return await this.loadingRelations;
+    } finally {
+      this.loadingRelations = undefined;
+    }
   }
 
   /**