autoimported icons and readme

README.md

···
 # Red Dwarf
 Red Dwarf is a Bluesky client that does not use any AppView servers, instead it gathers the data from [Constellation](https://constellation.microcosm.blue/) and each users' PDS.
 
-![screenshot of red dwarf](/public/screenshot.png)
+![screenshot of red dwarf](/public/screenshot.jpg)
 
 huge thanks to [Microcosm](https://microcosm.blue/) for making this possible
 
···
 and for list feeds, you can just use something like graze or skyfeed to input a list of users and output a custom feed
 
 ## Tanstack Router
-it does the job, nothing very specific was used here
+something specific was used here
+
+so tanstack router is used as the base, but the home route is using tanstack-router-keepalive to preserve the route for better responsiveness, and it also saves scroll position of feeds into jotai (persistent)
+
+i previously used a tanstack router loader to ensure the tanstack query cache is ready to prevent scroll jumps but it is way too slow so i replaced it with tanstack-router-keepalive
+
+## Icons
+this project uses Material icons. do not the light variant. sometimes i use `Mdi` if the icon needed doesnt exist in `MaterialSymbols`
 
-im planning to use the loader system on select pages to prevent loss of scroll positon and state though its really complex so i havent done it yet but the migration to tanstack query is a huge first step towards this goal
+the project uses unplugin icon auto import, so you can just use the component and itll just work!
+
+the format is:
+```tsx
+<IconMaterialSymbols{icon name here} />
+// or
+<IconMdi{icon name here} />
+```
+
+you can get the full list of icon names from iconify ([Material Symbols](https://icon-sets.iconify.design/material-symbols/) or [MDI](https://icon-sets.iconify.design/mdi/))
+
+while it is nice to keep everything consistent by using material icons, if the icon you need is not provided by either material symbols nor mdi, you are allowed to just grab any icon from any pack (please do prioritize icons that fit in)

src/auto-imports.d.ts

···
 // biome-ignore lint: disable
 export {}
 declare global {
-
+  const IconMaterialSymbolsAccountCircle: typeof import('~icons/material-symbols/account-circle.jsx').default
+  const IconMaterialSymbolsAccountCircleOutline: typeof import('~icons/material-symbols/account-circle-outline.jsx').default
+  const IconMaterialSymbolsHome: typeof import('~icons/material-symbols/home.jsx').default
+  const IconMaterialSymbolsHomeOutline: typeof import('~icons/material-symbols/home-outline.jsx').default
+  const IconMaterialSymbolsNotifications: typeof import('~icons/material-symbols/notifications.jsx').default
+  const IconMaterialSymbolsNotificationsOutline: typeof import('~icons/material-symbols/notifications-outline.jsx').default
+  const IconMaterialSymbolsSearch: typeof import('~icons/material-symbols/search.jsx').default
+  const IconMaterialSymbolsSettings: typeof import('~icons/material-symbols/settings.jsx').default
+  const IconMaterialSymbolsSettingsOutline: typeof import('~icons/material-symbols/settings-outline.jsx').default
+  const IconMaterialSymbolsTag: typeof import('~icons/material-symbols/tag.jsx').default
+  const IconMdiAccountCircle: typeof import('~icons/mdi/account-circle.jsx').default
+  const IconMdiPencilOutline: typeof import('~icons/mdi/pencil-outline.jsx').default
 }

src/routes/__root.tsx

···
 import { NotFound } from "~/components/NotFound";
 import { UnifiedAuthProvider, useAuth } from "~/providers/UnifiedAuthProvider";
 import { seo } from "~/utils/seo";
-import IconHome from "~icons/material-symbols/home"
-import IconHomeOutline from "~icons/material-symbols/home-outline"
-import IconNotifications from "~icons/material-symbols/notifications"
-import IconNotificationsOutline from "~icons/material-symbols/notifications-outline"
-import IconSearch from "~icons/material-symbols/search"
-import IconSettings from "~icons/material-symbols/settings"
-import IconSettingsOutline from "~icons/material-symbols/settings-outline"
-import IconTag from "~icons/material-symbols/tag"
-import IconAccountCircleOutline from  "~icons/mdi/account-circle-outline"
-import IconPencilOutline from "~icons/mdi/pencil-outline"
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient;
···
             }
           >
             {!isHome ? (
-              <IconHomeOutline width={28} height={28} />
+              <IconMaterialSymbolsHomeOutline width={28} height={28} />
             ) : (
-              <IconHome width={28} height={28} />
+              <IconMaterialSymbolsHome width={28} height={28} />
             )}
             <span>Home</span>
           </Link>
···
             }
           >
             {!isNotifications ? (
-              <IconNotificationsOutline width={28} height={28} />
+              <IconMaterialSymbolsNotificationsOutline width={28} height={28} />
             ) : (
-              <IconNotifications width={28} height={28} />
+              <IconMaterialSymbolsNotifications width={28} height={28} />
             )}
             <span>Notifications</span>
           </Link>
···
             }`}
           >
             {location.pathname.startsWith("/feeds") ? (
-              <IconTag width={28} height={28} />
+              <IconMaterialSymbolsTag width={28} height={28} />
             ) : (
-              <IconTag width={28} height={28} />
+              <IconMaterialSymbolsTag width={28} height={28} />
             )}
             <span>Feeds</span>
           </Link>
···
             }`}
           >
             {location.pathname.startsWith("/search") ? (
-              <IconSearch width={28} height={28} />
+              <IconMaterialSymbolsSearch width={28} height={28} />
             ) : (
-              <IconSearch width={28} height={28} />
+              <IconMaterialSymbolsSearch width={28} height={28} />
             )}
             <span>Search</span>
           </Link>
