feat: improve mobile experience

2025-01-02 21:57:14 +08:00 · 2025-01-02 21:57:14 +08:00 · 3946e603b3
commit 3946e603b3
parent 8ec0d46d58
98 changed files with 2508 additions and 1058 deletions
--- a/src/components/FeedSwitcher/index.tsx
+++ b/src/components/FeedSwitcher/index.tsx
@ -0,0 +1,103 @@
+import { toRelaySettings } from '@/lib/link'
+import { simplifyUrl } from '@/lib/url'
+import { SecondaryPageLink } from '@/PageManager'
+import { useFeed } from '@/providers/FeedProvider'
+import { useNostr } from '@/providers/NostrProvider'
+import { useRelaySettings } from '@/providers/RelaySettingsProvider'
+import { Circle, CircleCheck } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+export default function FeedSwitcher({ close }: { close?: () => void }) {
+  const { t } = useTranslation()
+  const { feedType, setFeedType } = useFeed()
+  const { pubkey } = useNostr()
+  const { relayGroups, temporaryRelayUrls, switchRelayGroup } = useRelaySettings()
+
+  return (
+    <div className="space-y-4">
+      {pubkey && (
+        <FeedSwitcherItem
+          itemName={t('Following')}
+          isActive={feedType === 'following'}
+          onClick={() => {
+            setFeedType('following')
+            close?.()
+          }}
+        />
+      )}
+      <div className="space-y-2">
+        <div className="flex justify-between px-2">
+          <div className="text-muted-foreground text-sm font-semibold">{t('relay feeds')}</div>
+          <SecondaryPageLink
+            to={toRelaySettings()}
+            className="text-highlight text-sm font-semibold"
+            onClick={() => close?.()}
+          >
+            {t('edit')}
+          </SecondaryPageLink>
+        </div>
+        {temporaryRelayUrls.length > 0 && (
+          <FeedSwitcherItem
+            key="temporary"
+            itemName={
+              temporaryRelayUrls.length === 1 ? simplifyUrl(temporaryRelayUrls[0]) : t('Temporary')
+            }
+            isActive={feedType === 'relays'}
+            temporary
+            onClick={() => {
+              setFeedType('relays')
+              close?.()
+            }}
+          />
+        )}
+        {relayGroups
+          .filter((group) => group.relayUrls.length > 0)
+          .map((group) => (
+            <FeedSwitcherItem
+              key={group.groupName}
+              itemName={
+                group.relayUrls.length === 1 ? simplifyUrl(group.relayUrls[0]) : group.groupName
+              }
+              isActive={feedType === 'relays' && group.isActive && temporaryRelayUrls.length === 0}
+              onClick={() => {
+                switchRelayGroup(group.groupName)
+                close?.()
+              }}
+            />
+          ))}
+      </div>
+    </div>
+  )
+}
+
+function FeedSwitcherItem({
+  itemName,
+  isActive,
+  temporary = false,
+  onClick
+}: {
+  itemName: string
+  isActive: boolean
+  temporary?: boolean
+  onClick: () => void
+}) {
+  return (
+    <div
+      className={`w-full border rounded-lg p-4 ${isActive ? 'border-highlight bg-highlight/5' : 'clickable'} ${temporary ? 'border-dashed' : ''}`}
+      onClick={onClick}
+    >
+      <div className="flex space-x-2 items-center">
+        <FeedToggle isActive={isActive} />
+        <div className="font-semibold">{itemName}</div>
+      </div>
+    </div>
+  )
+}
+
+function FeedToggle({ isActive }: { isActive: boolean }) {
+  return isActive ? (
+    <CircleCheck size={18} className="text-highlight shrink-0" />
+  ) : (
+    <Circle size={18} className="text-muted-foreground shrink-0" />
+  )
+}