src-tauri/src/cmd/mod.rs

@@ -6,7 +6,6 @@ use btleplug::{
 };
 pub use state::{CentralState, ChannelState, PeripheralItem};
 use tauri::{async_runtime::RwLock, AppHandle, Emitter, State};
-use uuid::Uuid;
 
 use crate::{
     bluetooth, errors,
@@ -158,31 +157,3 @@ pub async fn save_pattern(
         .map_err(|e| errors::AppError::StorageFailure(e.to_string()))?;
     Ok(())
 }
-
-#[tauri::command]
-pub async fn get_pattern(
-    app_state: State<'_, Arc<RwLock<AppState>>>,
-    pattern_id: Uuid,
-) -> Result<Option<Pattern>, errors::AppError> {
-    let state = app_state.read().await;
-    let pattern = state
-        .db
-        .get_pattern(&pattern_id)
-        .await
-        .map_err(|e| errors::AppError::StorageFailure(e.to_string()))?;
-    Ok(pattern)
-}
-
-#[tauri::command]
-pub async fn remove_pattern(
-    app_state: State<'_, Arc<RwLock<AppState>>>,
-    pattern_id: Uuid,
-) -> Result<(), errors::AppError> {
-    let state = app_state.read().await;
-    state
-        .db
-        .remove_pattern(&pattern_id)
-        .await
-        .map_err(|e| errors::AppError::StorageFailure(e.to_string()))?;
-    Ok(())
-}

src-tauri/src/lib.rs

@@ -66,9 +66,7 @@ pub fn run() {
             cmd::start_scan_devices,
             cmd::stop_scan_devices,
             cmd::list_patterns,
-            cmd::save_pattern,
+            cmd::save_pattern
-            cmd::get_pattern,
-            cmd::remove_pattern
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src/context/Patterns.tsx

@@ -1,10 +1,9 @@
 import { invoke } from '@tauri-apps/api/core';
 import dayjs from 'dayjs';
-import { atom, useSetAtom } from 'jotai';
+import { atom } from 'jotai';
-import { atomWithRefresh } from 'jotai/utils';
+import { atomFamily, atomWithRefresh } from 'jotai/utils';
 import { get, reduce } from 'lodash-es';
 import { v4 } from 'uuid';
-import { NotificationType, ToastDuration, useNotification } from '../components/Notifications';
 
 export enum FrequencyShifting {
   /**
@@ -92,7 +91,7 @@ export class Pattern {
     this.createdAt = dayjs().valueOf();
     this.lastModifiedAt = null;
     this.smoothRepeat = true;
-    this.pulses = [];
+    this.Pulses = [];
   }
 }
 
@@ -121,31 +120,18 @@ export function totalDuration(pattern: Pattern): number {
   );
 }
 
-export const SearchKeywordAtom = atom<string | null>(null);
+export const PatternsAtom = atomFamily((keyword: string) =>
-export const PatternsAtom = atomWithRefresh(async (get) => {
+  atomWithRefresh(async () => {
-  try {
+    try {
-    const keyword = get(SearchKeywordAtom);
+      const patterns = await invoke<Pattern[]>('list_patterns', { keyword });
-    const patterns = await invoke<Pattern[]>('list_patterns', { keyword });
+      return patterns;
-    return patterns;
+    } catch (e) {
-  } catch (e) {
+      console.error('[retrieving pattern list]', e);
-    console.error('[retrieving pattern list]', e);
-  }
-  return [];
-});
-export const SelectedPatternIdAtom = atom<string | null>(null);
-export const CurrentPatternAtom = atom<Pattern | null>(async (get) => {
-  try {
-    const patternId = get(SelectedPatternIdAtom);
-    if (patternId === null) {
-      return null;
     }
-    const pattern = await invoke('get_pattern', { patternId });
+    return [];
-    return pattern;
+  }),
-  } catch (e) {
+);
-    console.error('[retrieving pattern]', e);
+export const CurrentPatternAtom = atom<Pattern | null>(null);
-  }
-  return null;
-});
 export const PulsesInCurrentPatternAtom = atom(
   (get) => get(CurrentPatternAtom)?.pulses ?? [],
   (get, set, pulse: Pulse) => {
@@ -169,27 +155,3 @@ export const CurrentPatternDuration = atom((get) => {
   if (!currentPattern) return 0;
   return totalDuration(currentPattern);
 });
-
-export function useSavePattern() {
-  const refreshPatterns = useSetAtom(PatternsAtom);
-  const { showToast } = useNotification();
-
-  const savePattern = async (pattern: Pattern) => {
-    try {
-      await invoke('save_pattern', { pattern });
-      refreshPatterns();
-      return true;
-    } catch (error) {
-      console.error('[save pattern]', error);
-      showToast(
-        NotificationType.ERROR,
-        'Failed to save pattern. Please try again.',
-        'material-symbols-light:error-outline',
-        ToastDuration.MEDIUM,
-      );
-    }
-    return false;
-  };
-
-  return savePattern;
-}

src/main.tsx

@@ -28,7 +28,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
               <Route path="/pattern-editor">
                 <Route index element={<PatternNavigator />} />
                 <Route path="new" element={<CreatePattern />} />
-                <Route path="edit" element={<PatternEditor />} />
+                <Route path=":pattern" element={<PatternEditor />} />
               </Route>
               <Route path="/settings" element={<Settings />} />
             </Route>

src/page-components/pattern-editor/PatternHeader.tsx

@@ -1,30 +1,14 @@
 import { Icon } from '@iconify/react/dist/iconify.js';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { FC } from 'react';
-import { FC, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
 import EditableContent from '../../components/EditableContent';
-import { CurrentPatternAtom, SelectedPatternIdAtom } from '../../context/Patterns';
 import styles from './PatternHeader.module.css';
 
 const PatternHeader: FC = () => {
-  const navigate = useNavigate();
-  const currentPattern = useAtomValue(CurrentPatternAtom);
-  const setActivePattern = useSetAtom(SelectedPatternIdAtom);
-  const handleClosePattern = useCallback(() => {
-    setActivePattern(null);
-    navigate('/library');
-  }, []);
-
   return (
     <div className={styles.pattern_header}>
-      <EditableContent
+      <EditableContent as="h3" placeholder="Pattern Name" additionalClassName={styles.content} />
-        as="h3"
-        placeholder="Pattern Name"
-        value={currentPattern?.name ?? null}
-        additionalClassName={styles.content}
-      />
       <div className="spacer" />
-      <button className="tonal" onClick={handleClosePattern}>
+      <button className="tonal">
         <Icon icon="material-symbols-light:close" />
         Close Edit
       </button>

src/page-components/pattern-library/PatternDetail.module.css

@@ -3,27 +3,5 @@
     flex: 2;
     border-radius: calc(var(--border-radius) * 2);
     background-color: var(--color-surface-container);
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: calc(var(--spacing) * 2);
-  }
-  .empty_promption {
-    flex: 2;
-    border-radius: calc(var(--border-radius) * 2);
-    background-color: var(--color-surface-container);
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    .promption {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-      align-items: center;
-    }
-    .spacer {
-      flex: 3;
-    }
   }
 }

src/page-components/pattern-library/PatternDetail.tsx

@@ -1,27 +1,8 @@
-import { useAtomValue } from 'jotai';
 import { FC } from 'react';
-import { CurrentPatternAtom, Pattern } from '../../context/Patterns';
 import styles from './PatternDetail.module.css';
 
-const EmptyPromption: FC = () => {
+const PatternDetail: FC = () => {
-  return (
-    <div className={styles.empty_promption}>
-      <div className={styles.promption}>
-        <span className="empty_prompt">Select a pattern from left first.</span>
-      </div>
-      <div className={styles.spacer} />
-    </div>
-  );
-};
-
-const Detail: FC<{ pattern: Pattern }> = ({ pattern }) => {
   return <div className={styles.pattern_detail}></div>;
 };
 
-const PatternDetail: FC = () => {
-  const currentPattern = useAtomValue(CurrentPatternAtom);
-
-  return !currentPattern ? <EmptyPromption /> : <Detail pattern={currentPattern} />;
-};
-
 export default PatternDetail;

src/page-components/pattern-library/Patterns.module.css

@@ -24,28 +24,4 @@
     align-items: stretch;
     gap: calc(var(--spacing) * 2);
   }
-  .pattern_card {
-    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 2);
-    border-radius: calc(var(--border-radius) * 2);
-    color: var(--color-on-surface);
-    background-color: var(--color-surface);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: calc(var(--spacing) * 2);
-    box-shadow: var(--elevation-0);
-    .name {
-      flex: 1;
-    }
-    &.selected {
-      background-color: color-mix(in oklch, var(--color-on-surface) 18%, transparent);
-    }
-    &:hover {
-      background-color: color-mix(in oklch, var(--color-on-surface) 8%, transparent);
-      box-shadow: var(--elevation-2-ambient), var(--elevation-2-umbra);
-    }
-    &:active {
-      background-color: color-mix(in oklch, var(--color-on-surface) 18%, transparent);
-    }
-  }
 }

src/page-components/pattern-library/Patterns.tsx

@@ -1,59 +1,16 @@
 import { Icon } from '@iconify/react/dist/iconify.js';
 import cx from 'clsx';
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useAtomValue } from 'jotai';
-import { FC, useCallback, useMemo, useState } from 'react';
+import { FC, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useDebounce } from 'react-use';
 import { ScrollArea } from '../../components/ScrollArea';
-import {
+import { PatternsAtom } from '../../context/Patterns';
-  Pattern,
-  PatternsAtom,
-  SearchKeywordAtom,
-  SelectedPatternIdAtom,
-  totalDuration,
-} from '../../context/Patterns';
 import styles from './Patterns.module.css';
 
-const PatternCard: FC<{ pattern: Pattern }> = ({ pattern }) => {
-  const [selectedId, setSelectedId] = useAtom(SelectedPatternIdAtom);
-  const navigate = useNavigate();
-  const duration = useMemo(() => {
-    return totalDuration(pattern) / 1000;
-  }, [pattern]);
-  const selected = useMemo(() => selectedId === pattern.id, [selectedId, pattern]);
-  const handleSingleClick = useCallback(() => {
-    if (selectedId === pattern.id) {
-      setSelectedId(null);
-    } else {
-      setSelectedId(pattern.id);
-    }
-  }, [pattern, selectedId]);
-  const handleDblClick = useCallback(() => {
-    setSelectedId(pattern.id);
-    navigate('/pattern-editor/edit');
-  }, [pattern]);
-
-  return (
-    <div
-      className={cx(styles.pattern_card, selected && styles.selected)}
-      onClick={handleSingleClick}
-      onDoubleClick={handleDblClick}>
-      <h5 className={styles.name}>{pattern.name}</h5>
-      <span>{duration.toFixed(2)} s</span>
-    </div>
-  );
-};
-
 const Patterns: FC = () => {
   const [rawKeyword, setRawKeyword] = useState<string>('');
-  const [keyword, setKeyword] = useAtom(SearchKeywordAtom);
+  const [keyword, setKeyword] = useState<string | null>(null);
-  const patterns = useAtomValue(PatternsAtom);
+  const patterns = useAtomValue(PatternsAtom(keyword));
-  const setPatternSelection = useSetAtom(SelectedPatternIdAtom);
-  const navigate = useNavigate();
-  const createNewAction = useCallback(() => {
-    setPatternSelection(null);
-    navigate('/pattern-editor/new');
-  }, []);
 
   useDebounce(
     () => {
@@ -79,7 +36,7 @@ const Patterns: FC = () => {
             onChange={(evt) => setRawKeyword(evt.currentTarget.value)}
           />
         </div>
-        <button className="tonal secondary" onClick={createNewAction}>
+        <button className="tonal secondary">
           <Icon icon="material-symbols-light:add" />
           New Pattern
         </button>
@@ -87,9 +44,6 @@ const Patterns: FC = () => {
       <ScrollArea enableY>
         <div className={styles.pattern_list}>
           {patterns.length === 0 && <div className="empty_prompt">No pattern found.</div>}
-          {patterns.map((p) => (
-            <PatternCard key={p.id} pattern={p} />
-          ))}
         </div>
       </ScrollArea>
     </div>

src/pages/CreatePattern.module.css

@@ -1,15 +0,0 @@
-@layer pages {
-  .create_form {
-    border-radius: calc(var(--border-radius) * 2);
-    background-color: var(--color-surface-container);
-  }
-  .form_row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: calc(var(--spacing) * 3);
-    .pattern_name_input {
-      min-width: 30em;
-    }
-  }
-}

src/pages/CreatePattern.tsx

@@ -1,79 +0,0 @@
-import cx from 'clsx';
-import { useSetAtom } from 'jotai';
-import { FC, useActionState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { NotificationType, ToastDuration, useNotification } from '../components/Notifications';
-import { Pattern, SelectedPatternIdAtom, useSavePattern } from '../context/Patterns';
-import styles from './CreatePattern.module.css';
-
-const CreatePattern: FC = () => {
-  const { showToast } = useNotification();
-  const navigate = useNavigate();
-  const loadPattern = useSetAtom(SelectedPatternIdAtom);
-  const savePattern = useSavePattern();
-
-  const [errState, handleFormSubmit] = useActionState(async (state, formData) => {
-    const patternName = formData.get('pattern_name') as string | null;
-
-    if (patternName === null || patternName.length === 0) {
-      showToast(
-        NotificationType.ERROR,
-        'Please enter a pattern name.',
-        'material-symbols-light:error-outline',
-        ToastDuration.MEDIUM,
-      );
-      return true;
-    }
-
-    const newPattern = new Pattern();
-    newPattern.name = patternName;
-
-    try {
-      const updated = await savePattern(newPattern);
-      if (!updated) {
-        showToast(
-          NotificationType.ERROR,
-          'Failed to reload the created pattern. Please try again.',
-          'material-symbols-light:error-outline',
-          ToastDuration.MEDIUM,
-        );
-        loadPattern(null);
-        navigate('/library');
-        return true;
-      }
-      loadPattern(newPattern.id);
-      navigate('/pattern-editor/edit');
-    } catch (e) {
-      console.error('[save pattern]', e);
-      loadPattern(null);
-      showToast(
-        NotificationType.ERROR,
-        'Failed to create pattern. Please try again.',
-        'material-symbols-light:error-outline',
-        ToastDuration.MEDIUM,
-      );
-    }
-
-    return false;
-  }, false);
-
-  return (
-    <div className={cx('workspace', 'vertical', styles.create_form)}>
-      <div className="center">
-        <form action={handleFormSubmit} className={styles.form_row}>
-          <input
-            type="text"
-            name="pattern_name"
-            placeholder="pattern name"
-            className={cx(styles.pattern_name_input, errState && 'error')}
-          />
-          <button type="submit" className="filled">
-            Create New Pattern
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-};
-
-export default CreatePattern;

src/pages/PatternNavigator.tsx

@@ -1,12 +0,0 @@
-import { useAtomValue } from 'jotai';
-import { FC } from 'react';
-import { Navigate } from 'react-router-dom';
-import { SelectedPatternIdAtom } from '../context/Patterns';
-
-const PatternNavigator: FC = () => {
-  const selected = useAtomValue(SelectedPatternIdAtom);
-
-  return selected === null ? <Navigate to="new" /> : <Navigate to="edit" />;
-};
-
-export default PatternNavigator;