fix: add wayland instructions in flameshot builder

src/components/pages/Manage/Flameshot.tsx

@@ -1,3 +1,5 @@
+import { Code } from '@mantine/core';
+import Link from 'components/Link';
 import { GeneratorModal } from './GeneratorModal';
 
 export default function Flameshot({ user, open, setOpen }) {
@@ -49,9 +51,9 @@ export default function Flameshot({ user, open, setOpen }) {
       curl.push(`"${key}: ${value}"`);
     }
 
-    const shell = `#!/bin/bash
-flameshot gui -r > /tmp/ss.png;
-${curl.join(' ')} | jq -r '.files[0]' | tr -d '\n' | xsel -ib;
+    const shell = `#!/bin/bash${values.wlCompositorNotSupported ? '\nexport XDG_CURRENT_DESKTOP=sway\n' : ''}
+flameshot gui -p /tmp/ss.png;
+${curl.join(' ')} | jq -r '.files[0]' | tr -d '\\n' | ${values.wlCompatibility ? 'wl-copy' : 'xsel -ib'};
 `;
 
     const pseudoElement = document.createElement('a');
@@ -68,7 +70,23 @@ ${curl.join(' ')} | jq -r '.files[0]' | tr -d '\n' | xsel -ib;
       opened={open}
       onClose={() => setOpen(false)}
       title='Flameshot'
-      desc='To use this script, you need Flameshot, curl, jq, and xsel installed. This script is intended for use on Linux only.'
+      desc={
+        <>
+          To use this script, you need <Link href='https://flameshot.org'>Flameshot</Link>,{' '}
+          <Link href='https://curl.se/'>
+            <Code>curl</Code>
+          </Link>
+          ,{' '}
+          <Link href='https://github.com/stedolan/jq'>
+            <Code>jq</Code>
+          </Link>
+          , and{' '}
+          <Link href='https://github.com/kfish/xsel'>
+            <Code>xsel</Code>
+          </Link>{' '}
+          installed. This script is intended for use on Linux only.
+        </>
+      }
       onSubmit={onSubmit}
     />
   );

src/components/pages/Manage/GeneratorModal.tsx

@@ -1,6 +1,8 @@
-import { Button, Checkbox, Group, Modal, NumberInput, Select, Text, Title } from '@mantine/core';
+import { Box, Button, Checkbox, Code, Group, Modal, NumberInput, Select, Text, Title } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { DownloadIcon } from 'components/icons';
+import Link from 'components/Link';
+import MutedText from 'components/MutedText';
 
 export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) {
   const form = useForm({
@@ -9,12 +11,18 @@ export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) {
       imageCompression: 0,
       zeroWidthSpace: false,
       embed: false,
+      wlCompatibility: false,
+      wlCompositorNotSupported: false,
     },
   });
 
   return (
     <Modal opened={opened} onClose={onClose} title={<Title order={3}>{title}</Title>} size='lg'>
-      {other.desc && <Text mb='md'>{other.desc}</Text>}
+      {other.desc && (
+        <MutedText size='md' mb='md'>
+          {other.desc}
+        </MutedText>
+      )}
       <form onSubmit={form.onSubmit((values) => onSubmit(values))}>
         <Select
           label='Select file name format'
@@ -46,6 +54,51 @@ export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) {
           <Checkbox label='Embed' id='embed' {...form.getInputProps('embed', { type: 'checkbox' })} />
         </Group>
 
+        {title === 'Flameshot' && (
+          <>
+            <Box mt='md'>
+              <Text>Wayland</Text>
+              <MutedText size='sm'>
+                If using wayland, you can check the boxes below to your liking. This will require{' '}
+                <Link href='https://github.com/bugaevc/wl-clipboard'>
+                  <Code>wl-clipboard</Code>
+                </Link>{' '}
+                for the <Code>wl-copy</Code> command.
+              </MutedText>
+            </Box>
+
+            <Group mt='md'>
+              <Checkbox
+                label='Enable Wayland Compatibility'
+                description={
+                  <>
+                    Use <Code>wl-copy</Code> instead of <Code>xsel -ib</Code>
+                  </>
+                }
+                id='wlCompatibility'
+                {...form.getInputProps('wlCompatibility', { type: 'checkbox' })}
+              />
+
+              <Checkbox
+                label={
+                  <>
+                    Using a DE/compositor that <b>isn&apos;t</b> GNOME, KDE or Sway
+                  </>
+                }
+                description={
+                  <>
+                    If using a compositor such as{' '}
+                    <Link href='https://github.com/hyprwm/hyprland'>Hyprland</Link>, this option will set the{' '}
+                    <Code>XDG_CURRENT_DESKTOP=sway</Code> to workaround Flameshot&apos;s errors
+                  </>
+                }
+                id='wlCompositorNotSupported'
+                {...form.getInputProps('wlCompositorNotSupported', { type: 'checkbox' })}
+              />
+            </Group>
+          </>
+        )}
+
         <Group grow>
           <Button mt='md' onClick={form.reset}>
             Reset