Move display option switches to the other side (It looks better, setting up for share dialog improvements)

app/components/Switch.tsx

@@ -6,19 +6,28 @@ import Text from "~/components/Text";
 import { undraggableOnDesktop } from "~/styles";
 
 interface Props extends React.HTMLAttributes<HTMLInputElement> {
+  /** Width of the switch. Defaults to 32. */
   width?: number;
+  /** Height of the switch. Defaults to 18 */
   height?: number;
+  /** An optional label for the switch */
   label?: string;
-  name?: string;
+  /** Whether the label should be positioned on left or right. Defaults to right */
+  labelPosition?: "left" | "right";
+  /** An optional note to display below the switch */
   note?: React.ReactNode;
+  /** Name of the input */
+  name?: string;
+  /** Whether the switch is checked */
   checked?: boolean;
+  /** Whether the switch is disabled */
   disabled?: boolean;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
 }
 
 function Switch({
   width = 32,
   height = 18,
+  labelPosition = "left",
   label,
   disabled,
   className,
@@ -45,7 +54,12 @@ function Switch({
   if (label) {
     return (
       <Wrapper>
-        <Label disabled={disabled} htmlFor={props.id} className={className}>
+        <Label
+          disabled={disabled}
+          htmlFor={props.id}
+          className={className}
+          $labelPosition={labelPosition}
+        >
           {component}
           <InlineLabelText>{label}</InlineLabelText>
         </Label>
@@ -68,12 +82,20 @@ const Wrapper = styled.div`
 
 const InlineLabelText = styled(LabelText)`
   padding-bottom: 0;
+  width: 100%;
 `;
 
-const Label = styled.label<{ disabled?: boolean }>`
+const Label = styled.label<{
+  disabled?: boolean;
+  $labelPosition: "left" | "right";
+}>`
   display: flex;
   align-items: center;
   user-select: none;
+  gap: 8px;
+
+  ${(props) =>
+    props.$labelPosition === "left" ? `flex-direction: row-reverse;` : ""}
   ${(props) => (props.disabled ? `opacity: 0.75;` : "")}
 `;
 
@@ -83,10 +105,6 @@ const Input = styled.label<{ width: number; height: number }>`
   width: ${(props) => props.width}px;
   height: ${(props) => props.height}px;
   flex-shrink: 0;
-
-  &:not(:last-child) {
-    margin-right: 8px;
-  }
 `;
 
 const Slider = styled.span<{ width: number; height: number }>`