more plugin changes + started bookmarklet manager

package.json

@@ -15,6 +15,7 @@
     "@mui/icons-material": "^5.15.2",
     "@mui/material": "^5.15.2",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",

src/components/Navbar.tsx

@@ -2,10 +2,10 @@ import { Home, LayoutGrid, LogOut, Settings } from 'lucide-react'
 
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { Plugin } from '@/lib/pluginloader'
 export default function Navbar({ loadedPlugins }: { loadedPlugins: Plugin[] }) {
-  const items = [
+  const [navItems, setNavItems] = useState([
     {
       icon: <Home className="group-active:scale-90 transition-all duration-300 text-2xl" />,
       tooltip: 'Home',
@@ -23,22 +23,32 @@ export default function Navbar({ loadedPlugins }: { loadedPlugins: Plugin[] }) {
       href: '/plugins',
       position: 'top'
     }
-  ]
+  ])
 
-  useEffect(() => {
-    loadedPlugins.forEach((plugin) => {
-      if (plugin.page && plugin.icon) {
-      }
-    })
-  }, [loadedPlugins])
+  // useEffect(() => {
+  //   loadedPlugins.forEach((plugin) => {
+  //     if (!plugin.page) return
+  //     if (plugin.icon == undefined) return
+  //     setNavItems((prev) => [
+  //       ...prev,
+  //       {
+  //         // @ts-ignore
+  //         icon: <plugin.icon className="bx bx-user group-active:scale-90 transition-all duration-300 text-2xl" />,
+  //         tooltip: plugin.name,
+  //         href: `/plugin/${plugin.id}`,
+  //         position: 'top'
+  //       }
+  //     ])
+  //   })
+  // }, [loadedPlugins])
   const location = useLocation()
   const navigate = useNavigate()
   return (
     <TooltipProvider>
-      <div className="w-16 h-screen bg-zinc-800 flex flex-col justify-between fixed left-0 top-0">
+      <div className="w-16 h-screen bg-zinc-800 flex flex-col justify-between fixed left-0 top-0 z-[999]">
         <div>
           <div className="font-extrabold text-3xl bg-zinc-700 hover:bg-sky-600 transition-colors duration-150 aspect-square m-3 rounded-lg flex items-center justify-center cursor-pointer">B</div>
-          {items.map((item, index) => {
+          {navItems.map((item, index) => {
             return (
               <Tooltip key={index} delayDuration={0}>
                 <TooltipTrigger asChild>
@@ -57,6 +67,26 @@ export default function Navbar({ loadedPlugins }: { loadedPlugins: Plugin[] }) {
               </Tooltip>
             )
           })}
+          {loadedPlugins.map((item, i) => {
+            if (!item.page || !item.icon || item.disabled) return
+            return (
+              <Tooltip key={i} delayDuration={0}>
+                <TooltipTrigger asChild>
+                  <div
+                    onClick={() => {
+                      navigate(`/plugin/${item.id}`)
+                    }}
+                    className={`font-bold hover:bg-zinc-700 ${location.pathname == `/plugin/${item.id}` && 'bg-zinc-600'} transition-colors duration-150 aspect-square flex items-center justify-center cursor-pointer group`}
+                  >
+                    <item.icon />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="right" className="z-[9999] relative">
+                  <p>{item.name}</p>
+                </TooltipContent>
+              </Tooltip>
+            )
+          })}
         </div>
         <div>
           <Tooltip delayDuration={0}>

src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

src/internal/Bookmarklets.tsx

@@ -0,0 +1,16 @@
+import { Plugin } from '@/lib/pluginloader'
+import { Star } from 'lucide-react'
+
+const Bookmarklets: Plugin = {
+  name: 'Bookmarklets',
+  id: 'bunker.bookmarklets',
+  description: 'Store your bookmarklets in a convienent location',
+  icon: Star,
+
+
+  page() {
+    return <p>hi</p>
+  }
+}
+
+export default Bookmarklets

src/lib/pluginloader.ts

@@ -2,11 +2,7 @@ import React from 'react'
 import store from 'store2'
 import { toast } from 'sonner'
 import EventEmitter from 'events'
-
-import iFramer from '@/internal/iFramer'
-import Status from '@/internal/Status'
-import HackerNews from '@/internal/HackerNews'
-import { LucideIcon } from 'lucide-react'
+import { Book, LucideIcon } from 'lucide-react'
 
 store.set('savedPlugins', [], false)
 store.set('disabledPlugins', [], false)
@@ -60,10 +56,14 @@ export function togglePluginDisable(id: string) {
   return selectedPlugin.disabled
 }
 
+import iFramer from '@/internal/iFramer'
+import Status from '@/internal/Status'
+import Bookmarklets from '@/internal/Bookmarklets'
+
 export function registerDefaultPlugins() {
   registerPlugin(Status)
   registerPlugin(iFramer)
-  registerPlugin(HackerNews)
+  registerPlugin(Bookmarklets)
 }
 
 getSavedPlugins().forEach(async (url) => {

src/pages/PluginRouter.tsx

@@ -3,7 +3,7 @@ import { ReactElement, useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 export default function PluginRouter({ loadedPlugins }: { loadedPlugins: Plugin[] }) {
-  const [selectedPlugin, setSelectedPlugin] = useState<ReactElement>(<p>Loading...</p>)
+  const [selectedPlugin, setSelectedPlugin] = useState<ReactElement>()
   const { plugin } = useParams()
 
   useEffect(() => {

src/pages/Plugins.tsx

@@ -3,23 +3,43 @@ import { Switch } from '@/components/ui/switch'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 import { Plugin, togglePluginDisable } from '@/lib/pluginloader'
-import { Dispatch, SetStateAction } from 'react'
+import { Dispatch, SetStateAction, useState } from 'react'
 
 export default function Plugins({ loadedPlugins, setLoadedPlugins }: { loadedPlugins: Plugin[]; setLoadedPlugins: Dispatch<SetStateAction<Plugin[]>> }) {
+  const [pluginUrl, setPluginUrl] = useState('')
+  function uploadPlugin() {}
   return (
-    <div className="flex flex-col items-center w-full pt-16">
+    <div className="flex flex-col items-center w-full pt-16 space-y-8">
       <h1 className="font-bold text-5xl">Plugins</h1>
 
-      <div className="flex flex-wrap justify-center gap-4 mt-8">
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button>Add Plugin</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Add plugin</DialogTitle>
+            <DialogDescription>Enter a valid plugin url down below. Make sure you trust the plugin's source, as they could be malicious.</DialogDescription>
+          </DialogHeader>
+          <Input value={pluginUrl} onInput={(e) => setPluginUrl((e.target as HTMLInputElement).value)} placeholder="Plugin URL" />
+          <DialogFooter>
+            <Button type="submit">Add</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <div className="flex flex-wrap justify-center gap-4">
         {loadedPlugins.map((plugin, index) => {
           function handleDisable() {
             const disabled = togglePluginDisable(plugin.id)
             setLoadedPlugins((prev) => prev.map((el) => (el.id == plugin.id ? { ...el, disabled: disabled } : el)))
           }
 
           return (
-            <Card key={index} className="w-80">
+            <Card key={index} className={`w-80 -z-[${index}]`}>
               <CardHeader>
                 <CardTitle>
                   {plugin.name}

vite.config.ts

@@ -4,7 +4,7 @@ import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
-  plugins: [million.vite({ auto: true }), react()],
+  plugins: [million.vite({ auto: true, mute: true  }), react()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src')