refactor: replace $tabler_icons with @preact-icons/tb icons (#967)

Removes deprecated $tabler_icons import and replaces specific Tabler
icons with equivalent icons from @preact-icons/tb across multiple
components and routes. Part of the icons migration proposed in #931

Author: EGAMAGZ

frontend/components/NavOverflow.tsx

@@ -1,5 +1,5 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
-import IconDots from "$tabler_icons/dots.tsx";
+import TbDots from "@preact-icons/tb/TbDots";
 
 const NAV_OVERFLOW_SCRIPT = /* js */ `
 (() => {
@@ -67,7 +67,7 @@ export function NavOverflow() {
         aria-expanded="false"
       >
         <span class="flex p-1">
-          <IconDots />
+          <TbDots class="size-6" />
         </span>
         <div
           id="nav-menu"

frontend/deno.json

@@ -27,7 +27,6 @@
     "@std/semver": "jsr:@std/semver@1",
 
     "twas": "npm:twas@^2.1.3",
-    "$tabler_icons/": "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/",
     "$imagescript": "https://deno.land/x/imagescript@1.3.0/mod.ts",
 
     "@deno/gfm": "jsr:@deno/gfm@0.10",

frontend/islands/UserMenu.tsx

@@ -1,8 +1,13 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 import { useEffect, useId, useRef, useState } from "preact/hooks";
 import { FullUser } from "../utils/api_types.ts";
-import { TbLogout, TbPlus, TbUser, TbUserCog } from "@preact-icons/tb";
-import IconArrowRight from "$tabler_icons/arrow-right.tsx";
+import {
+  TbArrowRight,
+  TbLogout,
+  TbPlus,
+  TbUser,
+  TbUserCog,
+} from "@preact-icons/tb";
 
 const SHARED_ITEM_CLASSES =
   "flex items-center justify-start gap-2 px-4 py-2.5 focus-visible:ring-2 ring-inset outline-none";
@@ -75,7 +80,7 @@ export function UserMenu({ user, sudo, logoutUrl }: {
               <span>
                 {user.inviteCount} pending invite{user.inviteCount > 1 && "s"}
               </span>
-              <IconArrowRight class="w-4 h-4" />
+              <TbArrowRight class="w-4 h-4" />
             </a>
           )}
           {user.isStaff && (

frontend/routes/admin/scopes/index.tsx

@@ -6,7 +6,7 @@ import { path } from "../../../utils/api.ts";
 import { AdminNav } from "../(_components)/AdminNav.tsx";
 import { URLQuerySearch } from "../../../components/URLQuerySearch.tsx";
 import { define } from "../../../util.ts";
-import IconArrowRight from "$tabler_icons/arrow-right.tsx";
+import TbArrowRight from "@preact-icons/tb/TbArrowRight";
 
 export default define.page<typeof handler>(function Scopes({ data, url }) {
   return (
@@ -15,7 +15,7 @@ export default define.page<typeof handler>(function Scopes({ data, url }) {
       <div class="flex gap-4">
         <URLQuerySearch query={data.query} />
         <a class="button-primary mt-4" href="/admin/scopes/assign">
-          Assign Scope <IconArrowRight />
+          Assign Scope <TbArrowRight />
         </a>
       </div>
       <Table

frontend/routes/new.tsx

@@ -1,7 +1,6 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 import { useSignal } from "@preact/signals";
-import IconFolder from "$tabler_icons/folder.tsx";
-import IconPackage from "$tabler_icons/package.tsx";
+import { TbBrandGithub, TbFolder, TbPackage } from "@preact-icons/tb";
 import {
   CreatePackage,
   IconCircle,
@@ -10,7 +9,6 @@ import {
 } from "../islands/new.tsx";
 import { Package, Scope } from "../utils/api_types.ts";
 import { path } from "../utils/api.ts";
-import TbBrandGithub from "@preact-icons/tb/TbBrandGithub";
 import { define } from "../util.ts";
 
 export default define.page<typeof handler>(function New(props) {
@@ -42,7 +40,7 @@ export default define.page<typeof handler>(function New(props) {
         <div class="space-y-8">
           <div class="flex items-start gap-4">
             <IconCircle done={scope}>
-              <IconFolder class="h-5 w-5" />
+              <TbFolder class="h-5 w-5" />
             </IconCircle>
             <div class="w-full">
               <h2 class="font-bold text-2xl leading-none">Scope</h2>
@@ -78,7 +76,7 @@ export default define.page<typeof handler>(function New(props) {
           </div>
           <div class="flex items-start gap-4">
             <IconCircle done={name}>
-              <IconPackage class="h-5 w-5" />
+              <TbPackage class="h-5 w-5" />
             </IconCircle>
             <div class="w-full">
               <h2 class="font-bold text-2xl leading-none">Package name</h2>