Walltaker support

README.md

@@ -43,7 +43,9 @@ yarn
 yarn build
 yarn preview
 ```
+
 4. open one of the URLs listed in your browser
+
 ### Social
 
 - We have an [e6 forum thread](https://e621.net/forum_topics/23796). We'd love to hear your feedback.

src/e621/E621Credentials.tsx

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import { E621Service } from './E621Service';
 import { useCallback, useMemo, useState } from 'react';
 import {
+  Button,
   SettingsInfo,
   SettingsLabel,
   Space,
@@ -30,21 +31,6 @@ const StyledE621SaveCredentials = styled.div`
   align-items: center;
 `;
 
-const StyledE621SaveCredentialsButton = styled.button`
-  background: var(--button-background);
-  color: var(--button-color);
-  border-radius: var(--border-radius);
-  padding: 4px 8px;
-  transition:
-    background 0.2s,
-    opacity 0.2s;
-  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
-  &:hover {
-    background: var(--primary);
-  }
-  opacity: ${props => (props.disabled ? 0.5 : 1)};
-`;
-
 export const E621CredentialsInput = ({
   service,
   initialValue,
@@ -85,6 +71,7 @@ export const E621CredentialsInput = ({
       <Space size='small' />
       <SettingsLabel>Username</SettingsLabel>
       <TextInput
+        name='e621-username'
         style={{ gridColumn: '2 / -1' }}
         value={input?.username}
         onChange={username =>
@@ -100,6 +87,7 @@ export const E621CredentialsInput = ({
       <Space size='small' />
       <SettingsLabel>API Key</SettingsLabel>
       <TextInput
+        name='e621-api-key'
         style={{ gridColumn: '2 / -1' }}
         value={input?.apiKey}
         onChange={apiKey =>
@@ -117,12 +105,12 @@ export const E621CredentialsInput = ({
       <StyledE621SaveCredentials>
         {loading && <Spinner />}
         <Space size='small' />
-        <StyledE621SaveCredentialsButton
+        <Button
           onClick={!loading ? onSave : undefined}
           disabled={!hasData || locked}
         >
           Save
-        </StyledE621SaveCredentialsButton>
+        </Button>
       </StyledE621SaveCredentials>
     </StyledE621CredentialsInput>
   );

src/e621/E621Search.tsx

@@ -94,7 +94,7 @@ export const E621Search = () => {
 
   return (
     <StyledE621Search>
-      <SettingsDescription>Add images from e621</SettingsDescription>
+      <SettingsDescription>Add images from e621's search</SettingsDescription>
       <SettingsLabel htmlFor='tags'>Tags</SettingsLabel>
       <TextInput
         id='tags'

src/home/components/index.ts

@@ -1,5 +1,6 @@
 export * from './AgeWarning';
 export * from './AppTitle';
+export * from '../../common';
 export * from './Instructions';
 export * from './Introduction';
 export * from './ReleaseNotes';

src/index.tsx

@@ -5,18 +5,21 @@ import './index.css';
 import { SettingsProvider, ImageProvider } from './settings';
 import { E621Provider } from './e621';
 import { VibratorProvider } from './utils';
-import { LocalImageProvider } from './local/LocalProvider.tsx';
+import { LocalImageProvider } from './local';
+import { WalltakerProvider } from './walltaker';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <SettingsProvider>
       <ImageProvider>
         <LocalImageProvider>
-          <VibratorProvider>
-            <E621Provider>
-              <App />
-            </E621Provider>
-          </VibratorProvider>
+          <WalltakerProvider>
+            <VibratorProvider>
+              <E621Provider>
+                <App />
+              </E621Provider>
+            </VibratorProvider>
+          </WalltakerProvider>
         </LocalImageProvider>
       </ImageProvider>
     </SettingsProvider>

src/local/LocalImport.tsx

@@ -86,7 +86,9 @@ export const LocalImport = () => {
 
   return (
     <StyledLocalImport>
-      <SettingsDescription>Add images from your device</SettingsDescription>
+      <SettingsDescription>
+        Add images from your device storage
+      </SettingsDescription>
       <Space size='medium' />
       <input
         type='file'

src/settings/components/ServiceSettings.tsx

@@ -1,9 +1,10 @@
 import styled from 'styled-components';
-import { SettingsTile, TabBar } from '../../common';
+import { SettingsTile, Surrounded, TabBar } from '../../common';
 import { E621Search } from '../../e621';
 import { useState } from 'react';
-import { WalltakerSearch } from '../../walltaker';
+
 import { LocalImport } from '../../local';
+import { WalltakerSearch, WalltakerOnline } from '../../walltaker';
 
 const tabs: Record<string, React.ReactNode> = {
   e621: <E621Search />,
@@ -29,7 +30,14 @@ export const ServiceSettings = () => {
         <TabBar
           tabs={[
             { id: 'e621', content: 'e621' },
-            // { id: 'walltaker', content: 'Walltaker' },
+            {
+              id: 'walltaker',
+              content: (
+                <Surrounded trailing={<WalltakerOnline />}>
+                  Walltaker
+                </Surrounded>
+              ),
+            },
             { id: 'local', content: 'Device' },
           ]}
           current={activeTab}

src/settings/components/index.ts

@@ -9,4 +9,3 @@ export * from './PlayerSettings';
 export * from './ServiceSettings';
 export * from './TradeSettings';
 export * from './VibratorSettings';
-export * from './WalltakerSettings';

src/types/index.ts

@@ -3,3 +3,4 @@ export * from './event';
 export * from './gender';
 export * from './hypno';
 export * from './image';
+export * from './walltaker';

src/types/walltaker.ts

@@ -0,0 +1,4 @@
+export interface WalltakerConfig {
+  enabled: boolean;
+  id: number | null;
+}

src/utils/state.tsx

@@ -14,6 +14,8 @@ interface StateContextType<T> {
   setData: React.Dispatch<React.SetStateAction<T>>;
 }
 
+export type StateAndSetter<T> = [T, React.Dispatch<React.SetStateAction<T>>];
+
 export function createStateProvider<T>({
   defaultData: globalDefaultData,
 }: StateProviderOptions<T>) {
@@ -48,7 +50,7 @@ export function createStateProvider<T>({
     );
   };
 
-  const useProvider = (): [T, React.Dispatch<React.SetStateAction<T>>] => {
+  const useProvider = (): StateAndSetter<T> => {
     const context = useContext(StateContext);
     if (!context) {
       throw new Error('useProvider must be used within its Provider');

src/walltaker/WalltakerCredentials.tsx

@@ -0,0 +1,104 @@
+import styled from 'styled-components';
+import { useCallback, useMemo, useState } from 'react';
+import { Button, SettingsLabel, Space, Spinner, TextInput } from '../common';
+import { WalltakerService } from './WalltakerService';
+import { WalltakerCredentials } from './WalltakerProvider';
+
+export interface WalltakerCredentialsInputProps {
+  service: WalltakerService;
+  initialValue?: Partial<WalltakerCredentials>;
+  onSaved?: (credentials: WalltakerCredentials) => void;
+  disabled?: boolean;
+}
+
+const StyledE621CredentialsInput = styled.div`
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+`;
+
+const StyledE621SaveCredentials = styled.div`
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`;
+
+export const WalltakerCredentialsInput = ({
+  service,
+  initialValue,
+  onSaved,
+  disabled,
+}: WalltakerCredentialsInputProps) => {
+  const [input, setInput] = useState<Partial<WalltakerCredentials>>({
+    ...initialValue,
+    username: '',
+    apiKey: '',
+  });
+  const [loading, setLoading] = useState(false);
+
+  const onSave = useCallback(async () => {
+    const credentials = input as WalltakerCredentials;
+    setLoading(true);
+    const valid = await service.testCredentials(credentials);
+    if (valid) {
+      onSaved?.(credentials);
+    }
+  }, [input, onSaved, service]);
+
+  const hasData = useMemo(
+    () => input?.username && input?.apiKey,
+    [input?.username, input?.apiKey]
+  );
+
+  const locked = useMemo(() => loading || disabled, [loading, disabled]);
+
+  return (
+    <StyledE621CredentialsInput>
+      <Space size='small' />
+      <SettingsLabel>Username</SettingsLabel>
+      <TextInput
+        name='walltaker-username'
+        style={{ gridColumn: '2 / -1' }}
+        value={input?.username}
+        onChange={username =>
+          setInput({
+            ...input,
+            username,
+          })
+        }
+        placeholder='Username'
+        autoComplete='username'
+        disabled={locked}
+      />
+      <Space size='small' />
+      <SettingsLabel>API Key</SettingsLabel>
+      <TextInput
+        name='walltaker-api-key'
+        style={{ gridColumn: '2 / -1' }}
+        value={input?.apiKey}
+        onChange={apiKey =>
+          setInput({
+            ...input,
+            apiKey,
+          })
+        }
+        placeholder='API Key'
+        type='password'
+        autoComplete='current-password'
+        disabled={locked}
+      />
+      <Space size='small' />
+      <StyledE621SaveCredentials>
+        {loading && <Spinner />}
+        <Space size='small' />
+        <Button
+          onClick={!loading ? onSave : undefined}
+          disabled={!hasData || locked}
+        >
+          Save
+        </Button>
+      </StyledE621SaveCredentials>
+    </StyledE621CredentialsInput>
+  );
+};

src/walltaker/WalltakerOnline.tsx

@@ -0,0 +1,54 @@
+import styled, { keyframes } from 'styled-components';
+import { useWalltaker } from './WalltakerProvider';
+
+const StyledOnlineDotContainer = styled.div`
+  display: flex;
+  height: 1rem;
+  position: relative;
+`;
+
+const StyledOnlineDot = styled.div<{
+  $online?: boolean;
+}>`
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: ${({ $online }) => ($online ? '#30AA65' : 'transparent')};
+  border: ${({ $online }) => ($online ? 'transparent' : '2px solid grey')};
+`;
+
+const pulse = keyframes`
+  0% {
+    transform: scale(1);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+`;
+
+const PulseAnimation = styled.div`
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: #30aa65;
+  transform: translate(-50%, -50%);
+  animation: ${pulse} 2s infinite ease-out;
+`;
+
+export const WalltakerOnline = () => {
+  const {
+    data: { connected },
+  } = useWalltaker();
+
+  return (
+    <StyledOnlineDotContainer>
+      <StyledOnlineDot $online={connected} />
+      {connected && <PulseAnimation />}
+    </StyledOnlineDotContainer>
+  );
+};