feat: add option to disable cover comments and settings dialog

package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.1",
+    "@kobalte/core": "^0.13.7",
     "@violentmonkey/dom": "^2.1.6",
     "@violentmonkey/ui": "^0.7.9",
     "class-variance-authority": "^0.7.0",
@@ -51,11 +52,13 @@
     "@commitlint/config-conventional": "^19.4.1",
     "@gera2ld/plaid": "~2.7.0",
     "@gera2ld/plaid-rollup": "~2.7.0",
+    "@rollup/plugin-alias": "^5.1.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/babel__core": "^7",
     "@types/eslint": "^9",
     "@violentmonkey/types": "^0.1.7",
+    "autoprefixer": "^10.4.20",
     "babel-plugin-dedent": "^2.1.0",
     "babel-preset-solid": "^1.8.22",
     "cross-env": "^7.0.3",
@@ -66,12 +69,16 @@
     "eslint-plugin-prettier": "^5.2.1",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
+    "postcss": "^8.4.49",
     "prettier": "^3.2.5",
     "rollup": "^4.21.2",
     "rollup-plugin-userscript": "^0.3.2",
     "semantic-release": "^24.1.0",
     "semantic-release-mirror-version": "^1.1.2",
     "semantic-release-monorepo": "^8.0.2",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss": "^3.4.14",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.3.0"
   },

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

rollup.config.mjs

@@ -1,8 +1,12 @@
 import {defineExternal, definePlugins} from '@gera2ld/plaid-rollup';
+import alias from '@rollup/plugin-alias';
+import path from 'path';
 import {defineConfig} from 'rollup';
 import userscript from 'rollup-plugin-userscript';
 import pkg from './package.json' with {type: 'json'};
 
