wip: timeline

package.json

@@ -18,7 +18,6 @@
     "**/*.{ts, tsx, css, md, html, json}": "prettier --cache --write"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.0.8",
     "@getalby/sdk": "^2.4.0",
     "@nostr-dev-kit/ndk": "^1.2.1",
     "@nostr-fetch/adapter-ndk": "^0.12.2",
@@ -40,7 +39,6 @@
     "@tiptap/suggestion": "^2.1.10",
     "dayjs": "^1.11.10",
     "destr": "^2.0.1",
-    "get-urls": "^12.1.0",
     "html-to-text": "^9.0.5",
     "light-bolt11-decoder": "^3.0.0",
     "lru-cache": "^10.0.1",

pnpm-lock.yaml

@@ -5,9 +5,6 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
-  '@dnd-kit/core':
-    specifier: ^6.0.8
-    version: 6.0.8(react-dom@18.2.0)(react@18.2.0)
   '@getalby/sdk':
     specifier: ^2.4.0
     version: 2.4.0
@@ -71,9 +68,6 @@ dependencies:
   destr:
     specifier: ^2.0.1
     version: 2.0.1
-  get-urls:
-    specifier: ^12.1.0
-    version: 12.1.0
   html-to-text:
     specifier: ^9.0.5
     version: 9.0.5
@@ -130,7 +124,7 @@ dependencies:
     version: 3.0.1
   tauri-plugin-sql-api:
     specifier: github:tauri-apps/tauri-plugin-sql#v1
-    version: github.com/tauri-apps/tauri-plugin-sql/26467343db277e79daf3a216372ba25e1fec0deb
+    version: github.com/tauri-apps/tauri-plugin-sql/51e39b0b6ba542ffc6af1fa438933fdc1ae265a0
   tauri-plugin-store-api:
     specifier: github:tauri-apps/tauri-plugin-store#v1
     version: github.com/tauri-apps/tauri-plugin-store/a65ce9bfb168a9a3cd7ed4102b9f22770cc3abfa
@@ -375,37 +369,6 @@ packages:
       to-fast-properties: 2.0.0
     dev: true
 
