don't destructure props

src/components/apps/App.tsx

@@ -7,22 +7,22 @@ import style from './App.module.css';
 
 export type PillProps = AppDefinition;
 
-export function App({ url, name, icon, shortcut, location }: PillProps) {
+export function App(props: PillProps) {
   const { appSettings } = useSettings();
 
   return (
     <div class={style.App}>
-      <a href={url} target="_blank" rel="noopener noreferrer">
+      <a href={props.url} target="_blank" rel="noopener noreferrer">
         <div class={style.Text}>
-          <span class={style.Name}>{name}</span>
-          <span class={style.Url}>{url.split('://')[1].split('/')[0]}</span>
+          <span class={style.Name}>{props.name}</span>
+          <span class={style.Url}>{props.url.split('://')[1].split('/')[0]}</span>
           <Show when={appSettings.showLocations && location}>
-            <span class={style.Url}>{location}</span>
+            <span class={style.Url}>{props.location}</span>
           </Show>
         </div>
-        <img class={style.Icon} src={getAppIcon(icon)} alt={name} />
-        <Show when={shortcut}>
-          <span class={style.Index}>{shortcut}</span>
+        <img class={style.Icon} src={getAppIcon(props.icon)} alt={props.name} />
+        <Show when={props.shortcut}>
+          <span class={style.Index}>{props.shortcut}</span>
         </Show>
       </a>
     </div>

src/components/apps/AppList.tsx

@@ -4,11 +4,7 @@ import { App } from './App';
 
 import style from './AppList.module.css';
 
-export function AppList({
-  category,
-  apps,
-  resetCategory: resetCategory,
-}: {
+export function AppList(props: {
   category: Accessor<string>;
   apps: Accessor<AppDefinition[]>;
   resetCategory?(): void;
@@ -16,13 +12,13 @@ export function AppList({
   return (
     <div class={style.AppListWrap}>
       <h2 class={style.Header}>
-        {category()}
-        <span class={style.Close} onClick={resetCategory}>
+        {props.category()}
+        <span class={style.Close} onClick={props.resetCategory}>
           ×
         </span>
       </h2>
       <div class={style.AppList}>
-        <For each={apps()}>{(app) => <App {...app} />}</For>
+        <For each={props.apps()}>{(app) => <App {...app} />}</For>
       </div>
     </div>
   );