2 | 
3 |
4 | 5 |
Features
](#features)** 8 | **[
Installation
](#installation)** 9 | **[
License
][License]** 10 | 11 | [License]: "https://github.com/ImRayy/nothing-ui-new-tab/blob/main/LICENSE" 12 |
13 |
14 | ## Screenshots
15 | ||
16 | |--|
17 |
18 | ||||
19 | |---|---|---|
20 |
21 | ||||
22 | |---|---|---|
23 |
24 | ## Features
25 |
26 | - Create, Update & Remove app
27 | - Dynamic app icon upon adding
28 | - Custom icon from [iconify](https://icon-sets.iconify.design/)
29 | - Custom images for gallery widget, and custom bg image
30 | - Toggle monochrome(grayscale) image on gallery widget, and background
31 | - Toggle blur effect background image
32 | - Toggle dock, app drawer, ai-tools, greeter
33 | - Toggle between digital & analogue clock
34 | - Weather ofc, necessary
35 | - Custom greeting text
36 | - Add search engines, set icon
37 | - Set shortcut for search engine to quick switching
38 | - Search suggestions
39 |
40 | **Planned Features**
41 | - [ ] Random image from unsplash or something
42 | - [ ] Different color-schems
43 | - [ ] Glass widgets
44 | - [ ] Popup to add websites directly to app drawer, dock
45 |
46 | ...more unplanned features
47 |
48 | ## Installation
49 |
50 | **Requirements**
51 |
52 | - `bun`
53 | - `podman` or `docker` *(optional)*
54 |
55 | **Build**
56 |
57 | 1. `git clone https://github.com/ImRayy/nothing-ui-newtab`
58 | 2. `cd nothing-ui-newtab`
59 | 3. `bun install`
60 | 4. `bun run build`
61 |
62 | **NOTE:** You can build [docker/podman image as well](#step-1)
63 |
64 | ## Usage
65 |
66 | #### Firefox extension
67 |
68 | There are multiple ways to use this as a Firefox extension. The first and easiest method is to host this website on a hosting provider and use [New Tab Override](https://addons.mozilla.org/en-US/firefox/addon/new-tab-override) to set it as your new tab page. My preferred method is to use this as docker/podman image and start with systemd or add it to init script or something to start when system boots automatically
69 |
70 | > [!TIP]
71 | > When using New Tab Override extension make sure you check `Set focus to the web page instead of the address bar` option
72 |
73 | ##### Clone & Build
74 |
75 | ```sh
76 | git clone https://github.com/ImRayy/nothing-ui-newtab
77 | cd nothing-ui-newtab
78 |
79 | ## Podman
80 | podman build -t nothing-ui-newtab .
81 |
82 | ## Docker
83 | docker build -t nothing-ui-newtab .
84 | ```
85 | ---
86 |
87 | ##### Run
88 |
89 | ```bash
90 | ## Podman
91 | podman run -d -p
3 | 4 | 5 |
Nothing UI New Tab is an elegant and feature-rich start page for your browser, heavily inspired by Material You NewTab. Designed with customization and user experience in mind, it transforms your new tab page into a personalized dashboard that caters to your needs and preferences.
6 | 7 | **[Features
](#features)** 8 | **[
Installation
](#installation)** 9 | **[
License
][License]** 10 | 11 | [License]: "https://github.com/ImRayy/nothing-ui-new-tab/blob/main/LICENSE" 12 |
43 |
46 | {isDockEnabled &&
50 |
51 |
52 | )
53 | }
54 |
55 | // WARN: Temporary migration function for adding IDs to existing app list
56 | // Such as app drawer, ai tools & dock apps
57 | // Reason: Database migration to include unique identifiers
58 | // Remove this function after some period of time
59 | async function migrateAppListToAddIds() {
60 | const storeName = "app-store"
61 |
62 | const allIdExists = (list: AppType[]) => {
63 | return list.findIndex(({ id }) => id) === 0
64 | }
65 |
66 | const addIds = (list: AppType[]) => {
67 | return list.map((app) => {
68 | if (!app.id) {
69 | return { ...app, id: nanoid() }
70 | }
71 | return app
72 | })
73 | }
74 |
75 | let apps = await idbKeyval.get(storeName)
76 |
77 | if (!apps && typeof apps === "undefined") {
78 | return
79 | }
80 |
81 | apps = JSON.parse(apps)
82 |
83 | const dockApps: AppType[] = apps.state.dockApps
84 | const drawerApps = apps.state.drawerApps
85 | const aiTools = apps.state.aiTools
86 |
87 | if (
88 | allIdExists(dockApps) &&
89 | allIdExists(drawerApps) &&
90 | allIdExists(aiTools)
91 | ) {
92 | return
93 | }
94 |
95 | const updatedList = {
96 | ...apps,
97 | state: {
98 | ...apps.state,
99 | aiTools: addIds(aiTools),
100 | drawerApps: addIds(drawerApps),
101 | dockApps: addIds(dockApps),
102 | },
103 | }
104 |
105 | await idbKeyval.set(storeName, JSON.stringify(updatedList))
106 | }
107 |
--------------------------------------------------------------------------------
/src/components/background-image.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx"
2 | import { useMemo } from "react"
3 | import { useImageStore } from "~/store/image-store"
4 | import { useOptionsStore } from "~/store/options"
5 |
6 | const BackgroundImage = () => {
7 | const images = useImageStore((s) => s.images)
8 | const { bgImageId, isMonochromeBg, isBgBlur, isBgImage } = useOptionsStore()
9 |
10 | const backgroundImage = useMemo(() => {
11 | return images.find(({ id }) => id === bgImageId)?.imageUrl
12 | }, [images, bgImageId])
13 |
14 | if (
15 | !isBgImage ||
16 | bgImageId === null ||
17 | images.length === 0 ||
18 | !backgroundImage
19 | ) {
20 | return null
21 | }
22 |
23 | return (
24 | <>
25 |
26 | 
33 |
34 |
40 |
41 | )
42 | }
43 |
44 | export default BackgroundImage
45 |
--------------------------------------------------------------------------------
/src/components/motion-primitives/dock.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import {
4 | AnimatePresence,
5 | type MotionValue,
6 | type SpringOptions,
7 | motion,
8 | useMotionValue,
9 | useSpring,
10 | useTransform,
11 | } from "framer-motion"
12 | import {
13 | Children,
14 | cloneElement,
15 | createContext,
16 | useContext,
17 | useEffect,
18 | useMemo,
19 | useRef,
20 | useState,
21 | } from "react"
22 | import { cn } from "~/utils"
23 |
24 | const DOCK_HEIGHT = 20
25 | const DEFAULT_MAGNIFICATION = 76
26 | const DEFAULT_DISTANCE = 140
27 | const DEFAULT_PANEL_HEIGHT = 64
28 | const DEFAULT_ICON_SIZE = 44
29 |
30 | export type DockProps = {
31 | children: React.ReactNode
32 | className?: string
33 | distance?: number
34 | panelHeight?: number
35 | magnification?: number
36 | spring?: SpringOptions
37 | }
38 |
39 | export type DockItemProps = {
40 | className?: string
41 | onClick: () => void
42 | children: React.ReactNode
43 | }
44 |
45 | export type DockLabelProps = {
46 | className?: string
47 | children: React.ReactNode
48 | }
49 |
50 | export type DockIconProps = {
51 | className?: string
52 | children: React.ReactNode
53 | }
54 |
55 | export type DocContextType = {
56 | mouseX: MotionValue
57 | spring: SpringOptions
58 | magnification: number
59 | distance: number
60 | }
61 |
62 | export type DockProviderProps = {
63 | children: React.ReactNode
64 | value: DocContextType
65 | }
66 |
67 | const DockContext = createContext
14 |
15 | Settings
16 |
17 |
21 |
18 |
20 |
114 |
144 |
120 |
121 |
122 | {tableData.map((d, index) => (
123 |
155 |
156 | | 130 | {d.field} 131 | | 132 |
138 | |
151 |
157 |
164 |
171 |
172 |
23 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/sidebar/sidebar-options/data-backup-options/type.ts:
--------------------------------------------------------------------------------
1 | import type { ImageFile } from "~/types"
2 |
3 | export type Base64ImageFile = Omit
24 |
27 |
28 |
48 |
51 |
57 |
60 |
61 | }
62 | />
63 |
64 | {newApp && (
65 |
76 |
90 | )
91 | }
92 |
93 | export default DockOptions
94 |
--------------------------------------------------------------------------------
/src/components/sidebar/sidebar-options/gallery-options/gallery-tab.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from "@iconify/react"
2 | import clsx from "clsx"
3 | import Compressor from "compressorjs"
4 | import { motion } from "framer-motion"
5 | import { del } from "idb-keyval"
6 | import { useEffect, useRef, useState } from "react"
7 | import Button from "~/components/ui/button"
8 | import Input from "~/components/ui/input"
9 | import Modal from "~/components/ui/modal"
10 | import { useImageStore } from "~/store/image-store"
11 | import { useOptionsStore } from "~/store/options"
12 | import type { ImageFile } from "~/types"
13 | import NewTabHeader from "../shared/newtab-header"
14 |
15 | type ImageSize = {
16 | id: string
17 | width: number
18 | height: number
19 | size: number
20 | }
21 |
22 | const GalleryTab = () => {
23 | const {
24 | images,
25 | addImages,
26 | removeImage,
27 | shouldSave,
28 | saveImagesToDB,
29 | setImages,
30 | } = useImageStore()
31 |
32 | const { isBgImage, bgImageId, setBgImageId, setCurrentImageIndex } =
33 | useOptionsStore()
34 |
35 | const inputRef = useRef
66 |
74 | )}
75 |
68 |
69 |
72 |
73 |
77 | {dockApps.map((app) => (
78 |
79 |
87 | ))}
88 |
89 |
148 |
151 |
160 |
172 |
180 |
181 | }
182 | />
183 |
184 | {images?.length > 0 ? (
185 |
243 |
278 |
279 | )
280 | }
281 |
282 | export default GalleryTab
283 |
--------------------------------------------------------------------------------
/src/components/sidebar/sidebar-options/gallery-options/index.tsx:
--------------------------------------------------------------------------------
1 | import { useOptionsStore } from "~/store/options"
2 | import OptionsGroup from "../shared/options-group"
3 | import TabSwitchButton from "../shared/tab-switch-button"
4 | import ToggleOption from "../shared/toggle-option"
5 | import IntervalInput from "./interval-input"
6 |
7 | const GalleryOptions = () => {
8 | const {
9 | isBgImage,
10 | toggleBgImage,
11 | isMonochromeWidgetImg,
12 | toggleMonochromeWidgetImg,
13 | isMonochromeBg,
14 | toggleMonochromeBg,
15 | isBgBlur,
16 | toggleBgBlur,
17 | } = useOptionsStore()
18 |
19 | return (
20 |
186 | {images?.map((img) => (
187 | isBgImage && setBgImageId(img.id)}
192 | style={bgImageId === img.id ? { padding: "10px" } : {}}
193 | >
194 | {bgImageId === img.id && (
195 | 
206 |
220 |
221 | ))}
222 |
223 | ) : (
224 |
225 |
228 | )}
229 |
237 |
244 |
277 |
245 |
261 |
246 | {images.map(({ id, imageUrl, name }) => (
247 | 
img.id === id)
254 | ? "border-destructive"
255 | : "border-transparent",
256 | ])}
257 | />
258 | ))}
259 |
260 |
262 |
272 |
275 |
276 |
18 | Gallery image switch interval
19 |
36 | )
37 | }
38 |
39 | export default IntervalInput
40 |
--------------------------------------------------------------------------------
/src/components/sidebar/sidebar-options/general-options.tsx:
--------------------------------------------------------------------------------
1 | import { useThemeStore } from "~/store/theme"
2 | import OptionsGroup from "./shared/options-group"
3 | import TabSwitchButton from "./shared/tab-switch-button"
4 | import ToggleOption from "./shared/toggle-option"
5 |
6 | const GeneralOptions = () => {
7 | const { isLightMode, toggleLightMode } = useThemeStore()
8 | return (
9 | 20 | It will be saved automatically upon input, and the time is measured in 21 | seconds 22 |
23 | setValue(Number.parseInt(e.currentTarget.value))} 33 | placeholder="Gallary image switch interval" 34 | /> 35 |
21 |
22 | {props.icon.startsWith("webicon:") ? (
23 | ![app-icon]({`https://www.google.com/s2/favicons?domain=${props.icon.split(":")[1]}&sz=128`})
27 | ) : (
28 |
43 | )
44 | }
45 |
46 | interface AppCardFooterProps {
47 | open: boolean
48 | setOpen: Setter
32 | {props.children}
33 |
34 |
42 |
13 |
16 |
18 | )
19 | }
20 |
21 | export default NewTabHeader
22 |
--------------------------------------------------------------------------------
/src/components/sidebar/sidebar-options/shared/options-group.tsx:
--------------------------------------------------------------------------------
1 | interface OptionsGroupProps {
2 | title: string
3 | children: React.ReactNode
4 | }
5 |
6 | const OptionsGroup = ({ title, children }: OptionsGroupProps) => {
7 | return (
8 | {rightButtons}
17 |
9 | {title}
10 | {children}
11 |
12 | )
13 | }
14 |
15 | export default OptionsGroup
16 |
--------------------------------------------------------------------------------
/src/components/sidebar/sidebar-options/shared/tab-switch-button.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from "@iconify/react"
2 | import clsx from "clsx"
3 | import { type Tab, useSidebarOptions } from "../../sidebar-store"
4 |
5 | interface TabSwitchProps {
6 | title: string
7 | desc: string
8 | icon: string
9 | tabToSwitch: Tab
10 | disabled?: boolean
11 | }
12 |
13 | const TabSwitchButton = ({
14 | title,
15 | desc,
16 | icon,
17 | tabToSwitch,
18 | disabled,
19 | }: TabSwitchProps) => {
20 | const setTab = useSidebarOptions((s) => s.setTab)
21 |
22 | return (
23 |
53 | )
54 | }
55 |
56 | export default TabSwitchButton
57 |
--------------------------------------------------------------------------------
/src/components/sidebar/sidebar-options/shared/toggle-option.tsx:
--------------------------------------------------------------------------------
1 | import clsx from "clsx"
2 | import Switch from "~/components/switch"
3 |
4 | interface ToggleOptionProps {
5 | label: string
6 | desc?: string
7 | enabled: boolean
8 | onChange: (state: boolean) => void
9 | disabled?: boolean
10 | }
11 |
12 | const ToggleOption = ({
13 | label,
14 | desc,
15 | enabled,
16 | onChange,
17 | disabled = false,
18 | }: ToggleOptionProps) => {
19 | return (
20 |
21 |
32 | )
33 | }
34 |
35 | export default ToggleOption
36 |
--------------------------------------------------------------------------------
/src/components/sidebar/sidebar-options/tabs/ai-tools/index.tsx:
--------------------------------------------------------------------------------
1 | import { Icon, disableCache, enableCache } from "@iconify/react/dist/iconify.js"
2 | import { motion } from "framer-motion"
3 | import { nanoid } from "nanoid"
4 | import { useEffect, useState } from "react"
5 | import Button from "~/components/ui/button"
6 | import type { App } from "~/lib/variables"
7 | import { useAppStore } from "~/store/app-store"
8 | import { extractUniqueValues } from "~/utils"
9 | import AppCard from "../../shared/app-card"
10 | import NewTabHeader from "../../shared/newtab-header"
11 |
12 | const AIToolsTab = () => {
13 | const {
14 | aiTools,
15 | addAITool: add,
16 | resetAITools: reset,
17 | updateAITool,
18 | removeAITool,
19 | } = useAppStore()
20 | const [newAITool, setNewAITool] = useState
27 | {label}
28 | {desc}
29 |
30 |
46 |
49 |
55 |
58 |
59 | }
60 | />
61 |
88 | )
89 | }
90 |
91 | export default AIToolsTab
92 |
--------------------------------------------------------------------------------
/src/components/sidebar/sidebar-options/tabs/search-engines/index.tsx:
--------------------------------------------------------------------------------
1 | import { Icon, disableCache, enableCache } from "@iconify/react/dist/iconify.js"
2 | import { motion } from "framer-motion"
3 | import { useEffect, useState } from "react"
4 | import Button from "~/components/ui/button"
5 | import { type SearchEngine, useSearchEngineStore } from "~/store/search-engine"
6 | import { extractUniqueValues } from "~/utils"
7 | import NewTabHeader from "../../shared/newtab-header"
8 | import SearchEngineCard from "./search-engine-card"
9 |
10 | const SearchEnginesTab = () => {
11 | const { searchEngines, add, reset, update, remove } = useSearchEngineStore()
12 | const [newEngine, setNewEngine] = useState
62 |
63 | {newAITool && (
64 |
75 | {aiTools.map((tool) => (
76 |
77 |
85 | ))}
86 |
87 |
65 |
73 | )}
74 |
67 |
68 |
71 |
72 |
48 |
51 |
57 |
60 |
61 | }
62 | />
63 |
64 | {newEngine && (
65 |
90 |
113 | )
114 | }
115 |
116 | export default SearchEnginesTab
117 |
--------------------------------------------------------------------------------
/src/components/sidebar/sidebar-options/tabs/search-engines/search-engine-card.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react"
2 | import { toast } from "sonner"
3 | import Input from "~/components/ui/input"
4 | import type { SearchEngine } from "~/store/search-engine"
5 | import type { Setter } from "~/types/react"
6 | import { AppCardContainer, AppCardFooter } from "../../shared/app-card"
7 |
8 | interface SearchEngineCardProps {
9 | index: number
10 | engine: SearchEngine
11 | setEngine?: Setter
66 |
88 | )}
89 |
72 |
78 |
86 |
87 |
91 | {searchEngines.map((engine, index) => (
92 |
93 |
110 | ))}
111 |
112 |
64 |
70 | setEngine((prev) => ({ ...prev, name: value }))
71 | }
72 | onFocus={() => setIsFocused(true)}
73 | isError={props.engineNames?.includes(engine.name)}
74 | className="text-foreground"
75 | />
76 |
82 | setEngine((prev) => ({ ...prev, short: value.trim() }))
83 | }
84 | onFocus={() => setIsFocused(true)}
85 | isError={props.engineShortcuts?.includes(engine.short)}
86 | className="text-foreground"
87 | />
88 |
89 |
95 | setEngine((prev) => ({ ...prev, baseUrl: value }))
96 | }
97 | onFocus={() => setIsFocused(true)}
98 | className="text-foreground"
99 | />
100 |
37 | setLocation(e.currentTarget.value)}
42 | />
43 |
52 |
53 |
54 | setApi(e.currentTarget.value)}
60 | />
61 |
79 |
62 |
66 | Learn More
67 |
68 |
77 |
78 |
35 |
38 |
41 |
42 |
15 | {icon && !icon.startsWith("webicon:") ? (
16 | ![icon-image]({googleFavIcon(icon.split(":")[1])})
24 | )}
25 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import { Slot } from "@radix-ui/react-slot"
2 | import { type VariantProps, cva } from "class-variance-authority"
3 | import React from "react"
4 | import { cn } from "../../utils"
5 |
6 | const buttonVariants = cva(
7 | "button active:scale-95 flex items-center justify-center rounded-xl transition-colors duration-300 gap-1 disabled:opacity-60 disabled:pointer-events-none",
8 | {
9 | variants: {
10 | variant: {
11 | primary: "bg-card text-card-foreground hover:bg-card-hover",
12 | secondary: "bg-background text-foreground hover:bg-card-foreground/10",
13 | accent: "bg-foreground text-background",
14 | destructive:
15 | "bg-destructive text-destructive-foreground hover:bg-destructive/80",
16 | },
17 | size: {
18 | default: "px-4 h-10",
19 | icon: "size-11 rounded-full",
20 | },
21 | },
22 | defaultVariants: {
23 | variant: "primary",
24 | size: "default",
25 | },
26 | },
27 | )
28 |
29 | export interface ButtonProps
30 | extends React.ButtonHTMLAttributes
18 | setChecked(e.target.checked)}
24 | />
25 |
26 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from "@iconify/react"
2 | import { type VariantProps, cva } from "class-variance-authority"
3 | import React, { useState } from "react"
4 | import { cn } from "../../utils"
5 | import Button from "./button"
6 |
7 | const input = cva(
8 | "w-full py-2 border-2 focus:border-transparent border-transparent rounded-xl px-4 focus:outline-none focus:ring-2 disabled:opacity-40 text-sm",
9 | {
10 | variants: {
11 | variant: {
12 | default:
13 | "bg-background text-foreground focus:ring-foreground placeholder:text-foreground placeholder:opacity-60",
14 | secondary: "bg-card text-card-foreground focus:ring-foreground",
15 | },
16 | outline: {
17 | ghost: "focus:ring-0",
18 | },
19 | },
20 | defaultVariants: {
21 | variant: "default",
22 | },
23 | },
24 | )
25 |
26 | interface InputProps
27 | extends React.InputHTMLAttributes
53 | {label && (
54 |
57 | )}
58 |
89 | )
90 | },
91 | )
92 |
93 | Input.displayName = "Input"
94 |
95 | export default Input
96 |
--------------------------------------------------------------------------------
/src/components/ui/menu.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from "@iconify/react/dist/iconify.js"
2 | import * as ContextMenu from "@radix-ui/react-context-menu"
3 | import Button from "./button"
4 |
5 | interface MenuProps {
6 | title?: string
7 | menuTrigger: React.ReactNode
8 | data: {
9 | icon: string
10 | label: string
11 | func: () => void
12 | disabled?: boolean
13 | hidden?: boolean
14 | }[]
15 | }
16 |
17 | const Menu = ({ menuTrigger, title, data }: MenuProps) => {
18 | return (
19 |
59 |
71 | {type === "password" && (
72 |
83 | )}
84 |
85 | {isError && errorTxt && (
86 | {errorTxt}
87 | )}
88 |
24 |
25 |
32 |
33 |
34 | {showTools && (
35 | <>
36 |
57 |
60 | )
61 | })}
62 |
63 | )}
64 |
65 |
66 |
67 | )
68 | }
69 |
70 | export default AiTools
71 |
--------------------------------------------------------------------------------
/src/components/widgets/app-drawer/app-form.tsx:
--------------------------------------------------------------------------------
1 | import { Icon, disableCache, enableCache } from "@iconify/react"
2 | import clsx from "clsx"
3 | import { motion } from "framer-motion"
4 | import { nanoid } from "nanoid"
5 | import { useCallback, useEffect, useRef, useState } from "react"
6 | import { useDebounceValue } from "usehooks-ts"
7 | import Button from "~/components/ui/button"
8 | import Input from "~/components/ui/input"
9 | import Modal from "~/components/ui/modal"
10 | import type { App } from "~/lib/variables"
11 | import { useAppStore } from "~/store/app-store"
12 | import type { Setter } from "~/types/react"
13 | import { getDomain, googleFavIcon } from "~/utils"
14 |
15 | const IconPreview = ({
16 | url,
17 | icon,
18 | btnFunc,
19 | }: {
20 | url: string
21 | icon: string
22 | btnFunc: () => void
23 | }) => {
24 | const [debouncedUrl] = useDebounceValue(url, 300)
25 | const [debouncedIcon] = useDebounceValue(icon, 300)
26 |
27 | useEffect(() => {
28 | disableCache("all")
29 | return () => enableCache("local")
30 | }, [])
31 |
32 | return (
33 |
152 | {(url || icon) && (
153 |
168 |
175 | setIcon(e.currentTarget.value)}
179 | placeholder="e.g. solar:gallery-bold"
180 | className="mb-2 h-11"
181 | />
182 |
183 | )}
184 |
185 | setName(e.currentTarget.value)}
189 | placeholder="e.g. Wallhaven"
190 | className="h-11"
191 | />
192 | setUrl(e.currentTarget.value)}
196 | placeholder="e.g. https://wallhaven.cc"
197 | className="h-11"
198 | />
199 |
200 |
201 |
202 |
154 | setIsIconInput((prev) => !prev)}
158 | />
159 |
160 | )}
161 |
162 | {formTitle}
169 | {isIconInput && (
170 |