wip

ui/src/components/entry/entry-item.tsx

@@ -52,12 +52,12 @@ export const EntryItem: Component<EntryItemProps> = props => {
               href={state.getEntryUrl(local.entry.uuid)}
               class={cx(
                 '-mx-2 flex select-none flex-col gap-1 rounded-lg px-2 py-1.5 ring-gray-300 transition dark:ring-gray-700',
-                'focus:outline-none focus:ring',
+                'focus-visible:outline-none focus-visible:ring',
                 isActive()
                   ? 'bg-gray-600 text-white dark:bg-gray-950'
                   : [
                       'text-gray-950 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-950',
-                      'focus:bg-gray-100 focus:dark:bg-gray-950',
+                      'focus-visible:bg-gray-100 focus-visible:dark:bg-gray-950',
                       state.getView() === 'unread' && isRead() && 'opacity-50',
                     ],
                 local.class,

ui/src/components/feed/feed-list.tsx

@@ -23,7 +23,7 @@ export const FeedList = () => {
           <h3 class="font-semibold uppercase tracking-wider">Feeds</h3>
           <Button
             onClick={handleOpenNewFolder}
-            class="inline-flex items-center gap-1 opacity-100 transition hover:text-gray-900 hover:underline focus:text-gray-900 focus:opacity-100 group-hover:opacity-100 md:opacity-0 dark:focus:text-gray-100 dark:hover:text-gray-100"
+            class="inline-flex items-center gap-1 opacity-100 transition hover:text-gray-900 hover:underline focus-visible:text-gray-900 focus-visible:opacity-100 group-hover:opacity-100 md:opacity-0 dark:focus-visible:text-gray-100 dark:hover:text-gray-100"
           >
             <HiSolidPlusSmall class="size-3 text-gray-400 dark:text-gray-500" />
             New folder

ui/src/components/menus/menu-app.tsx

@@ -35,7 +35,7 @@ export const AppMenu: Component<MenuProps> = props => {
             as={(polyProps: DropdownMenuTriggerProps) => (
               <BaseButton
                 {...polyProps}
-                class="-m-1 inline-flex items-center gap-2 self-start rounded-lg p-1 pr-2 transition hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-30 dark:focus:ring-gray-600 dark:hover:bg-gray-700"
+                class="-m-1 inline-flex items-center gap-2 self-start rounded-lg p-1 pr-2 transition hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-opacity-30 dark:focus-visible:ring-gray-600 dark:hover:bg-gray-700"
               >
                 <LogoSquare iconOnly class="inline-flex size-6" />
                 <Dynamic component={HiOutlineBars2} class="size-5 text-gray-500 md:size-4 dark:text-gray-400" />

ui/src/components/modals/modal.tsx

@@ -27,7 +27,7 @@ export const Modal: ParentComponent<ModalProps> = props => {
             class="relative z-50 w-full animate-content-hide ui-expanded:animate-content-show overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg transition-all sm:max-w-sm dark:border-gray-800 dark:bg-gray-950 dark:shadow-xl"
             onOpenAutoFocus={local.onOpenAutoFocus}
           >
-            <Dialog.CloseButton class="absolute top-2 right-2 rounded-lg p-1 text-gray-500 ring-gray-400 transition hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:ring-2 dark:text-gray-400 dark:ring-gray-600 dark:focus:bg-gray-700 dark:hover:bg-gray-700">
+            <Dialog.CloseButton class="absolute top-2 right-2 rounded-lg p-1 text-gray-500 ring-gray-400 transition hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 dark:text-gray-400 dark:ring-gray-600 dark:focus-visible:bg-gray-700 dark:hover:bg-gray-700">
               <HiOutlineXMark class="size-5" />
             </Dialog.CloseButton>
 

ui/src/components/nav/nav-view-tabs.tsx

@@ -15,13 +15,13 @@ const wrapperClass = cx(
 
 const triggerClass = cx(
   'group z-20 flex flex-1 cursor-default items-center justify-center rounded-lg p-1 transition',
-  'focus:outline-none',
+  'focus-visible:outline-none',
 );
 
 const triggerInnerClass = cx(
   'flex w-full items-center justify-center gap-2 rounded-md border border-transparent px-2 py-1.5 transition',
-  'group-focus:!border-gray-400 group-hover:border-gray-200/50 group-hover:bg-gray-200 group-focus:ring-[2px] group-focus:ring-gray-200',
-  'dark:group-focus:!border-gray-600 dark:group-hover:!border-gray-700 dark:group-focus:ring-gray-800 dark:group-hover:bg-gray-700',
+  'group-focus-visible:!border-gray-400 group-hover:border-gray-200/50 group-hover:bg-gray-200 group-focus-visible:ring-[2px] group-focus-visible:ring-gray-200',
+  'dark:group-focus-visible:!border-gray-600 dark:group-hover:!border-gray-700 dark:group-focus-visible:ring-gray-800 dark:group-hover:bg-gray-700',
   'ui-group-selected:bg-white ui-group-selected:shadow',
   'ui-group-selected:shadow ui-group-selected:dark:bg-gray-950',
 );

ui/src/components/panels/list-panel.tsx

@@ -62,7 +62,7 @@ export const ListPanel = () => {
       <Portal>
         <button
           type="button"
-          class="-translate-y-[9999px] absolute top-2 left-2 z-[9999] hidden select-none appearance-none rounded-lg border bg-white px-3 py-2 text-black text-sm shadow-lg focus:translate-y-0 focus:border-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-30 active:bg-gray-100 md:flex dark:bg-gray-950 dark:text-gray-300 dark:focus:border-gray-400 dark:focus:ring-gray-600"
+          class="-translate-y-[9999px] absolute top-2 left-2 z-[9999] hidden select-none appearance-none rounded-lg border bg-white px-3 py-2 text-black text-sm shadow-lg focus-visible:translate-y-0 focus-visible:border-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-opacity-30 active:bg-gray-100 md:flex dark:bg-gray-950 dark:text-gray-300 dark:focus-visible:border-gray-400 dark:focus-visible:ring-gray-600"
           tabindex={1}
           onClick={handleSkipToContent}
         >

ui/src/components/ui/logo.tsx

@@ -18,7 +18,7 @@ export const Logo: Component<LogoProps> = props => {
       {...rest}
       href="/"
       class={cx(
-        'shrink-0 select-none overflow-hidden rounded-lg focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-30 dark:focus:ring-gray-600',
+        'shrink-0 select-none overflow-hidden rounded-lg focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-gray-500 focus-visible:ring-opacity-30 dark:focus-visible:ring-gray-600',
         local.class,
       )}
     >
@@ -154,7 +154,7 @@ export const LogoSquare: Component<LogoProps> = props => {
         href="/"
         {...rest}
         class={cx(
-          'focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-30 dark:focus:ring-gray-600',
+          'focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-gray-500 focus-visible:ring-opacity-30 dark:focus-visible:ring-gray-600',
           wrapperClass,
         )}
       >

ui/src/constants/ui/button.ts

@@ -2,8 +2,8 @@ import { cva } from 'class-variance-authority';
 
 export const button = cva(
   [
-    'inline-flex shrink-0 touch-manipulation select-none appearance-none items-center justify-center gap-1.5 overflow-hidden font-semibold shadow-gray-200 transition-colors',
-    'focus:outline-none focus:ring-4 focus:ring-opacity-30',
+    'inline-flex shrink-0 touch-manipulation select-none appearance-none items-center justify-center gap-1.5 overflow-hidden font-semibold shadow-gray-200 transition',
+    'focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-opacity-30',
     'dark:shadow-none',
   ],
   {
@@ -12,19 +12,21 @@ export const button = cva(
         primary: [
           'bg-gradient-to-br from-gray-500 to-gray-600 text-white',
           'hover:from-gray-600 hover:to-gray-700',
-          'focus:ring-gray-500',
-          'dark:from-gray-700 dark:to-gray-800 dark:focus:ring-gray-600',
+          'active:from-gray-700 active:to-gray-800',
+          'focus-visible:ring-gray-500',
+          'dark:from-gray-700 dark:to-gray-800 dark:focus-visible:ring-gray-500',
+          'dark:active:from-gray-500 dark:active:to-gray-600',
         ],
         secondary: [
-          'border border-transparent bg-white text-black ring-1 ring-gray-200 focus:ring-gray-500',
+          'border border-transparent bg-white text-black ring-1 ring-gray-200 focus-visible:ring-gray-500',
           'hover:border-gray-100 hover:bg-gray-100',
-          'focus:border-gray-500',
-          'dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:focus:border-gray-600 dark:hover:border-gray-800 dark:hover:bg-gray-800',
+          'focus-visible:border-gray-500',
+          'dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:focus-visible:border-gray-600 dark:hover:border-gray-800 dark:hover:bg-gray-800',
         ],
         danger: [
           'bg-gradient-to-br from-red-500 to-red-600 text-white',
           'hover:from-red-600 hover:to-red-700',
-          'focus:ring-red-500',
+          'focus-visible:ring-red-500',
         ],
       },
       size: {
@@ -54,8 +56,8 @@ export const action = cva(
   [
     'cursor-default touch-manipulation appearance-none rounded-lg text-gray-600',
     'hover:bg-gray-200',
-    'focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-30',
-    'dark:text-gray-400 dark:focus:ring-gray-600 dark:hover:bg-gray-700',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-opacity-30',
+    'dark:text-gray-400 dark:focus-visible:ring-gray-600 dark:hover:bg-gray-700',
     'disabled:pointer-events-none disabled:opacity-25',
   ],
   {

ui/src/constants/ui/feed.ts

@@ -1,14 +1,14 @@
 import { cva, cx } from 'class-variance-authority';
 
 const base = cx(
-  'flex touch-manipulation select-none items-center gap-2 rounded-lg border p-1 text-base no-underline transition focus:outline-none md:rounded-md md:text-sm',
-  'text-gray-600 focus:border-gray-400 dark:text-gray-300 dark:focus:border-gray-600',
+  'flex touch-manipulation select-none items-center gap-2 rounded-lg border p-1 text-base no-underline transition focus-visible:outline-none md:rounded-md md:text-sm',
+  'text-gray-600 focus-visible:border-gray-400 dark:text-gray-300 dark:focus-visible:border-gray-600',
 );
 
 const inactiveClass = cx(
   'border-transparent',
   'hover:bg-gray-100 hover:text-gray-900 xl:hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white',
-  'focus:text-gray-700 dark:focus:text-white',
+  'focus-visible:text-gray-700 dark:focus-visible:text-white',
 );
 
 export const item = cva(base, {
@@ -24,7 +24,7 @@ export const item = cva(base, {
 });
 
 export const folderTrigger = cva(
-  'touch-manipulation rounded-md border border-transparent transition hover:bg-gray-200 focus:border-gray-400 focus:outline-none md:rounded dark:focus:border-gray-600 dark:hover:bg-gray-700',
+  'touch-manipulation rounded-md border border-transparent transition hover:bg-gray-200 focus-visible:border-gray-400 focus-visible:outline-none md:rounded dark:focus-visible:border-gray-600 dark:hover:bg-gray-700',
   {
     variants: {
       active: {

ui/src/constants/ui/input.ts

@@ -3,18 +3,18 @@ import { cva } from 'class-variance-authority';
 export const input = cva(
   [
     'form-input size-full touch-manipulation appearance-none rounded-lg border bg-white font-normal shadow-xs transition-[border,box-shadow]',
-    'focus:outline-none focus:ring-4 focus:ring-opacity-30',
+    'focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-opacity-30',
     'placeholder:select-none placeholder:text-gray-400 dark:placeholder:text-gray-500',
     'dark:bg-gray-900 dark:text-gray-100',
   ],
   {
     variants: {
       error: {
-        true: ['border-red-500', 'focus:border-red-600 focus:ring-red-500', 'dark:border-red-900'],
+        true: ['border-red-500', 'focus-visible:border-red-600 focus-visible:ring-red-500', 'dark:border-red-900'],
         false: [
           'border-gray-200 text-gray-700',
-          'focus:border-gray-600 focus:ring-gray-500',
-          'dark:border-gray-800 dark:focus:border-gray-500 dark:focus:ring-gray-800',
+          'focus-visible:border-gray-600 focus-visible:ring-gray-500',
+          'dark:border-gray-800 dark:focus-visible:border-gray-500 dark:focus-visible:ring-gray-800',
         ],
       },
       size: {

ui/src/constants/ui/menu.ts

@@ -2,16 +2,16 @@ import { cva } from 'class-variance-authority';
 
 export const trigger = cva([
   'flex shrink-0 cursor-default touch-manipulation appearance-none items-center justify-center border border-gray-200 text-gray-500 transition dark:border-gray-700 dark:text-gray-400',
-  'bg-white hover:bg-gray-100 focus:border-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-200 group-hover:opacity-100 dark:focus:border-gray-600 dark:focus:ring-gray-700',
+  'bg-white hover:bg-gray-100 focus-visible:border-gray-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-200 group-hover:opacity-100 dark:focus-visible:border-gray-600 dark:focus-visible:ring-gray-700',
   'hover:border-gray-300 dark:bg-gray-800 dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-100',
   'ui-disabled:cursor-not-allowed ui-disabled:opacity-50',
 ]);
 
 export const item = cva([
   'flex select-none appearance-none items-center gap-3 rounded-md px-2 py-1.5 text-left md:gap-2 md:rounded md:px-2 md:py-1',
   'ui-disabled:cursor-not-allowed ui-disabled:opacity-50',
-  'hover:bg-gray-100 focus:bg-gray-100 focus:outline-none active:bg-gray-100',
-  'dark:active:bg-gray-800 dark:focus:bg-gray-800 dark:hover:bg-gray-800',
+  'hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none active:bg-gray-100',
+  'dark:active:bg-gray-800 dark:focus-visible:bg-gray-800 dark:hover:bg-gray-800',
 ]);
 
 export const itemIcon = cva('size-4 text-gray-400 dark:text-gray-500');
@@ -20,7 +20,7 @@ export const itemKbd = cva('ml-auto inline-flex items-baseline gap-1 font-mono t
 
 export const content = cva(
   [
-    'z-50 overflow-hidden rounded-lg border shadow-sm focus:outline-none md:rounded-md dark:shadow-md',
+    'z-50 overflow-hidden rounded-lg border shadow-sm focus-visible:outline-none md:rounded-md dark:shadow-md',
     'border-gray-200 bg-white text-gray-600',
     'dark:border-gray-800 dark:bg-gray-950 dark:text-gray-200',
     'animate-content-hide ui-expanded:animate-content-show',

ui/src/hooks/use-shortcuts.ts

@@ -41,7 +41,7 @@ export const useShortcuts = () => {
     event.stopPropagation();
 
     // Ignore all shortcuts if a modal is open
-    if (Object.values(modalStore).some(Boolean)) return;
+    if (Object.values(modalStore).some(modal => modal.open)) return;
 
     callback(event);
   };

ui/src/stores/modal.ts

@@ -21,7 +21,7 @@ export const [modalStore, setModalStore] = createStore<{
   moveFeed: { open: false },
 });
 
-export const openModal = <M extends ModalName>(modal: M, data: ModalData[M]) => {
+export const openModal = <M extends ModalName>(modal: M, data?: ModalData[M]) => {
   // @ts-ignore weird type thing I can't fix
   setModalStore(modal, { open: true, data });
 };