Add icon borders

src/components/apps/App.module.css

@@ -28,6 +28,12 @@
 .Icon {
   width: 36px;
   max-height: 54px;
+  padding: 4px;
+}
+
+.Icon.Bordered {
+  background-color: rgba(255, 255, 255, .9);
+  border-radius: .5rem;
 }
 
 .Url {

src/components/apps/App.tsx

@@ -19,7 +19,11 @@ export function App(props: AppProps) {
             <span class={style.Url}>{props.location}</span>
           </Show>
         </div>
-        <img class={style.Icon} src={getAppIcon(props.icon, props.icon_source)} alt={props.name} />
+        <img
+          classList={{ [style.Icon]: true, [style.Bordered]: props.icon_border }}
+          src={getAppIcon(props.icon, props.icon_source)}
+          alt={props.name}
+        />
         <Show when={props.shortcut}>
           <span class={style.Index}>{props.shortcut}</span>
         </Show>

src/types.ts

@@ -10,6 +10,7 @@ export type AppDefinition = {
   url: string;
   icon: string;
   icon_source?: string;
+  icon_border?: boolean;
   tags: string;
   location?: string;
   shortcut?: string;