so my folder structure looks like this:

app/
├─ items/
│  ├─ @modal/
│  │  ├─ (.)[id]/
│  │  │  ├─ page.tsx
│  ├─ [id]/
│  │  ├─ page.tsx
│  ├─ layout.tsx
│  ├─ page.tsx

I want to have a route /items that will show a list of items, when the user clicks on one item, he will be redirected to /items/[id], but I want to intercept this route so if the user clicks an item when he's on /items I just want it to appear as a modal.
But when the user links this item to someone (example: /items/apple) I want it to appear as a full page (not modal).

And I'm not sure how to make this work. Because with current file structure (show above), when I use the modal in layout.tsx it doesn't work, I just get a 404 error.