akari-blue · ImLunaHey · Dec 22, 2024 · Dec 21, 2024 · Dec 21, 2024 · Dec 21, 2024
diff --git a/src/components/FeedSelector.tsx b/src/components/FeedSelector.tsx
@@ -8,7 +8,7 @@ import { Timeline } from './Timeline';
 import { useTranslation } from 'react-i18next';
 
 export const FeedSelector = ({ columnNumber = 1 }: { columnNumber: number }) => {
-  const { setSettings, experiments, columns } = useSettings();
+  const { setSettings, columns } = useSettings();
   const { t } = useTranslation('app');
   const { isAuthenticated } = useAuth();
   const { data: preferences } = usePreferences();
@@ -47,7 +47,7 @@ export const FeedSelector = ({ columnNumber = 1 }: { columnNumber: number }) =>
   }
 
   return (
-    <div className="flex flex-col gap-2 rounded-lg">
+    <div className="flex flex-col gap-2 rounded-lg w-[550px]">
       <Ariakit.TabProvider
         defaultSelectedId={selectedFeed}
         setSelectedId={(selectedId) => {
@@ -64,32 +64,30 @@ export const FeedSelector = ({ columnNumber = 1 }: { columnNumber: number }) =>
       >
         {/* // if there are less than 2 feeds, don't show the selector */}
         {feeds.length >= 2 && (
-          <Ariakit.TabList
-            className="flex flex-row gap-4 max-w-full overflow-x-scroll bg-neutral-900 p-2 m-2 mb-0 rounded-md"
-            aria-label="feeds"
-          >
-            {data?.map((feed) => (
-              <Ariakit.Tab
-                id={feed.uri}
-                className={cn(
-                  'flex h-10 items-center justify-center whitespace-nowrap bg-neutral-800 px-4',
-                  selectedFeed === feed.uri && 'bg-neutral-700',
-                )}
-              >
-                {feed.displayName}
-              </Ariakit.Tab>
-            ))}
-          </Ariakit.TabList>
+          <div>
+            <Ariakit.TabList
+              className="flex flex-row gap-4 max-w-full overflow-x-scroll bg-neutral-900 p-2 m-2 mb-0 rounded-md"
+              aria-label="feeds"
+            >
+              {data?.map((feed) => (
+                <Ariakit.Tab
+                  id={feed.uri}
+                  className={cn(
+                    'flex h-10 items-center justify-center whitespace-nowrap bg-neutral-800 px-4',
+                    selectedFeed === feed.uri && 'bg-neutral-700',
+                  )}
+                >
+                  {feed.displayName}
+                </Ariakit.Tab>
+              ))}
+            </Ariakit.TabList>
+          </div>
         )}
-        <div className="p-2">
-          {data?.map((feed) => (
-            <Ariakit.TabPanel tabId={feed.uri}>
-              <div className={cn(experiments.columns !== 1 && 'h-dvh overflow-scroll')}>
-                <Timeline columnNumber={columnNumber} />
-              </div>
-            </Ariakit.TabPanel>
-          ))}
-        </div>
+        {data?.map((feed) => (
+          <Ariakit.TabPanel tabId={feed.uri} className="flex-1 overflow-y-scroll min-h-0">
+            <Timeline columnNumber={columnNumber} />
+          </Ariakit.TabPanel>
+        ))}
       </Ariakit.TabProvider>
     </div>
   );

diff --git a/src/components/LoginForm.tsx b/src/components/LoginForm.tsx
@@ -27,48 +27,51 @@ export function LoginForm() {
   };
 
   return (
-    <form  className="space-y-4 w-full max-w-md">
-      <div>
-        <Label htmlFor="handle">{t('app:blueskyHandle')}</Label>
-        <Controller
-          name="handle"
-          control={control}
-          rules={{ required: 'Handle is required' }}
-          render={({ field }) => <HandleInput value={field.value || ''}  className="mt-1" />}
-        />
-        {errors.handle && <p className="mt-1 text-sm text-red-500">{errors.handle.message}</p>}
-      </div>
+    <form  className="p-2">
+      <div className="flex flex-col gap-2 w-[550px]">
+        <div>
+          <Label htmlFor="handle">{t('app:blueskyHandle')}</Label>
+          <Controller
+            name="handle"
+            control={control}
+            rules={{ required: 'Handle is required' }}
+            render={({ field }) => <HandleInput value={field.value || ''}  className="mt-1" />}
+          />
+          {errors.handle && <p className="mt-1 text-sm text-red-500">{errors.handle.message}</p>}
+        </div>
 
-      <div>
-        <Label htmlFor="password">{t('password')}</Label>
-        <Input
-          id="password"
-          type="password"
-          {...register('password', { required: 'Password is required' })}
-          error={!!errors.password}
-        />
-        {errors.password && <p className="mt-1 text-sm text-red-500">{errors.password.message}</p>}
-      </div>
+        <div>
+          <Label htmlFor="password">{t('password')}</Label>
+          <Input
+            id="password"
+            type="password"
+            {...register('password', { required: 'Password is required' })}
+            error={!!errors.password}
+          />
+          {errors.password && <p className="mt-1 text-sm text-red-500">{errors.password.message}</p>}
+        </div>
 
-      {error &&
-        (error?.message === 'A sign in code has been sent to your email address' || error?.message === 'Token is invalid' ? (
-          <div>
-            <Label htmlFor="authFactorToken">{t('authFactorToken')}</Label>
-            <Input
-              id="authFactorToken"
-              type="text"
-              {...register('authFactorToken', { required: 'Two-factor token is required' })}
-              error={!!errors.authFactorToken}
-            />
-            {errors.authFactorToken && <p className="mt-1 text-sm text-red-500">{errors.authFactorToken?.message}</p>}
-          </div>
-        ) : (
-          <p className="text-red-500 text-sm">{error.message}</p>
-        ))}
+        {error &&
+          (error?.message === 'A sign in code has been sent to your email address' ||
+          error?.message === 'Token is invalid' ? (
+            <div>
+              <Label htmlFor="authFactorToken">{t('authFactorToken')}</Label>
+              <Input
+                id="authFactorToken"
+                type="text"
+                {...register('authFactorToken', { required: 'Two-factor token is required' })}
+                error={!!errors.authFactorToken}
+              />
+              {errors.authFactorToken && <p className="mt-1 text-sm text-red-500">{errors.authFactorToken?.message}</p>}
+            </div>
+          ) : (
+            <p className="text-red-500 text-sm">{error.message}</p>
+          ))}
 
-      <Button type="submit" disabled={isLoading} className="w-full">
-        {isLoading ? t('login.pending') : t('login.default')}
-      </Button>
+        <Button type="submit" disabled={isLoading} className="w-full">
+          {isLoading ? t('login.pending') : t('login.default')}
+        </Button>
+      </div>
     </form>
   );
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -2,15 +2,36 @@ import { useTranslation } from 'react-i18next';
 import { useAuth } from '../lib/bluesky/hooks/useAuth';
 import { Link } from './ui/Link';
 import { useBlueskyStore } from '../lib/bluesky/store';
+import { BellIcon, HomeIcon, MailIcon, SettingsIcon, UserIcon } from 'lucide-react';
+
+const HomeLink = () => {
+  const { t } = useTranslation('app');
+  return (
+    <Link to="/">
+      <HomeIcon className="size-10 lg:hidden" />
+      <h1 className="text-2xl font-bold hidden lg:block">{t('appName')}</h1>
+    </Link>
+  );
+};
 
 const MessagesLink = () => {
   const { t } = useTranslation('messages');
-  return <Link to="/messages">{t('messages')}</Link>;
+  return (
+    <Link to="/messages">
+      <MailIcon className="size-10 lg:hidden" />
+      <span className="hidden lg:block">{t('messages')}</span>
+    </Link>
+  );
 };
 
 const NotificationsLink = () => {
   const { t } = useTranslation('notifications');
-  return <Link to="/notifications">{t('notifications')}</Link>;
+  return (
+    <Link to="/notifications">
+      <BellIcon className="size-10 lg:hidden" />
+      <span className="hidden lg:block">{t('notifications')}</span>
+    </Link>
+  );
 };
 
 const ProfileLink = () => {
@@ -26,20 +47,20 @@ const ProfileLink = () => {
         handle: session?.handle,
       }}
     >
-      {t('profile')}
+      <UserIcon className="size-10 lg:hidden" />
+      <span className="hidden lg:block">{t('profile')}</span>
     </Link>
   );
 };
 
 const SettingsLink = () => {
   const { t } = useTranslation('app');
-  return <Link to="/settings">{t('settings')}</Link>;
-};
-
-const LogoutButton = () => {
-  const { logout } = useAuth();
-  const { t } = useTranslation('auth');
-  return <button >
+  return (
+    <Link to="/settings">
+      <SettingsIcon className="size-10 lg:hidden" />
+      <span className="hidden lg:block">{t('settings')}</span>
+    </Link>
+  );
 };
 
 const LoginButton = () => {
@@ -49,21 +70,16 @@ const LoginButton = () => {
 
 export const Navbar = () => {
   const { isAuthenticated } = useAuth();
-  const { t } = useTranslation('app');
 
   return (
-    <div className="flex flex-col justify-between items-center">
-      <div className="flex justify-between items-center w-full">
-        <Link to="/">
-          <h1 className="text-2xl font-bold">{t('appName')}</h1>
-        </Link>
-        <div className="flex flex-row gap-2">
-          {isAuthenticated && <MessagesLink />}
-          {isAuthenticated && <NotificationsLink />}
-          {isAuthenticated && <ProfileLink />}
-          <SettingsLink />
-          {isAuthenticated ? <LogoutButton /> : <LoginButton />}
-        </div>
+    <div className="fixed bottom-0 left-0 right-0 bg-neutral-900 lg:bg-inherit p-4 z-50 md:top-0 md:right-auto lg:relative lg:h-fit">
+      <div className="flex flex-row gap-2 justify-between md:flex-col">
+        <HomeLink />
+        {isAuthenticated && <MessagesLink />}
+        {isAuthenticated && <NotificationsLink />}
+        {isAuthenticated && <ProfileLink />}
+        <SettingsLink />
+        {!isAuthenticated && <LoginButton />}
       </div>
     </div>
   );

diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx
@@ -66,7 +66,11 @@ export function PostCard({ post, context, className, onClick }: PostCardProps) {
   }
 
   return (
-    <div className={cn('bg-white dark:bg-neutral-900 p-4 rounded-lg shadow', className)}  id={post.uri}>
+    <div
+      className={cn('bg-white dark:bg-neutral-900 p-4 rounded-lg shadow w-[550px]', className)}
+      >
+      id={post.uri}
+    >
       {/* {!!post.record.reply && <PostCard post={reply} />} */}
       <div className="flex items-center space-x-3 mb-2">
         {post.author.avatar && (

diff --git a/src/components/PostEmbed.tsx b/src/components/PostEmbed.tsx
@@ -59,7 +59,7 @@ export const PostEmbed = ({ embed }: { embed?: BskyPostEmbed | null }) => {
           </a>
           <Image
             type="post"
-            src={embed.external.thumb}
+            src={embed.external.uri ?? embed.external.thumb}
             alt={embed.external.title}
             className="rounded-lg w-full aspect-square object-cover"
           />
@@ -113,7 +113,7 @@ export const PostEmbed = ({ embed }: { embed?: BskyPostEmbed | null }) => {
             if (embed.record.$type === 'app.bsky.embed.record#viewRecord' && embed.record.text) {
               return (
                 <p className="text-gray-800 dark:text-gray-200 mb-3">
-                  {<FacetedText text={embed.record.text} facets={embed.record.facets} key={embed.record.uri} />}
+                  <FacetedText text={embed.record.text} facets={embed.record.facets} key={embed.record.uri} />
                 </p>
               );
             }
@@ -142,7 +142,22 @@ export const PostEmbed = ({ embed }: { embed?: BskyPostEmbed | null }) => {
         </div>
       );
     }
+    case 'app.bsky.embed.recordWithMedia#view':
+      return (
+        <>
+          <div className={cn((embed.record.record.embeds ?? [])?.length >= 2 && 'grid grid-cols-2', 'gap-2 mb-3')}>
+            <Image
+              type="post"
+              key={embed.media.external.uri}
+              src={embed.media.external.uri ?? embed.media.external.thumb}
+              alt={embed.media.external.description}
+              className="rounded-lg w-full object-cover"
+            />
+          </div>
+        </>
+      );
     default:
+      // @ts-expect-error - this should never happen
       return <NotImplementedBox type={embed.$type} data={embed.record} />;
   }
 };
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
@@ -112,7 +112,7 @@ export function Timeline({ columnNumber = 1 }: { columnNumber: number }) {
   }
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-4">
       {posts.map(({ post, feedContext }) => (
         <PostCard
           key={post.uri}

diff --git a/src/components/ui/NotImplementedBox.tsx b/src/components/ui/NotImplementedBox.tsx
@@ -1,11 +1,11 @@
 import { useTranslation } from 'react-i18next';
 import { Debug } from './Debug';
-export const NotImplementedBox = ({ type, data }: { type: string; data: unknown }) => {
+export const NotImplementedBox = ({ type, data }: { type: string; data?: unknown }) => {
   const { t } = useTranslation('debug');
   return (
-    <div className="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg mb-3">
+    <div className="p-4 bg-gray-100 dark:bg-neutral-600 text-center">
       {t('notImplemented', { value: type })}
-      <Debug value={data} />
+      {Boolean(data) && <Debug value={data} />}
     </div>
   );
 };