RSSNext · DIYgod · Jun 29, 2025 · Jun 5, 2025 · Jun 5, 2025 · Jun 5, 2025
diff --git a/.cursor/rules/app.mdc b/.cursor/rules/app.mdc
@@ -0,0 +1,27 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+You are writing a UI modernized, AI-driven, user-friendly RSS reader.
+
+This project is a monorepo for web front-end electron and React Native.
+
+Using Stack:
+
+## For Web/Electron Render
+
+- React 19
+- Framer Motion (Lazy motion, you should use `m`)
+- Jotai
+- Zustand
+- Indexeddb
+- TailwindCSS 3
+
+Before starting, you need to know the current technical stack structure and the construction of the monorepo. Read tailwindcss to understand the design style.
+
+## For React Native
+
+- React 19
+- Expo
+- Expo Module Core (Some Native modules included)
diff --git a/.cursor/rules/base.mdc b/.cursor/rules/base.mdc
@@ -0,0 +1,112 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+# Role
+
+Act as a highly experienced software developer and coding assistant. You are proficient in all major programming languages and frameworks. Your user is an independent developer working on personal or freelance projects. Focus on generating high-quality code, optimizing performance, and debugging issues.
+
+---
+
+# Objective
+
+Efficiently assist the user in writing and improving code, proactively solving technical issues without needing repeated prompting. Focus on the following core tasks:
+
+- Writing code
+- Optimizing code
+- Debugging and issue resolution
+
+Ensure all solutions are clearly explained and easy to understand.
+
+---
+
+## Phase 1: Initial Assessment
+
+1. When the user requests a task, check for existing documentation (e.g., `README.md`) to understand the project.
+2. If no documentation is found, generate a `README.md` with project features, usage instructions, and key configuration parameters.
+3. Use all available context (uploaded files, existing code) to ensure technical alignment with the user's needs.
+
+---
+
+## Phase 2: Implementation
+
+### 1. Clarify Requirements
+- Confirm user requirements clearly. Ask questions when uncertain.
+- Suggest the simplest effective solutions, avoiding unnecessary complexity.
+
+### 2. Writing Code
+- Review existing code and outline implementation steps.
+- Choose the appropriate language and framework. Follow best practices (e.g., SOLID principles).
+- Write clean, readable, and commented code.
+- Optimize for clarity, maintainability, and performance.
+- Include unit tests when applicable.
+- Follow standard language-specific style guides (e.g., PEP 8 for Python, Airbnb for JavaScript).
+
+### 3. Debugging and Issue Resolution
+- Diagnose problems methodically to identify root causes.
+- Clearly explain the issue and proposed fix.
+- Keep the user informed of progress and adapt quickly to changes.
+
+---
+
+## Phase 3: Completion and Summary
+
+1. Summarize key changes and improvements.
+2. Highlight potential risks, edge cases, or performance concerns.
+3. Update documentation (e.g., `README.md`) accordingly.
+
+---
+
+# Best Practices
+
+### Sequential Thinking (Step-Based Problem Solving Framework)
+
+Use the [Sequential Thinking](https://github.com/smithery-ai/reference-servers/tree/main/src/sequentialthinking) tool to guide step-by-step problem solving, especially for complex, open-ended tasks.
+
+- Break tasks into **thought steps** using the Sequential Thinking protocol.
+- For each step, follow this structure:
+  1.**Define the current goal or assumption** (e.g., "Evaluate authentication options", "Refactor state handling").
+  2.**Use a suitable MCP tool** based on context (e.g., `search_docs`, `code_generator`, `error_explainer`).
+  3.**Record the result/output** clearly.
+  4.**Determine the next thought step** and continue.
+
+- When uncertainty exists:
+  - Explore multiple solution paths using "branch thinking".
+  - Compare trade-offs or competing strategies.
+  - Allow rollback or edits to previous thought steps.
+
+- Use metadata such as:
+  -`thought`: current thought text
+  -`thoughtNumber`: current step index
+  -`totalThoughts`: number of expected steps
+
+- Encourage interactive feedback and continuous iteration throughout the sequence.
+
+### Context7 (Up-to-Date Documentation Integration)
+
+Utilize [Context7](https://github.com/upstash/context7) to fetch and integrate the latest, version-specific documentation and code examples directly into your development environment.
+
+-**Purpose**: Ensure that AI-generated code references current APIs and best practices, reducing errors from outdated information.
+
+-**Usage**:
+  1.**Invoke Context7**: Add `use context7` to your prompt to trigger Context7's integration.
+  2.**Fetch Documentation**: Context7 retrieves relevant, up-to-date documentation snippets for the libraries or frameworks in use.
+  3.**Integrate Snippets**: Incorporate the fetched code examples and documentation into your codebase as needed.
+
+-**Integration**:
+  - Compatible with MCP clients like Cursor, Windsurf, Claude Desktop, and others.
+  - Configure your MCP client to include Context7 as a server, enabling seamless access to documentation within your development workflow.
+
+-**Benefits**:
+  - Reduces reliance on outdated training data.
+  - Minimizes code hallucinations and deprecated API usage.
+  - Enhances code accuracy and relevance.
+
+---
+
+# Communication
+
+- Ask questions when clarification is needed.
+- Remain concise, technical, and helpful.
+- Include inline code comments where necessary.
diff --git a/.cursor/rules/color.mdc b/.cursor/rules/color.mdc
@@ -1,6 +1,6 @@
 ---
 description: 
-globs: 
+globs: apps/desktop/**/*,packages/internal/components/**/*
 alwaysApply: false
 ---
 # UIKit Colors for Tailwind CSS

diff --git a/.cursor/rules/header-button-design.mdc b/.cursor/rules/header-button-design.mdc
@@ -0,0 +1,135 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# Header Button Design System
+
+When creating header buttons for media previews, overlays, or modal interfaces, follow this modern glass morphism design pattern:
+
+## Design Principles
+
+### 1. Glass Morphism Style
+- Use semi-transparent backgrounds: `bg-black/20` or `bg-white/10`
+- Apply backdrop blur: `backdrop-blur-md`
+- Add subtle borders: `border border-white/10` for depth
+- Include shadow layers: `shadow-lg shadow-black/25`
+
+### 2. Perfect 1:1 Circular Design
+- Always use `size-10` (40px × 40px) for consistent sizing
+- Apply `rounded-full` for perfect circular shape
+- Ensure proper centering with `flex items-center justify-center`
+
+### 3. Layered Depth Effects
+```tsx
+{/* Glass effect overlay */}
+<div className="absolute inset-0 rounded-full bg-gradient-to-t from-white/5 to-white/20 opacity-0 transition-opacity duration-300 hover:opacity-100" />
+
+{/* Icon container */}
+<div className="center relative z-10 flex">{children}</div>
+
+{/* Subtle inner shadow for depth */}
+<div className="absolute inset-0 rounded-full shadow-inner shadow-black/10" />
+```
+
+### 4. Interactive Animation
+- Use Framer Motion `m.button` for smooth animations
+- Scale on hover: `whileHover={{ scale: 1.1 }}`
+- Scale on tap: `whileTap={{ scale: 0.95 }}`
+- Spring transitions: `stiffness: 400, damping: 30`
+
+### 5. Opacity and Visibility
+- Start hidden: `opacity-0`
+- Show on group hover: `group-hover/left:opacity-100`
+- Use `transition-all duration-300 ease-out` for smooth reveals
+
+## Implementation Pattern
+
+```tsx
+const HeaderButton: FC<{
+  description?: string
+  onClick: () => void
+  className?: string
+  children: React.ReactNode
+}> = ({ description, onClick, className, children }) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <m.button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation()
+            onClick()
+          }}
+          className={cn(
+            // Base styles with modern glass morphism - perfect 1:1 circle
+            "pointer-events-auto relative flex size-10 items-center justify-center rounded-full",
+            "bg-black/20 text-white backdrop-blur-md",
+            // Border and shadow for depth
+            "border border-white/10 shadow-lg shadow-black/25",
+            // Opacity and transition
+            "opacity-0 transition-all duration-300 ease-out group-hover/left:opacity-100",
+            // Text size
+            "text-lg",
+            className,
+          )}
+          initial={{ scale: 1 }}
+          whileHover={{ 
+            scale: 1.1,
+            backgroundColor: "rgba(255, 255, 255, 0.15)",
+            borderColor: "rgba(255, 255, 255, 0.2)",
+          }}
+          whileTap={{ scale: 0.95 }}
+          transition={{
+            type: "spring",
+            stiffness: 400,
+            damping: 30,
+          }}
+        >
+          {/* Glass effect overlay */}
+          <div className="absolute inset-0 rounded-full bg-gradient-to-t from-white/5 to-white/20 opacity-0 transition-opacity duration-300 hover:opacity-100" />
+
+          {/* Icon container */}
+          <div className="center relative z-10 flex">{children}</div>
+
+          {/* Subtle inner shadow for depth */}
+          <div className="absolute inset-0 rounded-full shadow-inner shadow-black/10" />
+        </m.button>
+      </TooltipTrigger>
+      {description && (
+        <TooltipPortal>
+          <TooltipContent>{description}</TooltipContent>
+        </TooltipPortal>
+      )}
+    </Tooltip>
+  )
+}
+```
+
+## Special Variants
+
+### Close Button (Danger State)
+```tsx
+className="!bg-red-600/30 !border-red-500/20 !opacity-100 hover:!bg-red-600/50"
+```
+
+### Navigation Buttons (Carousel Controls)
+- Use smaller sizes: `size-8` for mobile, `lg:size-10` for desktop
+- Position absolutely with proper spacing: `left-2 lg:left-4`
+- Maintain same glass morphism principles
+
+## Usage Guidelines
+
+1. **Always use with tooltips** for accessibility
+2. **Include stopPropagation** on click handlers to prevent modal dismissal
+3. **Make description optional** for navigation buttons that don't need tooltips
+4. **Use consistent icon sizing**: `text-lg` for standard, `lg:text-xl` for larger variants
+5. **Apply proper z-index**: `z-[100]` for overlay buttons
+6. **Group hover patterns**: Use `group-hover/left:opacity-100` for contextual visibility
+
+## Icons
+- Always use icons from `@/icons` directory (project standard)
+- Common patterns: `i-mgc-close-cute-re`, `i-mgc-external-link-cute-re`, `i-mgc-download-2-cute-re`
+- Navigation: `i-mingcute-left-line`, `i-mingcute-right-line`
+
+This design system ensures consistent, modern, and accessible header buttons across all media preview and overlay interfaces.
diff --git a/.cursor/rules/rn.mdc b/.cursor/rules/rn.mdc
@@ -0,0 +1,12 @@
+---
+description: 
+globs: apps/mobile/**/*
+alwaysApply: false
+---
+1. This is an app written in React native.
+
+2. You need to use @/apps/mobile/icons for icons, do not use other icon libraries.
+
+3. You need to use NativewindCSS to write styles, not external StyleSheet.create.
+
+4. You need to use https://github.com/Innei/apple-uikit-colors/tree/main/packages/react-native-uikit-colors for color design.
diff --git a/.cursor/rules/web-component.mdc b/.cursor/rules/web-component.mdc
@@ -1,6 +1,6 @@
 ---
 description: 
-globs: 
+globs: apps/desktop/layer/renderer/src/**/*
 alwaysApply: false
 ---
 You need to find the available UI components in the project.

diff --git a/.github/workflows/auto-fix-lint-format-commit.yml b/.github/workflows/auto-fix-lint-format-commit.yml
@@ -42,7 +42,7 @@ jobs:
 
       - name: Commit and push changes
         if: steps.check_changes.outputs.has_changes == 'true' || env.has_changes == 'true'
-        uses: stefanzweifel/git-auto-commit-action@v5
+        uses: stefanzweifel/git-auto-commit-action@v6
         with:
           commit_message: "chore: auto-fix linting and formatting issues"
           commit_options: "--no-verify"

diff --git a/.github/workflows/build-desktop.yml b/.github/workflows/build-desktop.yml
@@ -6,6 +6,7 @@ on:
       - "**"
     paths:
       - "apps/desktop/**"
+      - "packages/**"
       - "pnpm-lock.yaml"
       - ".github/workflows/build-desktop.yml"
   workflow_dispatch:

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -45,6 +45,9 @@ jobs:
           cache: "pnpm"
       - name: Install dependencies
         run: pnpm install
+      - name: Build web and SSR server
+        run: |
+          npm exec turbo run Folo#build:web @follow/ssr#build
       - name: Format, Lint and Typecheck
         run: |
           export NODE_OPTIONS="--max_old_space_size=16384"

diff --git a/.gitignore b/.gitignore
@@ -21,4 +21,6 @@ vite.config.*.mjs
 
 apps/desktop/src/renderer/dev-dist
 tsconfig.tsbuildinfo
-buildServer.json
+buildServer.json
+
+**/**/generated-routes.ts
diff --git a/.prettierignore b/.prettierignore
@@ -9,3 +9,4 @@ apps/mobile/android
 apps/mobile/ios
 apps/mobile/native/example
 
+generated-routes.ts
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -87,14 +87,20 @@ To develop in the mobile app, follow these steps:
    cd apps/mobile
    ```
 
-2. Build and install Folo(dev) app from source: (This step will take a while and only need to be done once)
+2. Copy the example environment variables file:
+
+   ```sh
+   cp .env.example .env
+   ```
+
+3. Build and install Folo(dev) app from source: (This step will take a while and only need to be done once)
 
    ```sh
    pnpm expo prebuild --clean # Optional
    pnpm run ios
    ```
 
-3. Run the development server:
+4. Run the development server:
 
    ```sh
    pnpm run dev

diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@
     <img src="https://github.com/user-attachments/assets/6997a236-3df3-49d5-98a4-514f6d1a02c4" height="60" />
     <br />
     <br />
-    <a href="https://github.com/RSSNext/Folo/graphs/contributors"><img src="https://img.shields.io/github/stars/RSSNext/Follow?color=ffcb47&labelColor=black&style=flat-square&logo=github&label=Stars" /></a>
+    <a href="https://github.com/RSSNext/Folo/stargazers"><img src="https://img.shields.io/github/stars/RSSNext/Follow?color=ffcb47&labelColor=black&style=flat-square&logo=github&label=Stars" /></a>
     <a href="https://github.com/RSSNext/Folo/graphs/contributors"><img src="https://img.shields.io/github/contributors/RSSNext/Folo?style=flat-square&logo=github&label=Contributors&labelColor=black" /></a>
     <a href="https://status.follow.is/" target="_blank"><img src="https://status.follow.is/api/badge/18/uptime?color=%2344CC10&labelColor=black&style=flat-square"/></a>
     <a href="https://github.com/RSSNext/Folo/releases"><img src="https://img.shields.io/github/downloads/RSSNext/Folo/total?color=369eff&labelColor=black&logo=github&style=flat-square&label=Downloads" /></a>

diff --git a/apps/desktop/.env.example b/apps/desktop/.env.example
@@ -8,3 +8,6 @@ VITE_OPENPANEL_CLIENT_ID=
 VITE_OPENPANEL_API_URL=
 
 VITE_EDITOR=cursor
+
+VITE_PUBLIC_POSTHOG_KEY=
+VITE_PUBLIC_POSTHOG_HOST=
diff --git a/apps/desktop/changelog/0.5.0.md b/apps/desktop/changelog/0.5.0.md
@@ -27,3 +27,7 @@
 - “Mark as read” button is now perfectly centred (#3836)
 - Entry list no longer displays stale cached items (0a167ac)
 - Squashed numerous shortcut-key bugs
+
+## Thanks
+
+Special thanks to external contributors @ericyzhu @kovsu @yeeway0609 @cscnk52 for their valuable contributions
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,3 +9,4 @@ apps/mobile/android
		apps/mobile/ios
		apps/mobile/native/example

		generated-routes.ts