feat(core): migrate articles to ArticlesModel, add URL-synced view routing, and unify component props

Summary

Introduced ArticlesModel abstraction with list + map store for fast lookup and clean CRUD operations.

Replaced all array-based article access with model methods (readById, create, update, refresh).

Added utils/articles.ts with pure functions for list/map operations.

Updated ArticleProvider to use the new model API and avoid mutation issues.

Added URL-synced navigation (pushState) + VIEW_URL mapping for deep-linkable routes.

Implemented route parsing on load (/articles/:id) to auto-open article view.

Standardized openArticle to pass full ArticleModel instead of index.

Updated all ArticleCard components to use article object instead of index.

Added navigationMap to view router for custom child navigation names.

Extracted shared styles to types/styles.ts and replaced old inline styled components.

Updated props definitions for Login, Register, Profile, ArticleView, MainContent, ArticleGrid.

Removed React.StrictMode wrapper to avoid double-effects during development.

Release: 0.2.5
Type: Feature + Refactor + Routing upgrade

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aetoskia-blog-app",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "private": true,
   "scripts": {
     "dev": "vite",

src/blog/Blog.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useEffect } from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
@@ -14,146 +15,161 @@ import Register from './components/Register';
 import Profile from './components/Profile';
 import { useArticles } from './providers/Article';
 import { useAuth } from './providers/Author';
+import { View, useViewRouter } from "./types/views";
+import { ArticleModel, ArticlesModel } from "./types/models";
+import { ArticleViewProps, ArticleEditorProps } from "./types/props";
 
