icons

Author: karelnagel

src/components/Icon.tsx

@@ -77,6 +77,101 @@ export const IconName = z.enum([
   'search_off',
   'navigation',
   'joystick',
+  'key',
+  'route',
+  'favorite',
+  'explore',
+  'alt_route',
+  'tune',
+  'fingerprint',
+  'commit',
+  'vpn_key',
+  'data_usage',
+  'warning',
+  'straighten',
+  'language',
+  'toggle_on',
+  'visibility',
+  'airline_seat_recline_normal',
+  'timer',
+  'network_cell',
+  'backup',
+  'developer_mode',
+  'restart_alt',
+  'delete_forever',
+  'counter_1',
+  'schedule',
+  'cell_tower',
+  'sim_card',
+  'verified_user',
+  'memory',
+  'storage',
+  'block',
+  'update',
+  'wide_angle_camera',
+  'pan_tool',
+  'remove_red_eye',
+  'speed',
+  'trending_up',
+  'sync',
+  'auto_fix_high',
+  'model_training',
+  'steering',
+  'swap_horiz',
+  'psychology',
+  'timeline',
+  'slow_motion_video',
+  'turn_slight_right',
+  'edit',
+  'flash_on',
+  'science',
+  'brightness_6',
+  'brightness_low',
+  'signpost',
+  'traffic',
+  'timer_off',
+  'nightlight',
+  'traffic_jam',
+  'visibility_off',
+  'bug_report',
+  'departure_board',
+  'speedometer',
+  'cached',
+  'device_hub',
+  'gps_fixed',
+  'car_crash',
+  'cable',
+  'build',
+  'wifi',
+  'thermostat',
+  'hardware',
+  'usb',
+  'priority_high',
+  'cloud_off',
+  'dns',
+  'terminal',
+  'cloud_upload',
+  'live_tv',
+  'smartphone',
+  'folder',
+  'exit_to_app',
+  'bolt',
+  'queue',
+  'gps_off',
+  'hub',
+  'security',
+  'swap_vert',
+  'place',
+  'map',
+  'cloud_download',
+  'calendar_today',
+  'update_disabled',
+  'group',
+  'badge',
+  'speed_limit',
+  'token',
+  'cloud_sync',
+  'help',
 ])
 
 export type IconName = z.infer<typeof IconName>

src/pages/device/ActionBar.tsx

@@ -89,7 +89,7 @@ export const ActionBar = ({ className }: { className?: string }) => {
 
   return (
     <div
-      className={clsx('flex gap-2 flex-wrap-reverse items-center justify-center', className)}
+      className={clsx('flex gap-2 flex-wrap items-center justify-center', className)}
       style={{
         gridTemplateColumns: `repeat(${actions.length}, minmax(2, 2fr))`,
       }}

src/pages/toggles/Settings.tsx

@@ -13,10 +13,10 @@ export const AddToActionBar = ({ action }: { action: Action }) => {
   const [actions, setActions] = useStorage('actions')
   return (
     <IconButton
-      name="add"
+      name="close_small"
       title="Add to action bar"
       onClick={() => setActions([...actions, action])}
-      className="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 bg-background-alt hidden group-hover:flex border border-white/20 z-20"
+      className="rotate-45 absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 bg-background-alt hidden group-hover:flex border border-white/20 z-20"
     />
   )
 }
@@ -118,11 +118,11 @@ export const Settings = ({ settings }: { settings: Setting[] }) => {
                     <AddToActionBar
                       action={{
                         type: 'toggle',
-                        icon: 'star',
                         title: x.label,
                         toggleKey: x.key,
                         toggleType: x.type!,
                         disabled: readonly,
+                        icon: x.icon ?? 'star',
                       }}
                     />
                   )}