+const baseImportUrl = 'src';
+
 export default defineConfig(
   Object.entries({
     'setlistfm-musicbrainz-import': 'src/setlistfm-musicbrainz-import/index.ts',
@@ -13,8 +17,15 @@ export default defineConfig(
         esm: true,
         minimize: false,
         extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
+        postcss: {
+          inject: false,
+          minimize: true,
+        },
       }),
       userscript(meta => meta.replace('process.env.AUTHOR', `${pkg.author.name} (${pkg.author.email})`)),
+      alias({
+        entries: [{find: 'src', replacement: path.resolve(baseImportUrl)}],
+      }),
     ],
     external: defineExternal(['@violentmonkey/ui', '@violentmonkey/dom', 'solid-js', 'solid-js/web']),
     output: {

src/common/components/ui/button.tsx

@@ -0,0 +1,51 @@
+import type {JSX, ValidComponent} from 'solid-js';
+import {splitProps} from 'solid-js';
+
+import * as ButtonPrimitive from '@kobalte/core/button';
+import type {PolymorphicProps} from '@kobalte/core/polymorphic';
+import type {VariantProps} from 'class-variance-authority';
+import {cva} from 'class-variance-authority';
+
+import {cn} from 'src/common/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+type ButtonProps<T extends ValidComponent = 'button'> = ButtonPrimitive.ButtonRootProps<T> &
+  VariantProps<typeof buttonVariants> & {class?: string | undefined; children?: JSX.Element};
+
+const Button = <T extends ValidComponent = 'button'>(props: PolymorphicProps<T, ButtonProps<T>>) => {
+  const [local, others] = splitProps(props as ButtonProps, ['variant', 'size', 'class']);
+  return (
+    <ButtonPrimitive.Root
+      class={cn(buttonVariants({variant: local.variant, size: local.size}), local.class)}
+      {...others}
+    />
+  );
+};
+
+export type {ButtonProps};
+export {Button, buttonVariants};

src/common/components/ui/dialog.tsx

@@ -0,0 +1,109 @@
+import type {Component, ComponentProps, JSX, ValidComponent} from 'solid-js';
+import {splitProps} from 'solid-js';
+
+import * as DialogPrimitive from '@kobalte/core/dialog';
+import type {PolymorphicProps} from '@kobalte/core/polymorphic';
+
+import {cn} from 'src/common/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal: Component<DialogPrimitive.DialogPortalProps> = props => {
+  const [, rest] = splitProps(props, ['children']);
+  return (
+    <DialogPrimitive.Portal {...rest}>
+      <div class="fixed inset-0 z-50 flex items-start justify-center sm:items-center">{props.children}</div>
+    </DialogPrimitive.Portal>
+  );
+};
+
+type DialogOverlayProps<T extends ValidComponent = 'div'> = DialogPrimitive.DialogOverlayProps<T> & {
+  class?: string | undefined;
+};
+
+const DialogOverlay = <T extends ValidComponent = 'div'>(props: PolymorphicProps<T, DialogOverlayProps<T>>) => {
+  const [, rest] = splitProps(props as DialogOverlayProps, ['class']);
+  return (
+    <DialogPrimitive.Overlay
+      class={cn(
+        'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0',
+        props.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+type DialogContentProps<T extends ValidComponent = 'div'> = DialogPrimitive.DialogContentProps<T> & {
+  class?: string | undefined;
+  useShadow?: boolean;
+  mount?: HTMLElement;
+  children?: JSX.Element;
+};
+
+const DialogContent = <T extends ValidComponent = 'div'>(props: PolymorphicProps<T, DialogContentProps<T>>) => {
+  const [, rest] = splitProps(props as DialogContentProps, ['class', 'children', 'useShadow', 'mount']);
+  return (
+    <DialogPortal useShadow={props.useShadow} mount={props.mount}>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        class={cn(
+          'fixed left-1/2 top-1/2 z-50 grid max-h-screen w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto border bg-background p-6 shadow-lg duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class
+        )}
+        {...rest}
+      >
+        {props.children}
+        <DialogPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[expanded]:bg-accent data-[expanded]:text-muted-foreground">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-4"
+          >
+            <path d="M18 6l-12 12" />
+            <path d="M6 6l12 12" />
+          </svg>
+          <span class="sr-only">Close</span>
+        </DialogPrimitive.CloseButton>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+};
+
+const DialogHeader: Component<ComponentProps<'div'>> = props => {
+  const [, rest] = splitProps(props, ['class']);
+  return <div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', props.class)} {...rest} />;
+};
+
+const DialogFooter: Component<ComponentProps<'div'>> = props => {
+  const [, rest] = splitProps(props, ['class']);
+  return <div class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', props.class)} {...rest} />;
+};
+
+type DialogTitleProps<T extends ValidComponent = 'h2'> = DialogPrimitive.DialogTitleProps<T> & {
+  class?: string | undefined;
+};
+
+const DialogTitle = <T extends ValidComponent = 'h2'>(props: PolymorphicProps<T, DialogTitleProps<T>>) => {
+  const [, rest] = splitProps(props as DialogTitleProps, ['class']);
+  return (
+    <DialogPrimitive.Title class={cn('text-lg font-semibold leading-none tracking-tight', props.class)} {...rest} />
+  );
+};
+
+type DialogDescriptionProps<T extends ValidComponent = 'p'> = DialogPrimitive.DialogDescriptionProps<T> & {
+  class?: string | undefined;
+};
+
+const DialogDescription = <T extends ValidComponent = 'p'>(props: PolymorphicProps<T, DialogDescriptionProps<T>>) => {
+  const [, rest] = splitProps(props as DialogDescriptionProps, ['class']);
+  return <DialogPrimitive.Description class={cn('text-sm text-muted-foreground', props.class)} {...rest} />;
+};
+
+export {Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription};

src/common/components/ui/switch.tsx

@@ -0,0 +1,71 @@
+import type {JSX, ValidComponent} from 'solid-js';
+import {splitProps} from 'solid-js';
+
+import type {PolymorphicProps} from '@kobalte/core';
+import * as SwitchPrimitive from '@kobalte/core/switch';
+
+import {cn} from 'src/common/lib/utils';
+
+const Switch = SwitchPrimitive.Root;
+const SwitchDescription = SwitchPrimitive.Description;
+const SwitchErrorMessage = SwitchPrimitive.ErrorMessage;
+
+type SwitchControlProps = SwitchPrimitive.SwitchControlProps & {
+  class?: string | undefined;
+  children?: JSX.Element;
+};
+
+const SwitchControl = <T extends ValidComponent = 'input'>(props: PolymorphicProps<T, SwitchControlProps>) => {
+  const [local, others] = splitProps(props as SwitchControlProps, ['class', 'children']);
+  return (
+    <>
+      <SwitchPrimitive.Input
+        class={cn(
+          '[&:focus-visible+div]:outline-none [&:focus-visible+div]:ring-2 [&:focus-visible+div]:ring-ring [&:focus-visible+div]:ring-offset-2 [&:focus-visible+div]:ring-offset-background',
+          local.class
+        )}
+      />
+      <SwitchPrimitive.Control
+        class={cn(
+          'inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-[color,background-color,box-shadow] data-[disabled]:cursor-not-allowed data-[checked]:bg-primary data-[disabled]:opacity-50',
+          local.class
+        )}
+        {...others}
+      >
+        {local.children}
+      </SwitchPrimitive.Control>
+    </>
+  );
+};
+
+type SwitchThumbProps = SwitchPrimitive.SwitchThumbProps & {class?: string | undefined};
+
+const SwitchThumb = <T extends ValidComponent = 'div'>(props: PolymorphicProps<T, SwitchThumbProps>) => {
+  const [local, others] = splitProps(props as SwitchThumbProps, ['class']);
+  return (
+    <SwitchPrimitive.Thumb
+      class={cn(
+        'pointer-events-none block size-5 translate-x-0 rounded-full bg-background shadow-lg ring-0 transition-transform data-[checked]:translate-x-5',
+        local.class
+      )}
+      {...others}
+    />
+  );
+};
+
+type SwitchLabelProps = SwitchPrimitive.SwitchLabelProps & {class?: string | undefined};
+
+const SwitchLabel = <T extends ValidComponent = 'label'>(props: PolymorphicProps<T, SwitchLabelProps>) => {
+  const [local, others] = splitProps(props as SwitchLabelProps, ['class']);
+  return (
+    <SwitchPrimitive.Label
+      class={cn(
+        'text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70',
+        local.class
+      )}
+      {...others}
+    />
+  );
+};
+
+export {Switch, SwitchControl, SwitchThumb, SwitchLabel, SwitchDescription, SwitchErrorMessage};

src/common/lib/utils.ts

@@ -0,0 +1,6 @@
+import {type ClassValue, clsx} from 'clsx';
+import {twMerge} from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

src/setlistfm-musicbrainz-import/README.md

@@ -20,6 +20,12 @@ The script also searches for the venue in MusicBrainz and pre-fills the venue fi
 
 If the venue is not found in MusicBrainz, navigating to the venue page will show a "Add to MB" button that will open a MusicBrainz create place window with the place form pre-filled with the venue data.
 
+## Settings
+
+To configure the settins select the `settings` menu option in your userscript manager.
+
+- Add cover comment: add comments to setlist with the covered artist (default: false)
+
 ## Release Notes
 
 See [CHANGELOG.md](CHANGELOG.md).