-type View = 'home' | 'login' | 'register' | 'article' | 'profile' | 'editor';
+function HomeView({
+  currentUser,
+  open_login,
+  open_profile,
+  open_create,
+  articles,
+  openArticle
+}: any) {
+  return (
+    <>
+      <Box sx={{ display: "flex", justifyContent: "flex-end", mb: 2, gap: 1 }}>
+        {!currentUser ? (
+          <Button variant="outlined" onClick={open_login}>Login</Button>
+        ) : (
+          <>
+            <Button variant="outlined" onClick={open_profile}>
+              {currentUser.username}
+            </Button>
+            <Button variant="contained" onClick={open_create}>
+              New Article
+            </Button>
+          </>
+        )}
+      </Box>
+
+      <MainContent articles={articles} onSelectArticle={openArticle} />
+      <Latest articles={articles} onSelectArticle={openArticle} />
+    </>
+  );
+}
 
 export default function Blog(props: { disableCustomTheme?: boolean }) {
   const { articles, loading, error } = useArticles();
   const { currentUser } = useAuth();
 
-  const [selectedArticle, setSelectedArticle] = React.useState<number | null>(null);
-  const [showLogin, setShowLogin] = React.useState(false);
-  const [showRegister, setShowRegister] = React.useState(false);
-  const [showProfile, setShowProfile] = React.useState(false);
-  const [showEditor, setShowEditor] = React.useState(false);
+  const [ui, setUI] = React.useState({
+    selectedArticle: null as ArticleModel | null,
+    view: "home" as View,
+  });
 
-  const handleSelectArticle = (index: number) => {
-    setSelectedArticle(index);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-  const handleShowLogin = () => {
-    setShowLogin(true);
-    setShowRegister(false);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-  const handleShowRegister = () => {
-    setShowRegister(true);
-    setShowLogin(false);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-  const handleHideAuth = () => {
-    setShowLogin(false);
-    setShowRegister(false);
-  };
-  const handleShowProfile = () => {
-    setShowProfile(true);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-  const handleHideProfile = () => {
-    setShowProfile(false);
-  };
-  const handleShowEditor = () => {
-    setShowEditor(true);
-  };
-  const handleHideEditor = () => {
-    setShowEditor(false);
-  };
-  const handleArticleViewBack = () => setSelectedArticle(null);
-  const handleArticleEditorBack = () => {
-    handleHideEditor()
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
+  useEffect(() => {
+    if (loading) return;
 
-  // derive a single source of truth for view
-  const view: View = React.useMemo(() => {
-    if (selectedArticle !== null && !showEditor) return 'article';
-    if (showRegister) return 'register';
-    if (showLogin) return 'login';
-    if (showProfile) return 'profile';
-    if (showEditor) return 'editor';
-    return 'home';
-  }, [selectedArticle, showLogin, showRegister, showProfile, showEditor]);
+    const path = window.location.pathname;
+    const parts = path.split('/').filter(Boolean);
 
-  // render function keeps JSX tidy
-  const renderView = () => {
-    switch (view) {
-      case 'register':
-        return <Register onBack={handleHideAuth} />;
-      case 'login':
-        return (
-          <Login
-            onBack={handleHideAuth}
-            onRegister={() => {
-              handleShowRegister();
-            }}
-          />
-        );
-      case 'profile':
-        return (
-          <Profile
-            onBack={handleHideProfile}
-          />
-        );
-      case 'article':
-        if (selectedArticle == null || !articles[selectedArticle]) return null;
-        return <ArticleView
-          article={articles[selectedArticle]}
-          onBack={handleArticleViewBack}
-          onEdit={handleShowEditor}
-        />;
-      case 'editor':
-        if (selectedArticle == null || !articles[selectedArticle])
-          return <ArticleEditor
-            onBack={handleArticleEditorBack}
-          />
-        return <ArticleEditor
-          article={articles[selectedArticle] || null}
-          onBack={handleArticleEditorBack}
-        />
-      case 'home':
-      default:
-        return (
-          <>
-            <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2, gap: 1 }}>
-              {!currentUser ? (
-                <>
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    onClick={handleShowLogin}
-                  >
-                    Login
-                  </Button>
-                </>
-              ) : (
-                <>
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    onClick={handleShowProfile}
-                  >
-                    {currentUser.username}
-                  </Button>
-                  <Button
-                    variant="contained"
-                    color="primary"
-                    onClick={handleShowEditor}
-                  >
-                    New Article
-                  </Button>
-                </>
-              )}
-            </Box>
+    if (parts[0] === 'articles' && parts[1]) {
+      const id = parts[1];
+      const article = articles.readById(id);
 
-            <MainContent articles={articles} onSelectArticle={handleSelectArticle} />
-            <Latest
-              articles={articles}
-              onSelectArticle={handleSelectArticle}
-              onLoadMore={async () => {}}
-            />
-          </>
-        );
+      if (article) {
+        setUI({
+          selectedArticle: article,
+          view: 'article',
+        });
+      }
     }
+  }, [loading]);
+
+  const {
+    goBack,
+    navigateToChildren,
+    openArticle,
+  } = useViewRouter(setUI);
+
+  type RouterContext = {
+    ui: any;
+    articles: ArticlesModel;
+    currentUser: any;
+    openArticle: (article: ArticleModel) => void;
+  };
+
+  type ViewComponentEntry<P> = {
+    component: React.ComponentType<P>;
+    extraProps?: (ctx: RouterContext) => Partial<P>;
+    navigationMap?: Record<string, string>;
+  };
+
+  const VIEW_COMPONENTS: Record<View, ViewComponentEntry<any>> = {
+    home: {
+      component: HomeView,
+    },
+
+    login: {
+      component: Login,
+      navigationMap: {
+        open_register: 'onRegister',
+      },
+    },
+
+    register: {
+      component: Register,
+    },
+
+    profile: {
+      component: Profile,
+    },
+
+    article: {
+      component: ArticleView,
+      navigationMap: {
+        open_editor: 'onEdit',
+      },
+      extraProps: ({ ui, articles }) => ({
+        article: articles.readById(ui.selectedArticle._id),
+      }) satisfies Partial<ArticleViewProps>,
+    },
+
+    editor: {
+      component: ArticleEditor,
+      extraProps: ({ ui, articles }) => ({
+        article: ui.selectedArticle !== null ? articles.readById(ui.selectedArticle._id) : null,
+      }) satisfies Partial<ArticleEditorProps>,
+    },
+
+    create: {
+      component: ArticleEditor,
+      extraProps: () => ({
+        article: null,
+      }) satisfies Partial<ArticleEditorProps>,
+    },
+  };
+
+  const renderView = () => {
+    const entry = VIEW_COMPONENTS[ui.view];
+    const navigationMap= entry['navigationMap'] || {}
+    const ViewComponent = entry.component;
+
+    const childNav = navigateToChildren(
+      ui.view,
+      navigationMap
+    );
+
+    const ctx: RouterContext = {
+      ui,
+      articles,
+      currentUser,
+
+      openArticle,
+    };
+
+    const extraProps = entry.extraProps ? entry.extraProps(ctx) : {};
+
+    return (
+      <ViewComponent
+        {...ctx}
+        {...childNav}
+        onBack={() => goBack(ui.view)}
+        {...extraProps}
+      />
+    );
   };
 
   if (loading) {
@@ -210,13 +226,13 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
             flexDirection: 'column',
             my: 4,
             gap: 4,
-            pb: view === 'home' ? 24 : 0,
+            pb: ui.view === 'home' ? 24 : 0,
           }}
         >
           {renderView()}
         </Container>
 
-        {view === 'home' && (
+        {ui.view === 'home' && (
           <Box
             component="footer"
             sx={{

src/blog/components/Article/ArticleEditor.tsx

@@ -179,6 +179,7 @@ export default function ArticleView({
               title,
               tag,
               img,
+              description,
               content,
             })
           }

src/blog/components/Article/ArticleView.tsx

@@ -5,7 +5,8 @@ import { styled } from '@mui/material/styles';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import { ArticleMeta } from "../ArticleMeta";
-import { ArticleProps } from '../../types/props';
+import { ArticleViewProps } from '../../types/props';
+import {useAuth} from "../../providers/Author";
 
 const ArticleContainer = styled(Box)(({ theme }) => ({
   maxWidth: '800px',
@@ -28,24 +29,29 @@ export default function ArticleView({
   article,
   onBack,
   onEdit,
-}: ArticleProps) {
+}: ArticleViewProps) {
+
+  const { currentUser } = useAuth();
 
   return (
     <ArticleContainer>
-      <IconButton onClick={onBack} sx={{ mb: 2 }}>
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        mb: 2,
+      }}
+    >
+      <IconButton onClick={onBack}>
         <ArrowBackRoundedIcon />
       </IconButton>
 
-      <Chip
-        label={article.tag}
-        variant="outlined"
-        color="primary"
-        sx={{ mb: 2, textTransform: 'uppercase', fontWeight: 500 }}
-      />
-
-      <IconButton onClick={onEdit} sx={{ mb: 2 }}>
-        <EditRoundedIcon />
-      </IconButton>
+      {currentUser && (
+        <IconButton onClick={onEdit}>
+          <EditRoundedIcon />
+        </IconButton>
+      )}
+    </Box>
 
       <Typography variant="h3" component="h1" gutterBottom fontWeight="bold">
         {article.title}
@@ -55,7 +61,21 @@ export default function ArticleView({
 
       <Divider sx={{ my: 3 }} />
 
-      <CoverImage src={article.img} alt={article.title} />
+      <Chip
+        label={article.tag}
+        variant="outlined"
+        color="primary"
+        sx={{ mb: 2, textTransform: 'uppercase', fontWeight: 500 }}
+      />
+
+      <CoverImage
+        src={(
+          import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+          "/" +
+          (article.img?.replace(/^\/+/, "") || "")
+        )}
+        alt={article.title}
+      />
 
       <Box
         sx={{

src/blog/components/ArticleCards/ArticleCardSize12.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { CardMedia, Typography } from '@mui/material';
+import { ArticleMeta } from "../ArticleMeta";
+import { ArticleCardProps } from "../../types/props";
+import { StyledCard, StyledCardContent, StyledTypography } from "../../types/styles";
+
+
+export default function ArticleCardSize12({
+  article,
+  index,
+  focusedCardIndex,
+  onSelectArticle,
+  onFocus,
+  onBlur,
+}: ArticleCardProps) {
+  return (
+    <StyledCard
+      variant="outlined"
+      onClick={() => onSelectArticle(article)}
+      onFocus={() => onFocus(index)}
+      onBlur={onBlur}
+      tabIndex={0}
+      className={focusedCardIndex === index ? 'Mui-focused' : ''}
+    >
+      <CardMedia
+        component="img"
+        alt={article.title}
+        image={(
+          import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
+          "/" +
+          (article.img?.replace(/^\/+/, "") || "")
+        )}
+        sx={{
+          aspectRatio: '16 / 9',
+        }}
+      />
+      <StyledCardContent>
+        <Typography gutterBottom variant="caption" component="div">
+          {article.tag}
+        </Typography>
+        <Typography gutterBottom variant="h6" component="div">
+          {article.title}
+        </Typography>
+        <StyledTypography variant="body2" color="text.secondary" gutterBottom>
+          {article.description}
+        </StyledTypography>
+      </StyledCardContent>
+      <ArticleMeta article={article} />
+    </StyledCard>
+  );
+};

src/blog/components/ArticleCards/ArticleCardSize2.tsx

@@ -16,7 +16,7 @@ export default function ArticleCardSize2({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}

src/blog/components/ArticleCards/ArticleCardSize4.tsx

@@ -16,7 +16,7 @@ export default function ArticleCardSize4({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}
@@ -24,7 +24,7 @@ export default function ArticleCardSize4({
     >
       <CardMedia
         component="img"
-        alt="green iguana"
+        alt={article.title}
         image={(
           import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
           "/" +

src/blog/components/ArticleCards/ArticleCardSize6.tsx

@@ -16,7 +16,7 @@ export default function ArticleCardSize6({
   return (
     <StyledCard
       variant="outlined"
-      onClick={() => onSelectArticle(index)}
+      onClick={() => onSelectArticle(article)}
       onFocus={() => onFocus(index)}
       onBlur={onBlur}
       tabIndex={0}

src/blog/components/ArticleCards/ArticleCardsGrid.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Grid, Box } from '@mui/material';
+import ArticleCardSize12 from './ArticleCardSize12';
 import ArticleCardSize6 from './ArticleCardSize6';
 import ArticleCardSize4 from './ArticleCardSize4';
 import ArticleCardSize2 from './ArticleCardSize2';
@@ -10,6 +11,7 @@ export default function ArticleCardsGrid({
   articles,
   onSelectArticle,
   xs = 12,
+  md12 = 12,
   md6 = 6,
   md4 = 4,
   nested = 2,
@@ -30,8 +32,9 @@ export default function ArticleCardsGrid({
     setFocusedCardIndex(null);
   };
 
-  const renderCard = (article: ArticleModel, index: number, type: '6' | '4' | '2' = '6') => {
+  const renderCard = (article: ArticleModel, index: number, type: '12' | '6' | '4' | '2' = '12') => {
     const CardComponent =
+      type === '12' ? ArticleCardSize12 :
       type === '6' ? ArticleCardSize6 :
       type === '4' ? ArticleCardSize4 :
       ArticleCardSize2;
@@ -51,6 +54,17 @@ export default function ArticleCardsGrid({
 
   return (
     <Grid container spacing={2} columns={12}>
+      {/* ---- 1 article: 12 ---- */}
+      {count === 1 && (
+        <>
+          {visibleArticles.map((a, i) => (
+            <Grid key={i} size={{ xs, md: md12 }}>
+              {renderCard(a, i, '12')}
+            </Grid>
+          ))}
+        </>
+      )}
+
       {/* ---- 2 articles: 6 | 6 ---- */}
       {count === 2 && (
         <>

src/blog/components/Latest.tsx

@@ -1,99 +1,19 @@
 import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
 import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
 import CircularProgress from '@mui/material/CircularProgress';
 import { LatestProps } from "../types/props";
+import { StyledTypography, TitleTypography } from "../types/styles";
+import { ArticleMeta } from "./ArticleMeta";
 import Fade from '@mui/material/Fade';
 
-
-const StyledTypography = styled(Typography)({
-  display: '-webkit-box',
-  WebkitBoxOrient: 'vertical',
-  WebkitLineClamp: 2,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
-
-const TitleTypography = styled(Typography)(({ theme }) => ({
-  position: 'relative',
-  textDecoration: 'none',
-  '&:hover': { cursor: 'pointer' },
-  '& .arrow': {
-    visibility: 'hidden',
-    position: 'absolute',
-    right: 0,
-    top: '50%',
-    transform: 'translateY(-50%)',
-  },
-  '&:hover .arrow': {
-    visibility: 'visible',
-    opacity: 0.7,
-  },
-  '&:focus-visible': {
-    outline: '3px solid',
-    outlineColor: 'hsla(210, 98%, 48%, 0.5)',
-    outlineOffset: '3px',
-    borderRadius: '8px',
-  },
-  '&::before': {
-    content: '""',
-    position: 'absolute',
-    width: 0,
-    height: '1px',
-    bottom: 0,
-    left: 0,
-    backgroundColor: (theme.vars || theme).palette.text.primary,
-    opacity: 0.3,
-    transition: 'width 0.3s ease, opacity 0.3s ease',
-  },
-  '&:hover::before': {
-    width: '100%',
-  },
-}));
-
-function Author({ authors }: { authors: { name: string; avatar: string }[] }) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'row',
-        gap: 2,
-        alignItems: 'center',
-        justifyContent: 'space-between',
-      }}
-    >
-      <Box
-        sx={{ display: 'flex', flexDirection: 'row', gap: 1, alignItems: 'center' }}
-      >
-        <AvatarGroup max={3}>
-          {authors.map((author, index) => (
-            <Avatar
-              key={index}
-              alt={author.name}
-              src={(
-                import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
-                "/" +
-                (author.avatar?.replace(/^\/+/, "") || "")
-              )}
-              sx={{ width: 24, height: 24 }}
-            />
-          ))}
-        </AvatarGroup>
-        <Typography variant="caption">
-          {authors.map((a) => a.name).join(', ')}
-        </Typography>
-      </Box>
-      <Typography variant="caption">Recently Updated</Typography>
-    </Box>
-  );
-}
-
-export default function Latest({ articles, onSelectArticle, onLoadMore }: LatestProps) {
+export default function Latest({
+  articles,
+  onSelectArticle,
+  onLoadMore
+}: LatestProps) {
   const [visibleCount, setVisibleCount] = React.useState(2);
   const [loadingMore, setLoadingMore] = React.useState(false);
   const [animating, setAnimating] = React.useState(false);
@@ -182,7 +102,7 @@ export default function Latest({ articles, onSelectArticle, onLoadMore }: Latest
                   {article.description}
                 </StyledTypography>
 
-                <Author authors={article.authors} />
+                <ArticleMeta article={article} />
               </Box>
             </Fade>
           </Grid>

src/blog/components/Login.tsx

@@ -2,13 +2,12 @@ import * as React from 'react';
 import { Box, TextField, Button, Typography, IconButton, CircularProgress, Link } from '@mui/material';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useAuth } from '../providers/Author';
+import { LoginProps } from '../types/props';
 
-interface LoginProps {
-  onBack: () => void;
-  onRegister: () => void;
-}
-
-export default function Login({ onBack, onRegister }: LoginProps) {
+export default function Login({
+  onBack,
+  onRegister
+}: LoginProps) {
   const { login, loading, error, currentUser } = useAuth();
   const [username, setUsername] = React.useState('');
   const [password, setPassword] = React.useState('');

src/blog/components/MainContent.tsx

@@ -9,7 +9,8 @@ import OutlinedInput from '@mui/material/OutlinedInput';
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import RssFeedRoundedIcon from '@mui/icons-material/RssFeedRounded';
 
-import { ArticleModel } from "../types/models";
+import {ArticlesModel, createArticlesModelObject} from "../types/models";
+import { MainContentProps } from "../types/props";
 import ArticleCardsGrid from "./ArticleCards/ArticleCardsGrid";
 
 export function Search() {
@@ -36,12 +37,9 @@ export function Search() {
 export default function MainContent({
   articles,
   onSelectArticle,
-}: {
-  articles: ArticleModel[];
-  onSelectArticle: (index: number) => void;
-}) {
+}: MainContentProps) {
 
-  const [visibleArticles, setVisibleArticles] = React.useState<ArticleModel[]>(articles);
+  const [visibleArticles, setVisibleArticles] = React.useState<ArticlesModel>(articles);
   const [activeTag, setActiveTag] = React.useState<string>('all');
 
   const filterArticlesByTag = (tag: string) => {
@@ -60,11 +58,11 @@ export default function MainContent({
     }
 
     // 🔵 Filter by selected tag
-    const filtered = articles.filter((article) => article.tag === tag);
+    const filtered = articles.articlesList.filter((article) => article.tag === tag);
     console.log('👀 All Articles:', articles);
     console.log(`👀 Filtered (${tag}):`, filtered);
 
-    setVisibleArticles(filtered);
+    setVisibleArticles(createArticlesModelObject(filtered));
     setActiveTag(tag);
   };
 

src/blog/components/Profile.tsx

@@ -12,12 +12,11 @@ import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useAuth } from '../providers/Author';
 import { useUpload } from "../providers/Upload";
 import ImageUploadField from './ImageUploadField';
+import { ProfileProps } from '../types/props';
 
-interface ProfileProps {
-  onBack: () => void;
-}
-
-export default function Profile({ onBack }: ProfileProps) {
+export default function Profile({
+  onBack
+}: ProfileProps) {
   const { currentUser, loading, error, logout, updateProfile } = useAuth();
   const { uploadFile } = useUpload();
   const [formData, setFormData] = React.useState({

src/blog/components/Register.tsx

@@ -2,19 +2,18 @@ import * as React from 'react';
 import { Box, TextField, Button, Typography, IconButton, CircularProgress, Alert, } from '@mui/material';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useAuth } from '../providers/Author';
+import { RegisterProps } from '../types/props';
 
-interface RegisterProps {
-  onBack: () => void;
-}
-
-export default function Register({ onBack }: RegisterProps) {
+export default function Register({
+  onBack
+}: RegisterProps) {
   const { register, loading, error, currentUser } = useAuth();
   const [username, setUsername] = React.useState('');
   const [password1, setPassword1] = React.useState('');
   const [password2, setPassword2] = React.useState('');
   const [localError, setLocalError] = React.useState<string | null>(null);
 
-   const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLocalError(null);
 

src/blog/providers/Article.tsx

@@ -1,24 +1,38 @@
 import React, { createContext, useState, useContext, useEffect } from 'react';
 import { api } from '../utils/api';
-import { ArticleModel } from '../types/models';
+import {
+  ArticleModel,
+  ArticlesModel,
+  createArticlesModelObject,
+} from '../types/models';
 import { ArticleContextModel } from '../types/contexts';
 import { useAuth } from './Author';
 
 const ArticleContext = createContext<ArticleContextModel | undefined>(undefined);
 
 export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [articles, setArticles] = useState<ArticleModel[]>([]);
+  const [articles, setArticles] = useState<ArticlesModel>(createArticlesModelObject());
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
-  const { token } = useAuth();
+  const { token, currentUser } = useAuth();
 
   /** 🔹 Author IDs must be strings for API, so we normalize here */
-  const normalizeArticleForApi = (article: Partial<ArticleModel>) => ({
-    ...article,
-    authors: (article.authors ?? []).map(a =>
-      a._id
-    ),
-  });
+  const normalizeArticleForApi = (article: Partial<ArticleModel>) => {
+    // Extract existing authors as a list of IDs (string[])
+    const existingIds = (article.authors ?? []).map(a =>
+      typeof a === "string" ? a : a._id
+    );
+
+    // Inject currentUser if missing
+    const allAuthorIds = currentUser?._id
+      ? Array.from(new Set([...existingIds, currentUser._id])) // dedupe
+      : existingIds;
+
+    return {
+      ...article,
+      authors: allAuthorIds,
+    };
+  };
 
   /** 🔹 Fetch articles (JWT automatically attached by api.ts interceptor) */
   const fetchArticles = async () => {
@@ -28,7 +42,7 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
 
       const res = await api.get<ArticleModel[]>('/articles', { params: { skip: 0, limit: 100 } });
       const formatted = res.data.map((a) => ({ ...a, id: a._id || undefined }));
-      setArticles(formatted);
+      setArticles(prev => prev.refresh(formatted));
     } catch (err: any) {
       console.error('Failed to fetch articles:', err);
       setError(err.response?.data?.detail || 'Failed to fetch articles');
@@ -43,6 +57,10 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
       console.error('updateArticle called without _id');
       return;
     }
+    if (!currentUser) {
+      console.error('updateArticle called without logged in user');
+      return;
+    }
 
     const normalizedArticleData = normalizeArticleForApi(articleData);
     try {
@@ -50,6 +68,10 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
       setError(null);
 
       const res = await api.put<ArticleModel>(`/articles/${articleData._id}`, normalizedArticleData);
+      setArticles(prev => {
+        prev.update(res.data);
+        return { ...prev };
+      });
       return res.data;
     } catch (err: any) {
       console.error('Article update failed:', err);
@@ -72,6 +94,10 @@ export const ArticleProvider: React.FC<{ children: React.ReactNode }> = ({ child
       setError(null);
 
       const res = await api.post<ArticleModel>(`/articles`, normalizedArticleData);
+      setArticles(prev => {
+        prev.create(res.data);
+        return { ...prev };
+      });
       return res.data;
     } catch (err: any) {
       console.error('Article create failed:', err);

src/blog/types/contexts.ts

@@ -1,12 +1,16 @@
-import { ArticleModel, AuthorModel } from "./models";
+import {
+  ArticleModel,
+  ArticlesModel,
+  AuthorModel
+} from "./models";
 
 export interface ArticleContextModel {
-  articles: ArticleModel[];
+  articles: ArticlesModel;
   loading: boolean;
   error: string | null;
   refreshArticles: () => Promise<void>;
-  updateArticle: (user: ArticleModel) => Promise<ArticleModel | void>;
-  createArticle: (user: ArticleModel) => Promise<ArticleModel | void>;
+  updateArticle: (article: ArticleModel) => Promise<ArticleModel | void>;
+  createArticle: (article: ArticleModel) => Promise<ArticleModel | void>;
 }
 
 export interface AuthContextModel {

src/blog/types/models.ts

@@ -1,3 +1,9 @@
+import {
+  createInList, readInList, updateInList, deleteInList,
+  createById, readById, updateById, deleteById
+} from "../utils/articles";
+
+
 export interface AuthorModel {
   // meta fields
   _id?: string | null;
@@ -28,3 +34,82 @@ export interface ArticleModel {
   // ref fields
   authors: AuthorModel[];
 }
+
+export interface ArticlesModel {
+  articlesList: ArticleModel[];
+  articlesById: Record<string, ArticleModel>;
+  // articlesByTag: Record<string, ArticleModel[]>;
+  // articlesByAuthor: Record<string, ArticleModel[]>;
+
+  length: number;
+  slice(start: number, end?: number): ArticleModel[];
+
+  refresh(list: ArticleModel[]): ArticlesModel;
+  create(a: ArticleModel): ArticlesModel;
+  readByIndex(index: number): ArticleModel | undefined;
+  readById(id: string): ArticleModel | undefined;
+  update(a: ArticleModel): ArticlesModel;
+  delete(id: string): ArticlesModel;
+}
+
+// ---------- FACTORY ----------
+export function createArticlesModelObject(
+  articles: ArticleModel[] = []
+): ArticlesModel {
+  const initialMap: Record<string, ArticleModel> = {};
+  for (const a of articles) {
+    if (a._id) initialMap[a._id] = a;
+  }
+
+  return {
+    articlesList: articles,
+    articlesById: initialMap,
+
+    // --- computed property ---
+    get length() {
+      return this.articlesList.length;
+    },
+
+    // --- array-like slice ---
+    slice(start: number, end?: number) {
+      return this.articlesList.slice(start, end);
+    },
+
+    refresh(list) {
+      this.articlesList = list;
+
+      const map: Record<string, ArticleModel> = {};
+      for (const a of list) {
+        if (a._id) map[a._id] = a;
+      }
+      this.articlesById = map;
+      return this;
+    },
+
+    create(a) {
+      this.articlesList = createInList(this.articlesList, a);
+      this.articlesById = createById(this.articlesById, a);
+      return this;
+    },
+
+    readByIndex(index) {
+      return readInList(this.articlesList, index);
+    },
+
+    readById(id) {
+      return readById(this.articlesById, id);
+    },
+
+    update(a) {
+      this.articlesList = updateInList(this.articlesList, a);
+      this.articlesById = updateById(this.articlesById, a);
+      return this;
+    },
+
+    delete(id) {
+      this.articlesList = deleteInList(this.articlesList, id);
+      this.articlesById = deleteById(this.articlesById, id);
+      return this;
+    }
+  };
+}

src/blog/types/props.ts

@@ -1,19 +1,40 @@
-import { ArticleModel } from "./models";
+import {
+  ArticleModel,
+  ArticlesModel,
+} from "./models";
 
 export interface LatestProps {
-  articles: ArticleModel[];
+  articles: ArticlesModel;
   onSelectArticle?: (index: number) => void;
   onLoadMore?: (offset: number, limit: number) => Promise<void>; // optional async callback
 }
 
-export interface ArticleProps {
+export interface LoginProps {
+  onBack: () => void;
+  onRegister: () => void;
+}
+
+export interface MainContentProps {
+  articles: ArticlesModel;
+  onSelectArticle: (index: ArticleModel) => void;
+}
+
+export interface ProfileProps {
+  onBack: () => void;
+}
+
+export interface RegisterProps {
+  onBack: () => void;
+}
+
+export interface ArticleViewProps {
   article: ArticleModel;
   onBack: () => void;
   onEdit: () => void;
 }
 
 export interface ArticleEditorProps {
-  article?: ArticleModel;
+  article?: ArticleModel | null;
   onBack: () => void;
 }
 
@@ -25,15 +46,16 @@ export interface ArticleCardProps {
   article: ArticleModel;
   index: number;
   focusedCardIndex: number | null;
-  onSelectArticle: (index: number) => void;
+  onSelectArticle: (index: ArticleModel) => void;
   onFocus: (index: number) => void;
   onBlur: () => void;
 }
 
 export interface ArticleGridProps {
-  articles: ArticleModel[];
-  onSelectArticle: (index: number) => void;
+  articles: ArticlesModel;
+  onSelectArticle: (index: ArticleModel) => void;
   xs?: number;  // default 12 for mobile full-width
+  md12?: number, // default 12 (full-width)
   md6?: number; // default 6 (half-width)
   md4?: number; // default 4 (third-width)
   nested?: 1 | 2; // number of stacked cards in a nested column

src/blog/types/styles.ts

@@ -37,4 +37,41 @@ export const StyledTypography = styled(Typography)({
   WebkitLineClamp: 2,
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-});
+});
+
+export const TitleTypography = styled(Typography)(({ theme }) => ({
+  position: 'relative',
+  textDecoration: 'none',
+  '&:hover': { cursor: 'pointer' },
+  '& .arrow': {
+    visibility: 'hidden',
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
+  '&:hover .arrow': {
+    visibility: 'visible',
+    opacity: 0.7,
+  },
+  '&:focus-visible': {
+    outline: '3px solid',
+    outlineColor: 'hsla(210, 98%, 48%, 0.5)',
+    outlineOffset: '3px',
+    borderRadius: '8px',
+  },
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    width: 0,
+    height: '1px',
+    bottom: 0,
+    left: 0,
+    backgroundColor: (theme.vars || theme).palette.text.primary,
+    opacity: 0.3,
+    transition: 'width 0.3s ease, opacity 0.3s ease',
+  },
+  '&:hover::before': {
+    width: '100%',
+  },
+}));

src/blog/types/views.ts

@@ -0,0 +1,113 @@
+import {ArticleModel} from "./models";
+
+export type View =
+  | "home"
+  | "login"
+  | "register"
+  | "article"
+  | "editor"
+  | "profile"
+  | "create";
+
+export type ViewNode = {
+  parent: View | null;
+  children?: View[];
+};
+
+export const VIEW_TREE: Record<View, ViewNode> = {
+  home: {
+    parent: null,
+    children: ["login", "article", "profile", "create"],
+  },
+  login: {
+    parent: "home",
+    children: ["register"],
+  },
+  register: {
+    parent: "login",
+  },
+  article: {
+    parent: "home",
+    children: ["editor"],
+  },
+  editor: {
+    parent: "article",
+  },
+  profile: {
+    parent: "home",
+  },
+  create: {
+    parent: "home",
+  },
+};
+
+export const VIEW_URL: Record<View, (ui?: any) => string> = {
+  home: () => "/",
+  login: () => "/login",
+  register: () => "/register",
+  profile: () => "/profile",
+  create: () => "/create",
+  article: (ui) => `/articles/${ui.selectedArticle._id ?? ""}`,
+  editor: (ui) => `/articles/${ui.selectedArticle._id ?? ""}/edit`,
+};
+
+export function useViewRouter(setUI: any) {
+  const navigate = (
+    view: View,
+    nextState?: any
+  ) => {
+    setUI((prev: any) => {
+      const newState = { ...prev, ...nextState, view };
+
+      // update URL
+      const url = VIEW_URL[view](newState);
+      window.history.pushState(newState, "", url);
+
+      return newState;
+    });
+
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  // auto back logic from parent
+  const goBack = (view: View) => {
+    const parent = VIEW_TREE[view].parent;
+    if (parent) navigate(parent);
+  };
+
+  const openArticle = (article: ArticleModel) => {
+    setUI((prev: any) => {
+      const newState = {
+        ...prev,
+        selectedArticle: article,
+        view: "article",
+      };
+
+      const url = `/articles/${article._id}`;
+      window.history.pushState(newState, "", url);
+
+      return newState;
+    });
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  // auto child navigators from children[]
+  const navigateToChildren = (
+    view: View,
+    navigationMap?: Record<string, string>,
+  ) => {
+    const node = VIEW_TREE[view];
+    const funcs: Record<string, () => void> = {};
+
+    node.children?.forEach((child) => {
+      const funcName = `open_${child}`;
+      const customFuncName = navigationMap?.[funcName];
+      funcs[funcName] = () => navigate(child);
+      if (customFuncName) funcs[customFuncName] = () => navigate(child);
+    });
+
+    return funcs;
+  };
+
+  return { navigate, goBack, openArticle, navigateToChildren };
+}

src/blog/utils/articles.ts

@@ -0,0 +1,74 @@
+import {
+  ArticleModel,
+} from "../types/models";
+
+export function createInList(list: ArticleModel[], a: ArticleModel) {
+  return [...list, a];
+}
+
+export function readInList(list: ArticleModel[], index: number) {
+  if (index < 0 || index >= list.length) {
+    // Soft fallback
+    return undefined;
+  }
+  return list[index];
+}
+
+export function updateInList(list: ArticleModel[], a: ArticleModel) {
+  return list.map(x => (x._id === a._id ? a : x));
+}
+
+export function deleteInList(list: ArticleModel[], id: string) {
+  return list.filter(x => x._id !== id);
+}
+
+// Map helpers
+export function createById(
+  map: Record<string, ArticleModel>,
+  a: ArticleModel
+) {
+  if (!a._id) {
+    // Soft mode: ignore create, return unchanged
+    return map;
+  }
+
+  if (map[a._id]) {
+    // Soft mode: do not replace existing
+    return map;
+  }
+
+  return { ...map, [a._id]: a };
+}
+
+export function readById(
+  map: Record<string, ArticleModel>,
+  id: string
+) {
+  if (!id) return undefined;
+  return map[id];
+}
+
+export function updateById(
+  map: Record<string, ArticleModel>,
+  a: ArticleModel
+) {
+  if (!a._id) {
+    // Cannot update without ID
+    return map;
+  }
+
+  if (!map[a._id]) {
+    // ID does not exist → soft mode: do nothing
+    return map;
+  }
+
+  return { ...map, [a._id]: a };
+}
+
+export function deleteById(
+  map: Record<string, ArticleModel>,
+  id: string
+) {
+  const { [id]: _, ...rest } = map;
+  return rest;
+}

src/main.jsx

@@ -9,13 +9,11 @@ const rootElement = document.getElementById('root');
 const root = createRoot(rootElement);
 
 root.render(
-  <React.StrictMode>
-    <UploadProvider>
-      <AuthProvider>
-        <ArticleProvider>
-          <Blog />
-        </ArticleProvider>
-      </AuthProvider>
-    </UploadProvider>
-  </React.StrictMode>,
+  <UploadProvider>
+    <AuthProvider>
+      <ArticleProvider>
+        <Blog />
+      </ArticleProvider>
+    </AuthProvider>
+  </UploadProvider>,
 );