-  /@dnd-kit/accessibility@3.0.1(react@18.2.0):
-    resolution: {integrity: sha512-HXRrwS9YUYQO9lFRc/49uO/VICbM+O+ZRpFDe9Pd1rwVv2PCNkRiTZRdxrDgng/UkvdC3Re9r2vwPpXXrWeFzg==}
-    peerDependencies:
-      react: '>=16.8.0'
-    dependencies:
-      react: 18.2.0
-      tslib: 2.6.2
-    dev: false
-
-  /@dnd-kit/core@6.0.8(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-lYaoP8yHTQSLlZe6Rr9qogouGUz9oRUj4AHhDQGQzq/hqaJRpFo65X+JKsdHf8oUFBzx5A+SJPUvxAwTF2OabA==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-    dependencies:
-      '@dnd-kit/accessibility': 3.0.1(react@18.2.0)
-      '@dnd-kit/utilities': 3.2.1(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      tslib: 2.6.2
-    dev: false
-
-  /@dnd-kit/utilities@3.2.1(react@18.2.0):
-    resolution: {integrity: sha512-OOXqISfvBw/1REtkSK2N3Fi2EQiLMlWUlqnOK/UpOISqBZPWpE6TqL+jcPtMOkE8TqYGiURvRdPSI9hltNUjEA==}
-    peerDependencies:
-      react: '>=16.8.0'
-    dependencies:
-      react: 18.2.0
-      tslib: 2.6.2
-    dev: false
-
   /@esbuild/android-arm64@0.18.20:
     resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
     engines: {node: '>=12'}
@@ -2668,13 +2631,6 @@ packages:
       string-width: 5.1.2
     dev: true
 
-  /clone-regexp@3.0.0:
-    resolution: {integrity: sha512-ujdnoq2Kxb8s3ItNBtnYeXdm07FcU0u8ARAT1lQ2YdMwQC+cdiXX8KoqMVuglztILivceTtp4ivqGSmEmhBUJw==}
-    engines: {node: '>=12'}
-    dependencies:
-      is-regexp: 3.1.0
-    dev: false
-
   /clsx@2.0.0:
     resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
     engines: {node: '>=6'}
@@ -2723,11 +2679,6 @@ packages:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
-  /convert-hrtime@5.0.0:
-    resolution: {integrity: sha512-lOETlkIeYSJWcbbcvjRKGxVMXJR+8+OQb/mTPbA4ObPMytYIsUbuOE0Jzy60hjARYszq1id0j8KgVhC+WGZVTg==}
-    engines: {node: '>=12'}
-    dev: false
-
   /crelt@1.0.6:
     resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
     dev: false
@@ -3400,11 +3351,6 @@ packages:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
     dev: true
 
-  /function-timeout@0.1.1:
-    resolution: {integrity: sha512-0NVVC0TaP7dSTvn1yMiy6d6Q8gifzbvQafO46RtLG/kHJUBNd+pVRGOBoK44wNBvtSPUJRfdVvkFdD3p0xvyZg==}
-    engines: {node: '>=14.16'}
-    dev: false
-
   /function.prototype.name@1.1.6:
     resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
     engines: {node: '>= 0.4'}
@@ -3446,17 +3392,6 @@ packages:
       get-intrinsic: 1.2.1
     dev: true
 
-  /get-urls@12.1.0:
-    resolution: {integrity: sha512-qHO+QmPiI1bEw0Y/m+WMAAx/UoEEXLZwEx0DVaKMtlHNrKbMeV960LryIpd+E2Ykb9XkVHmVtpbCsmul3GhR0g==}
-    engines: {node: '>=16'}
-    dependencies:
-      normalize-url: 8.0.0
-      super-regex: 0.2.0
-      url-regex-safe: 4.0.0
-    transitivePeerDependencies:
-      - re2
-    dev: false
-
   /glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -3672,11 +3607,6 @@ packages:
       loose-envify: 1.4.0
     dev: false
 
-  /ip-regex@4.3.0:
-    resolution: {integrity: sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==}
-    engines: {node: '>=8'}
-    dev: false
-
   /is-array-buffer@3.0.2:
     resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
     dependencies:
@@ -3819,11 +3749,6 @@ packages:
       has-tostringtag: 1.0.0
     dev: true
 
-  /is-regexp@3.1.0:
-    resolution: {integrity: sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==}
-    engines: {node: '>=12'}
-    dev: false
-
   /is-set@2.0.2:
     resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
     dev: true
@@ -4612,11 +4537,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /normalize-url@8.0.0:
-    resolution: {integrity: sha512-uVFpKhj5MheNBJRTiMZ9pE/7hD1QTeEvugSJW/OmLzAp78PB5O6adfMNTvmfKhXBkvCzC+rqifWcVYpGFwTjnw==}
-    engines: {node: '>=14.16'}
-    dev: false
-
   /nostr-fetch@0.13.0:
     resolution: {integrity: sha512-0lIBkDjF5W0OBtkoMPax6ArKlzMGQDfc6cSyZ+XFvAoY2TJEiUXkI7Piwf0TQBEvJtahHaZnaTaFD13T69mgmQ==}
     dependencies:
@@ -5709,15 +5629,6 @@ packages:
       ts-interface-checker: 0.1.13
     dev: true
 
-  /super-regex@0.2.0:
-    resolution: {integrity: sha512-WZzIx3rC1CvbMDloLsVw0lkZVKJWbrkJ0k1ghKFmcnPrW1+jWbgTkTEWVtD9lMdmI4jZEz40+naBxl1dCUhXXw==}
-    engines: {node: '>=14.16'}
-    dependencies:
-      clone-regexp: 3.0.0
-      function-timeout: 0.1.1
-      time-span: 5.1.0
-    dev: false
-
   /supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -5794,24 +5705,12 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  /time-span@5.1.0:
-    resolution: {integrity: sha512-75voc/9G4rDIJleOo4jPvN4/YC4GRZrY8yy1uU4lwrB3XEQbWve8zXoO5No4eFrGcTAMYyoY67p8jRQdtA1HbA==}
-    engines: {node: '>=12'}
-    dependencies:
-      convert-hrtime: 5.0.0
-    dev: false
-
   /tippy.js@6.3.7:
     resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
     dependencies:
       '@popperjs/core': 2.11.8
     dev: false
 
-  /tlds@1.242.0:
-    resolution: {integrity: sha512-aP3dXawgmbfU94mA32CJGHmJUE1E58HCB1KmlKRhBNtqBL27mSQcAEmcaMaQ1Za9kIVvOdbxJD3U5ycDy7nJ3w==}
-    hasBin: true
-    dev: false
-
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -6028,19 +5927,6 @@ packages:
       punycode: 2.3.0
     dev: true
 
-  /url-regex-safe@4.0.0:
-    resolution: {integrity: sha512-BrnFCWKNFrFnRzKD66NtJqQepfJrUHNPvPxE5y5NSAhXBb4OlobQjt7907Jm4ItPiXaeX+dDWMkcnOd4jR9N8A==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      re2: ^1.20.1
-    peerDependenciesMeta:
-      re2:
-        optional: true
-    dependencies:
-      ip-regex: 4.3.0
-      tlds: 1.242.0
-    dev: false
-
   /use-callback-ref@1.3.0(@types/react@18.2.22)(react@18.2.0):
     resolution: {integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==}
     engines: {node: '>=10'}
@@ -6361,8 +6247,8 @@ packages:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: false
 
-  github.com/tauri-apps/tauri-plugin-sql/26467343db277e79daf3a216372ba25e1fec0deb:
+  github.com/tauri-apps/tauri-plugin-sql/51e39b0b6ba542ffc6af1fa438933fdc1ae265a0:
-    resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-sql/tar.gz/26467343db277e79daf3a216372ba25e1fec0deb}
+    resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-sql/tar.gz/51e39b0b6ba542ffc6af1fa438933fdc1ae265a0}
     name: tauri-plugin-sql-api
     version: 0.0.0
     dependencies:

src/app.tsx

@@ -59,6 +59,13 @@ const router = createBrowserRouter([
           return { Component: SpaceScreen };
         },
       },
+      {
+        path: 'timeline',
+        async lazy() {
+          const { TimelineScreen } = await import('@app/timeline');
+          return { Component: TimelineScreen };
+        },
+      },
       {
         path: 'users/:pubkey',
         async lazy() {

src/app/chats/components/item.tsx

@@ -11,7 +11,7 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
 
   if (status === 'loading') {
     return (
-      <div className="inline-flex h-10 items-center gap-2.5 rounded-md px-2">
+      <div className="inline-flex h-10 items-center gap-2.5 rounded-md px-3">
         <div className="relative h-7 w-7 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
         <div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
       </div>
@@ -24,7 +24,7 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
       preventScrollReset={true}
       className={({ isActive }) =>
         twMerge(
-          'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
+          'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
           isActive
             ? 'border-fuchsia-500 bg-white/5 text-white'
             : 'border-transparent text-white/70'

src/app/chats/components/modal.tsx

@@ -23,7 +23,7 @@ export function NewMessageModal() {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-2"
+          className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-3"
         >
           <div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
             <PlusIcon className="h-4 w-4 text-white" />

src/app/chats/components/unknowns.tsx

@@ -21,7 +21,7 @@ export function UnknownsModal({ data }: { data: string[] }) {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-2"
+          className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-3"
         >
           <div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
             <StrangersIcon className="h-4 w-4 text-white" />

src/app/timeline/index.tsx

@@ -0,0 +1,7 @@
+export function TimelineScreen() {
+  return (
+    <div>
+      <p>TODO</p>
+    </div>
+  );
+}

src/shared/accounts/active.tsx

@@ -1,10 +1,12 @@
 import { NDKFilter, NDKKind } from '@nostr-dev-kit/ndk';
 import { useEffect } from 'react';
+import { Link } from 'react-router-dom';
 
 import { useStorage } from '@libs/storage/provider';
 
-import { AccountMoreActions } from '@shared/accounts/more';
+import { SettingsIcon } from '@shared/icons';
 import { Image } from '@shared/image';
+import { Logout } from '@shared/logout';
 
 import { useActivities } from '@stores/activities';
 
@@ -63,23 +65,31 @@ export function ActiveAccount() {
   }
 
   return (
-    <div className="flex h-16 items-center justify-between border-l-2 border-transparent pb-2 pl-4 pr-2">
+    <div className="flex h-16 items-center justify-between border-l-2 border-transparent pb-2 pl-4 pr-3">
-      <div className="flex items-center gap-2.5">
+      <Link to={`/users/${db.account.pubkey}`} className="flex items-center gap-1.5">
         <Image
           src={user?.picture || user?.image}
           alt={db.account.npub}
-          className="h-10 w-10 shrink-0 rounded-lg object-cover"
+          className="h-9 w-9 shrink-0 rounded-lg object-cover"
         />
-        <div className="flex w-full flex-1 flex-col items-start gap-1.5">
+        <div className="flex w-full flex-1 flex-col items-start gap-0.5">
-          <p className="max-w-[10rem] truncate font-bold leading-none text-white">
+          <p className="max-w-[10rem] truncate font-semibold leading-none text-white">
             {user?.name || user?.display_name}
           </p>
-          <span className="max-w-[8rem] truncate text-sm leading-none text-white/50">
+          <span className="max-w-[7rem] truncate text-sm leading-none text-white/50">
-            {displayNpub(db.account.pubkey, 16)}
+            {user?.nip05 || displayNpub(db.account.pubkey, 12)}
           </span>
         </div>
+      </Link>
+      <div className="inline-flex divide-x divide-white/5 rounded-lg border-t border-white/10 bg-white/20">
+        <Link
+          to="/settings/"
+          className="inline-flex h-9 w-9 items-center justify-center hover:bg-white/10"
+        >
+          <SettingsIcon className="h-4 w-4 text-white" />
+        </Link>
+        <Logout />
       </div>
-      <AccountMoreActions pubkey={db.account.pubkey} />
     </div>
   );
 }

src/shared/composer/modal.tsx

@@ -28,12 +28,10 @@ export function ComposerModal() {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-2 text-white/80"
+          className="flex h-9 items-center gap-2 rounded-full border-t border-white/10 bg-white/20 px-4 text-sm font-semibold leading-none text-white/80 hover:bg-fuchsia-500 hover:text-white"
         >
-          <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+          New
-            <ComposeIcon className="h-4 w-4 text-white" />
+          <ComposeIcon className="h-4 w-4 text-white" />
-          </span>
-          New postr
         </button>
       </Dialog.Trigger>
       <Dialog.Portal className="relative z-10">

src/shared/icons/index.ts

@@ -64,3 +64,4 @@ export * from './follows';
 export * from './alby';
 export * from './stars';
 export * from './nwc';
+export * from './timeline';

src/shared/icons/timeline.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+export function TimeLineIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M22.25 15C17.215 15 15 17.215 15 22.25 15 17.215 12.785 15 7.75 15 12.785 15 15 12.785 15 7.75c0 5.035 2.215 7.25 7.25 7.25zM11.25 6.5c-3.299 0-4.75 1.451-4.75 4.75 0-3.299-1.451-4.75-4.75-4.75 3.299 0 4.75-1.451 4.75-4.75 0 3.299 1.451 4.75 4.75 4.75z"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  );
+}

src/shared/logout.tsx

@@ -3,6 +3,8 @@ import { useNavigate } from 'react-router-dom';
 
 import { useStorage } from '@libs/storage/provider';
 
+import { LogoutIcon } from '@shared/icons';
+
 import { useStronghold } from '@stores/stronghold';
 
 export function Logout() {
@@ -25,9 +27,9 @@ export function Logout() {
       <AlertDialog.Trigger asChild>
         <button
           type="button"
-          className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-white/10"
+          className="inline-flex h-9 w-9 items-center justify-center hover:bg-white/10"
         >
-          Logout
+          <LogoutIcon className="h-4 w-4 text-white" />
         </button>
       </AlertDialog.Trigger>
       <AlertDialog.Portal className="relative z-10">

src/shared/navigation.tsx

@@ -4,12 +4,16 @@ import { twMerge } from 'tailwind-merge';
 
 import { ChatsList } from '@app/chats/components/list';
 
-import { useStorage } from '@libs/storage/provider';
-
 import { ActiveAccount } from '@shared/accounts/active';
 import { ComposerModal } from '@shared/composer';
 import { Frame } from '@shared/frame';
-import { BellIcon, NavArrowDownIcon, NwcIcon, SpaceIcon } from '@shared/icons';
+import {
+  BellIcon,
+  NavArrowDownIcon,
+  NwcIcon,
+  SpaceIcon,
+  TimeLineIcon,
+} from '@shared/icons';
 
 import { useActivities } from '@stores/activities';
 import { useSidebar } from '@stores/sidebar';
@@ -17,8 +21,6 @@ import { useSidebar } from '@stores/sidebar';
 import { compactNumber } from '@utils/number';
 
 export function Navigation() {
-  const { db } = useStorage();
-
   const [totalNewActivities] = useActivities((state) => [state.totalNewActivities]);
   const [chats, toggleChats] = useSidebar((state) => [state.chats, state.toggleChats]);
   const [integrations, toggleIntegrations] = useSidebar((state) => [
@@ -28,18 +30,37 @@ export function Navigation() {
 
   return (
     <Frame className="relative flex h-full w-[232px] flex-col" lighter>
-      {db.platform === 'darwin' ? (
+      <div className="inline-flex h-16 w-full items-center justify-end px-3">
-        <div data-tauri-drag-region className="h-11 w-full shrink-0" />
+        <ComposerModal />
-      ) : null}
+      </div>
-      <div className="scrollbar-hide flex h-full flex-1 flex-col gap-6 overflow-y-auto pb-32">
+      <div
-        <div className="flex flex-col pr-2">
+        data-tauri-drag-region
-          <ComposerModal />
+        className="scrollbar-hide flex h-full flex-1 flex-col gap-6 overflow-y-auto pb-32"
+      >
+        <div className="flex flex-col pr-3">
+          <NavLink
+            to="/timeline"
+            preventScrollReset={true}
+            className={({ isActive }) =>
+              twMerge(
+                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
+                isActive
+                  ? 'border-fuchsia-500 bg-white/5 text-white'
+                  : 'border-transparent text-white/70'
+              )
+            }
+          >
+            <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
+              <TimeLineIcon className="h-4 w-4 text-white" />
+            </span>
+            Timeline
+          </NavLink>
           <NavLink
             to="/"
             preventScrollReset={true}
             className={({ isActive }) =>
               twMerge(
-                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
+                'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
                 isActive
                   ? 'border-fuchsia-500 bg-white/5 text-white'
                   : 'border-transparent text-white/70'
@@ -56,7 +77,7 @@ export function Navigation() {
             preventScrollReset={true}
             className={({ isActive }) =>
               twMerge(
-                'flex h-10 items-center justify-between rounded-r-lg border-l-2 pl-4 pr-2',
+                'flex h-10 items-center justify-between rounded-r-lg border-l-2 pl-4 pr-3',
                 isActive
                   ? 'border-fuchsia-500 bg-white/5 text-white'
                   : 'border-transparent text-white/70'
@@ -81,7 +102,7 @@ export function Navigation() {
           </NavLink>
         </div>
         <Collapsible.Root open={integrations} onOpenChange={toggleIntegrations}>
-          <div className="flex flex-col gap-1 pr-2">
+          <div className="flex flex-col gap-1 pr-3">
             <Collapsible.Trigger asChild>
               <button className="flex items-center gap-1 pl-[20px] pr-4">
                 <div
@@ -103,7 +124,7 @@ export function Navigation() {
                 preventScrollReset={true}
                 className={({ isActive }) =>
                   twMerge(
-                    'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
+                    'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
                     isActive
                       ? 'border-fuchsia-500 bg-white/5 text-white'
                       : 'border-transparent text-white/70'
@@ -119,7 +140,7 @@ export function Navigation() {
           </div>
         </Collapsible.Root>
         <Collapsible.Root open={chats} onOpenChange={toggleChats}>
-          <div className="flex flex-col gap-1 pr-2">
+          <div className="flex flex-col gap-1 pr-3">
             <Collapsible.Trigger asChild>
               <button className="flex items-center gap-1 pl-[20px] pr-4">
                 <div