···
             }}
             type="button"
           >
-            <IconAccountCircleOutline width={28} height={28} />
+            {!isProfile ? (
+              <IconMaterialSymbolsAccountCircleOutline width={28} height={28} />
+            ) : (
+              <IconMaterialSymbolsAccountCircle width={28} height={28} />
+            )
+              }
             <span>Profile</span>
           </button>
           <Link
···
             }`}
           >
             {!location.pathname.startsWith("/settings") ? (
-              <IconSettingsOutline width={28} height={28} />
+              <IconMaterialSymbolsSettingsOutline width={28} height={28} />
             ) : (
-              <IconSettings width={28} height={28} />
+              <IconMaterialSymbolsSettings width={28} height={28} />
             )}
             <span>Settings</span>
           </Link>
···
             onClick={() => setPostOpen(true)}
             type="button"
           >
-            <IconPencilOutline
+            <IconMdiPencilOutline
               width={24}
               height={24}
               className="text-gray-600 dark:text-gray-400"
···
           type="button"
           aria-label="Create Post"
         >
-          <IconPencilOutline
+          <IconMdiPencilOutline
             width={24}
             height={24}
             className="text-gray-600 dark:text-gray-400"
···
             }`}
           >
             {!isHome ? (
-              <IconHomeOutline width={24} height={24} />
+              <IconMaterialSymbolsHomeOutline width={24} height={24} />
             ) : (
-              <IconHome width={24} height={24} />
+              <IconMaterialSymbolsHome width={24} height={24} />
             )}
             <span className="text-xs mt-1">Home</span>
           </Link>
···
             }`}
           >
             {!location.pathname.startsWith("/search") ? (
-              <IconSearch width={24} height={24} />
+              <IconMaterialSymbolsSearch width={24} height={24} />
             ) : (
-              <IconSearch width={24} height={24} />
+              <IconMaterialSymbolsSearch width={24} height={24} />
             )}
             <span className="text-xs mt-1">Search</span>
           </Link>
···
             }`}
           >
             {!isNotifications ? (
-              <IconNotificationsOutline width={24} height={24} />
+              <IconMaterialSymbolsNotificationsOutline width={24} height={24} />
             ) : (
-              <IconNotifications width={24} height={24} />
+              <IconMaterialSymbolsNotifications width={24} height={24} />
             )}
             <span className="text-xs mt-1">Notifications</span>
           </Link>
···
             }}
             type="button"
           >
-            <IconAccountCircleOutline width={24} height={24} />
+            <IconMaterialSymbolsAccountCircleOutline width={24} height={24} />
             <span className="text-xs mt-1">Profile</span>
           </button>
           <Link
···
             }`}
           >
             {!location.pathname.startsWith("/settings") ? (
-              <IconSettingsOutline width={24} height={24} />
+              <IconMaterialSymbolsSettingsOutline width={24} height={24} />
             ) : (
-              <IconSettings width={24} height={24} />
+              <IconMaterialSymbolsSettings width={24} height={24} />
             )}
             <span className="text-xs mt-1">Settings</span>
           </Link>