Switch to feather icons (#175)

Switch to feather icons

web/components/command_palette.tsx

@@ -1,6 +1,6 @@
 import { isMacLike } from "../../common/util.ts";
 import { FilterList } from "./filter.tsx";
-import { faPersonRunning } from "../deps.ts";
+import { TerminalIcon } from "../deps.ts";
 import { AppCommand } from "../hooks/command.ts";
 import { FilterOption } from "../../common/types.ts";
 
@@ -30,7 +30,7 @@ export function CommandPalette({
       placeholder="Command"
       options={options}
       allowNew={false}
-      icon={faPersonRunning}
+      icon={TerminalIcon}
       helpText="Start typing the command name to filter results, press <code>Return</code> to run."
       onSelect={(opt) => {
         if (opt) {

web/components/filter.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState } from "../deps.ts";
-import { FontAwesomeIcon } from "../deps.ts";
-import type { IconDefinition } from "../deps.ts";
 import { FilterOption } from "../../common/types.ts";
 import fuzzysort from "https://esm.sh/fuzzysort@2.0.1";
+import { FunctionalComponent } from "https://esm.sh/v99/preact@10.11.3/src/index";
+import { FeatherProps } from "https://esm.sh/v99/preact-feather@4.2.1/dist/types";
 
 function magicSorter(a: FilterOption, b: FilterOption): number {
   if (a.orderId && b.orderId) {
@@ -59,7 +59,7 @@ export function FilterList({
   allowNew = false,
   helpText = "",
   completePrefix,
-  icon,
+  icon: Icon,
   newHint,
 }: {
   placeholder: string;
@@ -71,7 +71,7 @@ export function FilterList({
   completePrefix?: string;
   helpText: string;
   newHint?: string;
-  icon?: IconDefinition;
+  icon?: FunctionalComponent<FeatherProps>;
 }) {
   const searchBoxRef = useRef<HTMLInputElement>(null);
   const [text, setText] = useState("");
@@ -210,7 +210,7 @@ export function FilterList({
                 }}
               >
                 <span className="sb-icon">
-                  {icon && <FontAwesomeIcon icon={icon} />}
+                  {Icon && <Icon width={16} height={16} />}
                 </span>
                 <span
                   className="sb-name"

web/components/top_bar.tsx

@@ -1,15 +1,8 @@
-// import { Fragment, h } from "../deps.ts";
-
-import { FontAwesomeIcon, useRef } from "../deps.ts";
-
-import {
-  ComponentChildren,
-  IconDefinition,
-  useEffect,
-  useState,
-} from "../deps.ts";
+import { useRef } from "../deps.ts";
+import { ComponentChildren } from "../deps.ts";
 import { Notification } from "../types.ts";
-import { isMacLike } from "../../common/util.ts";
+import { FunctionalComponent } from "https://esm.sh/v99/preact@10.11.1/src/index";
+import { FeatherProps } from "https://esm.sh/v99/preact-feather@4.2.1/dist/types";
 
 function prettyName(s: string | undefined): string {
   if (!s) {
@@ -19,7 +12,7 @@ function prettyName(s: string | undefined): string {
 }
 
 export type ActionButton = {
-  icon: IconDefinition;
+  icon: FunctionalComponent<FeatherProps>;
   description: string;
   callback: () => void;
 };
@@ -45,7 +38,6 @@ export function TopBar({
 }) {
   // const [theme, setTheme] = useState<string>(localStorage.theme ?? "light");
   const inputRef = useRef<HTMLInputElement>(null);
-  // const isMac = isMacLike();
 
   return (
     <div id="sb-top">
@@ -103,7 +95,7 @@ export function TopBar({
                 }}
                 title={actionButton.description}
               >
-                <FontAwesomeIcon icon={actionButton.icon} />
+                <actionButton.icon size={18} />
               </button>
             ))}
           </div>